Mapbox.GL:滚动放大和缩小到自定义Mapbox地图上的特定坐标 [英] Mapbox.GL: scroll zoom in and out to specific coordinates on custom mapbox map

问题描述

我已经在网站上嵌入了一个自定义mapbox工作室地图，并设置了minZoom和maxZoom坐标，因此它只能缩小到某个缩放级别，而只能放大到某个缩放级别.但是，当用户放大时，地图会转到用户放置鼠标指针的位置，因此，但我希望它放大到起点，而不是用户放置鼠标指针的位置.
这是我找到的最接近的示例，但是我不想讲故事，我希望用户仅在地图上滚动:

I have embedded a custom mapbox studio map onto my site and set the minZoom and maxZoom coordinates so it only zooms out to a certain zoom level and zooms in to a certain zoom level. BUT when the user zooms back in, the map goes where the user places their mouse pointer, rightly so, BUT I want it to zoom back to it's starting point, not where the user places their mouse pointer.
This is the closest example I found, but I don't want the narrative, I want the user to just scroll on the map: https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/

我如何做到这样:当用户向下滚动嵌入式地图时，缩放到一组特定的坐标；当用户向上滚动时，嵌入式地图会回退到一组特定的坐标? >

How do I make it such that when the user scrolls down the embedded map zooms out to a certain set of coordinates and when the user scrolls back up, the embedded map zooms back in to a certain set of coordinates?

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并不容易.我建议禁用所有内置的交互处理程序并编写您自己的 wheel事件的事件处理程序，该事件处理程序调用

Unfortunately, this isn't easy with the existing mapbox-gl-js API. I recommend disabling all the built-in interaction handlers and writing your own event handler for the wheel event that calls Map#setZoom

这篇关于Mapbox.GL:滚动放大和缩小到自定义Mapbox地图上的特定坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！