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

时间:2013-11-12 20:50:53

标签: javascript maps leaflet

我有一张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();

1 个答案:

答案 0 :(得分:5)

问题是整个Tile Layer堆栈是在整个Overlay Layer堆栈下绘制的,bringToFrontsendToBack命令只影响每个堆栈中的层。在Leaflet的github网站上有一个bug report详细说明。它可能固定在0.7,但它已经被推回了几次。

在该错误报告中,他们引用workaround by 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);