Kann nicht Schichten hinzufügen, dynamisch Gruppe Schicht, wenn Kontrollkästchen Leaflet

Question

mein Problem mit klicken I Schicht jedes Kontrollkästchen nicht entfernen können, hatte ich bereits dieses Problem veröffentlichen, leider habe ich keine Antwort bekommen. Ich versuche nun, für jedes angeklickte Kontrollkästchen die Ebenengruppe zu verwenden, die ich der Ebene hinzufüge. Als ich jedoch versuchte, jede Ebene zu entfernen, löschte ich die letzte, sodass ich bemerkte, dass die Ebenen nicht zur Ebenengruppe hinzugefügt wurden. Also, wie Layer dynamisch zur Layergruppe hinzugefügt werden, mit anderen Worten: Wie schaffe ich jedes Mal Layer, wenn ich auf ein bestimmtes Kontrollkästchen geklickt habe? Kannst du mir bitte helfen herauszufinden, was das Problem ist? Jede Hilfe wird geschätzt. Hier ist ein Code-Snippet:

PHP-Datei:

<script type="text/javascript"> 
 

 
$(document).ready(function(){ 
 

 
$('input[id^="DisplayCheckbox"]').on('click',function() 
 
{ 
 
    parent = $(this).val(); 
 
    Coord = $(this).parents('#' + parent).find("li.Liste").text(); 
 
    window.valChk = $(this).val(); 
 
      
 
      if($(this).is(":checked")) 
 
      { 
 
       valChk = $(this).val(); 
 
       
 
       $.drawPoly(Coord); 
 

 
      }else 
 
      {  
 
       $.removePoly(valChk); 
 
        
 
      } 
 
     
 
}); 
 

 
}); 
 
     
 
</script>

externe Jquery-Datei:

$.drawPoly = function(data) 
 
{ 
 
     data = $.parseJSON(data); 
 
       
 
     var geojsonFeature = 
 
    { 
 
     "type": "FeatureCollection", 
 
     "features": [{ 
 
      "type": "Feature", 
 
      "geometry": { 
 
      "type": data.type, 
 
      "coordinates": data.coordinates 
 
         } 
 
        }] 
 
     }; 
 

 
       
 
     window.poly=L.geoJson(geojsonFeature); 
 
     poly.id = valChk; 
 
     layerGrp=L.layerGroup([poly]); 
 
     addLayer(valChk); 
 
    
 
}; 
 
    
 
function addLayer(id){ 
 
    layerGrp.eachLayer(function (layer) { 
 
     if(layer.id == id){ 
 
      layerGrp.addLayer(layer).addTo(map); 
 
      map.fitBounds(layer.getBounds()); 
 
      console.log(layer._leaflet_id); 
 
     } 
 

 
    }); 
 
    } 
 

 
    $.removePoly = function(id) 
 
    { 
 
     layerGrp=L.layerGroup([poly]); 
 
     
 
     layerGrp.eachLayer(function (layer) { 
 
      
 
      if(layer.id == id) 
 
      { 
 
       console.log(layer._leaflet_id); 
 
       layerGrp.removeLayer(layer); 
 
      } 
 
     }); 
 
    
 
    };

Answer 1

Es scheint mir, dass die answer zu Ihrer vorherigen Frage zu diesem Problem noch gültig ist für den Code, den Sie hier gepostet: Sie scheinen eine Scoping Problem (eigentlich mehrere von ihnen).

Um genauer zu sein, Ihre layerGrp Variable wird global verwendet und innerhalb $.removePoly (Anweisung layerGrp=L.layerGroup([poly])) neu zugewiesen. Daher verlieren Sie die Referenz zu den vorherigen Layern, die Sie in addLayer hinzugefügt haben, und Sie können sie nicht mehr entfernen.

Der Code ist ziemlich übermäßig kompliziert, ist es schwierig zu verstehen, zu machen, was es tut.

Sobald Sie es zu vereinfachen, ich bin sicher, dass Sie in der Lage sein werden, Ihr Problem zu lösen.