Mapbox路径动画导出MP4时标记点未显示问题求助

问题根源：你使用的mapboxgl.Marker是独立的DOM元素，悬浮在地图Canvas图层上方，而官方导出工具是通过捕获地图Canvas的内容生成视频帧，因此DOM标记点无法被纳入导出范围。

推荐解决方案：用矢量图层替代DOM Marker #

将起点、终点转换为GeoJSON数据，添加到地图的矢量图层（circle或symbol图层）中，这样标记点会直接渲染在地图Canvas上，导出视频时能被正常捕获。

代码示例（Circle图层版，最简单） #

const pinRoute = trackGeojson.features[0].geometry.coordinates;

// 构造起点终点的GeoJSON数据
const markersData = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: { type: 'start' },
      geometry: { type: 'Point', coordinates: pinRoute[0] }
    },
    {
      type: 'Feature',
      properties: { type: 'end' },
      geometry: { type: 'Point', coordinates: pinRoute[pinRoute.length - 1] }
    }
  ]
};

// 添加Circle图层
map.addLayer({
  id: 'route-markers',
  type: 'circle',
  source: { type: 'geojson', data: markersData },
  paint: {
    'circle-radius': 6, // 对应原Marker的scale:0.8大小
    'circle-color': ['match', ['get', 'type'], 'start', 'red', 'end', 'green', '#999']
  }
});

代码示例（Symbol图层版，支持自定义图标） #

如果需要用自定义图标作为标记，先确保已经加载了图标资源，再添加Symbol图层：

// 先加载自定义图标（需替换为你的图标路径）
map.loadImage('path/to/start-marker.png', (error, image) => {
  if (error) throw error;
  map.addImage('start-icon', image);
  map.loadImage('path/to/end-marker.png', (error, image) => {
    if (error) throw error;
    map.addImage('end-icon', image);

    // 添加Symbol图层
    map.addLayer({
      id: 'route-markers',
      type: 'symbol',
      source: { type: 'geojson', data: markersData },
      layout: {
        'icon-image': ['match', ['get', 'type'], 'start', 'start-icon', 'end', 'end-icon', 'default-icon'],
        'icon-size': 0.8
      }
    });
  });
});

不推荐的复杂方案：手动绘制DOM到Canvas #

如果必须保留DOM Marker的样式，需要在每帧渲染时将DOM元素转换为图像，再绘制到地图Canvas上。但这种方法需要处理地图缩放、平移、旋转的坐标转换，容易出现对齐错误和性能问题，仅在特殊场景下使用。

内容的提问来源于stack exchange，提问作者fvisticot