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的多个解决方案，这似乎是解决此问题的方法，但标签仍然落后。有人看到我做错了吗？

可以看到完整的代码here

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/

Answer 2

看看bringToFront（）和bringToBack（）方法，为标记创建一个组函数并将其带回来，同时与标签相反。或者，如果找不到解决方案，可以添加一个L.info来显示信息。看看这里可能会有所帮助：http://leafletjs.com/reference.html#featuregroup-bringtofront 将代码发布到某个地方，我可以看看它。