如何删除包含它的topojson图层时的传单标签 [英] How to remove a leaflet label when a topojson layer containing it is removed

问题描述

我正在尝试创建一个可视化某些数据的交互式地图。

I am trying to create an interactive map that visualizes certain data.

我使用了传单地图和一个topojson图层。接下来，我尝试使用传单标签插件在每个topojson多边形上添加静态标签，即标签应始终存在，不应对鼠标悬停事件做出反应。

I used leaflet map and a topojson layer on it. Next, I tried to add static labels on each of the topojson polygons using leaflet label plugin i.e. the labels should always be there and should not react to mouseover event.

我试过使用 noHide：true 实现 bindLabel（）方法，但它似乎不起作用。因此，我实施了提供给这个问题的解决方案传单上的简单标签（geojson）多边形。我成功添加了静态标签。

I tried implementing bindLabel() method with noHide:true, but it didn't seem to work. Therefore, I implemented the solution provided to this question Simple label on a leaflet (geojson) polygon . I succeeded in adding static labels.

然后，我有一个函数可以在click事件中删除topojson多边形。我本来应该删除那个特殊多边形上的标签，但是我似乎无法实现它。

Then, I have a function that removes a topojson polygon on click event. I was supposed to remove the label on THAT PARTICULAR POLYGON ONLY after it is removed but I cannot seem to implement that.

这是我做的添加topojson图层和标签的方法：

Here's what I did to add topojson layer and labels:

function addRegions(map) {
    var regionLayer = new L.TopoJSON();
    $.getJSON('region.topo.json').done(addRegionData);

    function addRegionData(topoData) {
        regionLayer.addData(topoData);
        regionLayer.addTo(map);
        regionLayer.eachLayer(addLabel);
        regionLayer.eachLayer(handleLayer);
    }
    function handleLayer(layer) {
        layer.on({
            click: clickAction
        });
    }

// Here's the code for adding label
    function addLabel(layer) {
        var label = new L.Label();  
        label.setContent(layer.feature.properties.REGION);
        label.setLatLng(layer.getBounds().getCenter());
        map.showLabel(label);
    }

// Here's the code that removes a polygon when it is clicked and retains the previously removed polygon
    function clickAction(e) {
        regionLayer.eachLayer(function(layer){
            map.addLayer(layer);
        });
        var layer = e.target;
        map.removeLayer(layer);
    }
}

到目前为止，此代码删除了topojson多边形单击，但标签仍然存在。

So far, this code removes the topojson polygon when it is clicked, but the label is still there.

我必须删除已移除的特定多边形上的标签，但将标签保留在其他多边形上。

I have to remove the label which is on that particular polygon which is removed, but keep the labels on other polygons.

此外，当单击另一个多边形时，应该将其删除，但应保留先前删除的标签，因为先前删除的多边形也会保留。

Also, when the other polygon is clicked, it should be removed but the previously removed label should be retained since the previously removed polygon is also retained.

我不能，因为我的生活想到如何实现这一点。请帮我。

I cannot, for the life of me think of how to implement that. Please help me.

推荐答案

解释

首先，你需要维护一个 labels_array 你存储标签的地方，以便在需要时删除。

Firstly, you need to maintain an labels_array where you store your labels so as to remove when required.

其次，维护另一个 unique_property_array ，您需要在topojson文件中存储唯一属性。

Secondly, maintain another unique_property_array where you need to store the unique property you have in your topojson file.

第三，当用户点击任何功能时，我们会获得点击的功能属性并与我们的 unique_property_array匹配 ，获取匹配值的索引并从 labels_array 中删除​​该索引。此外，先添加标签删除。

Thirdly, when user would click on any feature, we would get the clicked feature property and match with our unique_property_array, getting the index of the matched value and remove that index from labels_array. Additionally, add the label remove previously.

CodeBlock

首先，你需要有三个全局变量

Firstly, you need to have three global variables

var labels_array=[];
var unique_property_array=[];
var labelIndexToRemove='';

其次，修改你的 addLabel（）以这种方式运作

Secondly, modifiy your addLabel() function this way

function addLabel(layer) {
    var label = new L.Label();  
    label.setContent(layer.feature.properties.REGION);
    label.setLatLng(layer.getBounds().getCenter());
    map.showLabel(label);

    //below two lines are new
    labels_array.push(label);
    unique_property_array.push(layer.feature.properties.region);
}

最后，修改 clickAction（）以这种方式运行

Lastly, modify your clickAction() function this way

function clickAction(e) {
    regionLayer.eachLayer(function(layer){
        map.addLayer(layer);
    });
    var layer = e.target;
    map.removeLayer(layer);

    //below lines are new
    if(labelIndexToRemove!=''){
        map.addLayer(labels_array[labelIndexToRemove]);
    }
    labelIndexToRemove= unique_property_array.indexOf(e.target.feature.properties.region);
    map.removeLayer(labels_array[labelIndexToRemove]);
}

试试这个并告诉我它是否有效。祝你好运

Try this and tell me if it works. Good luck

这篇关于如何删除包含它的topojson图层时的传单标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！