Mapbox点击点位时使用flyTo()调整地图缩放等级的方法

嘿，这个需求其实用flyTo()本身就能轻松搞定，完全不需要额外的方法！Mapbox的flyTo()方法接受的配置对象里，直接支持通过zoom参数指定目标缩放等级。

举个具体的实现例子，假设你已经有了地图实例，并且能获取到点击点位的坐标：

// 假设你的地图实例变量名为map
map.on('click', (event) => {
  // 获取点击点位的经纬度坐标
  const targetPosition = event.lngLat;
  
  map.flyTo({
    center: targetPosition, // 地图要飞到的目标点位
    zoom: 10, // 这里就是你想要设置的目标缩放等级
    // 以下是可选的动画优化参数，按需添加
    speed: 0.8, // 飞行动画的速度，数值越小越平缓，默认是1.2
    curve: 1.2, // 飞行轨迹的弯曲程度，默认是1.414
    easing: (t) => t // 自定义动画缓动函数，可选
  });
});

简单来说，你之前只给flyTo()传了center参数，现在只要在同一个配置对象里加上zoom: 10，地图就会在平滑飞到目标点位的同时，自动把缩放等级调整到10。

如果之后你需要单独调整缩放等级（不需要飞行动画），可以用map.setZoom(10)，但结合你的需求，直接在flyTo()里配置zoom是最顺畅的实现方式。

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