Mapbox pulsingDot 具有独立的背景颜色

Question

基于这个著名的例子，我希望能够添加具有单独背景颜色的多个点（POI）： https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/

所以我到目前为止所做的是在顶部添加一个

bgcolor

变量，用于设置

context.fillStyle = bgcolor;

    pulsingDot = {
    
    width: size,
    height: size,
    bgcolor: '#88888880',
    data: new Uint8Array(size * size * 4),
    
    // When the layer is added to the map,
    // get the rendering context for the map canvas.
    onAdd: function () {
      const canvas = document.createElement('canvas');
      canvas.width = this.width;
      canvas.height = this.height;
      this.context = canvas.getContext('2d');
    },
    
    // Call once before every frame where the icon will be used.
    render: function () {
      const duration = 2000;
      const t = (performance.now() % duration) / duration;
      
      const radius = (size / 2) * 0.3;
      const outerRadius = (size / 2) * 0.7 * t + radius;
      const context = this.context;
      
      context.shadowBlur = 20;
      context.shadowColor = "#80808080";
    
      // Draw the outer circle.
      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();
      
      // Draw the inner circle.
      context.beginPath();
      context.arc(
        this.width / 2,
        this.height / 2,
        radius,
        0,
        Math.PI * 2
      );
      context.fillStyle = this.bgcolor;
      context.fill();
      
      // Update this image's data with data from the canvas.
      this.data = context.getImageData(
        0,
        0,
        this.width,
        this.height
      ).data;
      
      // Continuously repaint the map, resulting
      // in the smooth animation of the dot.
      map.triggerRepaint();
      
      // Return `true` to let the map know that the image was updated.
      return true;
    }
    };

然后我像这样将点添加到 mapbox：

    dot_red = pulsingDot;
    dot_red.bgcolor = '#FF0000';
    map.addImage(image_red, dot_red, { pixelRatio: 2 });
    ...
    
    dot_green = pulsingDot;
    dot_green.bgcolor = '#00FF00';
    map.addImage(image_green, dot_green, { pixelRatio: 2 });
    ...

但是当我这样做时，所有点的颜色都相同。这只是一个例子，一般来说，我希望能够将任何参数添加到 pulsingDot 并在地图上绘制单个脉冲点（颜色、闪烁速度、大小等等......）。

谢谢和最好的问候， 安德烈亚斯

Answer 1

最终为我准备的解决方案是使用

Object.assign()

。这可能不是最优雅的方式，所以仍然欢迎更好的解决方案！

    dot_red = Object.assign({}, pulsingDot);
    dot_red.bgcolor = '#FF0000';
    map.addImage(image_red, dot_red, { pixelRatio: 2 });
    
    dot_green = Object.assign({}, pulsingDot);
    dot_green.bgcolor = '#00FF00';
    map.addImage(image_green, dot_green, { pixelRatio: 2 });