在leafletjs中绘制14万个点

Question

我刚接触leafletjs。之前一直在使用cesiumjs，现在我们正在尝试使用leaflet。转换的主要原因是想看看性能上是否有巨大的差异。

在Cesium中，我有一个基本点的集合进行绘制。在使用leafletjs时，最有效的绘制140K个点的方法是使用标记还是创建许多小圆？

我也在考虑使用聚类插件 (http://leafletjs.com/2012/08/20/guest-post-markerclusterer-0-1-released.html)，请分享任何关于性能方面的想法。

- user4757355

Answer 1

您有两个常见的选择：

• 在基于Canvas的图层中显示您的点，例如使用Circle Markers，并强制将它们渲染到Canvas上而不是SVG（还可以参考Leaflet MaskCanvas插件）。即使在画布上，Circle Markers仍然会发出事件，因此您可以检测到“click”等。

• 使用聚合插件，例如您提到的Leaflet.markercluster插件。它可以处理您的140k个点，取决于客户端计算机的性能（请参阅https://github.com/Leaflet/Leaflet.markercluster#handling-lots-of-markers和演示http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.50000.html，其中包含50k个点，但请注意演示使用旧版的插件，而当前版本更快）。

试图在没有Canvas或聚合的情况下显示您的140k个点将肯定会导致浏览器崩溃。

- ghybs

---

谢谢...我得学习一下聚类。我想知道是否可以基于属性进行聚类。在我们的情况下，这140K个点可能包含1/12种不同的物种。我希望聚类是按照物种来分的。我还没有深入研究过聚类代码，但如果明显不可能，请告诉我。 - user4757355

这完全取决于你所说的“按物种聚类”是什么意思...显然，你可以根据每个物种创建许多clusterGroups，但不同物种的簇可能会重叠。如果需要进一步帮助，请随时提出新问题。 - ghybs

对于寻找第一个选项的替代方案的任何人，可以尝试这个：https://dev59.com/wlgQ5IYBdhLWcg3wRR5j#43019740。它不能处理多达140K点，但是用大约20K点就可以了，在常规标记下会导致浏览器崩溃。这个替代方案使用圆形标记。 - AFP_555

Answer 2

如果您想渲染超过100k个标记，可以使用Supercluster库，因为Leaflet.markercluster加载超过100k个标记可能需要超过30秒的时间。

我创建了一个Github repo 来比较Leaflet.markercluster和Supercluster的初始加载。

- Andrej Gajdos

---

MCG的数据与存储库中的演示相差甚远。如果没有看到使用的代码，我们只能假设其设置不正确。请参见Leaflet.makercluster＃584中的测量结果。 - ghybs

虽然研究论文中的代码并未提供，但我们无法做出任何假设，因为存储库上的演示和你提供的测量结果仅有50K标记。很快我将拥有包含100K、200K和500K标记的数据，并会在此帖子中发布我的结果。 - Andrej Gajdos

我的意思是，你展示的表格中50k的测量值与你在50k演示中所体验到的相差甚远。如果存在如此大的差距，那么测试的设置就令人怀疑。 - ghybs

@ghybs 你说得对，他们需要做错什么，因为我试过了，Leaflet.markercluster 能够渲染超过100k个标记。然而，Leaflet.markercluster 的初始加载速度太慢了。我编辑了我的答案，并创建了一个 Github repo，你可以使用它来比较这两个库的性能。 - Andrej Gajdos