web-dev-qa-db-fra.com

Grand ensemble de données de marqueurs ou de points dans Leaflet

Je veux afficher environ 10 000 marqueurs ou points sur une carte de dépliant. Je l'ai déjà fait de manière régulière et j'ai trouvé que c'était beaucoup plus lent que Google Maps. Je cherche un moyen de rendre plusieurs éléments sans obtenir les problèmes de performances.

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 différentes couleurs et événements.

leafletmarkers
17
AFP_555

Le problème de performances 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 de contournement simple consisterait à utiliser Circle Markers et à les afficher sur un canevas (par exemple en utilisant l'option map preferCanvas , ou avec une option spécifique rendu de toile que vous passez en tant qu'option renderer pour chacun de vos marqueurs de cercle). C'est ainsi que Google Maps fonctionne 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 de cercle n'est plus un élément DOM individuel, mais est plutôt dessiné par Leaflet sur un seul canevas, ce qui est beaucoup plus facile à gérer pour le navigateur.

De plus, 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, afin que vous puissiez toujours écouter de tels événements (comme un clic de souris, etc.).

Démo avec 100k points: https://jsfiddle.net/sgu5dc0k/

51
ghybs

Vous devez vérifier https://github.com/robertleeplummerjr/Leaflet.glify . Il permet d'afficher les points et les polygones des dépliants à l'aide de web gl, ce qui permet de les mettre à l'échelle plus facilement.

Il est également disponible pour les personnes qui utilisent R pour produire leur brochure: https://github.com/tim-salabim/leaflet.glify

La version R est super facile.

3
Bastien

J'ai obtenu de bons résultats avec le plugin Leaflet officiel PixiOverlay. https://github.com/manubb/Leaflet.PixiOverlay

2
Pedro Vicente

[2019]

Peut-être un peu trop tard, mais la réponse de Pedro Vicente semble être la meilleure option. Leaflet.glify ( https://github.com/robertleeplummerjr/Leaflet.glify .) Est bon mais vous n'avez pas d'autres options que de créer un point, des formes et une ligne sur votre carte. (pas encore de personnalisation.) PixiOverlay fonctionne avec des marqueurs natifs/personnalisés. Il a également une visualisation agréable (animation, mise à l'échelle, etc.). Il fonctionne également en IE 11. Pour moi, c'est un must si vous avez affaire à des tonnes de marqueurs. Allez l'essayer - https://github.com/manubb/Leaflet.PixiOverlay

P.S Glify et PixiOverlay utilisent tous deux WebGL, les performances varient donc sur l'ordinateur de vos utilisateurs.

0
Lex Dacs