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

рабочая вилка вашей 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