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

vpfxa7rd 于 2023-05-12 发布在 Java

关注(0)|答案(2)|浏览(182)

在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提供一个回调，以便在动画开始时触发？

JavaScript

来源：https://stackoverflow.com/questions/72073581/mapboxgl-distinguishing-between-move-and-fly-event

2条答案

按热度按时间

mlnl4t2r1#

您可以创建一个变量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");
}

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

赞(0）回复(0）举报 2023-05-12

bjp0bcyl2#

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

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

赞(0）回复(0）举报 2023-05-12

我来回答

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

2条答案

相关问题

热门标签

最新问答