Maplat Core에서 기본지도 추가
오늘 움직이는 것은 여기에서 확인할 수 있습니다. => CodeSandBox Maplat Advent Calendar day 14
오늘의 프로그램은 5일째 프로그램 을 베이스로 개조되고 있습니다만,
이번에는 설정이 이렇게 변경되었습니다.
추가한 것은 지리원 지도의 오르소 항공 사진입니다.
maplat_ac_day14.json
{
"home_position": [139.5321, 36.249302],
"default_zoom": 17,
"start_from": "tatebayashi_ojozu",
"sources": [
{
"mapID": "tatebayashi_ojozu",
"setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_ojozu.json"
},
{
"mapID": "tatebayashi_castle_akimoto",
"setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_castle_akimoto.json"
},
"osm",
"gsi",
{
"mapID": "ort",
"maptype": "base",
"url": "https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg",
"maxZoom": 18
}
]
}
추가된 것은 이 부분입니다.
maplat_ac_day14.json (추가 분 발췌)
{
"mapID": "ort",
"maptype": "base",
"url": "https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg",
"maxZoom": 18
}
이것은 TMS 또는 WMTS 형식의 맵을 새로 추가할 때의 설정입니다.
mapID
는 맵을 전환할 고유 ID를 지정합니다.maptype
는 기본 맵을 추가할 때 base
를 지정합니다.url
는 TMS 또는 WMTS 형식의 타일 맵 URL을 지정합니다.maxzoom
는 지도의 최대 줌을 지정합니다.그 밖에도, 지도의 이름이나 저작권자, 설명문 그 외를 추가하는 설정도 있습니다만, UI가 없는 API 베이스라고 일단 위에서만 움직입니다.
그 밖에도, 단지 위의 추가 맵으로 전환하는 버튼을 추가하기 위한 것입니다만,
html
와 Javascript
도 이하와 같이 변경합니다.index.html (변경 부분 발췌)
<button id="ort">オルソ</button>
app.js (변경 부분 발췌)
document.getElementById("ort").addEventListener("click", function(e) {
app.changeMap("ort");
});
이제 다음과 같은 동작이 됩니다.
그건 그렇고, 이번에는 설명을 위해 지리원지도 오르소를 원시 설정을 추가하고 추가했지만, 실은 지리원지도 오르소는 API에 사전 설정되어 있습니다.
그래서 오늘의 결과를 쉽게 얻으려고 하면 실은
gsi_ortho
를 추가하는 것만으로 좋았습니다.내일은 오버레이 지도로 TMS/WMTS 지도를 추가하는 경우를 설명합니다.
Reference
이 문제에 관하여(Maplat Core에서 기본지도 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kochizufan/items/6fdab4b45bf1586e23c9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)