Maplat Core에서 마커를 동적으로 표시

9674 단어 GISfoss4g오래된 지도오픈 소스Maplat
Maplat Advent Calendar 7일째는 Maplat Core에서 마커를 동적으로 표시하는 방법입니다.
오늘 움직이는 것은 여기에서 확인할 수 있습니다. => CodeSandBox Maplat Advent Calendar day 7

어제의 코드를 기반으로 개조하지만 동적으로 POI를 추가하기 때문에 정적 POI 구성 파일을 입력하지 않으므로 pois/poi.json 제거합니다.

그런 다음 index.html 및 app.css에 동적으로 추가하는 버튼을 추가합니다.
앱 설정 파일에서 pois 설정도 삭제합니다.

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Maplat Advent Calendar Day7</title>
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <div class="mainview">
      <div id="map_div"></div>
    </div>
    <div class="button">
      <button id="poi">POI追加</button>
    </div>
  </body>
  <script src="app.js"></script>
</html>

app.css
.mainview {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 5%;
  right: 5%;
}
.button {
  position: absolute;
  top: 95%;
  bottom: 0%;
  left: 5%;
  right: 5%;
}

maplat_ac_day7.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"
    },
    "osm"
  ]
}

그런 다음 JavaScript에 POI 핀을 추가하는 프로세스 app.addMarker를 추가합니다.

app.js
import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";

var option = {
  appid: "maplat_ac_day7"
};

var app = new MaplatApp(option);
app.waitReady.then(function() {
  document.getElementById("poi").addEventListener("click", function(e) {
    app.addMarker(
      {
        id: "castle",
        lat: 36.243881,
        lng: 139.543517,
        name: "館林城"
      },
      "main"
    );
  });
  app.addEventListener("clickMarker", function(evt) {
    app.selectMarker(evt.detail.namespace_id);
    console.log(evt.detail);
  });
  app.addEventListener("clickMap", function(evt) {
    app.unselectMarker();
    console.log(evt.detail);
  });
});

첫 번째 인수는 추가하는 POI 설정으로 어제 기사에서는 정적 구성 파일에 작성된 설정 그대로입니다.
두 번째 인수는 추가할 레이어 ID를 지정하고 생략하면 기본 레이어 IDmain입니다.

이것을 실행하면 이런 느낌입니다.


내일은 POI 핀의 이미지를 교체하는 샘플을 만들어 보겠습니다.
Maplat Core에서 마커를 정적으로 표시
Maplat Core에서 마커의 이미지 변경(핀 단위)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage