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

Question

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

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

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

Answer 1

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

在您的情况下,一个简单的解决方法是使用圆形标记并在Canvas上渲染它们(例如使用地图preferCanvas选项,或者使用您为每个圆形标记传递的特定画布渲染器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

[2019]

也许有点太晚了，但佩德罗·文森特的答案似乎是最好的选择。Leaflet.glify（https://github.com/robertleeplummerjr/Leaflet.glify）很好，但除了在地图上创建点、形状和线条之外，您没有其他选择。（尚无自定义。）PixiOverlay 可与本机/自定义标记配合使用。它还具有很好的可视化效果（动画、缩放等）。它也适用于 IE 11。对我来说，如果您要处理大量标记，那么它是必须的。去尝试一下https://github.com/manubb/Leaflet.PixiOverlay

PS Glify 和 PixiOverlay 都使用 WebGL，因此性能因用户计算机而异。

Answer 3

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

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

R 版本非常简单。

Answer 4

我使用官方Leaflet插件PixiOverlay得到了很好的结果。 https://github.com/manubb/Leaflet.PixiOverlay