javascript - 传单删除先前的折线

我有一个函数，它将在单击事件时重新创建折线。它可以工作，但刷新层仍然具有先前的折线。仅当我缩放 map 时，上一条折线才消失。

我的代码。

function buildHotline(response) {
    //clearMap();
    //clear_polyline();
    document.getElementById('mapid').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
    //document.getElementById('map').innerHTML = "<div id='mapid' style='width: 100%; height: 100%;'></div>";
    var tiles = L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
    attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'});


    var map = new L.map('map', {
        layers: [tiles],
        scrollWheelZoom: true,
        dragging: true,
        tap: false
    });


    var hotlineLayer = L.hotline(response, {
        min: 0,
        max: 120,
        palette: {
            0.0: '#3ebcef',
            0.5: '#78b3d3',
            1.0: '#000203'
        },
        weight: 5,
        outlineColor: '#000203',
        outlineWidth: 1
    });



    //clear first
    clear_polyline();

    bounds = hotlineLayer.getBounds();
    map.fitBounds(bounds);



    hotlineLayer.addTo(map);


    function clear_polyline() {
        try {
            // statements
            setTimeout(function(){ map.invalidateSize()}, 400);
            //alert("erase line");
            map.removeLayer( hotlineLayer );

        } catch(e) {
            // statements
            console.log(e);
        }

    }

}

在创建新的折线之前，我必须先在哪里放置clear_polyline清除它。谢谢

最佳答案

将对hotlineLayer的引用放在buildHotline()函数的范围之外，以便该函数的多次运行可以引用hotlineLayer的同一实例。

然后，检查它是否未定义，如果未定义，则将其删除，然后使用新建实例重新分配。

即:

var thing;

function refreshThing() {
    if (thing) { remove(thing); }
    thing = newThing();
}

另请参见How to remove L.rectangle(boxes[i])，因为解决方案非常相似。

关于javascript - 传单删除先前的折线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41890217/