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

Question

我想在传单地图上渲染大约 10.000 个标记或点。我已经按照常规方式完成了，我发现它比 Google 地图慢得多。我正在寻找一种在不出现性能问题的情况下呈现多个元素的方法。

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

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

Answer 1

性能问题是由于每个标记都是一个单独的 DOM 元素。浏览器在渲染数以千计的页面时遇到困难。

在您的情况下，一个简单的解决方法是为每个圆圈标记使用 Circle Markers and have them rendered on a Canvas (e.g. using map preferCanvas option, or with a specific canvas renderer that you pass as renderer 选项）。这就是 Google 地图默认的工作方式：它的标记实际上绘制在 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.) is good but you don't have options other than create a dot, shapes and line on your map. (no customization yet.) PixiOverlay works with native/custom markers. It also has nice visualization (animation,scaling,etc..) It also works in IE 11. For me it's a must if you're dealing with tons of markers. go try it out https://github.com/manubb/Leaflet.PixiOverlay

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

Answer 5

您可以查看标记聚类，它可以聚类您的地图，直到您放大以获得细节。我目前正在加载房地产信息，它似乎解决了在地图上放置超过 300000 个位置的问题。

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

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

Large dataset of markers or dots in Leaflet

leaflet

markers