javascript MapboxGl区分“移动”和“飞行”事件

vpfxa7rd  于 2023-05-12  发布在  Java
关注(0)|答案(2)|浏览(183)

在MapboxGL JS中,是否可以看到由geolocate API触发的“flyTo”事件,而不是用户通过拖动Map在屏幕上手动移动?
我尝试仅当用户成功地在地理定位控制器中输入搜索时才在应用程序中触发操作。map有一个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提供一个回调,以便在动画开始时触发?

mlnl4t2r

mlnl4t2r1#

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

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");
}

小提琴:https://jsfiddle.net/wdtc91qo/

bjp0bcyl

bjp0bcyl2#

查看发出的事件,有一个originalEvent属性,仅当事件源是本机时才设置,即TouchStartMouseWheel等。
这样就可以像这样区分用户移动和程序化移动:

map.on('movestart', (e) => {
    const isUserMovement = 'originalEvent' in e;
})

相关问题