Question

我正在尝试使用L.control.layers（baselayers，overlays）.addTo（map）函数动态加载和删除大型geojson文件（＆gt; 5MB）作为geojson叠加层。在控件中选择图层时加载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);
    });

Answer 1

我找到了问题的解决方案。我需要在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)
    });
  };
});

如何在L.control.layers中使用$ .getJSON时清除缓存的geojson叠加层

1 个答案: