전단지 GeoJSON 레이어 추가 / 제거

Leaflet API를 사용하여 다른 줌 레이어에서 다른 GeoJSON 레이어를 표시하려고합니다. 세 레이어를 모두 한 번에로드하고 표시 할 수 있습니다 (실제로 모든 레이어가 한 번에 표시되는 것을 원하지는 않지만). 다른 줌 레벨로로드하여 표시 할 수 있습니다.

확대 / 축소 수준 1-6에서지도에 하나의 GeoJSON 레이어가 표시되도록 코드를 설정했습니다. 7-10 레벨에서는 다른 것을 보여줄 것이고 11+ 레벨에서는 3 분의 1을 보일 것입니다. 그것들을 표시하면 작동합니다. 내가 지금 일하려고하는 것은 다른 하나가 표시되면 다른 것을 끄는 것입니다. 1-6에서 7-10으로 이동하면 (1-6 레이어가 올바르게 꺼짐을 의미) 7-10에서 11+ (7-10 레이어가 붙어 있음을 의미)가 아니며 그림을 볼 수 없습니다 왜 (같은 코드를 사용하는지).

GeoJSON 레이어의 아약스는 다음과 같습니다.

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

그리고 줌에 따라 아약스를 호출하는 주요 기능이 있습니다. 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();