Mapbox GL JS 实现标记点动画与跟随视角效果

本文介绍如何在 mapbox gl js 中同时实现标记点（marker）的路径动画，并让相机始终居中跟随该标记，即“上帝视角”式追踪效果。通过结合官方动画示例与自由相机（free camera）api，可精准控制相机位置与朝向。

在 Mapbox GL js v2.12+ 中，freeCamera 模式为高级相机控制提供了强大支持——它允许你完全绕过传统 center/zoom/pitch/bearing 的约束，直接以三维空间坐标（Mercator 坐标系）定义相机位置、朝向与焦距。这正是实现“标记点动画 + 自动跟随”效果的关键。

核心思路如下：

• 使用 requestAnimationFrame 驱动时间连续的标记位置更新；
• 每帧中，先更新 marker.setLngLat(…)，再同步计算相机应处的三维坐标（正上方固定高度）；
• 调用 camera.lookAtPoint(…) 确保相机始终垂直下视标记中心；
• 最后通过 map.setFreeCameraOptions(camera) 应用更新后的相机状态。

以下是一个完整、可运行的示例代码（已适配最新 Mapbox GL JS v2.13+）：

✅ 关键注意事项：

• ✅ 必须使用 mapbox-gl-js >= v2.12，且启用 cooperativeGestures: true（否则自由相机可能被手势中断）；
• ✅ camera.position 必须使用 MercatorCoordinate.fromLngLat(…, altitude) 构造，不能直接传入 [lng, lat] 数组；
• ✅ lookAtPoint 接收的是地理坐标 {lng, lat}，而非 Mercator 坐标，务必保持类型一致；
• ✅ 若需更自然的跟随（如缓动、偏移视角），可引入 lerp 插值或 map.flyTo() 辅助过渡，但本例采用硬跟随以保证实时性与稳定性；
• ⚠️ 免费版 Mapbox Token 有请求限制，请勿在生产环境暴露 token，建议配合代理或私有托管。

通过此方案，你不仅能实现平滑的标记路径动画，还能获得电影级的“航拍跟随”体验——无论是物流轨迹回放、设备移动模拟，还是地理叙事可视化，都具备极强的表达力与专业感。