javascript - 清除传单地图中的所有折线

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

score 29 · Accepted Answer

您必须全部记住它们，或者稍微作弊并窥视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]);
            }
        }
    }
}

score 2 · Accepted Answer

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

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)

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

一些答案建议使用map._layerswhich 应该是private属性并且不应该使用。最好使用L.Map-type 的 API。

此外，您会发现如果没有附加层，则会for(i in m._layers) {崩溃，因为.map._layersiundefined

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

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

score 0 · Accepted Answer

这是我在传单中的做法。老派风格...我创建了一个名为 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++;

javascript - 清除传单地图中的所有折线

6 回答 6

Related

Reference