在 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 的图层中显示您的点，例如使用圆圈标记和强制 rendering them on a Canvas instead of SVG (see also Leaflet MaskCanvas plugin)。圆形标记，即使在 canvas 上，仍会发出事件，因此您可以检测到 "click" 等

• 使用clustering plugin, like Leaflet.markercluster plugin that you mention for exampe. It can handle your 140k points, depending on the client's computer performance (see https://github.com/Leaflet/Leaflet.markercluster#handling-lots-of-markers and demo http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.50000.html50k点，但注意demo使用的是老版本的插件，而现在的版本速度更快）。

在没有 Canvas 或集群的情况下尝试显示您的 140k 点数肯定会使您的浏览器崩溃。

Answer 2

如果要渲染超过 100k 的标记，可以使用 Supercluster library, because Leaflet.markercluster 加载 >100k 的标记可能需要 30 多秒。

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