leaflet之panes控制地图要素层级

什么是panes？

在Leaflet中，地图窗格隐式地将图层组合在一起，而开发人员不知道它。此分组允许Web浏览器以比单独处理图层更有效的方式一次处理多个图层。

地图窗格使用z-index CSS属性始终在其他图层之上显示某些图层。该默认顺序是：

• TileLayers和GridLayers
• Paths，如直线，折线，圆或GeoJSON图层。
• Marker 阴影
• Marker 图标
• Popup小号

这就是为什么在Leaflet地图中，弹出窗口始终显示其他图层的“顶部”，标记始终显示在图块层的顶部等。

Leaflet 1.0.0的新功能（不在0.7.x中）是自定义地图窗格，允许自定义此订单。

默认值并不总是正确的

在某些特定情况下，默认顺序不是地图的正确顺序。我们可以使用Carto底图和标签来证明这一点：

没有标签的底图图块

透明标签专用瓷砖

底图上的标签

如果我们使用这两个图块层创建Leaflet贴图，则任何标记或多边形都将显示在两者之上，但顶部的标签看起来更好。我们怎么能这样做？

自定义窗格

我们可以使用底图图块和GeoJSON图层等一些叠加层的默认值，但我们必须为标签定义自定义窗格，以便它们显示在GeoJSON数据之上。

自定义地图窗格是基于每个地图创建的，因此首先要创建L.Map窗格的实例和窗格：

var map = L.map('map');
map.createPane('labels');

下一步是设置窗格的z-index。查看默认值，值650将使TileLayer标签显示在标记之上但在弹出窗口下方。通过使用getPane()，我们引用了HTMLElement表示窗格，并更改其z-index：

map.getPane('labels').style.zIndex = 650;

将图像切片放在其他地图图层之上的问题之一是切片将捕获点击和触摸。如果用户单击地图上的任何位置，则Web浏览器将假定她单击了标签切片，而不是单击GeoJSON或标记。这可以通过使用可以解决的pointer-eventsCSS属性：

map.getPane('labels').style.pointerEvents = 'none';

现在窗格已准备就绪，我们可以添加图层，注意使用pane标签图块上的选项：

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB'
}).addTo(map);

var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB',
        pane: 'labels'
}).addTo(map);

var geojson = L.geoJson(GeoJsonData, geoJsonOptions).addTo(map);

最后，为GeoJSON层上的每个功能添加一些交互：

geojson.eachLayer(function (layer) {
    layer.bindPopup(layer.feature.properties.name);
});

map.fitBounds(geojson.getBounds());