search
LoginSignup
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Mapbox Advent Calendar 2020 Day 11

posted at

updated at

地図が移動した時のイベントで任意の移動メソッドによる移動を識別する

MapBox GL JS で、地図をスクロールさせたり拡大縮小させると、moveend イベントにより移動が完了したことが通知されます。

cap.gif

const map = new mapboxgl.Map({
  container: 'map',
  center: [139.8108103, 35.7100069],
  zoom: 12,
  fitBoundsOptions: { padding: { bottom: 150, top: 150, right: 150, left: 150 } },
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [ "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" ],
        tileSize: 256,
        attribution: "OpenStreetMap",
      },
    },
    layers: [
      {
        id: "BASEMAP",
        type: "raster",
        source: "OSM",
      },
    ],
  },      
});

map.on('load', e => {
  console.log('load', map.getBounds().toArray());
});

map.on('moveend', e => {
  console.log('moveend', map.getBounds().toArray());
  console.log('moveBy', e.moveBy);
});

document.getElementById('jump').addEventListener('click', () => {

  const eventData = { 
    moveBy: 'flyTo',
  };

  map.flyTo({ 
    center: [138.679699, 35.3578708],
    essential: true,
  }, eventData);

});

moveend イベントは初回の地図表示時には通知されないようです(load イベントを使うとよいでしょう)。
マウスジェスチャでも、flyTofitBounds などの移動系メソッドを呼び出しても、moveend イベントは発生します。
移動系メソッドでは、最終引数に任意の key: value を設定しておくと、移動の完了時に、moveend イベントの引数から呼び出し時に設定した key: value を取り出せます。
これにより、マウスジェスチャーでの移動と識別することができ、アプリ内の特別な位置変更として取り扱うことができます。
また、flyTo を同じパラメータで2度呼ぶなど、位置が変わらない場合でも moveend イベントは発生するようです。

完全なコード

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0
Help us understand the problem. What are the problem?