使用Leaflet单击复选框时，无法将图层动态添加到图层组 [英] Can't add layers dynamically to layer group when click checkboxes using Leaflet

问题描述

我的问题是我无法删除每个复选框的层，我已经发布了此问题，不幸的是我没有得到任何答案.我现在尝试使用为每个单击的复选框添加到该图层的图层组，但是当我尝试删除每个图层时，它将删除最后一个图层，因此我注意到这些图层未添加到图层组.那么如何动态地将图层添加到图层组 每次单击给定的复选框时如何添加图层?您能帮我找出问题所在吗?任何帮助表示赞赏.这是一段代码:

my issue is I can't remove layer of each checkbox, I had already post this issue, unfortunately I didn't get any answer. I'm trying now to use layer group which I add to it layer for each clicked checkbox, but when I tried to remove each layer, it remove the last one, so I noticed that the layers are not added to layer group. So how to add layers to layer group dynamically, in other words how to add layer each time I clicked on a given checkbox? Can you help me please to figure out what is the problem? Any help is appreciated. Here is a snippet of code:

php文件:

<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>

外部jquery文件:

$.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 关于该问题的上一个问题对于您在此处发布的代码仍然有效:您似乎有一个作用域问题(实际上是其中的几个问题).

It seems to me that the answer to your previous question on that issue is still valid for the code you posted here: you seem to have a scoping issue (actually, several of them).

更具体地说，您的layerGrp变量在全局使用，并在$.removePoly(语句layerGrp=L.layerGroup([poly]))内重新分配.因此，您将失去对在addLayer中添加到地图的先前图层的引用，并且无法再将其删除.

To be more specific, your layerGrp variable is used globally, and re-assigned within $.removePoly (statement layerGrp=L.layerGroup([poly])). Therefore you lose reference to the previous layers you added to map in addLayer, and you can no longer remove them.

您的代码过于复杂，难以理解它的作用.

Your code is quite overly complicated, making it difficult to understand what it does.

一旦您简化它，我相信您将能够解决您的问题.

Once you simplify it, I am sure you will be able to solve your issue.

这篇关于使用Leaflet单击复选框时，无法将图层动态添加到图层组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！