Prospekt divIcons hinter Polygon gesetzt verfügt

Question

ich eine Polygon-Layer in meinem Faltblatt Karte haben (eine GeoJSON Schicht):

var PolygonLayer = L.geoJson(json, { 
style: polygon_style}); 

Mit dieser Schicht habe ich DivIcon Etiketten auf grundlegenden Attribute aktiviert basiert:

var label = L.marker(polygonCenter, { 
      icon: L.divIcon({ 
       className: 'label', 
       html: '<div>' + label + '</div>' 
      }), 
     }).addTo(map); 

Ich habe auch einige Highlight-Styling für Mouseover und Klick-Events.
Wenn möglich, würde ich gerne diese divIcon Etiketten hinter die Polygone haben, so dass mouseover und Zeigefunktionen nicht gesperrt werden.
Ich habe versucht, die zIndexOffset der Markierung und die Größe der DivIcon auf [0,0], aber nichts hat funktioniert. Gibt es eine Möglichkeit, die Polygone vor den Etiketten zu setzen?

Answer 1

In der Broschüre wird der Z-Index der Fenster automatisch gesetzt.

Ich glaube es ist:

• Popup Scheibe
• Markierungsscheibe
• Overlay Scheibe
• Fliesenscheibe

von oben nach unten

die Overlay-Scheibe ist wo ist dein Polygon-Layer? Wenn Sie den Z-Index des Markierungsfensters so anpassen, dass er sich hinter dem Überlagerungsfenster befindet, sollten Ihre Markierungen hinter Ihren Polygonen angezeigt werden.

siehe dieses Codepen für ein Beispiel.

http://codepen.io/anon/pen/MKvZZa

css:

#map{width:400px;height:400px;} 
.label{background-color:white;} 
.leaflet-marker-pane{ 
    z-index:2 
} 

javascript:

var map = L.map('map').setView([51.505, -0.09], 13); 
var accessToken='insert your mapbox access token here'; 
var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=' + accessToken, { 
    attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>' 
}); 

mapboxTiles.addTo(map); 
var circle = L.circle([51.508, -0.11], 500, { 
    color: 'red', 
    fillColor: '#f03', 
    fillOpacity: 0.5 
}).addTo(map) 

var myIcon = L.divIcon({ 
    iconSize: [70, 20], 
    iconAnchor: [35, 10], 
    className: 'label', 
    html: '<div>' + 'test label' + '</div>' 
}) 

L.marker([51.508, -0.11], { 
    icon: myIcon 
}).addTo(map);