So ändern Sie die Ebenenreihenfolge in leaflet.js

Ich möchte in der Lage sein, die Reihenfolge der Schichten in der Packungsbeilage zu ändern.

Ich habe versucht, zwei Faltblatt-Plugins zu implementieren, um die Ebenenreihenfolge zu ändern.

Zuerst habe ich Flyer-Control-Orderlayers ausprobiert , was zu funktionieren scheint, aber LayerGroups nicht unterstützt. Hier ist mein Fehler .

Als nächstes habe ich Mapbbcode ausprobiert , der LayerGroups unterstützt, aber anscheinend nicht funktioniert oder gewartet wird.

Hat jemand Vorschläge zur Implementierung dieser Funktion?

Sie können dies auf verschiedene Arten tun (zumindest mache ich das so):

1. layer.bringToFront()und layer.bringToBack()aber diese machen jeweils nur eine Schicht und schieben sie nur nach vorne oder hinten, nicht dazwischen. Sie müssten also Ihre Ebenen in die gewünschte Reihenfolge bringen, mit der Ebene beginnen, die Sie unten haben möchten, und layer.bringToFront()jede Ebene aufrufen .

2. Sie können dies auch tun, indem Sie die Ebene entfernen und erneut hinzufügen. Dies scheint etwas verschwenderisch zu sein, aber da die Karte ohnehin neu gezeichnet werden muss, wenn Ebenen neu positioniert werden, ist dies im Allgemeinen keine so große Sache.

Hier ist eine ziemlich komplexe Geige, die das Problem veranschaulicht

Grundsätzlich entfernen Sie alle Ebenen und fügen sie dann in aufsteigender z-indexReihenfolge wieder hinzu. Durchlaufen Sie also alle Ihre Overlay-Ebenen, rufen Sie sie auf map.removeLayer(layer), sortieren Sie sie nach Ihren Wünschen z-indexund fügen Sie sie mit hinzu layer.addTo(map).

Ich hatte das gleiche Problem und habe die Methode fixZOrder () ausprobiert, aber leider wurden die Leaf-Marker für mich nicht bestellt, da sie den Zindex der Leaflet-Marker nicht zu beeinflussen scheinen.

Scheint so, als ob .bringToFront () nur mit Vektorformen funktioniert, die diese Methode unterstützen, im Gegensatz zu den von mir bereitgestellten Blattmarkierungen, die diese Lösung unbrauchbar machen, ganz zu schweigen von anderen Codeproblemen, die ich mit fixZOrder () hatte, aber dies könnte einzigartig sein mein Fall.

.

Stattdessen überließ ich die Ebenenreihenfolge einfach Leaflet (Optionen) in der Reihenfolge, in der ich sie geladen hatte, was zu Problemen beim Stapeln von Markern (OMS Spiderf-Plugin) bei der Verwendung von Ebenensteuerelementen führte , aber ich konnte diese mithilfe meiner eigenen Funktion basierend auf beheben setZIndexOffset ()

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

Obwohl mein Szenario ist nicht das erfordern fixZOrder(layers)in dem Ende jemand anderes dieses Verfahren zusammen mit gestapelten Markern muß einen ähnlichen Ansatz zu übernehmen und damit dies als ich bin Entsendung zusätzliche Lösung für die potenziellen Nutzer der oben genannten Schicht Bestellmethode.

.

KREDIT : ghybs antwortet auf stackoverflow.com/a/37850189/11106279

Ähnlich wie bei der Antwort von @nothingisnecessary wird im Folgenden layer.bringToFront()die Z-Reihenfolge beibehalten, wenn Sie layer controlDaten kombiniert und asynchron geladen haben .

Wir möchten die Ebenen nicht löschen und wieder zur Karte hinzufügen, da dadurch alle Ebenen hinzugefügt werden. Stattdessen möchten wir die ausgewählten Ebenen im Ebenensteuerelement mit minimalem Aufwand berücksichtigen. bringToFront()kann dies tun, aber wir müssen es nur auf einer Ebenengruppe aufrufen, die Ebenen (Inhalt) enthält.

Definieren Sie die Ebenen:

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

Verwenden Sie die folgende Funktion, um die Z-Reihenfolge zu erzwingen:

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

Wenn Sie das Ebenensteuerelement verwenden und eine Ebene in die Ansicht umgeschaltet wird, befindet sie sich über den anderen Ebenen. Wenn eine Ebene hinzugefügt wird, müssen Sie die Ordnungslogik erneut anwenden. Dies kann durch Binden an das overlayaddEreignis auf der Karte und Aufrufen der fixZOrderFunktion erfolgen:

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

Wenn Sie Ihre Daten asynchron laden, müssen Sie möglicherweise auch aufrufen, fixZOrderwenn das Laden der Daten abgeschlossen ist. Zur Laufzeit hinzugefügte neue Ebenen werden über allen anderen Ebenen gerendert.

Sie müssen Panel erstellen, um die Reihenfolge zu steuern.

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

Mit dieser Option können Sie die Ebene dem gewünschten Bereich hinzufügen.