在leafletjs中绘制140K点

Question

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

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

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

Answer 1

您有两个常用选项：

• 在基于画布的图层中显示您的点，例如使用圆圈标记并强制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点数肯定会使您的浏览器崩溃。

Answer 2

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

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