Question

我的传单地图（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

在传单中，窗格的z-index会自动设置。

我相信它是：

弹出窗格
标记窗格
叠加窗格
平铺窗格

从上到下

叠加窗格是多边形图层的位置。如果您将标记窗格的z-index调整为覆盖窗格后面，那么您的标记应显示在多边形后面。

请参阅此codepen以获取示例。

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

在多边形要素

1 个答案: