javascript - 在 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 堆栈下绘制的，bringToFrontandsendToBack命令只影响每个相应堆栈内的图层。Leaflet 的 github 站点上有一个错误报告详细说明了这一点。它可能会在 0.7 中修复，但它已经被推迟了几次。

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