在Leaflet.js中叠加在瓷砖下面

Question

我有一个Leaflet.js地图,带有基础图块图层,标签图块图层和一些叠加图.我需要将标签图块层放在覆盖层上面.我尝试将它带到前面使用bringToFront()- 无济于事.这是代码:

map.addLayer( new L.StamenTileLayer("toner-lines") );
...// more code, loading the overlays, etc
var labels = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-labels-en/{z}/{x}/{y}.png', {
    maxZoom: 17,
    zIndex: 1000
});
labels.addTo(map);
labels.bringToFront();

Answer 1

问题是整个Tile Layer堆栈是在整个Overlay Layer堆栈下绘制的,bringToFront而且sendToBack命令只影响每个相应堆栈中的层.在Leaflet的github网站上有一个错误报告,详细说明了这一点.它可能固定在0.7,但它已经被推回了几次.

在那个bug报告中,他们引用了jfirebaugh的解决方法.那应该做你想要的.在您使用此代码绘制其他所有内容之后,它会在您的情况下将标签图层添加为地图顶部的单独DOM图层:

var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var topLayer = L.mapbox.tileLayer('lxbarth.map-vtt23b1i').addTo(map);
topPane.appendChild(topLayer.getContainer());
topLayer.setZIndex(9);