本文介绍如何在 mapbox gl js 中同步实现标记（marker）的路径动画与自由相机（free camera）实时跟随，使视角始终居中锁定移动中的标记，并支持高度、俯仰角等自定义控制。
在 Mapbox GL JS 中，原生 Marker 不具备内置动画能力，但可通过 requestAnimationFrame 驱动其位置更新；而自由相机（freeCamera）则提供了更灵活的 3D 视角控制能力——二者结合，即可实现「无人机跟拍式」的动态地图体验：标记沿轨迹平滑移动，相机始终保持在其正上方并朝向目标。
以下是一个完整可运行的实现方案，核心逻辑在于：在每一帧动画中，先更新 Marker 的经纬度，再基于其最新位置实时重置自由相机的位置与朝向。
✅ 关键实现要点
- 使用 marker._lngLat 获取 Marker 当前经纬度（注意：_lngLat 是内部属性，适用于稳定场景；生产环境建议配合 marker.getLngLat() 或维护独立坐标状态）；
- 通过 mapboxgl.MercatorCoordinate.fromLngLat(..., altitude) 将地理坐标转为三维空间坐标，设定相机高度（如 4000000 单位为米级，可根据缩放层级调整）；
- 调用 camera.lookAtPoint({...}) 确保相机始终聚焦于标记位置；
- 使用 map.setFreeCameraOptions(camera) 应用更新后的相机参数；
- 动画循环必须通过 requestAnimationFrame 驱动，避免阻塞主线程。
? 完整示例代码
Mapbox Marker + Follow Camera
⚠️ 注意事项与优化建议
- Token 安全：生产环境请勿硬编码 Access Token，应通过服务端代理或环境变量注入；
- 性能考量：高频 setLngLat + setFreeCameraOptions 在低端设备可能引发卡顿，可考虑降低动画帧率（如 setTimeout 限频）或使用 map.jumpTo 做简化跟随；
- 路径扩展：将 Math.cos/sin 替换为真实 GPS 轨迹数组（如 path[step]），配合 step++ 实现预设路线动画；
- 交互兼容性：启用自由相机后，部分手势（如双指缩放）行为会变化，建议设置 cooperativeGestures: true 并测试用户操作流；
- Marker 限制：Marker 是 DOM 元素，不参与 WebGL 渲染；如需高性能矢量动画，推荐改用 GeoJSON source + symbol layer + map.setFeatureState 驱动图标动画。
通过上述方法，你不仅能实现标记的流畅运动，更能构建具有电影感的地图导航体验——无论是物流追踪、赛事直播还是地理叙事应用，这种「镜头追随」设计都极具表现力与实用性。
