如何控制Mapbox地图鼠标滚轮的缩放速度？

你提到的问题确实很常见——Mapbox GL JS的文档里没有把滚轮缩放速度的配置放在最显眼的位置，但其实有两种可靠的解决办法：

方法一：利用内置交互的speed参数（推荐） #

Mapbox的wheelZoom交互组件其实支持speed配置项，你可以在初始化地图时直接自定义这个参数，数值越小，缩放速度越慢：

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [-74.5, 40],
  zoom: 9,
  wheelZoom: {
    speed: 0.3 // 默认值为1，按需调整这个数值即可
  }
});

这个方案是官方原生支持的，不需要额外处理事件，兼容性和稳定性都最好。

方法二：手动拦截滚轮事件（适用于复杂自定义场景） #

如果需要更灵活的控制（比如根据地图层级动态调整速度），可以禁用默认的滚轮缩放，然后自己监听滚轮事件来控制缩放：

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [-74.5, 40],
  zoom: 9
});

// 先关闭默认的滚轮缩放行为
map.scrollZoom.disable();

// 给地图容器绑定滚轮事件
map.getContainer().addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止页面默认的滚动行为
  
  // 自定义缩放增量，这里的0.1就是控制速度的关键，数值越小缩放越平缓
  const zoomStep = e.deltaY > 0 ? -0.1 : 0.1;
  const targetZoom = map.getZoom() + zoomStep;
  
  // 可以用setZoom直接设置，或者用easeTo实现平滑动画
  map.easeTo({
    zoom: targetZoom,
    duration: 100 // 动画时长，可选
  });
});

注意这种方式需要自己处理缩放的边界（比如地图的最小/最大缩放级别），避免超出范围。

你之前尝试监听zoom事件无效，是因为zoom事件是在缩放完成后才触发的，这时候再去干预已经来不及了——必须在缩放行为发生前，通过修改交互配置或者拦截原生事件来控制速度。

内容的提问来源于stack exchange，提问作者underScorePassionFruit