javascript - Leaflet divIcons 设置在多边形特征后面

Question

我的传单 map (geoJson 层)中有一个多边形层:

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

在这一层中，我根据基本属性启用了 DivIcon 标签:

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

我还有一些鼠标悬停和点击事件的高亮样式。
如果可能的话，我希望将这些 divIcon 标签设置在多边形后面，这样就不会抑制鼠标悬停和指向功能。
我已尝试将标记的 zIndexOffset 和 DivIcon 的大小设置为 [0,0]，但没有任何效果。有没有办法在标签前面设置多边形？

Answer 1

在传单中， Pane 的 z-index 是自动设置的。

我认为是:

• 弹出面板
• 标记面板
• 叠加面板
• 平铺面板

从上到下

叠加 Pane 是您的多边形图层所在的位置。如果您将标记 Pane 的 z-index 调整到叠加 Pane 的后面，那么您的标记应该显示在您的多边形后面。

有关示例，请参阅此代码笔。

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