如何在ReactMapGL中设置wheelZoomRate

Question

在mapbox glwheelZoomRate可以使用setWheelZoomRate方法设置。如果ReactMapGL Map如何才能达到同样的效果。

map.scrollZoom.setWheelZoomRate(1 / 600);

我尝试使用React Map GL Map的scrollZoom属性设置wheelZoomRate。

scrollZoom={{
              wheelZoomRate: 1/300,
              enable: { 
               around: 'center',
               wheelZoomRate: 1/300
              }
           }}

但是滚动时似乎对地图的wheelZoomRate没有影响。

Answer 1

似乎

zoomRate

和

wheelZoomRate

不能作为可直接传递给

scrollZoom

的选项。
API 中确实可用的是：setter 方法。

就我而言，我在这里找到的解决方案是使用 Map 组件的

setWheelZoomRate

属性调用

setZoomRate

（或

onLoad

，具体取决于您的需要）方法。

我正在使用

react-map-gl

包装器，但原版 MapBox 的原理应该是相同的：

<Map
    mapboxAccessToken={mapboxAccessToken}
    onLoad={(e) => e.target.scrollZoom.setWheelZoomRate(1 / 300)}
    mapStyle="mapbox://styles/mapbox/streets-v11"
/>

如果没有React包装器，我认为你需要定义Map的

load

事件的回调方法。根据我在文档中读到的内容，这应该有效：

map.on('load', (e) => e.target.scrollZoom.setWheelZoomRate(1 / 300));

默认值分别为

1/100

的

zoomRate

和

1/450

的

wheelZoomRate

。