Cómo cambiar el orden de las capas en leaflet.js

Me gustaría poder cambiar el orden de las capas en el folleto.

Intenté implementar dos complementos de folleto para cambiar el orden de las capas.

Primero probé leaflet-control-orderlayers , que parece funcionar, pero no es compatible con layerGroups, aquí está mi error archivado .

Luego probé mapbbcode , que admite grupos de capas, pero no parece funcionar ni mantenerse.

¿Alguien tiene alguna sugerencia sobre cómo implementar esta función?

Puedes hacer esto de dos maneras (al menos; así es como lo hago):

1. layer.bringToFront()y layer.bringToBack()pero estos solo harán una capa a la vez, y solo la empujarán hacia adelante o hacia atrás, no en el medio. Por lo tanto, necesitaría colocar sus capas en el orden deseado, comenzar con la capa que desea que esté en la parte inferior y llamar layer.bringToFront()a cada capa.

2. También puede hacerlo quitando y volviendo a agregar la capa. Esto parece un desperdicio, pero dado que el mapa debe redibujarse al reposicionar capas de todos modos, generalmente no es tan importante.

Aquí hay un violín bastante complejo que ilustra el problema.

Básicamente, elimina todas las capas y luego las vuelve a agregar en z-indexorden ascendente . Así que recorra todas sus capas superpuestas y llame map.removeLayer(layer), luego ordénelas por su deseado z-index, luego vuelva a agregarlas usando layer.addTo(map).

Estaba teniendo el mismo problema y probé el método fixZOrder (), pero lamentablemente no ordenó los marcadores Leaf porque no parece afectar el zindex de los marcadores Leaflet.

Parece que .bringToFront () funciona solo en formas vectoriales que admiten este método, al contrario de los marcadores Leaf que implementé, haciendo que esta solución no funcione, sin mencionar otro problema de código que estaba experimentando con fixZOrder (), pero esto podría ser exclusivo de mi caso.

​​

En cambio, simplemente dejé el orden de la capa en el Folleto (opciones) en el orden en que las cargué , lo que causó problemas con el apilamiento de marcadores (complemento OMS Spiderf) al usar los controles de capa , pero logré resolverlos con la ayuda de mi propia función basada en setZIndexOffset ()

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

Aunque mi escenario no requería que, al fixZOrder(layers)final, cualquier otra persona que usara este método junto con marcadores apilados pudiera necesitar adoptar un enfoque similar y, por lo tanto, estoy publicando esto como una solución adicional para los usuarios potenciales del método de orden de capas mencionado anteriormente.

​​

CRÉDITO : respuesta de ghybs en stackoverflow.com/a/37850189/11106279

Similar a la respuesta de @nothingisnenecesita los siguientes usos layer.bringToFront()para mantener el orden z cuando tiene una layer controlcarga de datos combinada y asincrónica.

no queremos borrar las capas y agregarlas nuevamente al mapa, ya que esto agregará todas las capas, en su lugar, queremos respetar las capas seleccionadas en el Control de capas con un mínimo de gastos generales. bringToFront()podemos hacer esto, pero solo debemos llamarlo en un grupo de capas que tenga capas (contenido) dentro.

Definir las capas:

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

Use la siguiente función para imponer el orden 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();
    });
}

Cuando se usa el control de capa, cuando una capa se activa, estará encima de las otras capas, necesitamos volver a aplicar la lógica de orden cuando se agrega una capa. Esto se puede hacer vinculando el overlayaddevento en el mapa y llamando a la fixZOrderfunción:

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

Si carga sus datos de forma asincrónica, es posible que también deba llamar fixZOrdercuando su carga de datos se haya completado, las nuevas capas agregadas en tiempo de ejecución se mostrarán sobre todas las demás capas.

Debe crear el Panel para controlar el pedido.

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

Con esto, puede agregar la capa al panel que desee.