无法使用传单删除与每个复选框相关的图层 [英] Can't remove layer associated to each checkbox using leaflet

问题描述

我有一个问题，正想在两天之内解决它，所以我有一个从postgres数据库检索数据的列表，此列表的每个项目都与一个复选框相关联，因此当我单击给定的复选框时相应的图层将使用"Leaflet"当然会显示在地图上.我的目的是动态创建此层，以便在我取消选中其给定的复选框时可以删除每个层.当我单击每个复选框时，我可以从数据库中检索其关联元素的坐标以在地图上显示，但是当我选中给定的复选框时，它总是删除此复选框的最后一层而不是其对应层.我希望我很清楚.任何帮助表示赞赏.您将在下面找到我的代码:

I have an issue and I'm trying to solve it sine two days, so I have a list of data retrieving from postgres database, each item of this list is associate to a checkbox, so when I click a given checkbox the corresponding layer will display on map using of course Leaflet. My purpose is to create this layers dynamically to be enable to delete each layer when I uncheck its given checkbox. When I click each checkbox I can retrieve coordinates of its associated element from database to displayed on map, but when I checked a given checkbox, it always remove the last layer and not the correspondant layer of this checkbox. I hope I was clear. Any help is appreciated. You will find my code below:

php文件片段:

while ($row = pg_fetch_array($result)) 
              {
                  echo '<div id="' . $row['nom'] . '" class="col-sm-10"><li class="Liste">' . $row['nom'] . '</li>       
                  <div class="checkbox chk">
                  <label><input type="checkbox" name="id" id="DisplayCheckbox" value="' . $row['nom'] . '"></label>
                  </div>';

                  $variable=$row2['nom'];
                  if($result)
              {
                  $query2 = "SELECT st_asgeojson(st_transform(geom,4326)) from domaine where nom='$variable'"; 
                  $result2 = pg_query($query2); 
                  while ($row2 = pg_fetch_array($result2)) 
                  {
                      echo '<li class="Liste" name="id" style="display:none;">' . $row2[0]. '</li></div><br/>';
                 
                  }
                  
              }
              }
              echo '</ul>'         
      }   

?>
<script type="text/javascript">

$(document).ready(function(){
$('input[id^="DisplayCheckbox"]').on('click',function() 
{
    parent = $(this).val();
    Item = $(this).parents('#' + parent).find("li.Liste").text();
    
          
            if($(this).is(":checked"))
                
             $.drawCategory(geoItem);
            else
             
             $.removeItem(CategoryItem);
        
});
});
</script> 

外部jquery文件:

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

              
              Item=L.geoJson(geojsonFeature).addTo(map);
              map.fitBounds(Item.getBounds());
              
 };

 $.removeItem = function()
 {      
      
        map.removeLayer(Item);
        
        
 };

推荐答案

它总是删除最后一个层，而不是该复选框的相应层.

it always removes the last layer and not the corresponding layer for that checkbox.

这很可能是因为您的代码仅使用一个引用来删除要删除的图层，并且该引用位于您希望的位置之外的可变范围内.

That's most probably because your code uses just one reference for the layer to be removed, and that reference is in a variable scope outside of where you expect it to be.

此外，该代码是不干净的，例如函数调用就像:

Also, the code is unclean, e.g. the function call is like:

$.removeItem(CategoryItem);

但是CategoryItem在该范围内不可用，此外，该函数的定义不包含任何参数:

but CategoryItem is not available on that scope, and furthermore the definition of that function doesn't take any arguments:

$.removeItem = function()

清理代码和文档(以代码注释的形式)功能的输入，效果和输出.潜在的问题是您无法控制自己的代码.

Clean your code and document (in the form of code comments) the inputs, effects and outputs of your functions. The underlying problem is that you don't have control over what your own code does.

这篇关于无法使用传单删除与每个复选框相关的图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！