10

我正在使用 Leaflet.js 作为地图。现在我想从地图中删除添加的图层。通过单击输入#button，所有选中的复选框都应更改为未选中，并且应从地图中删除所有相应的图层。

要从地图中删除图层，需要图层的 id。此 id 等于相应复选框的 id。这就是为什么我使用 jQuery 来获取所有选中复选框的 id 并将它们的值存储在一个对象中，这里称为someObj.idsChecked。

当我尝试使用存储值val删除一层时，它不起作用，而console.log显示想要的值。这里例如：mapcat52。

在将以前的 id 硬编码到map.removeLayer(mapcat52)之类的函数中时，它可以按预期工作。

我的代码或我的想法中的错误在哪里？
任何帮助深表感谢。

的HTML

<input type="button" id="selectnone" value="deselect all" />

<!-- checkboxes  --> 
<input id="mapcat52" type="checkbox" name="maplayer" class="maplayer"> 
<label for="mapcat52">Map Layer One</label>

<input id="mapcat53" type="checkbox" name="maplayer" class="maplayer"> 
<label for="mapcat53">Map Layer Two</label>

...

JS：

$('#selectnone').click(function() {
    var someObj = {};
    someObj.idsChecked = [];

    $("input:checkbox").each(function() {
        if ($(this).is(":checked")) {

            someObj.idsChecked.push($(this).attr("id"));
        }
    }).attr('checked', false);

    $.each(someObj.idsChecked,function(id, val) {

          // displays the wanted value, e.g. "mapcat52" if checkbox with this id is checked
          console.log(val);

          // does not work: inserted value
          map.removeLayer(val); 

          // works: hard coded value of the leaflet.js/input id
          map.removeLayer(mapcat52); 
        });

});
4

3 回答 3

21

我想说从地图中删除/添加（切换）图层的最简单方法是使用LayerGroup。

在将单个图层添加到地图之前，请将它们添加到 LayerGroup，然后将该 LayerGroup 添加到您的地图。

然后，当您必须删除图层时，只需调用 clearLayers() 函数。

查看 LayerGroup 的 API http://leafletjs.com/reference.html#layergroup

例子

var map = L.map('leafletMap', {minZoom:11}).setView([37.8, -96], 11);
var assetLayerGroup = new L.LayerGroup();
var marker1 = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.');
var marker2 = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
assetLayerGroup.addLayer(marker1);
assetLayerGroup.addLayer(marker2);

选中删除复选框时

assetLayerGroup.clearLayers();
于 2013-09-18T20:08:59.937 回答
6

根据 Leaflet API doc http://leafletjs.com/reference.html#map-removelayer，removeLayer 需要一个 ILayer 参数：removeLayer( <ILayer> layer )但你传递给它一个字符串：$(this).attr("id")

看起来您确实已经在变量中拥有图层对象：mapcat52。您可以在创建图层对象时保存它们，然后通过 id 查找它们以传递给 removeLayer：

var layers = new Array();

// create layer
var mapcat52 = new MyCustomLayer(latlng);

// save to layers list
layers["mapcat52"] = mapcat52;
...

// remove layers
$.each(someObj.idsChecked, function(id, val) {
    // look up layer object by id
    var layerObj = layers[val];
    // remove layer
    map.removeLayer(layerObj); 
});
于 2013-09-11T18:31:25.050 回答
1

我写了下面的例子来展示如何删除多个 geoJSON 层。

///添加geoJSON数据

      var myGeoJSON = L.geoJSON(myData, {

        onEachFeature: function (feature, layer) {
            layer.myTag = "myGeoJSON"
        }

    });

////// 删除geoJSON图层的函数

var removeMarkers = function() {
    map.eachLayer( function(layer) {

      if ( layer.myTag &&  layer.myTag === "myGeoJSON") {
        map.removeLayer(layer)
          }

        });

}

//// 调用函数

删除标记（）；

于 2018-12-30T16:09:44.620 回答