更改 Leaflet 中图层的 z 顺序

Question

我使用以下代码创建了一个图层示例：

http://bl.ocks.org/ragnarheidar/a711faa1a94be4dae48f

负责创建图层的代码如下：

function getColor(d) 
{
    return marker_colors[d];
}   

function marker_style(i) 
{
    return {
        fillColor: getColor(i),
        radius: 5,
        weight: 1,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

//data URL variables
var start_date = '2013-08-01'; //YYYY-MM-DD
var end_date = '2013-08-08';   //YYYY-MM-DD
var c_type = 'Noise';          // Complaint Type

// Build the data URL
var URL = "http://data.cityofnewyork.us/resource/erm2-nwe9.json"; 
URL += "?";                                                   
URL += "$where=";                                             
URL += "(latitude IS NOT NULL)";                              
URL += " AND ";
URL += "(complaint_type='" + c_type + "')";                    
URL += " AND ";
URL += "(created_date>='" + start_date + "') AND (created_date<='" + end_date + "')"; 
URL += "&$group=complaint_type,descriptor,latitude,longitude";                        
URL += "&$select=descriptor,latitude,longitude,complaint_type";                       
URL = encodeURI(URL);                                                                 
console.log(URL);                                                                       

var noise_description = ["Air Condition/Ventilation Equipment", 
                        "Alarms",
                        "Banging/Pounding", 
                        "Barking Dog", 
                        "Car/Truck Horn", 
                        "Car/Truck Music", 
                        "Construction Equipment", 
                        "Construction Before/After Hours", 
                        "Engine Idling", 
                        "Ice Cream Truck", 
                        "Jack Hammering", 
                        "Lawn Care Equipment",
                        "Loud Music/Party",
                        "Loud Talking",
                        "Loud Television",
                        "Manufacturing Noise",
                        "Private Carting Noise",
                        "Others"];

var marker_colors = ['#7f3b08',
                    '#a50026',
                    '#d73027',
                    '#f46d43',
                    '#fdae61',
                    '#fee090',
                    '#ffffbf',
                    '#ffffff',
                    '#e0f3f8',
                    '#abd9e9',
                    '#74add1',
                    '#4575b4',
                    '#313695',
                    '#d8daeb',
                    '#b2abd2',
                    '#8073ac',
                    '#542788',
                    '#2d004b'];

//  Load GeoJSON from an external file
$.getJSON(URL, function(data)
{
        var markers = []
        var layers = []
        for (var i = 0; i < noise_description.length; i++) 
        {
            markers[i] = [];
        }

        var all_markers = [];

        $.each(data, function(index, rec)
        {
            var marker;
            for (var i = 0; i < noise_description.length; i++) 
            {
                if (rec.descriptor.indexOf(noise_description[i]) > -1) 
                {
                    marker = L.circleMarker([rec.latitude, rec.longitude], marker_style(i));
                    markers[i].push(marker); 
                    all_markers.push(marker); 
                    break;
                }
            }

        });

        // Create layer of all markers but do not add to map
        var all_layers = L.featureGroup(all_markers);       
        // Create specific layers of markers and add to map
        for (var i = 0; i < markers.length; i++) 
        {
            layers[i] = L.featureGroup(markers[i]).addTo(map);;
        }
        map.fitBounds(all_layers.getBounds());

        // Create object containing all marker layers 
        var overlays = {}; 
        for (var i = 0; i < noise_description.length; i++) 
        {
            overlays[noise_description[i]] = layers[i];
        }

        //add layer control using above object
        L.control.layers(null,overlays).addTo(map);
    });

这是我代码的最后一部分，但它显示在另一层后面（这种行为会随着页面的刷新而改变）：

我想知道如何控制它。

Answer 1

Leaflet 0.x 中的所有向量（我猜您使用的是上一个问题中的 Leaflet v0.7.7）被添加到 overlayPane 中的单个 SVG 容器中。

这包括您的第一个领域（我认为您没有在当前问题中包含该代码？）以及您的圆圈标记。

它们的堆叠顺序取决于它们的插入顺序。因此，由于您是异步加载它们的，具体取决于服务器发送数据所需的时间，您的圆形标记可能低于或高于您的区域。

您可以链接您的 2 个异步请求来预定义它们的执行顺序。一旦第一个查询完成，您只需启动下一个查询。但是你会延迟数据显示。

或者您可以使用bringToFront / bringToBack methods 强制将一些向量置于顶部/底部。您必须遍历您的功能组并将其应用于每个单独的图层，例如：

all_layers.eachLayer(function (layer) {
    layer.bringToFront();
});

Leaflet 1.0 中的情况有所不同，您可以在其中创建自己的窗格并指定它们的 z-index（可能通过 CSS）。然后，您可以在任何所需的窗格中插入图层（包括矢量）。