mapbox leaflet javascript窗格圖層控件

Question

我正在使用一種方法來創建一個'貼圖三明治'，從而在頂部（在一個新窗格中）有一個底圖，一個疊加圖層，然後是另一個圖塊圖層（標籤）。

當我嘗試切換圖層控件中的標籤時，問題就出現了。我可以很好地切換圖層。但是，當我嘗試重新添加標籤時，它們出現在覆蓋層下面。

看來層控制應該記得把層重新放在相同的順序。無論如何，有沒有解決方法？

這是一個JSFiddle，可以簡潔地重現問題。 Fiddle Layer Control Problem

var mbstyle = L.mapbox.tileLayer('statecodemog.aa380654'); 

var mblabels = L.mapbox.tileLayer('statecodemog.798453f5', { 
'clickable': 'false' 
}); 

var map = L.map("map", { 
zoom: 8, 
center: [39, -104.8], 
minZoom: 4, 
layers: [mbstyle] 
}); 

//create map sandwich 
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane); 
var topLayer = mblabels.addTo(map); 
topPane.appendChild(topLayer.getContainer()); 

var baseLayers = { 
"Mapbox: Contrast Base": mbstyle 
}; 

var groupedOverlays = { 
"Labels and Borders": mblabels 
}; 

L.control.layers(baseLayers, groupedOverlays).addTo(map); 

var circle = L.circle([39, -104.8], 200000, { 
color: 'red', 
fillColor: '#f03', 
fillOpacity: 0.5 
}).addTo(map); 

Answer 1

將明確zIndexes您mbstyle和mblabels層：

var mbstyle = L.mapbox.tileLayer('statecodemog.aa380654', { 
    'zIndex': 1 
}); 

var mblabels = L.mapbox.tileLayer('statecodemog.798453f5', { 
    'clickable': 'false', 
    'zIndex': 1000 
}); 

然後告訴你L.control.layers不要與zIndexes勾搭：中

L.control.layers(baseLayers, groupedOverlays, { 
    'autoZIndex': false 
}).addTo(map); 

一個工作叉你小提琴：http://jsfiddle.net/r01mmfse/

你甚至可以拋開你mapsandwich部分：

//create map sandwich 
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane); 
var topLayer = mblabels.addTo(map); 
topPane.appendChild(topLayer.getContainer()); 

您小提琴的另一個叉：http://jsfiddle.net/b8439d32/

L.TileLayer參考：http://leafletjs.com/reference.html#tilelayer

L.control.layers參考：http://leafletjs.com/reference.html#control-layers