取消选中复选框时不会删除传单层

Question

我有下面的代码，可以通过单击与传单中的复选框关联的按钮在地图上显示数据。第一次点击时效果很好：

$("#btnPoiFilter").click(function(){
 console.log(lyrPoi);
  if (lyrPoi) {
  lyrPoi.remove();
 } 
var lyrPoi = L.geoJSON(jsnPoi,{coordsToLatLng:reproject, pointToLayer:returnPoiMarker, filter:filterPoi}).addTo(mymap);   
});

这部分代码的目的是删除某些框未选中并再次单击按钮时显示的数据 (lyrPoi)，但它不起作用：

if (lyrPoi) { 
lyrPoi.remove();
}

在某些框未选中的情况下第二次单击时，所有元素都会保留。 console.log return 未定义所以我怀疑问题是由于某种原因未识别 lyrPoi。整个事件在这里：

mymap.on('pm:create',function(e){
                    var jsn = e.layer.toGeoJSON().geometry;
                    $.ajax({
                        url:'load_data_testing.php',
                        data: {id:'geojsonpol', geojsonpol:JSON.stringify(jsn)},
                        type:'POST',
                        success: function(response){
                            if (response.substring(0,5)=="ERROR"){
                                alert(response);
                            } else {
                                alert(response);
                                jsnPoi = JSON.parse(response);
                                var fromProjection = '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs';
                                var toProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ";         
                                $("#btnPoiFilter").click(function(){
                                    console.log(lyrPoi)
                                    if (lyrPoi) {
                                        lyrPoi.remove();
                                    } 
                                        var lyrPoi = L.geoJSON(jsnPoi,{coordsToLatLng:reproject, pointToLayer:returnPoiMarker, filter:filterPoi}).addTo(mymap);   
                                });

                                }
                             },
                            error: function(xhr, status, error){
                               alert("ERROR: "+error);
                            }
                        });
                    });

非常感谢。

Answer 1

你在做什么，这很糟糕。问题是，每次创建图层时，都会向 $("#btnPoiFilter").

添加一个新的点击事件

将您的代码更改为：

var fromProjection = '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs';
var toProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ";         

// Have to be defined here or else where
var lyrPoi;
var jsPoi;
$("#btnPoiFilter").click(function(){
   console.log(lyrPoi)
   if (lyrPoi) {
        lyrPoi.remove();
   }
   if(jsPoi){
        lyrPoi = L.geoJSON(jsnPoi,{coordsToLatLng:reproject, pointToLayer:returnPoiMarker, filter:filterPoi}).addTo(mymap);   
   }
});

mymap.on('pm:create',function(e){
                    var jsn = e.layer.toGeoJSON().geometry;
                    $.ajax({
                        url:'load_data_testing.php',
                        data: {id:'geojsonpol', geojsonpol:JSON.stringify(jsn)},
                        type:'POST',
                        success: function(response){
                            if (response.substring(0,5)=="ERROR"){
                                alert(response);
                            } else {
                                alert(response);
                                jsnPoi = JSON.parse(response);
                            }
                         },
                         error: function(xhr, status, error){
                             alert("ERROR: "+error);
                         }
                        });
                    });

但是这样一来，您总会遇到问题，当您创建两个多边形然后单击按钮时，只有第二个多边形的点会显示。

如果允许绘制多个多边形，我建议这样做：

var fromProjection = '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs';
var toProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ";         

var lyrPoi = L.geoJSON(null,{coordsToLatLng:reproject, pointToLayer:returnPoiMarker, filter:filterPoi});
$("#btnPoiFilter").click(function(){
   // Toggle layer
   if(map.hasLayer(lyrPoi)){
      lyrPoi.removeFrom(map);
   }else{
      lyrPoi.addTo(map);
   }
});

mymap.on('pm:create',function(e){
                    var jsn = e.layer.toGeoJSON().geometry;
                    $.ajax({
                        url:'load_data_testing.php',
                        data: {id:'geojsonpol', geojsonpol:JSON.stringify(jsn)},
                        type:'POST',
                        success: function(response){
                            if (response.substring(0,5)=="ERROR"){
                                alert(response);
                            } else {
                                alert(response);
                                var jsnPoi = JSON.parse(response);
                                lyrPoi.addData(jsnPoi);
                            }
                         },
                         error: function(xhr, status, error){
                             alert("ERROR: "+error);
                         }
                        });
                    });

取消选中复选框时不会删除传单层

Leaflet layer is not removed when checkboxes are unchecked

javascript

leaflet

jquery-events