Leaftjs 删除所有当前多边形，并重绘所有

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