So entfernen Sie eine Leaflet-Beschriftung, wenn eine Topojson-Ebene, die sie enthält, entfernt wird

Question

Ich versuche eine interaktive Karte zu erstellen, die bestimmte Daten visualisiert.

Ich verwendete Flugblatt-Karte und eine Topojson-Schicht darauf. Als nächstes versuchte ich, statische Etiketten auf jedem der Topojson-Polygone unter Verwendung eines Broschüren-Etikett-Plugins hinzuzufügen, d. H. Die Etiketten sollten immer da sein und sollten nicht auf ein Mouseover-Ereignis reagieren.

Ich versuchte bindLabel() Methode mit noHide:true zu implementieren, aber es schien nicht zu funktionieren. Daher habe ich die zu dieser Frage bereitgestellte Lösung implementiert Simple label on a leaflet (geojson) polygon. Es ist mir gelungen, statische Labels hinzuzufügen.

Dann habe ich eine Funktion, die ein Topojson-Polygon beim Klick-Ereignis entfernt. Ich sollte das Etikett auf DIESEM BESTIMMTEN POLYGON NUR entfernen, nachdem es entfernt wurde, aber ich kann nicht scheinen, das zu implementieren.

Hier ist, was ich tat topojson Schicht und Etiketten hinzuzufügen:

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

Bisher dieser Code entfernt das topojson Polygon, wenn es angeklickt wird, aber das Label ist immer noch da.

Ich muss die Beschriftung entfernen, die auf dem bestimmten Polygon ist, das entfernt wird, aber die Beschriftungen auf anderen Polygonen behalten.

Wenn das andere Polygon angeklickt wird, sollte es entfernt werden, aber die zuvor entfernte Beschriftung sollte beibehalten werden, da das zuvor entfernte Polygon ebenfalls beibehalten wird.

Ich kann nicht für das Leben von mir darüber nachdenken, wie das zu implementieren ist. Bitte hilf mir.

Answer 1

Explaination

Zum einen, benötigen Sie einen labels_array, wo Sie Ihre Etiketten zu halten, um bei Bedarf zu entfernen.

Zweitens, pflegen Sie eine weitere unique_property_array, wo Sie die einzigartige Eigenschaft, die Sie in Ihrer Topojson-Datei haben müssen.

Drittens, wenn der Benutzer auf jedem Feature klicken würden, würden wir die angeklickt Feature Eigenschaft und Spiel mit unseren unique_property_array, immer den Index des angepassten Wert erhalten und diesen Index von labels_array entfernen. Fügen Sie außerdem das zuvor entfernte Label hinzu.

Codeblock

Zum einen, müssen Sie

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

Zweitens drei globale Variablen haben, modifizieren Ihre addLabel() Funktion auf diese Weise

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

Schließlich, ändern Sie Ihre clickAction() Funktion auf diese Weise

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

die Sie interessieren und mir sagen, ob es funktioniert. Viel Glück