How to load 100,000 pieces of data in leaflet

As a GIS developer, you must have encountered this kind of problem in your work. According to the business design, you need to add 10,000+ pieces of data to the map. The data is either a point, a line, or a surface. But no matter what, when you add to 5000, the map operation will appear obvious lag. When you add more than 10,000 items, the data loading will freeze, and the browser will be stuck. After the map is loaded, every time you move the map, you have to wait patiently for a few seconds.

This kind of interactive experience is definitely not acceptable to users. There are usually two solutions. One is to do in-depth user demand analysis to see what the user wants to load so much data at once to see, what they want to see, Can it be achieved through other technical means? The other is the deadlock technology, which is to study how to improve map performance. We will only discuss the second situation today.

canvas rendering

Leaflet supports two rendering methods, svg and canvas. The default is svg rendering, so that it can be compatible with lower versions of IE browsers. Canvas rendering requires IE9+, or higher version browsers of Google and Firefox. Canvas has better performance than svg. I did a simple test myself. The lag when loading 5000 image tags in svg mode will only appear when 100,000 pieces of data are loaded in canvas mode.

Here's how to completely switch to canvas mode, a total of two steps:

1. When initializing the map, set the preferCanvas property of the map to true, the code is as follows:

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

This setting is only valid for vector layers that inherit the Path class, including CircleMarker, Polyline, Polygon, Circle, and Rectangle. Marker has no effect on the picture.

2. Improve the display performance of Marker with the help of plug-in Leaflet.Canvas-Markers. Plug-in git address: https://github.com/eJuke/Leaflet.Canvas-Markers

Leaflet.Canvas-Markers 插件

Leaflet.Canvas-Markers plug-in provides a L.canvasIconLayerclass that is a layer, when Marker is added to this layer, this layer will be rendered in a canvas manner Marker pictures.

how to use

Introduce plugins in html

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

Create a canvasIconLayer layer, add the layer to the map, and add picture markers to the layer.

// 创建图层，添加到 map
var ciLayer = L.canvasIconLayer({
    
    }).addTo(map);

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

// 把 Marker 添加到图层
ciLayer.addMarker(marker);

note

The problem with this plugin is that when the map is zoomed, the added data will not be zoomed synchronously, but will wait until the zooming is completed before zooming. It feels like the data is floating when zooming.

However, someone has proposed a solution to this problem and solved it ( link ), but the code has not been merged. But it doesn’t matter, we can use the code that has been solved ( link )

After solving the effect:

Complete code

Online example

Complete code

to sum up

1. Leaflet supports two rendering methods, svg and canvas. The display performance of canvas is significantly better than svg.
2. Browsers before IE9 do not support canvas rendering.
3. The default is to render in svg mode, and you must manually switch to canvas mode.
4. After the rendering mode is set to canvas, the performance of loading vector graphics will be improved, and the efficiency of loading image tags is still low.
5. Improve the display efficiency of image markers through Leaflet.Canvas-Markers plug-in.
6. The Leaflet.Canvas-Markers plugin has a bug when zooming the map. You need to find a version that has resolved this bug on github.

---

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

Pay attention to the " GIS Weapon Library " public account and get more high-quality GIS articles in the first time.

This article uses Creative Commons Attribution - NonCommercial - ShareAlike 4.0 International License Agreement for licensing. Welcome to reprint, use, and republish, but be sure to keep the article's signature "GIS Weapon Library" (including link: http://gisarmory.xyz/blog/ ), and it must not be used for commercial purposes. The modified works based on this article must be the same License issuance.