Leaftjs删除所有当前的polygoones，然后重画所有

Question

我正在一个项目中，我正在使用Leaftjs（1.6）。而https://api.maptiler.com/maps/streets用于图块层。

第一次，多边形正确绘制。在我的网站上，我使用的是输入范围，用户可以在其中更改输入范围，该范围的值将使用新的颜色和弹出值更新多边形。

因此，在输入范围回调中，我首先尝试删除所有先前的多边形，然后再次重绘。如果用户平稳地更改输入范围，则效果很好。

但是，当用户快速移动输入范围时，就会出现问题。我得到了这种地图输出。

这是我的输入范围代码

<input type="range" min="1" max="100" value="100" class="slider" id="myRange">

用于去除多边形，我用过

map.eachLayer(function (layer) {
        if (!!layer.toGeoJSON) {
            map.removeLayer(layer);
            //console.log(layer)
        } else {
            console.log("I am not removing:", layer)
        }
    });

和

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

但是两者都显示出相似的结果。

这是我完整的代码，

var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
output.innerHTML = slider.value; // Display the default slider value

var date = Date.parse(myDate)

output.innerHTML = date.toString('d-M-yy');

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function () {
    var date2 = Date.parse(myDate)
    var current = date2.add(-(100 - this.value)).day();
    output.innerHTML = current.toString('d-M-yy');

    map.eachLayer(function (layer) {
        if (!!layer.toGeoJSON) {
            map.removeLayer(layer);
            //console.log(layer)
        } else {
            console.log("I am not removing:", layer)
        }
    });

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

    $.ajax({
        url: 'global/',
        data: {
            'date': current.toString('yyyy-MM-dd')
        },
        dataType: 'json',
        success: function (data) {
            if (data != null) {
                //console.log("Got data")
                //console.log(data.length)
                for (var i = 0; i < data.length; i++) {
                    var coun = data[i];
                    try {
                        var latlngs = countriesLocation[coun.country];
                        if (latlngs != null) {
                            html = "updated popup data"

                            var color = '#ef0909';

                            if (coun.value > 500_000) {
                                color = '#DF0101';
                            } else if (coun.value > 200_000) {
                                color = '#ea2c2c';
                            } else {
                                color = '#BEF781';
                            }

                            var polygon = L.polygon(latlngs, {
                                color: color, fillColor: color,
                                fillOpacity: 0.3
                            }).addTo(map);
                            polygon.bindPopup(html);

                            // console.log(coun.country)
                            // console.log(i)
                        } else {
                            //console.log("I have no lat lon " + coun.country)
                        }
                    } catch (e) {
                        //console.log(e)
                    }
                }
            }
        }
    });
}

如何解决此问题，并获得清晰的输出？

Answer 1

将多边形添加到L.featureGroup而不是地图。然后，您可以调用fg.clearLayers()，所有图层都将被删除。我还要清除ajax中的层，因此，如果有多个请求，则不会多次添加。

var fg = L.featureGroup().addTo(map);
slider.oninput = function () {
    var date2 = Date.parse(myDate)
    var current = date2.add(-(100 - this.value)).day();
    output.innerHTML = current.toString('d-M-yy');

    fg.clearLayers();

    $.ajax({
        url: 'global/',
        data: {
            'date': current.toString('yyyy-MM-dd')
        },
        dataType: 'json',
        success: function (data) {
            if (data != null) {
                fg.clearLayers();

                for (var i = 0; i < data.length; i++) {
                    var coun = data[i];
                    try {
                        var latlngs = countriesLocation[coun.country];
                        if (latlngs != null) {
                            html = "updated popup data"

                            var color = '#ef0909';

                            if (coun.value > 500_000) {
                                color = '#DF0101';
                            } else if (coun.value > 200_000) {
                                color = '#ea2c2c';
                            } else {
                                color = '#BEF781';
                            }

                            var polygon = L.polygon(latlngs, {
                                color: color, fillColor: color,
                                fillOpacity: 0.3
                            }).addTo(fg);
                            polygon.bindPopup(html);

                        } else {
                            //console.log("I have no lat lon " + coun.country)
                        }
                    } catch (e) {
                        //console.log(e)
                    }
                }
            }
        }
    });
}