在 Leaflet.js 中覆蓋下面的圖塊

Question

我有一個 Leaflet.js 地圖，帶有一個基本切片圖層、一個標簽切片圖層和一些疊加層。 我需要將標簽平鋪層放在疊加層之上。 我嘗試使用bringToFront()將其放在前面 - 無濟於事。 這是代碼：

map.addLayer( new L.StamenTileLayer("toner-lines") );
...// more code, loading the overlays, etc
var labels = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-labels-en/{z}/{x}/{y}.png', {
    maxZoom: 17,
    zIndex: 1000
});
labels.addTo(map);
labels.bringToFront();

Answer 1

問題是整個 Tile Layer 堆棧是在整個 Overlay Layer 堆棧下繪制的， bringToFront和sendToBack命令僅影響每個相應堆棧內的層。 Leaflet 的 github 站點上有一個錯誤報告詳細說明了這一點。 它可能會在 0.7 中修復，但它已經被推遲了幾次。

在該錯誤報告中，他們引用了jfirebaugh的解決方法。 那應該做你想做的事。 在繪制完其他所有內容后，它會在您的情況下將標簽層添加為地圖頂部的單獨 DOM 層，使用以下代碼：

var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var topLayer = L.mapbox.tileLayer('lxbarth.map-vtt23b1i').addTo(map);
topPane.appendChild(topLayer.getContainer());
topLayer.setZIndex(9);

Answer 2

對於現在使用 Leaflet 1.7.x/1.8.x 搜索的用戶，您可以設置切片圖層的窗格。

默認為平鋪窗格，但您可以添加此參數pane: 'overlayPane'以將平鋪層添加到疊加窗格。 所以上面的代碼看起來像這樣：

var labels = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-labels-en/{z}/{x}/{y}.png', {
    maxZoom: 17,
    zIndex: 1000,
    pane: 'overlayPane'
});