无法从地图中删除所有图层

Question

我有一个大的地图应用程序，所以为了代表我将只提供一大块代码。所以，这是我尝试从地图中删除所有图层的方式：

map.getLayers().forEach(function (layer) {
    map.removeLayer(layer);
});

//map.getOverlays().clear(); <-- also tried this, but to no effect

而且我有一些随机的行为 - 有时候所有的图层都会删除，有时则不会。这是完全随机的，因此无法保证您将能够重现此问题。所以，我可能只是在概念上知道它为什么会发生。

解

这显然是一个ol3错误，因为如果我循环和删除两次，那么它开始工作：

map.getLayers().forEach(function (layer) {
    map.removeLayer(layer);
});
//for some crazy reason I need to do it twice.
map.getLayers().forEach(function (layer) {
    map.removeLayer(layer);
});

可能，这不是一个错误，并且有一些秘密方法可以清除地图。但我不知道。

Answer 1

这不是一个错误。您的代码不起作用的原因是因为您在循环遍历它时修改了图层集合。这样做会更改每个图层的索引，并会导致意外的结果。

清除地图所有图层的正确方法是使用ol.Map#setLayerGroup()：

map.setLayerGroup(new ol.layer.Group());

Answer 2

你应该克隆数组：

const layers = [...map.getLayers().getArray()]
layers.forEach((layer) => map.removeLayer(layer))

Answer 3

您可以使用while循环来执行此操作并检查图层数组的长度，因为每次删除图层时它们都会重新排列，因此这就是forEach不起作用的原因，请尝试

var layerArray, len, layer;
layerArray = map.getLayers().getArray(),
len = layerArray.length;
while (len > 0){
    layer = layerArray[len-1];
    map.removeLayer(layer);
    len = layerArray.length;
}

Answer 4

我这样做了一会儿：

for(i in map._layers){
    if(map._layers[i]._path != undefined) {
        try{ map.removeLayer(map._layers[i]) }catch(e){  }
    }
}

也许有帮助