Couche de Commande en leaflet.js
Comment puis-je la force un nouveau calque ajouté à la carte en Dépliant d'être le premier sur le fond de carte?
Je ne pouvais pas trouver une méthode permettant de facilement changer l'ordre des couches, ce qui est une très SIG de base de la fonctionnalité. Ai-je raté quelque chose?
Vous devez vous connecter pour publier un commentaire.
Un Dépliant la carte se compose d'une collection de "Volets" dont l'affichage est commandé à l'aide de z-index. Chaque volet contient une collection de Couches par défaut volet ordre d'affichage est-à carreaux->ombres->superpositions->marqueurs->popups. Comme Etienne décrit, vous pouvez contrôler l'ordre d'affichage des Chemins dans les superpositions de volet en appelant
bringToFront()
oubringToBack()
.L.FeatureGroup
a également ces méthodes de sorte que vous pouvez changer l'ordre des groupes de superpositions à la fois si vous en avez besoin.Si vous souhaitez modifier l'ordre d'affichage de l'ensemble volet ensuite, il suffit de changer le z-index de la fenêtre à l'aide de CSS.
Si vous voulez ajouter un nouveau volet de Carte...eh bien, je ne suis pas sûr de la façon de le faire encore.
http://leafletjs.com/reference.html#map-panes
http://leafletjs.com/reference.html#featuregroup
Selon Brochure de l'API, vous pouvez utiliser
bringToFront
oubringToBack
sur toutes les couches apporte à ce calque vers le haut ou le bas de tous les de chemin de couches.Etienne
Pour un peu plus de détails, Bobby Sudekum mettre ensemble une fantastique démonstration montrant la manipulation du volet de z-index. - Je l'utiliser comme un point de départ de tous les temps.
Voici le code de la clé:
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane); var topLayer = L.mapbox.tileLayer('bobbysud.map-3inxc2p4').addTo(map); topPane.appendChild(topLayer.getContainer()); topLayer.setZIndex(7);
var topPane = L.DomUtil.create('div', 'leaflet-top-pane', map.getPanes().mapPane);
var topLayer = L.mapbox.tileLayer('bobbysud.map-3inxc2p4').addTo(map);
topPane.appendChild(topLayer.getContainer());
topLayer.setZIndex(7);
getContainer()
méthode pour featuregroupsEu à résoudre cette récemment, mais a trébuché sur cette question.
Voici une solution qui ne repose pas sur des hacks CSS et fonctionne avec des groupes de calques. Essentiellement, il supprime le et re-ajoute de couches dans l'ordre souhaité.
Je soumettre une meilleure "meilleure pratique" que la réponse actuelle. Il montre comment gérer les calques et re-commande, qui est également utile pour d'autres contextes. La méthode actuelle utilise la couche
Title
pour identifier la couche de commander à nouveau, mais vous pouvez facilement le modifier pour l'utilisation d'un index ou d'une référence à l'objet de la couche.Améliorations, les commentaires et corrections sont les bienvenus et encouragés.
JS Fiddle: http://jsfiddle.net/ob1h4uLm/
Ou faites défiler vers le bas et cliquez sur "Exécuter" extrait de code et de jouer avec elle. - Je régler le niveau de zoom initial à un point qui devrait aider à illustrer le
layerGroup
chevauchement effet.JS:
CSS:
HTML:
J'ai trouvé ce correctif (css):
trouvé ici: https://gis.stackexchange.com/questions/44598/leaflet-google-map-baselayer-markers-not-visible