Leaflet中的标记或点的大型数据集

Question

我想在传单地图上渲染大约10.000个标记或点。我已经按常规方式做了，我发现它比Google地图慢一些。我正在寻找一种方法来渲染多个元素而不会出现性能问题。

有没有办法用Leaflet做到这一点？

更新：我不想用无法处理事件的亮点绘图。我想用不同的颜色和事件绘制标记。

Answer 1

性能问题是由于每个标记都是单独的DOM元素。浏览器在渲染成千上万的时候很费劲。

在你的情况下，一个简单的解决方法是使用Circle Markers并在Canvas上渲染它们（例如使用地图preferCanvas选项，或者使用你传递给每个圆形标记的canvas renderer选项的特定renderer）。这就是Google Maps默认工作的方式：它的标记实际上是在Canvas上绘制的。

var map = L.map('map', {
    preferCanvas: true
});
var circleMarker = L.circleMarker(latLng, {
    color: '#3388ff'
}).addTo(map);

要么

var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5 });
var circleMarker = L.circleMarker(latLng, {
    renderer: myRenderer,
    color: '#3388ff'
}).addTo(map);

使用此解决方案，每个Circle Marker不再是单独的DOM元素，而是由Leaflet绘制到单个Canvas上，这对于浏览器来说更容易处理。

此外，Leaflet仍会跟踪鼠标位置和相关事件，并触发Circle Markers上的相应事件，这样您仍然可以收听此类事件（如鼠标点击等）。

有100k积分的演示：https://jsfiddle.net/sgu5dc0k/

Answer 2

你应该检查https://github.com/robertleeplummerjr/Leaflet.glify。它提供了使用web gl渲染传单点和多边形的方法，允许更容易地缩放。

它也适用于使用R制作传单的人：https://github.com/tim-salabim/leaflet.glify

R版非常容易。

Answer 3

我使用官方的Leaflet插件PixiOverlay取得了不错的成绩。 https://github.com/manubb/Leaflet.PixiOverlay

Answer 4

[2019]

也许有点太晚了但是Pedro Vicente的答案似乎是最好的选择。 Leaflet.glify（https://github.com/robertleeplummerjr/Leaflet.glify。）很不错，但除了在地图上创建点，形状和线条之外，您没有其他选项。 （尚无定制。）PixiOverlay适用于原生/自定义标记。它还有很好的可视化（动画，缩放等等）。它也可以在IE 11中运行。对我来说，如果你处理大量的标记，这是必须的。去尝试https://github.com/manubb/Leaflet.PixiOverlay

P.S Glify和PixiOverlay都在使用WebGL，因此性能因用户的计算机而异。