Cara mengubah urutan lapisan di leaflet.js

Saya ingin dapat mengubah urutan lapisan dalam selebaran.

Saya mencoba menerapkan dua plugin leaflet untuk mengubah urutan layer.

Pertama saya mencoba leaflet-control-orderlayers , yang sepertinya berfungsi, tetapi tidak mendukung layerGroups, ini bug yang saya ajukan .

Selanjutnya saya mencoba mapbbcode , yang memang mendukung layerGroups, tetapi sepertinya tidak berfungsi atau dipertahankan.

Adakah yang punya saran untuk menerapkan fitur ini?

Anda dapat melakukan ini dalam beberapa cara (setidaknya; ini adalah bagaimana saya melakukannya):

1. layer.bringToFront()dan layer.bringToBack()tetapi ini hanya akan melakukan satu lapisan pada satu waktu, dan hanya mendorongnya ke depan atau belakang, tidak di antaranya. Jadi Anda harus meletakkan layer Anda dalam urutan yang diinginkan, mulai dengan layer yang Anda inginkan berada di bawah, dan panggil layer.bringToFront()setiap layer.

2. Anda juga dapat melakukan ini dengan menghapus dan menambahkan kembali layer. Ini sepertinya agak sia-sia, tetapi karena peta harus digambar ulang saat memposisikan ulang layer, umumnya tidak terlalu besar.

Berikut adalah biola yang cukup rumit yang menggambarkan masalah ini

Pada dasarnya Anda menghapus semua layer dan kemudian menambahkannya kembali dalam z-indexurutan menaik . Jadi loop melalui semua lapisan overlay Anda, dan panggil map.removeLayer(layer), lalu urutkan berdasarkan yang Anda inginkan z-index, lalu tambahkan kembali menggunakan layer.addTo(map).

Saya mengalami masalah yang sama dan saya mencoba metode fixZOrder (), tetapi sayangnya itu tidak memerintahkan spidol Leaf untuk saya karena tampaknya tidak mempengaruhi zindex spidol Leaflet.

Sepertinya .bringToFront () hanya berfungsi pada bentuk vektor yang mendukung metode ini, sebaliknya pada spidol Leaf yang saya gunakan membuat solusi ini tidak bisa dijalankan, belum lagi masalah kode lain yang saya alami dengan fixZOrder (), tetapi ini bisa unik untuk kasus saya.

​​

Alih-alih, saya hanya meninggalkan lapisan memesan ke Leaflet (opsi) dalam urutan saya memuatnya , yang menyebabkan masalah dengan penumpukan marker (plugin OMS Spiderf) ketika menggunakan kontrol lapisan , tapi saya berhasil menyelesaikannya dengan bantuan funtion saya sendiri berdasarkan setZIndexOffset ()

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

Meskipun skenario saya tidak memerlukan fixZOrder(layers)pada akhirnya siapa pun yang menggunakan metode ini bersama dengan marker bertumpuk mungkin perlu mengadopsi pendekatan yang sama dan karenanya saya memposting ini sebagai solusi tambahan untuk pengguna potensial dari metode urutan lapisan yang disebutkan di atas.

​​

KREDIT : jawaban ghybs di stackoverflow.com/a/37850189/11106279

Mirip dengan jawaban dari @nothing tidak perlu, kegunaan berikut layer.bringToFront()untuk mempertahankan z-order ketika Anda telah menggabungkan layer controldan memuat data yang tidak sinkron.

kami tidak ingin menghapus lapisan dan menambahkannya kembali ke peta karena ini akan menambah semua lapisan, sebaliknya kami ingin menghormati lapisan yang dipilih dalam Kontrol Lapisan dengan biaya overhead minimal. bringToFront()dapat melakukan ini tetapi kita hanya harus menyebutnya pada grup lapisan yang memiliki lapisan (konten) di dalamnya.

Tentukan lapisan:

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

Gunakan fungsi berikut untuk menegakkan z-order:

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

Saat menggunakan kontrol Layer, ketika sebuah Layer diubah menjadi tampilan, itu akan berada di atas layer lain, kita perlu menerapkan kembali logika pesanan ketika sebuah layer ditambahkan. Ini dapat dilakukan dengan mengikat ke overlayaddacara di peta dan memanggil fixZOrderfungsi:

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

Jika Anda memuat data Anda secara tidak sinkron, Anda mungkin juga perlu memanggil fixZOrderketika beban data Anda telah selesai, lapisan baru yang ditambahkan saat runtime akan diberikan di atas semua lapisan lainnya.

Anda harus membuat Panel untuk mengontrol pesanan.

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

Dengan ini, Anda dapat menambahkan lapisan ke panel yang Anda inginkan.