向地图框图钉添加“闪烁”效果

Question

我正在尝试向所有新的图钉添加“闪烁”动画，如本示例中所示https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/

想法：1.新图钉出现在地图上2.显示眨眼动画一秒钟3.静态图钉仍在地图上

我的尝试：我试图重做上面的解决方案。但是是同时显示并停止了地图上所有图钉的动画，我无法单独控制它。

这是我的代码草案，但我相信我绝对没有以正确的方式进行操作Ж

  var index = 0;
        var ids = 0;
        var animations = [];

        var pulsingDot = {
                width: size,
                height: size,
                data: new Uint8Array(size * size * 4),

                // get rendering context for the map canvas when layer is added to the map
                onAdd: function () {
                    var canvas = document.createElement('canvas');
                    canvas.width = this.width;
                    canvas.height = this.height;
                    this.context = canvas.getContext('2d');

                    ids++;

                    this.id = ids;
                    animations[this.id] = -1;
                },

                // called once before every frame where the icon will be used
                render: function (x) {
                    debugger
                    var duration = 1000;
                    var t = (performance.now() % duration) / duration;

                    var radius = (size / 2) * 0.3;
                    var outerRadius = (size / 2) * 0.7 * t + radius;
                    var context = this.context;

                    if(animations[this.id] == 1){
                        outerRadius = (size / 2) * 0.7 + radius;
                    }

                    console.log(outerRadius, t)

                    // draw 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, 200, 200,' + (1 - t) + ')';


                    if (animations[this.id] == 1) {
                        context.fillStyle = 'rgba(255, 200, 200, 0)';
                    }

                    context.fill();

                    // draw inner circle
                    context.beginPath();
                    context.arc(
                        this.width / 2,
                        this.height / 2,
                        radius,
                        0,
                        Math.PI * 2
                    );
                    context.fillStyle = 'rgba(255, 100, 100, 1)';
                    context.strokeStyle = 'white';
                    context.lineWidth = 2 + 4 * (1 - t);
                    context.fill();
                    context.stroke();

                    // 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

                    if(animations[this.id] != 2){
                        map.triggerRepaint();
                    }
                    else
                    {
                        return false;
                    }

                    if (animations[this.id] == -1 && outerRadius > 45) {

                        animations[this.id] = 0;
                    }
                    else if (animations[this.id] == 0 && outerRadius > 45) {

                        animations[this.id] = 1;
                    }
                    else if (animations[this.id] == 1) {
                        animations[this.id] = 2;
                    }




                    // return `true` to let the map know that the image was updated
                    return true;
                }
            };

Answer 1

如果所有新引脚都在相同的source中，并在视觉上添加了相同的layer，则这是预期的行为。要将不同的视觉行为应用于要素表示的点，您将需要将这些点添加为单独的源，每个源都有各自的图层，或者需要为源中的每个要素添加唯一的ID属性，以便相应的层可以使用[C0 ]将所需的视觉样式应用于每个点。

由于您在原始帖子中共享的代码并未显示如何使用源和图层将脉动点图标实际添加到地图，因此，如果可以创建最小的filter来显示您的行为，这将很有帮助。描述一些测试点。