Mapbox多色脉动点实现问题：自定义独立样式POI动效

问题根源 #

你直接用dot_red = pulsingDot这类方式赋值时，本质是复制了对象的引用，所有变量最终指向同一个pulsingDot对象。最后设置的bgcolor会覆盖之前的配置，导致所有脉动点显示同一个颜色。

解决方案：用工厂函数生成独立实例 #

把脉动点定义改成工厂函数，每次调用都会创建全新的对象实例，这样每个点的颜色、尺寸、闪烁速度等参数都能独立配置。

改造后的脉动点工厂函数 #

function createPulsingDot(options) {
  // 默认配置，可通过传入的options覆盖
  const defaultOptions = {
    size: 50,
    bgcolor: '#88888880',
    duration: 2000, // 闪烁周期，单位ms
    shadowBlur: 20,
    shadowColor: "#80808080"
  };
  // 合并配置
  const config = {...defaultOptions, ...options};

  return {
    width: config.size,
    height: config.size,
    bgcolor: config.bgcolor,
    duration: config.duration,
    shadowBlur: config.shadowBlur,
    shadowColor: config.shadowColor,
    data: new Uint8Array(config.size * config.size * 4),
    
    onAdd: function () {
      const canvas = document.createElement('canvas');
      canvas.width = this.width;
      canvas.height = this.height;
      this.context = canvas.getContext('2d');
    },
    
    render: function () {
      const t = (performance.now() % this.duration) / this.duration;
      
      const radius = (this.width / 2) * 0.3;
      const outerRadius = (this.width / 2) * 0.7 * t + radius;
      const context = this.context;
      
      context.shadowBlur = this.shadowBlur;
      context.shadowColor = this.shadowColor;
    
      // 绘制外圈
      context.clearRect(0, 0, this.width, this.height);
      context.beginPath();
      context.arc(
        this.width / 2,
        this.height / 2,
        outerRadius,
        0,
        Math.PI * 2
      );
      context.fillStyle = `rgba(255, 255, 255, ${0.2 * (1 - t)})`;
      context.fill();
      
      // 绘制内圈
      context.beginPath();
      context.arc(
        this.width / 2,
        this.height / 2,
        radius,
        0,
        Math.PI * 2
      );
      context.fillStyle = this.bgcolor;
      context.fill();
      
      // 更新图像数据
      this.data = context.getImageData(0, 0, this.width, this.height).data;
      
      map.triggerRepaint();
      return true;
    }
  };
}

创建并添加不同配置的脉动点 #

// 创建红色脉动点，自定义颜色、尺寸和闪烁速度
const dotRed = createPulsingDot({
  bgcolor: '#FF0000',
  size: 60,
  duration: 1500
});
map.addImage('pulsing-dot-red', dotRed, { pixelRatio: 2 });

// 创建绿色脉动点，自定义颜色、阴影和闪烁速度
const dotGreen = createPulsingDot({
  bgcolor: '#00FF00',
  shadowColor: '#00FF0080',
  duration: 2500
});
map.addImage('pulsing-dot-green', dotGreen, { pixelRatio: 2 });

// 示例：添加红色点图层
map.addLayer({
  id: 'red-poi',
  type: 'symbol',
  source: 'your-red-poi-source',
  layout: {
    'icon-image': 'pulsing-dot-red',
    'icon-size': 1
  }
});

// 示例：添加绿色点图层
map.addLayer({
  id: 'green-poi',
  type: 'symbol',
  source: 'your-green-poi-source',
  layout: {
    'icon-image': 'pulsing-dot-green',
    'icon-size': 1
  }
});

关键说明 #

• 工厂函数createPulsingDot每次调用都会返回一个全新的对象，每个实例的属性（bgcolor、size、duration等）都是独立的，不会互相覆盖。
• 把原本固定的size、duration等参数改成可配置项，方便按需自定义每个点的行为。
• render方法中使用this访问当前实例的配置，确保每个点的动画逻辑基于自身参数运行。

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