Leaflet-CanvasLayer：如何在拖动地图时使动画功能正确移动？

Question

尝试使用以下扩展在Bing TileLayer顶部添加Canvas图层。除此之外，我想使用<h3>Login works</h3>对画布绘图进行动画处理。 问题在于，似乎在拖动时，该点的移动超出了其应有的移动能力（参见视频）。但是，在移动结束时，它又回到了正确的位置。

我尝试了不同的方法，要么继承CanvasLayer并覆盖render（）要么设置一个委托，结果总是相同的。

这是代码的相关部分：

RequestAnimationFrame

尝试了扩展：

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

尚未尝试：

• Leaflet-Fullcanvas

我感觉这是由于拖动事件或坐标平移（// 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)); } ）处理不当，但不知道为什么。 在Leaflet.CanvasLayer可用的示例中，拖动动画地图似乎效果很好。 知道此代码有什么问题吗？谢谢您的帮助！

修改

查看评论：如下替换了通话：

latLngToContainerPoint

现在，点已正确移动。但是，当我松开按钮时，它现在会移动到相对于容器的位置，即窗口边界的距离相同，但是坐标错误（地图上的位置错误）。

如果我现在这样做：

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

平移时，层点（红色）正确移动，但随后移动到错误的位置。平移时容器点（蓝色）移动太多，但随后又移回正确的位置...：（

Answer 1

游戏有点晚了，但是切换到L.canvasOverlay（）对我有用。这是图书馆运作的一个很好的例子

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