Leaflet中标记或点的大型数据集 [英] 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.

在您的情况下，一个简单的解决方法是使用 Circle Markers并将它们呈现在画布上(例如使用地图 preferCanvas 选项，或者使用特定的 canvas 渲染器 作为 <每个圆形标记的 href="http://leafletjs.com/reference-1.0.3.html#path-renderer" rel="noreferrer">renderer 选项).这就是谷歌地图默认的工作方式:它的标记实际上是在画布上绘制的.

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);

使用此解决方案，每个圆形标记不再是一个单独的 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 仍会跟踪鼠标位置和相关事件，并在您的 Circle Markers 上触发相应事件，以便您仍然可以监听此类事件(如鼠标单击等).

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.).

10 万分的演示:https://jsfiddle.net/sgu5dc0k/

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