Question

我正在尝试在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

Answer 1

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

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

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

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

仅从平铺窗格中删除平铺：

line 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--;
            }
        }
    }

移动切片时移动覆盖窗格（缩放时）：

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

这些更改将画布添加到平铺窗格，因此它们是兄弟节点，因此它们的z-indices将影响它们相对于彼此的位置。因此，您需要删除切片图层，而不是清除切片窗格（this._tileBg.innerHTML = '';）。此外，传单交替显示哪个窗格是平铺窗格，以便它可以执行缩放动画，因此您需要将叠加窗格移动到平铺窗格。

此修复程序正在进行中。

希望这有帮助！

解决方法是让传单画布层显示在顶部？

1 个答案: