Performance 向传单地图添加多个圆圈时性能低下

在尝试向画布渲染层添加大量点时，我在使用传单时遇到问题

我正在使用与以下代码类似的代码创建+85.000点：

首先，我加载一个包含所有点的四叉树，单个点是一个包含其他特定内容的类，但是关于传单内容，我们有以下代码：

var myCanvasRenderer = L.canvas({ paneName });

var geojsonMarkerOptions = { fillColor: "#AFC5CA", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8, stroke: false, renderer: myCanvasRenderer, pane: paneName }

point.circle = L.circle(latlng, 0.5, myHandler.geojsonMarkerOptions);

然后将该点添加到四叉树。 移动贴图时，我将处理事件以在视口内绘制点，然后调用以下方法绘制点本身：

circle.addTo(myLayer);

我把画的分数限制在20000分以内。当达到此限制并使用console.time测量时间时停止进程

使用circle.addTo调用，该过程大约需要80秒才能得出20000点。 在对该电话进行评论时，该过程大约需要8秒钟才能“得出”20000分。（“画”因为不是真的画）

• 所有的点都必须画出来，因此涉及聚类点的解决方案不是一个选项
• 我必须有一个绘制圆的处理程序，因为稍后在应用程序中我需要显示/隐藏一些点或更改它们的颜色

如何加快绘制点的速度？ 传单库中是否有类似于“bulkAdd”的方法

---

提前感谢您的帮助

很可能发生的情况是，您的圆圈实际上并没有绘制在指定的画布上

您可以使用浏览器DOM检查器进行检查

在传单1.x.x中，指定的半径为

半径

选项，而不是第二个参数：

L.circle（[50.5,30.5]，{radius:200}）；

---

因此，在您的代码中，第二个参数

0.5

无效，而第三个参数（

myHandler.geojsonMarkerOptions

）也无效，导致您没有使用画布。

您是否尝试过

preferCanvas

映射选项？您好，ghybs，我没有尝试该选项，因为我已经在传递给圆的geojsonMarkerOptions的renderer属性中设置画布。因此，这些圆已经在画布上绘制，而不是在SVG渲染器中。您好，我已经更新了代码，不使用不推荐的方法，而只使用新方法，因此我将radius:0.5参数传递给了我的geojsonMarkerOptions，并仅使用两个参数调用了构造函数。但是，这并没有解决问题，因为绘制20K点仍然需要大约80秒。请确保正确使用画布，例如如上所述使用DOM检查器。我这里有一个100k圆圈标记的例子：它在几秒钟内加载到我的机器上。用圆圈代替它们可以提供类似的性能。我已经检查过了，我们正确地使用了画布渲染器。没有与每个圆关联的DOM实体。我已经检查了你建议的问题的答案，还检查了你的小提琴示例：。如果你缩小同一个例子，你会看到地图挂起，无法回答100K点。i、 它只适用于100K点，因为它不会渲染它们，因为它们在视口之外。你应该对此进行调查。我一点也不介意在屏幕上渲染整个世界的10万个点。