Comment changer l'ordre de superposition des volets de la carte Leaflet Map (z-index)?


16

Leaflet maintient que les éléments des volets Carte contiennent toutes les couches ajoutées à la carte. La différence entre de nombreux volets de la carte est strictement l'ordre de z-index de la superposition.

Je voudrais utiliser une combinaison de couches lvector.CartoDB, qui sont essentiellement des overlayPanecouches, avec TileLayer, telles que GeoIQ Acetate-bg et des étiquettes.

Voici l'ordre des éléments au fur et à mesure qu'ils s'ajoutent à la carte:

tileLayer1 = new L.TileLayer();
map.add(tileLayer1);  // add first layer to map

cartoDBLayer1 = new lvector.CartoDB();
cartoDBLayer.setMap(map); // add second layer to map

tileLayer2 = new L.TileLayer();
map.add(tileLayer2);  // add third layer to map

Ce qui renvoie est une carte avec des couches dans cet ordre:

tileLayer1,tileLayer2,cartoDBLayer1

tileLayer1et tileLayer2sont situés dans le HTMLElement: TilePaneet cartoDBLayer1est en HTMLElement: overlayPane.

Existe-t-il un moyen de forcer cartoDBLayer1le rendu dans le TilePane, de sorte qu'il tombe dans l'ordre du z-index dans lequel il est ajouté à la carte ...

c'est à dire

z-index[0]:tileLayer1
z-index[1]:cartoDBLayer1
z-index[2]:tileLayer2 

Réponses:


17

Avez-vous vu ce problème créer un référentiel github LeafLet:

https://github.com/Leaflet/Leaflet/issues/167

Essayez d'utiliser

 addLayer(layer,true);

pour ajouter une couche de tuiles au fond. Je crains que ce soit tout ce qu'il y a et ce deuxième argument optionnel n'est même pas documenté.

Mise à jour sept 2014

Leaflet prend désormais en charge la définition du zIndex . Merci à @knutole dans les commentaires de m'avoir prévenu.


1
+1 pour avoir mentionné une fonctionnalité non documentée ici, la documentant ainsi. :)
fgysin réintègre Monica

7
Il y a maintenant une layer.setZIndex(zIndex)fonction disponible.
knutole

5
Merci - layer.setZIndex(99)ne semble pas fonctionner pour moi avec la symbologie vectorielle (traits linéaires et polygonaux), mais l'utilisation a layer.bringToFront()fait l'affaire.
rien n'est nécessaire du
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.