mle 0210 - izudon/izudon.github.io GitHub Wiki

0210 Center the map on a clicked symbol

１．クリック点を作る

マーカはいわゆる Marker ではなくカスタムマーカにする。

  • GeoJSON ソースを追加。
    マップのロード > カスタムマーカのイメージをロード > （その後） 
    • map.on('load', () => {
    map.loadImage(
        'https://maplibre.org/maplibre-gl-js/docs/assets/custom_marker.png',
            map.addSource('points', {
                'type': 'geojson',
                'data': {
                  // ...
  • 参照するシンボルレイヤを追加。 
    • map.addLayer({
    'id': 'symbols',
    'type': 'symbol',
    'source': 'points',
    'layout': {
        'icon-image': 'custom-marker'
    }
});

２．flyTo() で「レイヤに」イベント登録

  • クリック点をクリック時に中央に持ってくるには flyTo() を用いている。
  • レイヤのクリックイベントにリスナを登録すれば複数ある表示要素すべてに適用される。
    （いわゆる Marker を使う場合に比べこの点はメリット）
map.on('click', 'symbols', (e) => {
    map.flyTo({
        center: e.features[0].geometry.coordinates
    });
});
  • e.features[0] クリックしたところに複数フィーチャが重なってあった場合でも最初の一つだけを拾ってこられるようにしている。