Leaflet.js'de katman sırası nasıl değiştirilir

Broşürdeki katmanların sırasını değiştirebilmek istiyorum.

Katman sırasını değiştirmek için iki broşür eklentisi uygulamayı denedim.

İlk Denedim broşür kontrol-orderlayers çalışmaları gibi görünüyor, ama layerGroups desteklemez, işte olan dosyalanan hata .

Sonra layerGroups destekleyen, ancak çalışma ya da bakım gibi görünmüyor mapbbcode denedim .

Bu özelliğin nasıl uygulanacağı konusunda herhangi bir önerisi olan var mı?

Bunu birkaç şekilde yapabilirsiniz (en azından; bunu nasıl yaparım):

1. layer.bringToFront()ve layer.bringToBack()ancak bunlar her seferinde sadece bir katman yapar ve aralarında değil, yalnızca öne veya arkaya doğru iter. Bu nedenle, katmanlarınızı istediğiniz sıraya koymanız, altta olmasını istediğiniz katmanla başlamanız ve layer.bringToFront()her katmanı çağırmanız gerekir .

2. Bunu, katmanı kaldırıp yeniden ekleyerek de yapabilirsiniz. Bu sorta boşa benziyor, ancak yine de katmanları yeniden konumlandırırken harita yeniden çizilmesi gerektiğinden, genellikle bu kadar büyük bir anlaşma değildir.

İşte sorunu gösteren oldukça karmaşık bir keman

Temel olarak tüm katmanları kaldırır ve sonra artan z-indexsırada yeniden eklersiniz . Öyleyse tüm katman katmanlarınız arasında dolaşın ve arayın map.removeLayer(layer), ardından istediğiniz şekilde sıralayın z-index, ardından kullanarak yeniden ekleyin layer.addTo(map).

Aynı sorunu yaşıyordum ve fixZOrder () yöntemini denedim, ancak ne yazık ki Leaflet işaretleyicilerinin zindexini etkilemediği için benim için Leaf işaretleyicilerini sipariş etmedi .

Görünüşe sadece vektör şekiller üzerinde çalışır) (.bringToFront , ben fixZOrder () ile karşılaşan oldu diğer kod sorunu saymıyorum ben işlemez bu çözümü render konuşlanmış Yaprak belirteçler için tam tersine, bu yöntemi destekleyen ama bu benzersiz olabilir benim olayım.

​​

Bunun yerine, katmanı siparişleri yüklediğim sırada Leaflet'e (seçenekler) bıraktım, bu da katman kontrollerini kullanırken işaretleyici istifleme (OMS Spiderf eklentisi) ile ilgili sorunlara neden oldu , ancak bunları kendi işlevim sayesinde çözmeyi başardım setZIndexOffset ()

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

Benim senaryo rağmen değil gerektiren fixZOrder(layers)uç yığılmış belirteçleri ile birlikte bu yöntemi kullanarak başkasının benzer bir yaklaşım benimsemek gerekebilir ve dolayısıyla ben bir şekilde bu mesaj ek çözümü yukarıda bahsedilen tabaka sırası yönteminin potansiyel kullanıcıları için.

​​

KREDİ : ghybs stackoverflow.com/a/37850189/11106279

@Nothing'den gelen cevaba benzer şekilde, layer.bringToFront()birleştirilmiş layer controlve eşzamansız veri yüklemeniz olduğunda z sırasını korumak için aşağıdaki kullanımlar gereksizdir .

katmanları temizlemek ve haritaya geri eklemek istemiyoruz çünkü bu tüm katmanları ekleyecektir, bunun yerine Katman Denetimi'nde seçilen katmanlara minimum ek yük ile saygı göstermek istiyoruz . bringToFront()bunu ancak içinde katmanlar (içerik) olan bir katman grubunda çağırmalıyız.

Katmanları tanımlayın:

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 sırasını zorlamak için aşağıdaki işlevi kullanın:

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

Katman denetimini kullanırken, bir Katman görünüme geçtiğinde, diğer katmanların üstünde olur, bir katman eklendiğinde sipariş mantığını yeniden uygulamamız gerekir. Bu overlayadd, haritadaki olaya bağlanarak ve fixZOrderişlevi çağırarak yapılabilir :

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

Verilerinizi eşzamansız olarak yüklerseniz fixZOrder, veri yüklemeniz tamamlandığında da aramanız gerekebilir , çalışma zamanında eklenen yeni katmanlar diğer tüm katmanların üstünde oluşturulur.

Siparişi kontrol etmek için Panel oluşturmalısınız.

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

Bununla katmanı istediğiniz bölmeye ekleyebilirsiniz.