2

我向 mapbox 地图添加了一些标记，并让 geojson-extent.js 中的 fitBounds() 方法调整地图位置和缩放。

map.fitBounds( geojsonExtent(geojson), {
    padding: {top: 200, bottom:30, left: 30, right: 30}
});

动画持续时间默认设置为 5 秒。当用户此时在地图上进行鼠标滚轮交互时，动画停止。没问题：缩放停止动画。但是我怎样才能防止这种情况呢？

我尝试了很多解决方案：

1.禁用缩放

map['scrollZoom'].disable();

用户无法通过鼠标滚轮滚动地图，但动画仍然停止。

2. 赶轮事件

map.on('wheel', function(e) {
    e.preventDefault();
});

用户无法通过鼠标滚轮滚动地图，但动画仍然停止。

3.完全禁用用户交互

var map = new mapboxgl.Map({
    interactive: false
});

酷，动画不再被中断，但现在用户无法平移地图。我没有找到在运行时重置此属性或添加导航元素以进行平移的解决方案。

4.将动画设置为重要

map.fitBounds( geojsonExtent(geojson), {
    essential: true,
    padding: {top: 200, bottom:30, left: 30, right: 30}
});

没有效果。

5.禁用动画

map.fitBounds( geojsonExtent(geojson), {
    animate: false,
    padding: {top: 200, bottom:30, left: 30, right: 30}
});

这行得通，但它是一种解决方法。我喜欢保留动画。

6.添加一个覆盖来阻止用户交互

map.on('movestart', function(e){
    $("#map-box").append('<div class="block-interactions"></div>');
});
map.on('moveend', function(e){
    $("#map-box .block-interactions").remove();
});

.block-interactions {
    position: absolute;
    width: 100%;
    height: 535px; /* map height */
}

这是我目前的解决方案，它有效，但感觉像是一个糟糕的黑客，仍然是一种解决方法。

那么，你有没有其他的想法来防止动画被打断呢？最好使用 mapbox 方法。

谢谢您的帮助！

4

1 回答 1

0

您可以在调用之前禁用交互，然后fitBounds重新启用它以响应事件。moveendzoomend

// define map here...

function disableInteraction() {
    map.scrollZoom.disable()
}

function enableInteraction() {
    map.scrollZoom.enable()
}

map.on('moveend', function() {
    enableInteraction()
})

map.on('zoomend', function() {
    enableInteraction()
})

// The next two lines should go wherever you want to invoke `fitBounds`
disableInteraction()
map.fitBounds(/* ... */)

您可以修改disableInteraction，enableInteraction如果您想禁用除滚动缩放之外的其他形式的交互。例如，要禁用所有内容：

function disableInteraction() {
    map.scrollZoom.disable()
    map.boxZoom.enable()
    map.dragRotate.enable()
    map.dragPan.enable()
    map.keyboard.enable()
    map.doubleClickZoom.enable()
    map.touchZoomRotate.enable()
}
于 2020-07-21T17:41:28.203 回答