MapboxGl 区分 "Move" 和 "Fly" 事件

Question

在 MapboxGL JS 中，是否可以观看由地理定位触发的“flyTo”事件 API，而不是用户通过拖动地图手动在屏幕上移动？

我试图仅在用户成功将搜索输入到 Geolocation 控制器时在我的应用程序中触发一个操作。该地图有一个适用于此的 movestart 事件，但它也会通过光标或手指捕获用户在屏幕上的移动。

import Geocoder from "@mapbox/mapbox-gl-geocoder";
const geocoder = new Geocoder({
  countries: "us",
  accessToken: mapboxGl.accessToken,
  mapboxgl: mapboxGl,
  marker: false,
  render: function (item) {
    return `<span class='geocoder-dropdown-text'>${item.text}</span>`;
  },
});

map.on("movestart", (e) => {
  // The problem is this event is too broad...
});

是否可以在 Geolocation API 触发时仅监听“飞行”事件，或者专门为将在动画开始时触发的 Geocoder 提供回调？

Answer 1

您可以创建一个变量 flying 并在飞行开始时将其设置为 true。然后你可以监听事件movestart或moveenv并检查它是否被用户拖动或触发飞行事件。

let flying = false;

map.on("flystart", function () 
  flying = true;
});

map.on("flyend", function () {
  flying = false;
});

map.on("moveend", function () {
  if (flying) {
    map.fire("flyend");
  }
});

function fly() {
  map.flyTo({
    center: [....],
  });
  map.fire("flystart");
}

Fiddle: https://jsfiddle.net/wdtc91qo/

MapboxGl 区分 "Move" 和 "Fly" 事件

MapboxGl Distinguishing Between "Move" and "Fly" Event

javascript

mapbox

mapbox-gl-js