Leaflet地图如何清除所有折线？

Question

我正在努力从地图上清除所有折线，但我只能清除最新的。

var polylines;

// add map polylines
function addPolyline(polyArray, colour) {
    polylines = L.polyline(polyArray, {color: colour});
    polylines.addTo(map);
}

// clear polylines   
function clearPolylines() {
    map.removeLayer(polylines);
}

如何在地图上清除所有折线？其中addPolylines被多次调用，而clear Polylines只被调用了一次。

- Vince Lowe

Answer 1

你需要记住它们全部，或者稍微作弊一下，在 map._layers 中偷看来找到它们。

编辑：@Ben 添加了示例代码：

function clearMap() {
    for(i in m._layers) {
        if(m._layers[i]._path != undefined) {
            try {
                m.removeLayer(m._layers[i]);
            }
            catch(e) {
                console.log("problem with " + e + m._layers[i]);
            }
        }
    }
}

- flup

---

我不确定这是否是一个“好”的做法，但我使用这个函数：function clearMap(){ for(i in m._layers){ if(m._layers[i]._path != undefined) { try{ m.removeLayer(m._layers[i]); } catch(e){ console.log("problem with " + e + m._layers[i]); } } } }（注意：代码格式在翻译后可能会出现变化） - Ben

@Ben 这个“作弊”的确是我所指的，将其添加为一个例子。 - flup

可以使用一个图层来仅用于线条，而不是直接将它们添加到地图上吗？然后移除该图层就可以达到目的。 - a1an

Answer 2

您可以将折线添加到图层组中，并轻松地将其添加/从地图中删除。就像这样：

pLineGroup = L.layerGroup()
var latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
];
this.pLineGroup.addLayer(L.polyline(latlngs, {color: 'red'}))
pLineGroup.addTo(map)
pLineGroup.removeFrom(map)

- RezaNikfal

Answer 3

您可以创建一个数组来存储地图中所有折线。

var polylines = [];

每次创建一条折线时，我们都将其添加到数组中：

var polyline = new L.Polyline(latlongs, {
    color: 'red',
    opacity: 1,
    weight: 1,
    clickable: false
}).addTo(map);
polylines.push(polyline);

现在，每当我们需要从地图上清除折线时，我们可以这样做：

polylines.forEach(function (item) {
    map.removeLayer(item)
});

- ZSmain

Answer 4

以下内容将删除多边形和标记，但保留图像瓷砖作为背景：

for (i in map._layers) {
    if (map._layers[i].options.format == undefined) {
        try {
            map.removeLayer(map._layers[i]);
        } catch (e) {
            console.log("problem with " + e + map._layers[i]);
        }
    }
}

- Mike K.

Answer 5

一些答案建议使用map._layers，这是一个应该不被使用的private属性。更好的做法是使用L.Map类型的API。

此外，你会发现如果map._layers没有图层附加到它上面，for(i in m._layers) {会崩溃，因为 i 将是undefined。

我想提出以下方法，也跳过了你的归属：

function clearMap(map) {
  map.eachLayer((layer) => {
    const hasEmptyContrib = !(layer.getAttribution && layer.getAttribution());
    const hasNoContrib = !layer.getAttribution;
    if (hasEmptyContrib || hasNoContrib) {
        map.removeLayer(layer);
    }
  })
}

- Hans

Answer 6

这是我在Leaflet中的做法，老派风格... 我创建了一个名为counter的变量，并将其设置为0。

var cnt = 0;

在我的标记的“dragend”事件的最后，该事件应该每次我拖动标记时更新折线（并擦除先前的折线），我添加了一个条件：如果计数器大于0，则删除折线。因此，在第一次运行时，忽略了删除折线的命令，因为没有折线。 每一次之后，它都会被执行，而不是添加另一条线，我得到了一条“新”的折线，从点A到我的标记（点B）。 以下是代码：

if(cnt > 0) { travel.removeFrom(map)};
travel = L.polyline([pointRome, dragPointsArray],{color: 'red', weight: 15, interactive: false}).addTo(map);
cnt++;

- Abel Knezevic

Answer 7

其实，我发现有一种更好的方法让折线消失（例如在地图上移动标记时从一个点到另一个点的距离），那就是不要将它添加到地图上。以前我也是这样做的，但如果我在地图上单击了一下，就会出现一条始终无法消失的线。标记的工具提示会消失，但折线仍然存在。所以...不要这样做：

travel = L.polyline([pointRome, dragPointsArray],{color: 'red', weight: 3}).addTo(map);

我刚刚将我的折线添加到图层组，而不是地图。

travel = L.polyline([pointRome, dragPointsArray],{color: 'red', weight: 3}).addTo(myLayerGroup);

"

myLayerGroup" 是包含所有标记的图层的名称。 很容易。

"

- Abel Knezevic

Answer 8

您可以搜索层，使用 if 选择自己的层。

添加折线：

var  latlngs = [];
polyline_route = L.polyline(  latlngs     , {color: 'red'}).addTo(map);
map.fitBounds(polyline_route .getBounds());//zoom on your polyline

删除折线图层的代码：

map.eachLayer((layer) => { 
    if (  layer === polyline_route) {
        map.removeLayer(layer);
    }
  })

- melina