divIcons Volantino fissati dietro poligoni

Question

Ho un layer di poligoni nella mia mappa illustrativo (uno strato GeoJSON):

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

Con questo strato ho DivIcon etichette attivare basate su attributi di base:

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

Ho anche alcuni stili di evidenziazione per mouseover e eventi click.
Se possibile mi piacerebbe avere questi contrassegni divIcon impostati dietro i poligoni, in modo tale che le funzioni mouseover e puntamento non vengano inibite.
Ho provato a impostare zIndexOffset dell'indicatore e la dimensione di DivIcon su [0,0], ma non ha funzionato. C'è un modo per impostare i poligoni di fronte alle etichette?

Answer 1

Nel volantino l'indice z dei riquadri viene impostato automaticamente.

Credo che sia:

• riquadro popup
• riquadro marcatore
• riquadro sovrapposizione
• riquadro piastrelle

da cima a fondo

riquadro di sovrapposizione è dove è il tuo livello di poligono. se modifichi l'indice z del riquadro dei marker in modo che si trovi dietro il riquadro di overlay, i tuoi indicatori dovrebbero apparire dietro i tuoi poligoni.

vedere questa codepen per un esempio.

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);