Как удалить метку листка, когда слой topojson, содержащий его, удаляется

Question

Я пытаюсь создать интерактивную карту, которая визуализирует определенные данные.

Я использовал карту буклетов и слой сверху. Затем я попытался добавить статические метки на каждом из топологических многоугольников, используя плагин labellet label, т. Е. Метки всегда должны быть там и не должны реагировать на событие mouseover.

Я пробовал реализовать метод bindLabel() с noHide:true, но он не работал. Поэтому я внедрил решение, предоставленное на этот вопрос Simple label on a leaflet (geojson) polygon. Мне удалось добавить статические метки.

Тогда у меня есть функция, которая удаляет многоугольник topojson на событие click. Я должен был удалить ярлык на THAT PARTICGAL POLYGON ТОЛЬКО после его удаления, но я не могу это реализовать.

Вот что я сделал, чтобы добавить 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 многоугольник при щелчке, но этикетка все еще там.

Мне нужно удалить ярлык, который находится на этом конкретном полигоне, который удален, но сохраняйте метки на других полигонах.

Кроме того, при щелчке по другому полигону его следует удалить, но ранее удаленная метка должна быть сохранена, так как ранее удаленный многоугольник также сохраняется.

Я не могу, поскольку жизнь меня думает о том, как реализовать это. Пожалуйста, помогите мне.

Answer 1

Explaination

Во-первых, вам необходимо поддерживать labels_array, где вы храните ваши метки так, чтобы удалить при необходимости.

Во-вторых,, сохраняйте еще один unique_property_array, где вам нужно сохранить уникальное свойство, имеющееся в вашем файле topojson.

В-третьих, когда пользователь щелкнет на любой функции, мы получили бы щелкнул свойство функции и матч с нашим unique_property_array, получая индекс совпавшего значения и удалить этот индекс из labels_array. Кроме того, добавьте метку удалить ранее.

кодоблок

Во-первых, вам нужно иметь три глобальные переменные

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

Во-вторых, modifiy ваша 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]); 
} 

Попробуйте это и скажите мне, если он работает. Удачи