在leafletjs中绘制140K点

Posted 2023-05-06

【中文标题】在leafletjs中绘制140K点

【英文标题】：Plotting 140K points in leafletjs

【发布时间】：2021-07-02 08:23:02

【问题描述】：

我是leafletjs 的新手。一直在研究 cesiumjs，我们现在正在尝试传单。切换的主要原因是看是否存在巨大的性能差异。

在 Cesium 中，我绘制了一组原始点。的最有效方法是什么？使用标记还是创建单独的小圆圈？

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

【参考方案1】：

您有 2 个常用选项：

在基于 Canvas 的图层中显示您的点，例如使用圆形标记并强制使用 rendering them on a Canvas 而不是 SVG（另请参阅 Leaflet MaskCanvas plugin）。圆形标记，即使在画布上，仍会发出事件，因此您可以检测到 "click" 等。

使用clustering plugin，例如您提到的Leaflet.markercluster plugin。它可以处理您的 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 点肯定会使您的浏览器崩溃。

【讨论】：

谢谢...我得研究一下聚类。我想知道我是否可以基于属性进行聚类。所以在我们的例子中，140K 点可能包含 1/12 个不同的物种。我希望集群按物种分类。我还没有深入研究集群代码，但如果这显然不可能，请告诉我

嗯，这完全取决于您所说的“按物种集群”的意思……显然，您可以创建与物种一样多的集群组，但不同物种的集群可能会重叠。如果您需要进一步的帮助，请随时提出新问题。

对于寻找此答案中给出的第一个选项的替代方案的任何人，请尝试以下操作：***.com/questions/43015854/… 它不适用于 140K 点，但可以使用大约 20K 点，这将使用常规标记杀死浏览器。此替代方案使用 CircleMarkers。

【参考方案2】：

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

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

【讨论】：

MCG 的数据与 repo 上的演示相差甚远。没有看到已经使用的代码，我们只能假设它设置不正确。另请参阅Leaflet.makercluster #584 中的测量值。

确实没有提供研究论文中的代码，但我们不能假设任何事情，因为 repo 上的演示和您链接的测量只有 50k 标记。很快，我将拥有 100k、200k 和 500k 标记的数据。我将在此线程中发布我的结果。

我的意思是，您显示的表格中 50k 的测量值与您在 50k 演示中已经可以体验到的测量值相去甚远。如果有这么大的差距，那么测试是如何设置的很可疑。

@ghybs 你是对的，他们需要做错事，因为我试过了，Leaflet.markercluster 能够渲染 >100k 标记。但是， Leaflet.markercluster 的初始加载太慢了。我编辑了我的答案并创建了一个 github repo，您可以使用它在本地比较两个库的性能。