如何清除缓存的geojson覆盖时使用$.在L.control.layers. getJSON

How to clear cached geojson overlays when using $.getJSON in L.control.layers

本文关键字:getJSON layers control 覆盖 何清除 清除 geojson 缓存      更新时间:2023-09-26

我正在尝试动态加载和删除大型geojson文件(>5MB)作为geojson覆盖使用L.control。图层(baselayers, overlays). addto (map)函数。当图层在控件中被选中时,加载geojson文件是可以的,当你取消选中图层时,图层就会消失覆盖控件。问题是,如果您重新选择该层,geojson文件似乎被覆盖了两次,就像浏览器缓存了第一个文件并正在加载将两个文件叠加在地图上。文件非常大,第三次选择和取消选择图层时,加载时间相当长,而且可能会在某个时候使浏览器崩溃。有没有人对我做错了什么有任何想法,或者我如何在覆盖控件中取消选择图层时清除浏览器缓存?

相关代码如下:

var medAgeLayer = L.geoJson();
var popLayer = L.geoJson(null, {
                weight:0,onEachFeature:onEachFeature});
var overlays = {"median age":medAgeLayer, "Population":popLayer};
L.control.layers(baselayers, overlays).addTo(map);
map.on('overlayadd', function(eventLayer){
    if(eventLayer.name === "median age"){
    $.getJSON("http://localhost/flare7.json", function(data){
            medAgeLayer.addData(data).addTo(map);
            });
        }
    else if(eventLayer.name === "Population"){
$.getJSON("./flare5.json", function(json){
        popLayer.addData(json).addTo(map)
        });
      };
    });
map.on('overlayremove', function(eventLayer){
    map.removeLayer(eventLayer.layer);
    });

我找到了解决问题的方法。我需要在geojson变量上调用。adddata()方法之前调用。clearlayers(),像这样:

map.on('overlayadd', function(eventLayer){
if(eventLayer.name === "median age"){
$.getJSON("http://localhost/flare7.json", function(data){
        medAgeLayer.clearLayers();
        medAgeLayer.addData(data);
        });
    }
else if(eventLayer.name === "Population"){
$.getJSON("./flare5.json", function(json){
    popLayer.clearLayers();
    popLayer.addData(json).addTo(map)
    });
  };
});