Maplat Core에서 TMS/WMTS 지도를 오버레이로 추가

Maplat Advent Calendar 15일째는 Maplat Core에서 어제와 마찬가지로 TMS/WMTS 지도를 추가하지만 기본 지도가 아닌 오버레이 가능한 지도로 추가해 보겠습니다.
오늘 움직이는 것은 여기에서 확인할 수 있습니다. => CodeSandBox Maplat Advent Calendar day 15

오늘의 프로그램은 어제 프로그램 을 베이스로 개조되고 있습니다.
추가한 것은 농연기구의 빠른지도 입니다.

maplat_ac_day15.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
    },
    {
      "mapID": "rap",
      "maptype": "overlay",
      "url": "https://www.finds.jp/ws/tmc/1.0.0/Kanto_Rapid-900913-L/{z}/{x}/{y}.jpg",
      "maxZoom": 17,
      "envelopLngLats": [
        [139.454802, 36.209997],
        [139.63024, 36.209997],
        [139.63024, 36.283371],
        [139.454802, 36.283371]
      ]
    }
  ]
}

추가된 것은 이 부분입니다.

maplat_ac_day15.json (추가 분 발췌)

    {
      "mapID": "rap",
      "maptype": "overlay",
      "url": "https://www.finds.jp/ws/tmc/1.0.0/Kanto_Rapid-900913-L/{z}/{x}/{y}.jpg",
      "maxZoom": 17,
      "envelopLngLats": [
        [139.454802, 36.209997],
        [139.63024, 36.209997],
        [139.63024, 36.283371],
        [139.454802, 36.283371]
      ]
    }

이것은 TMS 또는 WMTS 형식의 맵을 오버레이할 맵으로 새로 추가할 때의 설정입니다.mapID는 맵을 전환할 고유 ID를 지정합니다.maptype 는 TMS 또는 WMTS 형식의 오버레이 맵을 추가할 때 overlay 를 지정합니다.url는 TMS 또는 WMTS 형식의 타일 맵 URL을 지정합니다.maxzoom 는 지도의 최대 줌을 지정합니다.envelopLngLats 는 지도 제공 범위를 지정합니다. 이 옵션을 지정하면 지도 타일이 있거나 없는 상태에서 이 지도를 표시하는 동안 관점이 영역 밖으로 이동하면 영역 내로 되돌아갑니다.

그 밖에도, 단지 위의 추가 맵으로 전환하는 버튼을 추가하기 위한 것입니다만, html 와 Javascript 도 이하와 같이 변경합니다.

index.html (변경 부분 발췌)

      <button id="rap">迅速</button>

app.js (변경 부분 발췌)

  document.getElementById("rap").addEventListener("click", function(e) {
    app.changeMap("rap");
  });

이제 다음과 같은 동작이 됩니다.



내일은 드디어 고지도 등을 오버레이 맵으로 추가하는 경우를 설명합니다.