Cách thay đổi thứ tự lớp trong leaflet.js

Tôi muốn có thể thay đổi thứ tự của các lớp trong tờ rơi.

Tôi đã thử thực hiện hai plugin tờ rơi để thay đổi thứ tự lớp.

Đầu tiên tôi đã thử các trình sắp xếp thứ tự kiểm soát tờ rơi , có vẻ như hoạt động, nhưng không hỗ trợ lớp Nhóm, đây là lỗi được nộp của tôi .

Tiếp theo tôi đã thử mapbbcode , hỗ trợ layergroup, nhưng dường như không hoạt động hoặc được duy trì.

Có ai có bất kỳ đề xuất cho cách thực hiện tính năng này?

Bạn có thể làm điều này theo một vài cách (ít nhất; đây là cách tôi làm):

1. layer.bringToFront()và layer.bringToBack()những thứ này sẽ chỉ thực hiện một lớp tại một thời điểm và chỉ đẩy nó ra phía trước hoặc phía sau, không phải ở giữa. Vì vậy, bạn sẽ cần phải đặt các lớp của mình theo thứ tự mong muốn, bắt đầu với lớp bạn muốn ở dưới cùng và gọi layer.bringToFront()trên mỗi lớp.

2. Bạn cũng có thể làm điều này bằng cách loại bỏ và thêm lại lớp. Điều này có vẻ lãng phí, nhưng vì bản đồ phải vẽ lại khi định vị lại các lớp dù thế nào, nó thường không phải là vấn đề lớn.

Đây là một câu đố khá phức tạp minh họa vấn đề

Về cơ bản, bạn loại bỏ tất cả các lớp và sau đó thêm lại chúng theo z-indexthứ tự tăng dần . Vì vậy, lặp qua tất cả các lớp phủ của bạn và gọi map.removeLayer(layer), sau đó sắp xếp chúng theo mong muốn của bạn z-index, sau đó thêm lại chúng bằng cách sử dụng layer.addTo(map).

Tôi đã gặp vấn đề tương tự và tôi đã thử phương thức fixZOrder (), nhưng thật đáng buồn là nó đã không đặt hàng các dấu hiệu Lá cho tôi vì nó dường như không ảnh hưởng đến zindex của các dấu hiệu Leaflet.

Có vẻ như .bringToFront () chỉ hoạt động trên các hình dạng vectơ hỗ trợ phương thức này, ngược lại với các dấu hiệu Lá tôi đã triển khai khiến giải pháp này không thể thực hiện được, chưa kể đến vấn đề mã khác mà tôi gặp phải với fixZOrder (), nhưng điều này có thể là duy nhất đối với trường hợp của tôi

Hay nói, là một tài tài của, qua, qua, qua một tài khác, qua giữ, qua một tài khác

Thay vào đó, tôi chỉ đơn giản để lại thứ tự lớp cho Leaflet (tùy chọn) theo thứ tự tôi đã tải chúng, điều này gây ra sự cố với xếp chồng đánh dấu (plugin OMS Spiderf) khi sử dụng các điều khiển lớp , nhưng tôi đã quản lý để giải quyết những điều này với sự trợ giúp của chính tôi setZ Index Offerset ()

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

Mặc dù kịch bản của tôi cuối cùng không yêu cầu bất kỳ ai khác sử dụng phương pháp này cùng với các dấu được xếp chồng có thể cần áp dụng một cách tiếp cận tương tự và do đó tôi đăng bài này như một giải pháp bổ sung cho người dùng tiềm năng của phương pháp đặt hàng lớp đã đề cập ở trên.fixZOrder(layers)

Hay nói, là một tài tài của, qua, qua, qua một tài khác, qua giữ, qua một tài khác

CREDIT : câu trả lời ghybs trên stackoverflow.com/a/37850189/11106279

Tương tự như câu trả lời từ @nothisn cần thiết sử dụng sau đây layer.bringToFront()để duy trì thứ tự z khi bạn đã kết hợp layer controlvà tải dữ liệu không đồng bộ.

chúng tôi không muốn xóa các lớp và thêm chúng trở lại bản đồ vì điều này sẽ thêm tất cả các lớp, thay vào đó chúng tôi muốn tôn trọng các lớp đã chọn trong Điều khiển lớp với các chi phí tối thiểu. bringToFront()có thể làm điều này nhưng chúng ta chỉ phải gọi nó trên một nhóm lớp có các lớp (nội dung) bên trong nó.

Xác định các lớp:

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

Sử dụng chức năng sau để thực thi thứ tự 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();
    });
}

Khi sử dụng điều khiển Lớp, khi một Lớp được bật vào chế độ xem, nó sẽ nằm trên cùng của các lớp khác, chúng ta cần áp dụng lại logic thứ tự khi một lớp được thêm vào. Điều này có thể được thực hiện bằng cách liên kết với overlayaddsự kiện trên bản đồ và gọi fixZOrderhàm:

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

Nếu bạn tải dữ liệu của mình không đồng bộ, bạn cũng có thể cần gọi fixZOrderkhi tải xong dữ liệu, các lớp mới được thêm vào trong thời gian chạy sẽ được hiển thị trên đầu trang của tất cả các lớp khác.

Bạn phải tạo Bảng điều khiển để kiểm soát thứ tự.

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

Với điều này, bạn có thể thêm lớp vào khung bạn muốn.