Large dataset of markers or dots in Leaflet

问题

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.

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.

回答1:

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

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

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.

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

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

回答2:

You should check https://github.com/robertleeplummerjr/Leaflet.glify. It provides way of rendering leaflet points and polygons using web gl, allowing to scale more easily.

It's also available for the people that uses R to produce their leaflet: https://github.com/tim-salabim/leaflet.glify

The R version is super easy.

回答3:

I got good results with the official Leaflet plugin PixiOverlay. https://github.com/manubb/Leaflet.PixiOverlay

回答4:

[2019]

Maybe a little too late but Pedro Vicente's answer seems to be the best option out there. 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 and PixiOverlay are both utilizing WebGL so performance varies on your users' computer.

来源：https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet

标签

leaflet

markers