javascript - 传单 - CanvasLayer : how to get animated features to move correctly when dragging the map?

Question

尝试使用下面的扩展在 Bing TileLayer 之上添加 Canvas 层。除此之外，我想使用 RequestAnimationFrame 为 Canvas 绘图设置动画。 问题在于，拖动时，该点的移动速度似乎超出了应有的范围(参见视频)。然而，移动结束后，它又回到了正确的位置。

我尝试了不同的方法，要么继承 CanvasLayer 并重写 render() 要么设置委托(delegate)，总是相同的结果。

这是代码的相关部分:

// layer creation (TypeScript)
this.mapCanvasLayer = new L.CanvasLayer();
this.mapCanvasLayer.delegate(this).addTo(map);

// L.canvasLayer()
//     .delegate(this) // -- if we do not inherit from L.CanvasLayer we can setup a delegate to receive events from L.CanvasLayer
//     .addTo(map);

// drawing and animation (TypeScript)
public onDrawLayer(info) {
    // quick test, this just draws a red dot that blinks
    this.info = info;
    var data = [[0,0]];
    var ctx = info.canvas.getContext('2d');
    ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);
    ctx.fillStyle = "rgba(255,0,0," + this.i/10 + ")";
    for (var i = 0; i < data.length; i++) {
        var d = data[i];
        if (info.bounds.contains([d[0], d[1]])) {
            var dot = info.layer._map.latLngToContainerPoint([d[0], d[1]]);
            ctx.beginPath();
            ctx.arc(dot.x, dot.y, 3, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();
        }
    }
};

public animate() {
    // make the point blink
    if (this.up) {
        this.i++;
        if (this.i >= 10) this.up = false;
    }
    else
    {
        this.i--;
        if (this.i <= 1) this.up = true;
    }

    // animate:
    this.mapCanvasLayer.drawLayer();
    window.requestAnimationFrame(this.animate.bind(this));
}

尝试过的扩展:

• gLayers.Leaflet//例子就是这个
• Leaflet.CanvasLayer

尚未尝试:

• Leaflet-Fullcanvas

我感觉这是由于拖动事件或坐标转换(latLngToContainerPoint)没有得到正确处理，但不知道为什么。 在 Leaflet.CanvasLayer 可用的示例中拖动动画 map 似乎效果很好。 知道这段代码有什么问题吗？感谢您的帮助!

编辑

查看评论:替换了如下调用:

// var dot = info.layer._map.latLngToContainerPoint([d[0], d[1]]);
var dot = info.layer._map.latLngToLayerPoint([d[0], d[1]]);

现在，该点移动正确了。但是，当我释放按钮时，它现在会移动到相对于容器的位置，即窗口边框的距离相同，但坐标错误( map 上的位置错误)。

如果我现在这样做:

public onDrawLayer(info) {
    this.info = info;
    var ctx = info.canvas.getContext('2d');
    ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);

    const fillStyleLayer     = "rgba(255,0,0,1)"; // red: layer
    const fillStyleContainer = "rgba(0,0,255,1)"; // blue: container

    var layerPoint     = info.layer._map.latLngToLayerPoint([0,0]);
    var containerPoint = info.layer._map.latLngToContainerPoint([0,0]);

    // this.dot = (this.dragging)
    //     ? info.layer._map.latLngToLayerPoint([0,0]);
    //     : info.layer._map.latLngToContainerPoint([0,0]);

    ctx.fillStyle = fillStyleLayer;
    ctx.beginPath();
    ctx.arc(layerPoint.x, layerPoint.y, 3, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();

    ctx.fillStyle = fillStyleContainer;
    ctx.beginPath();
    ctx.arc(containerPoint.x, containerPoint.y, 3, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
};

public animate() {
    this.mapCanvasLayer.drawLayer();
    window.requestAnimationFrame(this.animate.bind(this));
}

平移时图层点(红色)移动正确，但随后移动到错误的位置。容器点(蓝色)在平移时移动过多，但随后又移回正确位置...:(

Answer 1

游戏有点晚了，但切换到 L.canvasOverlay() 对我来说很有效。这是库的实际应用的一个很好的示例

http://bl.ocks.org/Sumbera/11114288