Como alterar a ordem das camadas no leaflet.js

Gostaria de poder alterar a ordem das camadas no folheto.

Tentei implementar dois plug-ins de folheto para alterar a ordem das camadas.

Primeiro, tentei os leaflet-control-orderlayers , que parecem funcionar, mas não oferecem suporte a layerGroups, eis o meu bug arquivado .

Em seguida, tentei mapbbcode , que suporta layerGroups, mas parece não funcionar ou ser mantido.

Alguém tem alguma sugestão de como implementar esse recurso?

Você pode fazer isso de duas maneiras (pelo menos; é assim que eu faço):

1. layer.bringToFront()e, no layer.bringToBack()entanto, eles fazem apenas uma camada de cada vez, e apenas a empurram para a frente ou para trás, não entre elas. Então, você precisará colocar as camadas na ordem desejada, começar com a camada que deseja colocar na parte inferior e chamar layer.bringToFront()cada camada.

2. Você também pode fazer isso removendo e adicionando novamente a camada. Isso parece meio desperdício, mas como o mapa deve ser redesenhado ao reposicionar camadas de qualquer maneira, geralmente não é tão importante assim.

Aqui está um violino bastante complexo que ilustra a questão

Basicamente, você remove todas as camadas e as adiciona novamente em z-indexordem crescente . Então, percorra todas as suas camadas de sobreposição e chame map.removeLayer(layer), classifique-as conforme desejado z-indexe adicione-as novamente usando layer.addTo(map).

Eu estava com o mesmo problema e tentei o método fixZOrder (), mas, infelizmente, ele não solicitou os marcadores Leaf para mim, pois não parece afetar o zindex dos marcadores Leaflet.

Parece que .bringToFront () funciona apenas em formas vetoriais que suportam este método, pelo contrário aos marcadores Folha I implantados tornando esta solução inviável, para não mencionar outra questão código que eu estava experimentando com fixZOrder (), mas isso poderia ser exclusivo para o meu caso.

O que outras pessoas estão dizendo

Em vez disso, simplesmente deixei a ordem de camada para Leaflet (opções) na ordem em que as carreguei, o que causou problemas com o empilhamento de marcadores (plug-in OMS Spiderf) ao usar controles de camada , mas consegui resolvê-los com a ajuda de minha própria função, com base em setZIndexOffset ()

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

Embora meu cenário não exija, fixZOrder(layers)no final, qualquer outra pessoa que use esse método juntamente com marcadores empilhados pode precisar adotar uma abordagem semelhante e, portanto, estou postando isso como uma solução adicional para possíveis usuários do método de pedido de camada mencionado acima.

O que outras pessoas estão dizendo

CRÉDITO : as ghybs respondem em stackoverflow.com/a/37850189/11106279

Semelhante à resposta de @nothingisnecessary, os seguintes usos layer.bringToFront()para manter a ordem z quando você combina o layer controlcarregamento de dados assíncrono.

não queremos limpar as camadas e adicioná-las novamente ao mapa, pois isso adicionará todas as camadas; em vez disso, queremos respeitar as camadas selecionadas no controle de camada com o mínimo de despesas gerais. bringToFront()pode fazer isso, mas devemos chamá-lo apenas em um grupo de camadas que possui camadas (conteúdo) dentro dele.

Defina as camadas:

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 a seguinte função para impor a ordem 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();
    });
}

Ao usar o controle Camada, quando uma Camada é alternada para exibição, ela fica por cima das outras camadas, precisamos reaplicar a lógica da ordem quando uma camada é adicionada. Isso pode ser feito vinculando o overlayaddevento no mapa e chamando a fixZOrderfunção:

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

Se você carregar seus dados de forma assíncrona, também poderá ser necessário chamar fixZOrderquando o carregamento de dados for concluído; novas camadas adicionadas em tempo de execução serão renderizadas sobre todas as outras camadas.

Você deve criar o painel para controlar o pedido.

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

Com isso, você pode adicionar a camada ao painel que deseja.