web-dev-qa-db-ja.com

geoJsonレイヤーのzインデックスレイヤーの順序を設定するにはどうすればよいですか？

マップに追加される順序に関係なく、特定のレイヤーを常に他のレイヤーの上に配置したいと思います。 bringToFront()を認識していますが、要件を満たしていません。プロパティに基づいて動的にzIndexを設定したいと思います。

LeafletにはメソッドsetZIndex()がありますが、これはgeoJsonレイヤーでは機能しないようです： https://jsfiddle.net/jw2srhwn/

何か案は？

leafletz-indexmapboxgeojson
9
bob

ベクトルジオメトリに対しては実行できません。

zIndexはHTMLElementsのプロパティであり、ベクトルジオメトリ（線とポリゴン）はSVG要素として、またはプログラムで_<canvas>_描画呼び出しとしてレンダリングされます。これらの2つの方法には、zIndexの概念がないため、機能するのは、要素をSVGグループの上部（または下部）または_<canvas>_描画シーケンスにプッシュすることだけです。

また、_L.GeoJSON_は_L.LayerGroup_の特定のタイプであり、_L.Polygon_のインスタンスが含まれている場合は注意してください。さらに、 _L.LayerGroup_のsetZIndex()メソッドに関するLeafletのドキュメント を読んだ場合：

このグループに含まれるすべてのレイヤーでsetZIndexを呼び出し、z-indexを渡します。

では、_L.Polygon_ sにはsetZIndex()メソッドがありますか？いいえ。それを含むグループでそれを呼び出しても何も起こりません。ただし、そのグループに含まれるすべての_L.GridLayer_に影響します。

あなたの問題に戻って：

マップに追加される順序に関係なく、特定のレイヤーを常に他のレイヤーの上に配置したいと思います。

あなたが探しているのはマップペインのようです。 マップペインのチュートリアル を読んでください。

5
IvanSanchez

これが、Leaflet 1.0でユーザー定義の「ペイン」を実装する理由の1つです（バージョン0.xと比較して）。

  1. 作成 ペイン ：var myPane = map.createPane("myPaneName")
  2. 必要に応じて、ペイン要素のクラス/ z-indexを設定します：_myPane.style.zIndex = 450_（ 組み込みペインのz-index値 を参照）
  3. レイヤーを作成するときは、ターゲットを指定します pane オプション：L.rectangle(corners, { pane: "myPaneName" })
  4. _L.geoJSON_ファクトリを介してビルドする場合、onEachFeatureオプションを使用して機能をループし、指定したターゲットpaneでレイヤーのクローンを作成できます。

デモ： https://jsfiddle.net/3v7hd2vx/90/

2
ghybs

Z-Indexについて検索している人向け

Svgレイヤーには修正順序があるため、すべてのパスレイヤー（マーカーを除くすべて）にはz-indexがありません。最初の要素が最初にペイントされます。したがって、最後の要素が上にペイントされます。 @IvanSanchezは、zIndexが機能しない理由を説明しました。

順序は、layer.bringToBack()またはlayer.bringToFront()で制御できます。

そのコードを使用すると、レイヤーの順序を制御するためのより多くのオプションがあります。

_L.Path.include({
    getZIndex: function() {
        var node = this._path;
        var index = 0;
        while ( (node = node.previousElementSibling) ) {
            index++;
        }
        return index;
    },
    setZIndex: function(idx) {
        var obj1 = this._path;
        var parent = obj1.parentNode;
        if(parent.childNodes.length < idx){
            idx = parent.childNodes.length-1;
        }
        var obj2 = parent.childNodes[idx];
        if(obj2 === undefined || obj2 === null){
            return;
        }
        var next2 = obj2.nextSibling;
        if (next2 === obj1) {
            parent.insertBefore(obj1, obj2);
        } else {
            parent.insertBefore(obj2, obj1);
            if (next2) {
                parent.insertBefore(obj1, next2);
            } else {
                parent.appendChild(obj1);
            }
        }
    },
    oneUp: function(){
        this.setZIndex(this.getZIndex()+1)
    },
    oneDown: function(){
        this.setZIndex(this.getZIndex()-1)
    }
});
_

その後、あなたは呼び出すことができます

  • polygon.oneUp()
  • polygon.oneDown()
  • polygon.setZIndex(2)
  • polygon.getZIndex()
  • そして今、layergroup.setZIndex(2)が機能しています
0
Falke Design