การเพิ่ม / ลบเลเยอร์แผ่นพับ GeoJSON

ฉันกำลังพยายามแสดงเลเยอร์ GeoJSON ที่เลเยอร์การซูมที่แตกต่างกันโดยใช้ API ของ Leaflet ฉันสามารถโหลดและแสดงทั้งสามเลเยอร์ได้พร้อมกัน (แม้ว่าฉันไม่ต้องการให้พวกเขาทั้งหมดแสดงพร้อมกัน) ฉันสามารถโหลดและแสดงผลที่ระดับการซูมที่แตกต่างกัน

ฉันได้ตั้งรหัสไว้ที่ระดับการซูม 1-6 แผนที่จะแสดงเลเยอร์ GeoJSON หนึ่งชั้น ที่ระดับ 7-10 ระบบจะแสดงรายการอื่นและที่ระดับ 11+ จะแสดงรายการที่สาม แสดงพวกเขาทำงาน สิ่งที่ฉันพยายามจะทำงานตอนนี้คือการปิดคนอื่นถ้ามีคนแสดง ทำงานจาก 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 เริ่มต้นเมื่อคุณกลับไปที่ระดับการซูมเริ่มต้นมิฉะนั้นจะหายไปและจะไม่ถูกเรียกกลับไปจนกว่าคุณจะโหลดหน้าเว็บซ้ำ!

leaflet มีโครงสร้างข้อมูลประเภทคอลเลกชัน layergroup และยังมีส่วนควบคุมเลเยอร์ที่คุณสามารถสลับการเปิดและปิดเมื่อคุณรหัสมันเป็นเหตุการณ์ฟังบนช่องทำเครื่องหมาย

ฉันเขียนตัวอย่างด้านล่างเพื่อแสดงวิธีการลบเลเยอร์ 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();