Leaflet.label没有显示标记

Question

我有一组geoJSON点,并且它们附有相应的标签.

var points = L.geoJson (null, {
    onEachFeature: function (feature, layer) {
        layer.options.riseOnHover=true; //tried adding this
        layer.options.riseOffset=9999; //as well as this
        layer.bindLabel(feature.properties["name"], {className: 'map-label'});
        L.setOptions(layer, {riseOnHover: true}); //this as well
    }
});

这是遍历JSON文件中每个功能并创建一组点的代码.现在,将标记添加到地图的实际功能如下:

var addJsonMarkers = function() {
    map.removeLayer(markers);
    points.clearLayers();

    markers = new L.layerGroup();
    points.addData(dataJson);
    markers.addLayer(points);

    map.addLayer(markers);

    return false;
};

我遇到的问题是无论我尝试添加什么(你可以看到我的评论),标签总是在标记后面,这不是预期的行为.

我希望标签能够在它之上.我试图手动更改z-index的map-label类,以及与众多的解决方案,riseOnHover这似乎是这种情况的解决方案,但唱片公司仍落后.有谁看到我做错了什么？

完整的代码可以在这里看到

Answer 1

指定popupPane为pane在bindLable选项:

layer.bindLabel(
    feature.properties["name"], 
    {
        className: 'map-label', 
        pane:'popupPane'
    }
);

在Leaflet中,popupPane高于markerPane,因此您的标签将显示在标记的顶部.

Leaflet.label有一个小文档,带有选项说明https://github.com/Leaflet/Leaflet.label

另请查看这个jsfiddle:http://jsfiddle.net/L6kqu54a/