如何在移除包含leaflet标签的topojson图层时删除该标签

Question

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

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

我尝试使用bindLabel()方法，并使用noHide:true，但似乎没有起作用。因此，我实现了这个问题提供的解决方案Simple label on a leaflet (geojson) polygon。我成功地添加了静态标签。

然后，我有一个函数，在单击事件中删除topojson多边形。之后我应该只删除该特定多边形上的标签，但我似乎无法实现这一点。

以下是我添加topojson图层和标签的方法：

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多边形时移除它，但是标签仍然存在。

我需要删除特定多边形上的标签，但保留其他多边形上的标签。

此外，当单击其他多边形时，应该移除它，但是之前移除的标签应该保留，因为先前移除的多边形也被保留了。

我想不出如何实现，请帮帮我。

- jimmypage

---

请确认您用作标签的“Region”属性是否对每个要素都是唯一的，或者您的TopoJSON中是否存在任何其他唯一属性，例如“ID”。 - muzaffar

标签除了它们的坐标之外，没有任何唯一的标识符。我在控制台上检查过了，我不认为这些标签与任何topojson属性相关联。 - jimmypage

当然，标签不会有任何topojson属性，但是topojson本身确实具有像区域这样的属性，它是唯一的还是其他topojson属性是唯一的？ - muzaffar

是的，topojson确实具有唯一的区域属性...但我不明白它与标签有什么关联，因为我是在地图上添加标签，而不是在topojson图层上。 - jimmypage

好的，考虑到“region”属性是唯一的，我会把一个方法作为答案发布。试试看，祝你好运。 - muzaffar

Answer 1

解释

首先，您需要维护一个labels_array，在其中存储标签以便在需要时进行删除。

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

第三，当用户单击任何要素时，我们将获取已单击要素的属性，并与我们的unique_property_array进行匹配，获取匹配值的索引，然后从labels_array中移除该索引。此外，添加之前删除的标签。

代码块

首先，您需要拥有三个全局变量：

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

其次，您需要修改您的addLabel()函数：

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()函数

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

尝试一下这个，告诉我它是否有效。祝你好运。

- muzaffar