Leaflet GeoJSONレイヤーの追加/削除

Leaflet APIを使用して、さまざまなズームレイヤーでさまざまなGeoJSONレイヤーを表示しようとしています。3つのレイヤーすべてを一度に読み込んで表示できます（実際にすべてを一度に表示したくないのですが）。さまざまなズームレベルで読み込んで表示できます。

ズームレベル1〜6で、地図に1つのGeoJSONレイヤーが表示されるようにコードを設定しています。レベル7〜10では別のレベルが表示され、レベル11+では3番目のレベルが表示されます。それらを表示することはできます。私が今仕事をしようとしているのは、表示されている場合は他の人をオフにすることです。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;
    }
}
});

繰り返しますが、最初の遷移では古いレイヤーが正しくオフになりますが、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();