Grand jeu de données de marqueurs ou de points dans la brochure

Question

Je souhaite afficher environ 10 000 marqueurs ou points sur une carte de brochure. Je l'ai déjà fait de la manière habituelle et j'ai trouvé que c'était beaucoup plus lent comparé à Google Maps. Je cherche un moyen de rendre plusieurs éléments sans avoir les problèmes de performance.

Existe-t-il un moyen de le faire avec Leaflet?

Mise à jour: Je ne veux pas tracer avec des points lumineux qui ne peuvent pas gérer les événements. Je veux réellement peindre des marqueurs avec des couleurs et des événements différents.

Answer 1

Le problème de performance est dû au fait que chaque marqueur est un élément DOM individuel. Les navigateurs ont du mal à en rendre des milliers.

Dans votre cas, une solution facile serait au lieu d'utiliser Circle Markers et les ont rendus sur une toile (par exemple en utilisant l'option carte preferCanvas, ou avec un canvas renderer spécifique que vous passez en option renderer pour chacun de vos marqueurs Cercle). C'est ainsi que fonctionne Google Maps par défaut: ses marqueurs sont en fait dessinés sur un canevas.

var map = L.map('map', { 
    preferCanvas: true 
}); 
var circleMarker = L.circleMarker(latLng, { 
    color: '#3388ff' 
}).addTo(map); 

ou

var map = L.map('map'); 
var myRenderer = L.canvas({ padding: 0.5 }); 
var circleMarker = L.circleMarker(latLng, { 
    renderer: myRenderer, 
    color: '#3388ff' 
}).addTo(map); 

Avec cette solution, chaque marqueur Cercle n'est plus un élément DOM individuel, mais au lieu est dessiné par Dépliant sur un unique toile, ce qui est beaucoup plus facile à gérer pour le navigateur. En outre, Leaflet suit toujours la position de la souris et les événements associés et déclenche les événements correspondants sur vos marqueurs de cercle, de sorte que vous pouvez toujours écouter de tels événements (comme un clic de souris, etc.).

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