[英]mapbox leaflet javascript pane layer control
我正在使用一种创建“地图三明治”的方法,借此在底下(在新窗格中)有一个底图,一个叠加层,然后是另一个图块层(标签)。
当我尝试在图层控件中切换标签时,问题就来了。 我可以关闭该层。 但是,当我尝试重新添加标签时,它们会出现在覆盖层的下面。
似乎图层控件应该记住以相同的顺序放回图层。 无论如何,有什么解决方法吗?
这是一个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);
将显式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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.