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 インデックスを指定しても、その兄弟以外の前または後ろには表示されません。

貧弱だが実行可能な解決策として、私がしたことは次のとおりです。

リーフレット ソース コードに次の変更を加え ( leaflet-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 に答える