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

どうすればこれを修正し、明確な出力を得ることができますか?