Javascript LeaftTJS删除所有当前多边形，并重新绘制所有多边形

我正在一个项目中工作，我正在使用Leaftjs（1.6）。和瓷砖层

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

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

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

这是我的输入范围代码

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

及

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

这是我的完整代码

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

var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“rangeValue”）；
output.innerHTML=slider.value；//显示默认滑块值
var date=date.parse（myDate）
output.innerHTML=date.toString（'d-M-yy'）；
//更新当前滑块值（每次拖动滑块控制柄时）
slider.oninput=函数（）{
var date2=Date.parse（myDate）
var current=date2.add（-100-this.value））.day（）；
output.innerHTML=current.toString（'d-M-yy'）；
map.eachLayer（函数（层）{
如果（！！layer.toGeoJSON）{
map.removeLayer（层）；
//console.log（层）
}否则{
log（“我没有删除：”，层）
}
});
//对于（地图中的i.\u层）{
//if（映射层[i]。\u路径！=未定义）{
//试一试{
//map.removeLayer（map._层[i]）；
//}捕获（e）{
//console.log（“与”+e+map._层[i]有关的问题”）；
//         }
//}其他{
//控制台日志（i）
//     }
// }
$.ajax({
url:'全局/'，
数据：{
“日期”：当前的.toString（'yyyy-MM-dd'）
},
数据类型：“json”，
成功：功能（数据）{
如果（数据！=null）{
//log（“获取数据”）
//console.log（data.length）
对于（变量i=0；i500_000）{
颜色='#DF0101'；
}其他条件（单位价值>200_000）{
颜色='#ea2c2c'；
}否则{
颜色='#BEF781'；
}
var polygon=L.多边形（板条{
颜色：颜色，填充颜色：颜色，
填充不透明度：0.3
}).addTo（地图）；
polygon.bindpoop（html）；
//控制台日志（国家/地区）
//控制台日志（i）
}否则{
//控制台日志（“我没有lat lon”+国家/地区）
}
}捕获（e）{
//控制台日志（e）
}
}
}
}
});
}

---

如何修复此问题并获得清晰的输出？

将多边形添加到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)
                    }
                }
            }
        }
    });
}

var fg=L.featureGroup（）.addTo（map）；
slider.oninput=函数（）{
var date2=Date.parse（myDate）
var current=date2.add（-100-this.value））.day（）；
output.innerHTML=current.toString（'d-M-yy'）；
fg.clearLayers（）；
$.ajax({
url:'全局/'，
数据：{
“日期”：当前的.toString（'yyyy-MM-dd'）
},
数据类型：“json”，
成功：功能（数据）{
如果（数据！=null）{
fg.clearLayers（）；
对于（变量i=0；i500_000）{
颜色='#DF0101'；
}其他条件（单位价值>200_000）{
颜色='#ea2c2c'；
}否则{
颜色='#BEF781'；
}
var polygon=L.多边形（板条{
颜色：颜色，填充颜色：颜色，
填充不透明度：0.3
}).addTo（fg）；
polygon.bindpoop（html）；
}否则{
//控制台日志（“我没有lat lon”+国家/地区）
}
}捕获（e）{
//控制台日志（e）
}
}
}
}
});
}

如果响应出现问题怎么办？是的，这是一个问题，ajax请求是否可以取消？使用jQuery的包装器和通常的一样，看起来是这样的：

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

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