2

我正在尝试在L.geoJson图层上显示传单画布图层。但是，传单中似乎存在一个错误，无法使用bringToBack()/bringToFront()方法完成此操作。

var canvasTiles = L.tileLayer.canvas();

https://github.com/Leaflet/Leaflet/issues/974

我尝试在drawTile()方法结束时调用以下函数，试图将画布层置于顶部，但它不起作用。

var interiorMaskLayer = null;
var exteriorMaskLayer = null;

function addMaskToBack(){
    insertAtTheBottom = true;
    if (interiorMaskLayer && exteriorMaskLayer){        

        map.removeLayer(interiorMaskLayer);
        map.removeLayer(exteriorMaskLayer);
        }   
    interiorMaskLayer = L.geoJson(interiorMaskGeojsonPoly, {style: interiorStyle})
    map.addLayer(interiorMaskLayer, insertAtTheBottom);
    exteriorMaskLayer = L.geoJson(exteriorMaskGeojsonPoly, {style: exteriorStyle});
    map.addLayer(exteriorMaskLayer, insertAtTheBottom);
}

有没有一种解决方法可以让画布层显示在顶部？

使用 Leaflet-Leaflet-v0.5.1-0-gc1d410f.zip

4

1 回答 1

3

问题是它们位于不同的DIV元素中，具有不同的 z 索引，因此无论您为子节点提供什么 z 索引，它都不会出现在其兄弟节点的前面或后面。

这是我所做的，作为一个糟糕但可行的解决方案：

对传单源代码进行以下更改（遵循传单-src.js版本 5.1 文件），将覆盖窗格移动到平铺窗格：

第 1782 行：panes.overlayPane = this._createPane('leaflet-overlay-pane', this.tilePane);

仅从图块窗格中删除图块：

第 8242 行：

_clearTileBg: function () {
        if (!this._animatingZoom && !this.touchZoom._zooming) {
            /* this._tileBg.innerHTML = ''; */
            var the_tiles = this._tileBg.getElementsByClassName('leaflet-layer');
            var the_count = the_tiles.length;
            while(the_count>0){
                var child = the_tiles[the_count-1];
                child.parentNode.removeChild(child);
                the_count--;
            }
        }
    }

并在移动图块时移动覆盖窗格（缩放）：

并在第 8230行之前添加此行：this._tilePane.appendChild(this.getPanes().overlayPane);

这些更改将画布添加到平铺窗格中，因此它们是同级的，因此它们的 z 索引将影响它们相对于彼此的位置。this._tileBg.innerHTML = '';因此，您需要移除切片图层，而不是清除切片窗格 ( )。此外，传单交替使用哪个窗格是平铺窗格，以便它可以执行缩放动画，因此您需要将覆盖窗格移动到平铺窗格。

此修复程序正在进行中。

希望这可以帮助！

于 2013-04-25T05:50:55.207 回答