javascript - 传单-如何从 map 上删除圆弧？

所以我有一张地图，用arc.js绘制了国家之间的贸易路线（如弧线）。圆弧根据年份而有所不同，我基本上希望能够根据选择的年份来重画圆弧。

我像这样创建弧：

 //for every trade route, draw a arc from start to end
var line_to_add;
for(var q = 0; q < dest_Coor.length; q++) {
    //create the arc
    var start = {x: from_Coor[0][0], y: from_Coor[0][1]};
    var end = {x: dest_Coor[q][0], y: dest_Coor[q][1]};
    var generator = new arc.GreatCircle(start,end);
    var line = generator.Arc(100, {offset: 10});

    //add it to map
    line_to_add = L.geoJson(line.json(), {
        color: "#004c00"
    });

    //add the arc to global array of arcs
    allArrows.push(line_to_add);
    line_to_add.addTo(map);
}

当选择不同的年份时，我然后尝试通过此方法删除当前弧，其中allArrows是所有弧对象的全局数组（根据this question）：

function deleteOldArcs() {
    for(var i = 0; i < allArrows.length; i++) {
        map.removeLayer(allArrows[u]);
    }
    //then reset the list of arrows:
    allArrows.length = 0;
}

但是，这不起作用，程序的执行只是在map.removeLayer(allArrows[u])中冻结，我不明白为什么。我用map._layers检查了地图图层列表，并且弧对象在其中...所以为什么调用map.removelayer无效？

任何帮助将不胜感激，谢谢！

最佳答案

您有几种选择：


使用Leaflet.Arc。它将直接创建Leaflet层，这可能比json blob易于管理。
将line_to_add存储在数组中的某个位置，稍后再调用其remove()方法。据我所知，您想引用allArrows[u]，但是您从未填充allArrows数据结构。
使用L.LayerGroup。将LayerGroup添加到地图，将弧添加到LayerGroup，然后调用其clearLayers()方法。