清除传单地图中的所有折线答案

【问题标题】：Clear all polylines from leaflet map清除传单地图中的所有折线
【发布时间】：2022-03-07 18:46:40
【问题描述】：

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

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 被调用一次。如何清除地图上的所有折线？

【问题讨论】：

标签： javascript leaflet

【解决方案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]);
            }
        }
    }
}

【讨论】：

我不确定这是否是一种好的方式，但我使用this function: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 这个'作弊'确实是我的意思，添加它作为例子。
可以将图层仅用于线条而不是直接将它们添加到地图中吗？然后删除图层就可以了。

【解决方案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)

【讨论】：

【解决方案3】：

以下将删除多边形和标记，但将图像图块保留在背景中：

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]);
        }
    }
}

【讨论】：

【解决方案4】：

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

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)
});

【讨论】：

【解决方案5】：

一些答案建议使用map._layers，它应该是private 属性，不应使用。最好使用L.Map-type 的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);
    }
  })
}

【讨论】：

【解决方案6】：

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

var cnt = 0;

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

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

【讨论】：

【解决方案7】：

实际上，我发现有一种更好的方法可以使多段线消失（地图上从一个点到另一个点的距离，当您移动标记时），就是不要将它添加到地图中。我曾经这样做过，如果我点击地图，就会有一条线不会消失。标记的工具提示会消失，但折线会保留。所以...而不是：

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

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

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

“myLayerGroup”是所有标记所在图层的名称。很简单。

【讨论】：