← 教程

什么是图层？

在 Leaflet 中，地图图层会将图层隐式地分组在一起，而无需开发者知晓。这种分组允许 Web 浏览器以比单独处理图层更有效的方式同时处理多个图层。

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

• TileLayer 和 GridLayer
• Path，如线、折线、圆或 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-events CSS 属性 来解决

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

现在图层已准备就绪，我们可以添加图层，注意在标签瓦片上使用 pane 选项

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

var positronLabels = L.tileLayer('https://{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());

现在 示例地图 完毕了！