Як змінити порядок шарів у leaflet.js

Я хотів би мати можливість змінити порядок шарів у листівці.

Я спробував реалізувати два плагіни листівки, щоб змінити порядок шарів.

Спершу я спробував leaflet-control-orderlayers , який, здається, працює, але не підтримує layerGroups, ось моя подана помилка .

Далі я спробував mapbbcode , який підтримує layerGroups, але, схоже, не працює і не підтримується.

Хтось має пропозиції щодо того, як реалізувати цю функцію?

Це можна зробити двома способами (принаймні, так я і роблю):

1. layer.bringToFront()і , layer.bringToBack()але вони будуть робити це тільки один шар за один раз, і тільки штовхає його до передньої або задньої частини , а не між ними. Тому вам потрібно буде розмістити шари в потрібному порядку, почніть з шару, який ви хочете знаходитись внизу, і зателефонуйте layer.bringToFront()на кожен шар.

2. Ви також можете це зробити, видаливши і повторно додавши шар. Це здається марнотратним, але оскільки карта все-таки повинна перемальовуватися при перепозиціонуванні шарів, це взагалі не така велика угода.

Ось досить складна загадка, яка ілюструє проблему

В основному ви видаляєте всі шари, а потім повторно додаєте їх у порядку зростання z-index. Отож проведіть усі ваші шари накладення та зателефонуйте map.removeLayer(layer), а потім сортуйте їх за своїм бажанням z-index, а потім повторно додайте їх за допомогою layer.addTo(map).

У мене виникло те саме питання, і я спробував метод fixZOrder (), але, на жаль, він не замовив для мене маркери Leaf , оскільки, схоже, це не впливає на zindex маркерів Leaflet.

Схоже, що .bringToFront () працює лише над векторними формами, які підтримують цей метод, навпаки маркерам Leaf, я розгорнув, що робить це рішення непрацездатним, не кажучи вже про іншу проблему з кодом, яку я відчував при fixZOrder (), але це може бути унікальним для мій випадок.

Сігналы абмеркавання

Натомість я просто залишив замовлення шару на Leaflet (параметри) у тому порядку, який я завантажив, що спричинило проблеми зі складанням маркера (плагін OMS Spiderf) при використанні елементів управління шарами , але мені вдалося їх вирішити за допомогою власної функції на основі setZIndexOffset ()

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

Хоча мій сценарій не вимагав fixZOrder(layers)врешті-решт, будь-кому іншому, що використовує цей метод разом зі штабелевими маркерами, може знадобитися подібний підхід, і тому я розміщую це як додаткове рішення для потенційних користувачів вищезазначеного способу замовлення шару.

Сігналы абмеркавання

КРЕДИТ : ghybs відповідь на stackoverflow.com/a/37850189/11106279

Подібно до відповіді від @nothingisne potrebno, layer.bringToFront()щоб підтримувати z-порядок при комбінованому layer controlта асинхронному завантаженні даних.

ми не хочемо очищати шари і додавати їх на карту, оскільки це додасть усі шари, натомість ми хочемо дотримуватись вибраних шарів у контролі шару з мінімальними накладними витратами. 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коли завантаження даних завершиться, нові шари, додані під час виконання, будуть відображатися поверх усіх інших шарів.

Ви повинні створити панель, щоб контролювати замовлення.

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

За допомогою цього ви можете додати шар до потрібної панелі.