添加/删除Leaflet GeoJSON图层

我正在尝试使用Leaflet API在不同的缩放层上显示不同的GeoJSON层。我可以一次加载并显示所有三个图层（尽管我实际上不希望它们一次全部显示）。我可以加载和显示它们在不同的缩放级别。

我已经设置了代码，以便在1-6缩放级别下，地图将显示一个GeoJSON图层。在7-10级，它将显示另一个，在11+级，将显示第三个。显示它们的作品。我现在要开始工作的是，如果显示了其他人，则将其关闭。从1-6移到7-10可以正常工作（这意味着它可以正确关闭1-6层），但是从7-10到11+不能正常工作（这意味着7-10层仍然存在），我无法确定找出原因（使用相同的代码）。

这是GeoJSON图层的ajax：

function getJson(defaultStyle, map, simp, geojsonLayer){
var url = 'file' + simp + '.json';
map.removeLayer(geojsonLayer);
geojsonLayer.clearLayers();
$.getJSON(url, function(data){
    geojsonLayer = L.geoJson(data, {
        style: defaultStyle,
        onEachFeature: onEachFeature
    });
    geojsonLayer.addTo(map);
});
}

这是根据缩放比例调用ajax的主要功能。simpCounter最初设置为0。

map.on('zoomend', function(e) {
if (map.getZoom() >= 7 && map.getZoom() <= 10) {
    if (simpCounter == 0 || simpCounter == 2) {
    getJson(defaultStyle, map, 60, geojsonLayer);
    simpCounter = 1;
    }
} else if (map.getZoom() >= 11) {
    if (simpCounter == 0 || simpCounter == 1) {
    getJson(defaultStyle, map, 35, geojsonLayer);
    simpCounter = 2;
    }
}
});

同样，第一个过渡正确关闭了旧层，但是第二个过渡没有关闭。谢谢您的帮助。

尝试以下方法：

function getJson(simp){  //Removed unneeded arguments here
    var url = 'file' + simp + '.json';
    map.removeLayer(geojsonLayer);
    //geojsonLayer.clearLayers();  I don't believe this needed.
    $.getJSON(url, function(data){
        geojsonLayer = L.geoJson(data, {
            style: defaultStyle,
            onEachFeature: onEachFeature
        });
        geojsonLayer.addTo(map);
    });
}

对于您的调用函数：

map.on('zoomend', function(e) {
    if (map.getZoom() >= 7 && map.getZoom() <= 10) {
        if (simpCounter == 0 || simpCounter == 2) {
        getJson(60);
        simpCounter = 1;
        }
    } else if (map.getZoom() >= 11) {
        if (simpCounter == 0 || simpCounter == 1) {
        getJson(35);
        simpCounter = 2;
        }
    } else if (map.getZoom() <= 7) { //Return to original data
        if (simpCounter == 1 || simpCounter == 2) {
        getJson(XX); //Fill out with correct file name
        simpCounter = 0;
        }
    }
});

在传递参数时map，geojsonLayer以及defaultStyle在调用中，getJson(defaultStyle, map, 60, geojsonLayer);您正在创建对象的新实例。然后，您在可能反映在屏幕上的实例上执行工作，但是一旦它回到“主循环”，它基本上会忘记刚做的一切并返回到先前的状态。

由于我猜您已定义defaultStyle，map和geojsonLayer全局范围内的初始填充，因此您只需调用它们，而无需传递它们。通过调整，我更改了全局map变量，因此更改在函数调用完成后仍然存在。

这个解决方案对我有用。您可以在此处查看我制作的整个文件内容：http : //pastebin.com/yMYQJ2jK

我还为1-7定义了最终缩放级别，因此当您返回初始缩放级别时，您可以看到初始JSON数据，否则它将丢失并且永远不会被调用，除非您重新加载页面！

传单具有数据结构的图层组集合类型以及图层控制界面，一旦将其编码为事件侦听器复选框，就可以打开和关闭。

我编写了以下示例，以展示如何删除倍数geoJSON图层。

///adding geoJSON data

          var myGeoJSON = L.geoJSON(myData, {

            onEachFeature: function (feature, layer) {
                layer.myTag = "myGeoJSON"
            }

        });


////// function to remove geoJSON layers 

    var removeMarkers = function() {
        map.eachLayer( function(layer) {

          if ( layer.myTag &&  layer.myTag === "myGeoJSON") {
            map.removeLayer(layer)
              }

            });

    }

//// calling function 

removeMarkers();