本文介绍如何在 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+）：
Animated Marker with Follow Camera
✅ 关键注意事项：
- ✅ 必须使用 mapbox-gl-js >= v2.12，且启用 cooperativeGestures: true（否则自由相机可能被手势中断）；
- ✅ camera.position 必须使用 MercatorCoordinate.fromLngLat(..., altitude) 构造，不能直接传入 [lng, lat] 数组；
- ✅ lookAtPoint 接收的是地理坐标 {lng, lat}，而非 Mercator 坐标，务必保持类型一致；
- ✅ 若需更自然的跟随（如缓动、偏移视角），可引入 lerp 插值或 map.flyTo() 辅助过渡，但本例采用硬跟随以保证实时性与稳定性；
- ⚠️ 免费版 Mapbox Token 有请求限制，请勿在生产环境暴露 token，建议配合代理或私有托管。
通过此方案，你不仅能实现平滑的标记路径动画，还能获得电影级的“航拍跟随”体验——无论是物流轨迹回放、设备移动模拟，还是地理叙事可视化，都具备极强的表达力与专业感。
