jQuery Leaflet.js：如何从地图中删除多个图层
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18509613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leaflet.js: How to remove multiple layers from map
提问by LuNarez
I am using Leaflet.js for a map. Now I want to remove added layers from the map. By clicking the input #button all checked checkboxes shall be changed to unchecked and all corresponding layers shall be removed from the map.
我正在使用 Leaflet.js 作为地图。现在我想从地图中删除添加的图层。通过单击输入#button，所有选中的复选框都应更改为未选中，并且应从地图中删除所有相应的图层。
To remove a layer from the map the id of the layer is needed. This id equals the id of the corresponding checkbox. That's why I use jQuery to get the ids of all checked checkboxes and store their value in an object, here called someObj.idsChecked.
要从地图中删除图层，需要图层的 id。此 id 等于相应复选框的 id。这就是为什么我使用 jQuery 来获取所有选中复选框的 id 并将它们的值存储在一个对象中，这里称为someObj.idsChecked。
When I try to use the stored value valto remove one layer it doesn't work while the console.logdisplays the wanted value. Here for example: mapcat52.
当我尝试使用存储值val删除一层时，它不起作用，而console.log显示所需的值。例如：mapcat52。
While inserting the previous id hard coded into the function like map.removeLayer(mapcat52)it works as expected.
在将先前的 id 硬编码到map.removeLayer(mapcat52)之类的函数中时，它按预期工作。
Where is the error in my code or my thoughts?
Any help is much appreciated.
我的代码或我的想法中的错误在哪里？
任何帮助深表感谢。
The HTML
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>
...
The JS:
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);
});
});
采纳答案by kielni
According to the Leaflet API doc http://leafletjs.com/reference.html#map-removelayer, removeLayer takes an ILayer parameter: removeLayer( <ILayer> layer )but you're passing it a String: $(this).attr("id")
根据 Leaflet API doc http://leafletjs.com/reference.html#map-removelayer， removeLayer 需要一个 ILayer 参数：removeLayer( <ILayer> layer )但是你传递给它一个字符串：$(this).attr("id")
It looks like you do have the layer object in a variable already: mapcat52. You could save the layer objects when you create them, then look them up by id to pass to removeLayer:
看起来您已经在变量中拥有图层对象：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);
});
回答by Shriram Sharma
I would say the easiest way to remove/add (toggle) layers from the map would be to use a LayerGroup.
我会说从地图中删除/添加（切换）图层的最简单方法是使用LayerGroup。
Before adding individual layers to the map, add them to a LayerGroup instead and then add that LayerGroup to your map.
在将单个图层添加到地图之前，先将它们添加到 LayerGroup，然后将该 LayerGroup 添加到您的地图。
Then when you have to remove the layers, just call the clearLayers() function.
然后，当您必须删除图层时，只需调用 clearLayers() 函数即可。
Check out the API for LayerGroup http://leafletjs.com/reference.html#layergroup
查看 LayerGroup 的 API http://leafletjs.com/reference.html#layergroup
Example
例子
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);
When remove checkbox is checked
当删除复选框被选中时
assetLayerGroup.clearLayers();
回答by Mercel Santos
I wrote the below example to show how to remove multiples geoJSON layer.
我写了下面的例子来展示如何删除多个 geoJSON 层。
///adding geoJSON data
///添加geoJSON数据
var myGeoJSON = L.geoJSON(myData, {
onEachFeature: function (feature, layer) {
layer.myTag = "myGeoJSON"
}
});
////// function to remove geoJSON layers
////// 删除geoJSON图层的函数
var removeMarkers = function() {
map.eachLayer( function(layer) {
if ( layer.myTag && layer.myTag === "myGeoJSON") {
map.removeLayer(layer)
}
});
}
//// calling function
/// 调用函数
removeMarkers();
删除标记（）；
