Mapbox GL JS：带方位角/俯仰角的fitBounds适配旋转地图问题

不用手动旋转坐标，直接利用fitBounds的内置视角参数就能解决这个问题，具体操作如下：

• 直接在fitBounds中指定视角参数
  Mapbox GL JS的fitBounds方法支持在选项里传入bearing和pitch，它会基于你指定的视角计算适配范围，而不是先按正北零俯仰适配再旋转。示例代码：

  // routeBounds为路线的经纬度边界，map是你的Mapbox实例
  map.fitBounds(routeBounds, {
      bearing: 60, // 目标方位角
      pitch: 40,   // 目标俯仰角
      padding: 30, // 容器内边距，按需调整
      duration: 0  // 可选，关闭动画直接完成适配
  });
  

• 动态视角下的适配
  如果是先调整了地图视角再做适配，或者需要基于当前视角适配，调用fitBounds时传入当前的bearing和pitch值即可：

  // 先设置视角
  map.setBearing(60);
  map.setPitch(40);
  // 基于当前视角适配路线
  map.fitBounds(routeBounds, {
      bearing: map.getBearing(),
      pitch: map.getPitch(),
      padding: 30
  });
  

• 为什么手动旋转坐标没用
  Mapbox的地图投影和视角变换是基于Web Mercator投影的内部逻辑实现的，手动旋转路线坐标无法精准匹配地图的视角转换规则，反而会引入计算误差，导致适配效果不佳。

• 排查小技巧
  如果适配后还是有显示问题，先检查routeBounds是否正确获取了路线的完整边界，再调整padding值，确保路线在容器内有合适的留白。

内容的提问来源于stack exchange，提问作者Rich - enzedonline