How to load 100000 pieces of data in leaflet

As a GIS developer , You must have encountered this kind of problem in your work , According to business design , You need to add... To the map 1 ten thousand + Data , Data or points 、 Or a thread 、 Or face . But either way , When you add to 5000 Stripe time , The map operation will cause obvious jamming . When you add more than 1 Ten thousand times , Data loading will get stuck , The browser is stuck , After the map is loaded , Every time you move the map , Have to wait patiently for a few seconds .

This interactive experience , Users can't accept it , There are usually two solutions , One is to do in-depth user needs analysis , See what users want to see when they want to load so much data at once , This thing I want to see , Whether it can be realized through other technical methods . The other is the hard hitting technique , Study how to improve map performance . We will only discuss the second case today .

canvas Rendering mode

leaflet Two rendering modes are supported ,svg and canvas, The default is svg Rendering , This allows compatibility with lower versions of IE browser .canvas Rendering requires IE9+, Or Google 、 Firefox's advanced browser .canvas Than svg Good performance , I did a simple test myself ,svg Pattern loading 5000 A Caton condition that occurs when a picture is marked , use canvas Pattern , load 10 Million data .

Here's how to switch to canvas Pattern , There are two steps ：

One , When initializing the map , Set up map Of preferCanvas The attribute is true, The code is as follows ：

var map = L.map('map', {
    
    center: [39.905963, 116.390813],
    zoom: 13,    
    preferCanvas: true
});

This setting only applies to inheritance Path The vector layer of class is valid , Include dots （CircleMarker）、 Line （Polyline）、 Noodles （Polygon）、 round （Circle）、 rectangular （Rectangle）. Mark for picture （Marker） It doesn't work .

Two 、 With plug-ins Leaflet.Canvas-Markers, promote Marker Display performance of . plug-in unit git Address ：https://github.com/eJuke/Leaflet.Canvas-Markers

Leaflet.Canvas-Markers plug-in unit

Leaflet.Canvas-Markers The plug-in provides a L.canvasIconLayer class , This class is a layer , take Marker When added to this layer , This layer will be displayed as canvas Mode rendering Marker Picture in .

How to use

stay html Introduce plug-in in

<script src="leaflet.canvas-markers.js"></script>

establish canvasIconLayer Layers , Add layers to the map , Add picture tags to layers .

//  Create Layer , Add to  map
var ciLayer = L.canvasIconLayer({
    }).addTo(map);

//  Definition  Marker
var marker =  L.marker([58.5578, 29.0087], {
    icon: icon});

//  hold  Marker  Add to layer 
ciLayer.addMarker(marker);

Be careful

There is a problem with this plugin , When the map is zoomed , The added data is not scaled synchronously , Instead, wait until the zoom is complete , Then zoom . It feels like scaling , The data is floating .

But someone has proposed a solution to this problem , And solved （ link ）, Just the code has not been merged . But it doesn't matter , We can use the code that has been solved （ link ）

The effect after the solution ：

Complete code

Online example

Complete code

summary

1. leaflet Two rendering modes are supported ,svg and canvas,canvas The display performance of is obviously better than svg.
2. IE9 Previous versions of browsers do not support canvas Mode rendering .
3. The default is svg Mode rendering , To manually switch to canvas The way .
4. The rendering mode is set to canvas after , Loading vector graphics improves performance , Loading picture tags is still inefficient .
5. adopt Leaflet.Canvas-Markers Plug in to improve the display efficiency of image tags .
6. Leaflet.Canvas-Markers The plug-in has bug, Need to be in github This problem has been solved on bug Version of .

---

Original address ：http://gisarmory.xyz/blog/index.html?blog=leaflet100ThousandData

Focus on 《GIS Zeughaus 》 official account , The first time to get more high quality GIS article .

This article adopts Creative Commons signature - Noncommercial use - Share in the same way 4.0 International licensing agreement Licensing . Welcome to reprint 、 Use 、 Re release , But be sure to keep the signature of the article 《GIS Zeughaus 》（ Include links ： http://gisarmory.xyz/blog/）, Not for commercial purposes , Based on this revised work must be released with the same license .