Question

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

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

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

Answer 1

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

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

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仍会跟踪鼠标位置和相关事件，并触发圆圈标记上的相应事件，这样您仍然可以收听此类事件（如鼠标点击等）。

以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，因此性能在用户计算机上有所不同。

Answer 5

您可以签出标记聚类，它可以聚簇您的地图，直到您放大获取详细信息为止。我目前正在加载房地产信息，并且似乎可以解决超过300000个放置在地图上的问题。

https://github.com/Leaflet/Leaflet.markercluster

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

5 个答案: