leaflet - 在leafletjs中绘制140K点

Question

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

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

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

Answer 1

您有 2 个常用选项：

• 在基于 Canvas 的图层中显示您的点，例如使用圆形标记并强制在 Canvas 而不是 SVG 上渲染它们（另请参阅Leaflet MaskCanvas 插件）。圆形标记，即使在画布上，仍会发出事件，因此您可以检测"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 点肯定会使您的浏览器崩溃。

Answer 2

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

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