javascript - Mapbox如何通过鼠标滚动控制 map 缩放速度

Question

我使用 mapbox ( https://www.mapbox.com )，并且我想让鼠标滚动期间 map 的缩放速度变慢。显然，API 文档没有速度控制，除非它是，例如，flyTo() 方法等。

我尝试控制缩放事件期间触发的缩放事件的速度，但效果不佳。有没有办法控制鼠标滚动缩放时的缩放速度？

Answer 1

我最终自己解决了这个问题。我通过

禁用了 map 框滚动

map.scrollWheelZoom.disable();

然后在保存 map 的 div ID 上应用标准 jquery onwheel 事件。

$(document).on('wheel','#map', function(e){
    e.preventDefault();
    if(e.originalEvent.wheelDelta/120 > 0) {
      scrollZoomMap('up')
    }
    else{
      scrollZoomMap('down')
    }
}

scollZoomMap 函数可能如下所示

function scrollZoomMap(dir){
 //console.log("dir : " + dir);  
 var newZoom = null;
 var debounce;
 var el = map; //the mapbox instance.
 latLng = el.getCenter();
 var latitude = latLng["lat"];
 var longitude = latLng["lng"];          
 var currentZoom = el.getZoom();
 if (debounce) clearTimeout(debounce);
   debounce = setTimeout(function(){
   debounce = null;
   if(dir == "up"){
     newZoom = currentZoom + 1;
   }else{
     newZoom = currentZoom - 1;
   }
   if( newZoom > 0 && newZoom < 22){
     //console.log("newZoom : " + newZoom);
     el.setView([latitude, longitude], newZoom);
    }             
   }, 300);              
 }