Mapbox GL中Canvas标记沿路线动画卡顿问题求助

核心问题与优化点 #

1. 冗余的地图重绘触发
   自定义Canvas图像的render方法返回true时，Mapbox已经会自动识别图像需要更新并处理重绘。额外调用map.triggerRepaint()会强制触发整个地图的重绘流程，大幅增加性能开销，是慢速动画卡顿的主要原因。

2. 重复的Canvas绘制操作
   你的示例中标记内容（文本、矩形）是固定的，但每次render都重复执行绘制和getImageData操作——这两个步骤本身就比较耗时，频繁执行会累积性能损耗。

3. 动画与渲染周期不同步
   使用requestAnimationFrame时，若每帧都强制调用render，会导致无意义的重复渲染，应该只在标记位置或内容真正变化时才触发更新。

修改后的代码示例 #

优化后的Canvas图像创建

const canvasMarker = {
  width: size,
  height: size,
  data: null,
  context: null,

  onAdd: function () {
    const canvas = document.createElement('canvas')
    canvas.width = this.width
    canvas.height = this.height
    this.context = canvas.getContext('2d')
    // 初始化时一次性绘制内容，缓存像素数据
    this._drawStaticContent()
  },

  // 封装静态内容绘制逻辑，仅在内容需要变更时调用
  _drawStaticContent: function() {
    const context = this.context
    if (!context) return

    context.clearRect(0, 0, context.canvas.width, context.canvas.height)
    context.font = '30px Arial'
    context.fillText('Hello World', 0, 20)
    context.rect(0, 40, this.width, 10)
    context.rect(0, 55, this.width, 10)
    context.fillStyle = '#000'
    context.fill()

    this.data = context.getImageData(0, 0, this.width, this.height).data
  },

  render: function () {
    // 静态内容无需重复绘制，直接返回true告知Mapbox图像可用
    return true
  },
};

优化后的动画逻辑

function animateMarker() {
  // 计算标记的新坐标（替换为你的实际坐标计算逻辑）
  const newCoords = calculateNextPosition();
  
  // 仅更新数据源的坐标，Mapbox会自动同步标记位置并优化重绘
  map.getSource('point').setData({
    type: 'FeatureCollection',
    features: [{
      type: 'Feature',
      geometry: { type: 'Point', coordinates: newCoords }
    }]
  });

  // 若标记内容需要动态变更（如文本更新），再调用绘制方法
  // canvasMarker._drawStaticContent();

  requestAnimationFrame(animateMarker);
}

额外优化建议 #

• 降低像素比：如果不需要超高清显示，将addImage时的{ pixelRatio: 2 }改为1，减少渲染的像素总量。
• 优先使用内置属性动画：如果仅需位置、旋转等基础动画，直接通过setLayoutProperty或setPaintProperty更新图层属性，比自定义Canvas更高效。
• 精简动画循环：确保动画函数内只执行坐标计算、数据源更新等必要操作，避免DOM操作或重型计算。

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