在Leaflet.js中叠加在瓷砖下面 [英] Overlay below tiles in Leaflet.js

问题描述

我有一张Leaflet.js地图，包含基础图块图层，标签图块图层和一些叠加图。我需要将标签图块层放在覆盖层上面。我尝试使用 bringToFront（）将它带到前面 - 但无济于事。
这是代码：

I have a Leaflet.js map, with a base tile layer, a label tile layer, and some overlays. I need to put the label tile layer ABOVE the overlays. I tried bringing it to front using bringToFront() - for no avail. Here's the code:

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

推荐答案

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

The problem is that the entire Tile Layer stack is drawn under the entire Overlay Layer stack and the bringToFront and sendToBack commands only affect layers within each respective stack. There is a bug report detailing this on Leaflet's github site. It might be fixed in 0.7, but it has already been pushed back a couple of times.

在该错误报告中，它们引用 jfirebaugh的解决方法。那应该做你想要的。在您的情况下，它使用以下代码在绘制其他所有内容后，将标签图层添加为地图顶部的单独DOM图层：

In that bug report, they reference a workaround by jfirebaugh. That should do what you want. It adds the, in your case, label layer as a separate DOM layer ontop of the map after everything else has been drawn, using this code:

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

这篇关于在Leaflet.js中叠加在瓷砖下面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！