本文介绍如何在 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 驱动，避免阻塞主线程。
? 完整示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mapbox Marker + Follow Camera</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
<script>
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // ? 替换为你的 Token
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [0, 0],
zoom: 2,
// 启用自由相机模式（必需）
cooperativeGestures: true
});
const marker = new mapboxgl.Marker({ color: '#F84C4C' });
function animateMarker(timestamp) {
const radius = 20;
// 更新 Marker 位置：绕原点做圆周运动（可替换为任意路径逻辑）
const lng = Math.cos(timestamp / 1000) * radius;
const lat = Math.sin(timestamp / 1000) * radius;
marker.setLngLat([lng, lat]);
// 确保 Marker 已添加到地图（安全调用）
if (!marker._map) marker.addTo(map);
// 获取当前自由相机配置
const camera = map.getFreeCameraOptions();
const altitude = 4000000; // 相机距地高度（单位：米）
// 设置相机位置：正上方 Marker
camera.position = mapboxgl.MercatorCoordinate.fromLngLat(
{ lng, lat },
altitude
);
// 设置相机朝向：垂直向下注视 Marker
camera.lookAtPoint({ lng, lat });
// 可选：增强沉浸感，添加轻微俯仰（-60° 表示向下倾斜）
camera.lookAtTransform({
pitch: -60,
bearing: 0
});
map.setFreeCameraOptions(camera);
// 持续请求下一帧
requestAnimationFrame(animateMarker);
}
// 启动动画
requestAnimationFrame(animateMarker);
</script>
</body>
</html>⚠️ 注意事项与优化建议
- 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 驱动图标动画。
通过上述方法，你不仅能实现标记的流畅运动，更能构建具有电影感的地图导航体验——无论是物流追踪、赛事直播还是地理叙事应用，这种「镜头追随」设计都极具表现力与实用性。
