लीफलेट.जेएस में लेयर ऑर्डर कैसे बदलें

Question

मैं पत्रक में परतों के क्रम को बदलने में सक्षम होना चाहूंगा।

मैंने लेयर ऑर्डर को बदलने के लिए दो लीफलेट प्लग इन को लागू करने का प्रयास किया।

पहले मैंने लीफलेट-कंट्रोल-ऑर्डर करने वालों की कोशिश की , जो काम करने लगता है, लेकिन लेयरग्रुप का समर्थन नहीं करता है, यहां मेरा फाइल किया हुआ बग है ।

आगे मैंने मैपबोडकोड की कोशिश की , जो लेयरग्राफ का समर्थन करता है, लेकिन काम करने या बनाए रखने के लिए प्रतीत नहीं होता है।

क्या किसी के पास इस सुविधा को लागू करने के लिए कोई सुझाव है?

Comments

संभावित डुप्लिकेट: stackoverflow.com/questions/12848812/…

— कुछ भी नहीं

Answer 1

आप इसे कुछ तरीकों से कर सकते हैं (कम से कम; यह है कि मैं इसे कैसे करता हूं):

1. layer.bringToFront()और layer.bringToBack()लेकिन ये एक समय में केवल एक परत करेंगे, और केवल इसे आगे या पीछे करने के लिए धक्का देते हैं, बीच में नहीं। इसलिए आपको अपनी परतों को वांछित क्रम में रखना होगा, उस परत से शुरू करें जिसे आप नीचे रखना चाहते हैं, और layer.bringToFront()प्रत्येक परत पर कॉल करें ।

2. आप इसे हटाकर और परत को फिर से जोड़कर भी कर सकते हैं। यह क्रमबद्ध रूप से बेकार लगता है, लेकिन जब भी परतों को फिर से तैयार करते समय नक्शे को फिर से तैयार किया जाना चाहिए, यह आमतौर पर एक सौदे का बड़ा नहीं होता है।

यहाँ एक काफी जटिल पहेली है जो इस मुद्दे को दर्शाती है

मूल रूप से आप सभी परतों को हटा देते हैं और फिर उन्हें आरोही z-indexक्रम में जोड़ते हैं । तो अपने सभी ओवरले परतों के माध्यम से लूप करें, और कॉल करें map.removeLayer(layer), फिर उन्हें अपने वांछित द्वारा सॉर्ट करें , फिर z-indexउनका उपयोग करके फिर से जोड़ें layer.addTo(map)।

Answer 2

मैं एक ही मुद्दा रहा था और मैं fixZOrder () विधि की कोशिश की, लेकिन दुख की बात है कि यह मेरे लिए पत्ता मार्करों का आदेश नहीं दिया क्योंकि यह रोगाणु मार्करों के zindex को प्रभावित नहीं करता है।

की तरह लगता है .bringToFront () केवल वेक्टर आकार पर काम करता है पत्ता मार्करों मैं इस समाधान असाध्य प्रतिपादन तैनात करने के लिए इसके विपरीत, जो इस विधि का समर्थन, अन्य कोड मुद्दा मैं fixZOrder () के साथ सामना कर रहा था उल्लेख करने के लिए नहीं है, लेकिन इस के लिए अद्वितीय हो सकता है मेरा मामला।

​​

इसके बजाय मैंने केवल लेयर (विकल्प) में लेयर ऑर्डर करने के लिए मैंने उन्हें लोड किया था, जो लेयर कंट्रोल का उपयोग करते समय मार्कर स्टैकिंग (OMS स्पाइडर प्लग) के साथ समस्या पैदा करता था , लेकिन मैं अपने स्वयं के फ़नक्शन की मदद से इन्हें हल करने में कामयाब रहा setZIndexOffset ()

function myBring2Front() {
        //layer1.bringToFront();
        layer1.eachLayer(function (layer) {
          layer.setZIndexOffset(2000);
        });
        layer2.eachLayer(function (layer) {
          layer.setZIndexOffset(1000);
        });
    }

हालांकि मेरे परिदृश्य को अंत में किसी और की आवश्यकता नहीं थी, इस पद्धति का उपयोग करके स्टैक्ड मार्कर के साथ एक समान दृष्टिकोण अपनाने की आवश्यकता हो सकती है और इसलिए मैं इसे उपर्युक्त परत क्रम विधि के संभावित उपयोगकर्ताओं के लिए एक अतिरिक्त समाधान के रूप में पोस्ट कर रहा हूं ।fixZOrder(layers)

​​

क्रेडिट : ढेर जवाब stackoverflow.com/a/37850189/11106279 पर

Answer 3

layer.bringToFront()जब आप संयुक्त layer controlऔर अतुल्यकालिक डेटा लोड कर रहे हों तो zn- ऑर्डर बनाए रखने के लिए @nothingisn जरूरी उत्तर के समान उपयोग ।

हम परतों को साफ़ नहीं करना चाहते हैं और उन्हें नक्शे में वापस जोड़ना चाहते हैं क्योंकि यह सभी परतों को जोड़ देगा, इसके बजाय हम लेयर कंट्रोल में चयनित परतों का न्यूनतम ओवरहेड्स के साथ सम्मान करना चाहते हैं। bringToFront()ऐसा कर सकते हैं, लेकिन हमें इसे केवल एक परत समूह पर ही बुलाना चाहिए, जिसके भीतर परतें (सामग्री) हों।

परतों को परिभाषित करें:

var dataLayers = {
    Districts: new L.geoJSON(),
    Farms: new L.featureGroup(),
    Paddocks: new L.geoJSON(),
    Surveys: new L.geoJSON()
};

L.control.layers(
    // base maps
    {
        OSM: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', subdomains: ['a', 'b', 'c'] });,
    },
    dataLayers,
    {
        collapsed: false,
        hideSingleBase: true
    }).addTo(map);

Z- क्रम को लागू करने के लिए निम्नलिखित फ़ंक्शन का उपयोग करें:

/**
 * Ensure that layers are displayed in the correct Z-Order
 * Instead of explicitly defining z-order on the groups the order of the calls to beingToFront controls the resulting zOrder
 * @param {any} dataLayers Object that holds the references to the layer groups toggled by the layer control
 **/
function fixZOrder(dataLayers) {

    // only similar approach is to remove and re-add back to the map
    // use the order in the dataLayers object to define the z-order
    Object.keys(dataLayers).forEach(function (key) {

        // check if the layer has been added to the map, if it hasn't then do nothing
        // we only need to sort the layers that have visible data
        // Note: this is similar but faster than trying to use map.hasLayer()
        var layerGroup = dataLayers[key];
        if (layerGroup._layers
            && Object.keys(layerGroup._layers).length > 0
            && layerGroup._layers[Object.keys(layerGroup._layers)[0]]._path
            && layerGroup._layers[Object.keys(layerGroup._layers)[0]]._path.parentNode)
            layerGroup.bringToFront();
    });
}

लेयर नियंत्रण का उपयोग करते समय, जब एक लेयर को दृश्य में टॉगल किया जाता है, तो यह अन्य परतों के ऊपर होगा, हमें एक लेयर जोड़ने पर ऑर्डर लॉजिक को फिर से लागू करना होगा। यह overlayaddमानचित्र पर ईवेंट को बाध्य करके और fixZOrderफ़ंक्शन को कॉल करके किया जा सकता है :

map.on('overlayadd', function (e) {
    fixZOrder(dataLayers);
}

यदि आप अपने डेटा को अतुल्यकालिक रूप से लोड करते हैं, तो आपको fixZOrderअपने डेटा लोड के पूरा होने पर कॉल करने की भी आवश्यकता हो सकती है , रनटाइम में जोड़े गए नए लेयर्स को अन्य सभी परतों के शीर्ष पर प्रदान किया जाएगा।

Answer 4

आदेश को नियंत्रित करने के लिए आपको पैनल बनाना होगा।

map.createPane('myPane1');
map.createPane('myPane2');
map.getPane('myPane1').style.zIndex = 400;
map.getPane('myPane2').style.zIndex = 800;

इससे आप परत को मनचाहे फलक में जोड़ सकते हैं।