传单中标记或点的大型数据集 [英] Large dataset of markers or dots in Leaflet

问题描述

我想在传单地图上渲染大约10.000个标记或点.我已经按常规方式进行了操作，但发现它比Google Maps慢得多.我正在寻找一种呈现多个元素而又不会出现性能问题的方法.

I want to render about 10.000 markers or dots on a leaflet map. I already did it the regular way and I found it is way slower compared to Google Maps. I'm looking for a way to render multiple elements without getting the performance issues.

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

Is there a way to do this with Leaflet?

更新:我不想用无法处理事件的亮点进行绘制.我实际上想用不同的颜色和事件来绘制标记.

Update: I don't want to plot with bright dots that can't handle events. I want to actually paint markers with different colors and events.

推荐答案

性能问题是由于每个标记都是一个单独的DOM元素.浏览器难以渲染成千上万的浏览器.

The performance issue is due to the fact that each marker is an individual DOM element. Browsers struggle in rendering thousands of them.

在您的情况下，一个简单的解决方法是改为使用圆形标记并将它们渲染在画布上(例如，使用地图 preferCanvas 选项，或使用您作为画布渲染器 ://leafletjs.com/reference-1.0.3.html#path-renderer"rel =" noreferrer> renderer 选项).默认情况下，这就是Google Maps的工作方式:其标记实际上是在Canvas上绘制的.

In your case, an easy workaround would be instead to use 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 option for each of your Circle Marker). That is how Google Maps works by default: its markers are actually drawn on a 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上，这对于浏览器来说更容易处理.

With this solution, each Circle Marker is no longer an individual DOM element, but instead is drawn by Leaflet onto a single Canvas, which is much easier to handle for the browser.

此外，Leaflet仍会跟踪鼠标位置和相关事件并触发您的圆形标记上的相应事件，以便您仍可以收听此类事件(例如鼠标单击等).

Furthermore, Leaflet still tracks the mouse position and related events and triggers the corresponding events on your Circle Markers, so that you can still listen to such events (like mouse click, etc.).

得分为100k的演示: https://jsfiddle.net/sgu5dc0k/

Demo with 100k points: https://jsfiddle.net/sgu5dc0k/

这篇关于传单中标记或点的大型数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！