删除包含传单标签的 topojson 层时如何删除传单标签答案

【问题标题】：How to remove a leaflet label when a topojson layer containing it is removed删除包含传单标签的 topojson 层时如何删除传单标签
【发布时间】：2015-07-29 17:40:01
【问题描述】：

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

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

我尝试使用noHide:true 实现bindLabel() 方法，但它似乎不起作用。因此，我实现了为这个问题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多边形，但标签仍然存在。

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

另外，当另一个多边形被点击时，它应该被移除，但是之前移除的标签应该被保留，因为之前移除的多边形也被保留了。

我不能，因为我一生都在思考如何实现它。请帮我。

【问题讨论】：

执行您正在使用的 region 属性，因为您的标签对于每个功能都是唯一的，或者您的 topojson 中存在任何其他唯一属性，例如 ID .
标签除了坐标外没有任何唯一的ID。我在控制台检查，我不认为标签与任何 topojson 属性相关联
当然，标签不会有任何topojson属性，但topojson本身确实有像region这样的属性，它是唯一的还是任何其他topojson属性都是唯一的？
是的，topojson 确实具有独特的区域属性...但我不明白它与标签的关联方式，因为我在地图上添加了标签，而不是 topojson 层
好的，考虑到 region 属性是独一无二的，我发布了一种方法作为答案。试试看，祝你好运

标签： javascript jquery leaflet topojson

【解决方案1】：

说明

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

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

第三，当用户点击任何特征时，我们会获取 clicked 特征属性并匹配我们的unique_property_array，获取匹配值的索引并将该索引从labels_array 中删除.另外，在前面添加标签 remove。

代码块

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

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

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

【讨论】：