Элемент управления слоем панели javascript листовки mapbox

Я использую подход для создания «сэндвича с картой», при котором у меня есть базовая карта, слой наложения, а затем еще один слой плитки (метки) наверху (в новой панели).

Проблема возникает, когда я пытаюсь переключить метки в элементе управления слоем. Я могу просто отключить этот слой. Однако, когда я пытаюсь повторно добавить метки, они появляются под слоем наложения.

Похоже, что элемент управления слоем должен помнить о том, чтобы вернуть слои в том же порядке. В любом случае, есть ли обходной путь?

Вот JSFiddle, который кратко воссоздает проблему. Проблема с контролем уровня скриптов

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

javascript leaflet mapbox layer pane
person user2242552    schedule 11.02.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Поместите явные 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/

Вы даже можете выбросить свою карту и часть сэндвича:

//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 < / а>

person iH8    schedule 12.02.2015
comment
Вы, сэр, гений. Я понятия не имел, что такое детальное управление слоями возможно - а это так легко реализовать! - person user2242552; 12.02.2015