Leaft js удалить все текущие полигоны и перерисовать все

Question

Я работаю над проектом, где я использую Leaft js (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)
                    }
                }
            }
        }
    });
}