2016-09-29 11 views
5

マップに追加する順序にかかわらず、常に他のレイヤーの上にある特定のレイヤーを持っていたいと思います。 私はbringToFront()を認識していますが、私の要件を満たしていません。プロパティに基づいてzIndexを動的に設定したいと思います。geoJsonレイヤーのzIndexレイヤーの順序を設定するにはどうすればいいですか?

リーフレット方法setZIndex()を持っていますが、これは明らかにGeoJSON層のために動作しません。 https://jsfiddle.net/jw2srhwn/

任意のアイデア?

答えて

3

ベクタージオメトリでは実行できません。

zIndexHTMLElementのプロパティであり、ベクターのジオメトリ(線とポリゴン)はSVG要素としてレンダリングされるか、<canvas>描画呼び出しとしてプログラムでレンダリングされます。これらの2つのメソッドにはzIndexという概念がないため、SVGグループの上端(または下端)に要素をプッシュするか、または<canvas>描画シーケンスを使用するだけです。

また、L.GeoJSONL.LayerGroupの特定の種類であり、ケースがL.Polygonであることを思い出してください。さらに、あなたがLeaflet's documentation about the setZIndex() method on L.LayerGroupを読めば:

Zインデックスを渡して、このグループに含まれるすべての層の上に setZIndexを呼び出し

したがって、L.PolygonsetZIndex()の方法を持っていますか?いいえ、それを彼らの収容グループで呼び出すことは何もしません。ただし、そのグループに含まれているL.GridLayerに影響します。

が戻ってあなたの問題に来る:

を私は、他人の上に常にそれらがマップに追加された順番に関係なくあることを特定の層を持っていると思います。

あなたが探しているものは地図ペインです。 map panes tutorialを読んでください。

1

これは、リーフレット1.0で(バージョン0.xと比較して)ユーザー定義の「ペイン」を実装する理由の1つです。必要であれば、var myPane = map.createPane("myPaneName")

  • ペイン要素のクラス/ Zインデックスを設定します:

    1. panesを作成myPane.style.zIndex = 450z-index values of built-in panes参照)
    2. あなたのレイヤーを作成する場合は、そのターゲットpaneオプションを指定します。L.rectangle(corners, { pane: "myPaneName" })
    3. L.geoJSONファクトリを使用して構築する場合は、onEachFeatureオプションを使用して機能をループして、指定したターゲットpaneでレイヤーを複製できます。

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

  • 関連する問題