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

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

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

完全なコード

• MoveEnd event and EventData - JSFiddle - Code Playground

参考

• Fly to a location | Mapbox GL JS | Mapbox