Thêm / xóa các lớp GeoJSON tờ rơi

Tôi đang cố gắng hiển thị các lớp GeoJSON khác nhau ở các lớp thu phóng khác nhau bằng API Leaflet. Tôi có thể tải và hiển thị cả ba lớp cùng một lúc (mặc dù tôi không thực sự muốn tất cả chúng hiển thị cùng một lúc). Tôi có thể tải và hiển thị chúng ở các mức thu phóng khác nhau.

Tôi có mã được thiết lập để ở các mức Thu phóng 1-6, bản đồ sẽ hiển thị một lớp GeoJSON. Ở cấp độ 7-10, nó sẽ hiển thị một cấp độ khác và ở cấp độ 11+, nó sẽ hiển thị một phần ba. Hiển thị chúng hoạt động. Những gì tôi đang cố gắng để làm việc bây giờ là tắt những cái khác nếu một cái được hiển thị. Chuyển từ 1-6 đến 7-10 hoạt động (có nghĩa là nó tắt lớp 1-6 một cách chính xác), nhưng không phải từ 7-10 đến 11+ (có nghĩa là lớp 7-10 dính xung quanh) và tôi không thể hình dung được tại sao (nó sử dụng cùng một mã).

Đây là ajax cho các lớp 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);
});
}

Và đây là chức năng chính gọi ajax tùy thuộc vào mức thu phóng. simpCount được đặt thành 0 ban đầu.

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

Vì vậy, một lần nữa, quá trình chuyển đổi đầu tiên tắt lớp cũ một cách chính xác, nhưng quá trình chuyển đổi thứ hai thì không. Cảm ơn đã giúp đỡ.

Hãy thử điều này thay thế:

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

Và cho chức năng gọi điện của bạn:

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

Khi bạn đang đi qua các đối số map, geojsonLayervà defaultStyletrong các cuộc gọi getJson(defaultStyle, map, 60, geojsonLayer);bạn đang tạo trường mới của các đối tượng. Sau đó, bạn thực hiện công việc trên các trường hợp có thể phản chiếu trên màn hình nhưng một khi nó quay lại 'vòng lặp chính' thì về cơ bản nó sẽ quên mọi thứ nó vừa làm và trở về trạng thái trước đó.

Vì tôi đoán bạn đã xác định defaultStyle, mapvà geojsonLayerdân số ban đầu trong phạm vi toàn cầu bạn chỉ cần gọi cho họ, không cần phải vượt qua họ. Với các điều chỉnh tôi đã thực hiện, nó thay đổi toàn cục mapđể thay đổi liên tục sau khi kết thúc cuộc gọi chức năng.

Giải pháp này đã làm việc cho tôi. Bạn có thể xem toàn bộ nội dung tệp tôi đã thực hiện ở đây: http://pastebin.com/yMYQJ2jK

Tôi cũng xác định mức thu phóng cuối cùng cho 1-7 để bạn có thể thấy dữ liệu JSON ban đầu của mình khi bạn quay lại mức thu phóng ban đầu, nếu không nó sẽ bị mất và không bao giờ được gọi lại trừ khi bạn tải lại trang!

tờ rơi có kiểu cấu trúc dữ liệu tập hợp lớp và cũng là giao diện điều khiển lớp mà bạn có thể bật và tắt một khi bạn mã hóa nó dưới dạng trình lắng nghe sự kiện trên hộp kiểm.

Tôi đã viết ví dụ dưới đây để chỉ ra cách loại bỏ nhiều lớp 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();