Mapbox.GL:滚动放大和缩小到自定义地图框地图上的特定坐标

Mapbox.GL: scroll zoom in and out to specific coordinates on custom mapbox map

本文关键字:地图 坐标 自定义 GL 滚动 放大 缩小 Mapbox      更新时间:2023-09-26

我已经在我的网站上嵌入了一个自定义的mapbox工作室地图,并设置了minZoom和maxZoom坐标,以便它只缩小到某个缩放级别并放大到某个缩放级别。 但是当用户放大时,地图会转到用户放置鼠标指针的位置,这是正确的,但我希望它缩放回起点,而不是用户放置鼠标指针的位置。
这是我找到的最接近的例子,但我不想要叙述,我希望用户只是在地图上滚动:https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/

如何使当用户向下滚动时,嵌入地图缩小到一组特定的

坐标,当用户向上滚动时,嵌入的地图缩小到一组特定的坐标?

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [-118.451784, 34.035947], // starting position
zoom: 11.66,
maxZoom: 11.66, // starting zoom
minZoom: 1.4, // ending zoom
doubleClickZoom: false,
dragRotate: false,
dragPan: false

});

不幸的是,对于现有的mapbox-gl-js API来说,这并不容易。我建议禁用所有内置交互处理程序,并为调用Map#setZoomwheel事件编写自己的事件处理程序