Leaflet.label没有显示标记 [英] Leaflet.label not showing over the markers

问题描述

  var points = L.geoJson 
 
我有一组geoJSON点，并附有相应的标签。 （null，{
 onEachFeature：function（feature，layer）{
 layer.options.riseOnHover = true; //尝试添加这个
 layer.options.riseOffset = 9999; //作为这个
 layer.bindLabel（feature.properties [name]，{className：'map-label'}）; 
 L.setOptions（layer，{riseOnHover：true}）; // this以及
} 
}）; 
  

这是通过JSON文件中的每个功能并创建一组点的代码。现在，向地图添加标记的实际功能如下所示：

  var addJsonMarkers = function（）{
 map.removeLayer（标记）; 
 points.clearLayers（）; 
 
 markers = new L.layerGroup（）; 
 points.addData（dataJson）; 
 markers.addLayer（points）; 
 
 map.addLayer（markers）; 
 
返回false; 
}; 
  

我遇到的问题是无论我尝试添加什么（您都可以看到我的评论） ，标签总是在标记后面，这不是预期的行为。

我希望标签位于其上。我尝试手动更改 map-label 类中的 z-index ，并使用 riseOnHover 这似乎是解决方案，但标签仍然落后。任何人看到我做错了什么？

完整的代码可以看到 here

$ p $ <$ c $> c $ c $> c $ c $> c> 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/

I am having a set of geoJSON points and they have corresponding labels attached to them.

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

This is the code that goes through each feature in JSON file and creates set of points. Now, the actual function that adds markers to the map goes like this:

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

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

    map.addLayer(markers);

    return false;
};

The issue I am having is that no matter what I try to add (you can see my comments), the labels are always behind the markers, which is not the expected behavior.

I would like the label to be on top of it. I tried manually changing the z-index in the map-label class, as well as numerous solutions with riseOnHover which seems to be the solution for this, but the labels are still behind. Anyone seeing what I am doing wrong?

The complete code can be seen here

解决方案

Specify popupPane as pane in bindLable options:

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

In Leaflet popupPane is higher than markerPane so your labels will appear on top of markers.

There is a small doc for Leaflet.label with options description https://github.com/Leaflet/Leaflet.label

Also check this jsfiddle: http://jsfiddle.net/L6kqu54a/

这篇关于Leaflet.label没有显示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！