जोड़ / हटाएं

Question

मैं अलग-अलग जूम लेयर्स पर अलग-अलग जूम लेयर्स को USC API का उपयोग करके दिखाने की कोशिश कर रहा हूं। मैं एक बार में सभी तीन परतों को लोड और प्रदर्शित कर सकता हूं (हालांकि मैं वास्तव में उन सभी को एक बार दिखाना नहीं चाहता)। मैं उन्हें विभिन्न ज़ूम स्तरों पर लोड और प्रदर्शित कर सकता हूं।

मेरे पास कोड सेट है ताकि ज़ूम स्तर 1-6 पर, नक्शा एक जेजेन्सन परत दिखाएगा। 7-10 के स्तर पर, यह एक और दिखाएगा, और 11+ के स्तर पर यह एक तीसरा दिखाएगा। उन्हें प्रदर्शित करना काम करता है। यदि मैं काम करने की कोशिश कर रहा हूं तो यदि कोई प्रदर्शित होता है तो दूसरों को बंद कर रहा है। 1-6 से 7-10 तक काम करता है (इसका अर्थ है कि यह 1-6 परत को सही ढंग से बंद करता है), लेकिन 7-10 से 11+ तक नहीं (जिसका अर्थ है कि 7-10 परत चारों ओर चिपक जाती है) और मैं समझ नहीं सकता क्यों (यह उसी कोड का उपयोग करता है)।

यहाँ जियोजेन्स परतों के लिए अजाक्स है:

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

तो फिर से, पहला संक्रमण पुरानी परत को सही ढंग से बंद कर देता है, लेकिन दूसरा संक्रमण नहीं करता है। सहायता के लिए धन्यवाद।

Comments

बस स्पष्ट करने के लिए, यह 11+ के लिए json को चालू कर रहा है और 7-10 को बंद नहीं कर रहा है?

— 21

वह सही है।

— जोश

Answer 1

इसके बजाय यह प्रयास करें:

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 डेटा देख सकें, अन्यथा यह खो जाता है और जब तक आप पृष्ठ को पुनः लोड नहीं करते तब तक इसे वापस नहीं बुलाया जाता है!

Comments

धन्यवाद। मुझे महसूस नहीं हुआ कि चरों में गुजरना अस्थायी उदाहरण बनाता है।

— जोश

हाँ वे जिस तरह से बदलाव कर रहे हैं, उसे रखने का एकमात्र तरीका यह है कि आप इसे एक returnबयान के साथ वापस पारित करेंगे । जावास्क्रिप्ट में ग्लोबल्स का उपयोग करना आम लगता है, इसलिए इस तरह से अपने कार्य को पूरा करना सबसे आसान होगा।

— रोमा

यह समझ आता है। मैंने हाल ही में ग्लोबल्स का उपयोग नहीं करने के लिए एक बेस्ट प्रैक्टिस बुक में पढ़ा था, लेकिन जाहिर है कि मैं विकल्प का दुरुपयोग कर रहा था। धन्यवाद।

— जोश

सभी प्रोग्रामिंग भाषाओं में ग्लोबल्स का उपयोग नहीं करना सबसे अच्छा अभ्यास है, बग को ट्रैक करना आसान है। लेकिन सबसे अच्छा अभ्यास केवल अंगूठे का एक नियम है। अधिकांश जावास्क्रिप्ट-इन-पेज का उपयोग काफी हल्का लगता है जिससे साइड-इफेक्ट्स को आसानी से प्रबंधित किया जा सकता है। यदि आप एक संपूर्ण मॉड्यूल या बाहरी js लिख रहे हैं तो मैं ग्लोबल्स से बचूंगा।

— रोमा

Answer 2

लीफलेट में एक लेयरग्रुप कलेक्शन टाइप की डेटा संरचना होती है और एक लेयर कंट्रोल इंटरफेस भी होता है जिसे आप चेकबॉक्स पर ईवेंट श्रोताओं के रूप में कोड करने के बाद एक बार ऑन और ऑफ कर सकते हैं।

Answer 3

मैंने नीचे उदाहरण के लिए लिखा है कि गुणकों को हटाने के लिए कैसे जेजोन परत को दिखाया जाए।

///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();