mapbox leaflet javascript 窗格图层控件

Question

我正在使用一种创建 'map sandwich' 的方法，其中我有一个底图、一个叠加层，然后在顶部（在新窗格中）另一个切片层（标签）。

当我尝试切换图层控件中的标签时出现问题。我可以很好地关闭图层。但是，当我尝试重新添加标签时，它们出现在覆盖层下方。

看来图层控件应该记得按相同顺序放回图层。不管怎样，有什么解决方法吗？

这是一个 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

在您的 mbstyle 和 mblabels 层上放置显式 zIndexes：

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);

你的 Fiddle 的工作叉：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());

你的 Fiddle 的另一个分支：http://jsfiddle.net/b8439d32/

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

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

mapbox leaflet javascript 窗格图层控件

mapbox leaflet javascript pane layer control

javascript

leaflet

layer

mapbox

pane