← 教學

什麼是窗格？

在 Leaflet 中，地圖窗格會隱式地將圖層分組在一起，而開發人員並不知道此事。這種分組讓網頁瀏覽器能夠更有效率地同時處理多個圖層，而不是單獨處理每個圖層。

地圖窗格使用 z-index CSS 屬性，以確保某些圖層總是顯示在其他圖層之上。預設的順序是

• TileLayers 和 GridLayers
• Paths，像是線條、折線、圓形，或是 GeoJSON 圖層。
• Marker 陰影
• Marker 圖示
• Popups

這就是為什麼在 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;

將圖像圖磚放置在其他地圖圖層之上的一個問題是，圖磚會捕獲點擊和觸控。如果使用者點擊地圖上的任何位置，網頁瀏覽器會認為她點擊的是標籤圖磚，而不是 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());

現在範例地圖已完成！