レイヤーを正しく並べ替えるのに苦労しています。
http://fiddle.jshell.net/zw8TR/6/
通常のタイル (Mapbox 経由)、Google マップ タイル、Geojson (Topojson から変換) 世界地図ポリゴン、マーカー、ポリラインなど、いくつかの異なるレイヤーを含むマップがあります。
問題は Google マップのタイルから始まります。通常のタイルよりも z-index が高く、マーカー/ポリラインが他のすべてを覆い隠しています。これをCSSで修正しました。
(余談: 私の経験では、これは意味がありません。z-index は継承されるため、親の z-index が 1 の場合、子は z-index 1 以外のものを持つことはできません。 child of.leaflet-google-layerのインライン z-index は 0 であり、実際のタイル (子である) の z-index は 200+ であり、これはブラウザーで受け入れられているように見えます.なぜそれが起こっているのかわかりません.z-インラインで追加された場合、インデックスは継承されませんか?)
次に、デフォルトでは、Leaflet はgeoJsonポリゴンをオーバーレイ レイヤーに配置します。内部には、マップに合わせてパンとズームを行う SVG があります (いいですね!)。ただし、ポリラインも同じ SVG の上部に追加され、ベクター マップによって隠されています。SVG には次のインライン属性があります - style="transform: translate3d(...);"。これにより 3D が強制されるため、z-index は問題を解決するために機能しなくなりました。
レイヤを DOM に追加する方法を制御したいと考えています。私の geoJson ベクター マップ (および可能であれば Google マップ タイル) は、.leaflet-tile-panediv に追加することにより、Tile レイヤーと一緒に配置する必要があります。このデモに従って「ペイン」を手動で追加しようとしましたが、エラーが発生しました(私のフィドルの19行目):
Object [object Object] has no method 'getContainer'
また
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
メソッドを削除すると。これは、作成しようとしているレイヤーがタイル レイヤーではないためだと思われますが、修正方法がわかりません。
結局のところ、私は知ってうれしいです.geoJsonレイヤーを.leaflet-overlay-pane??から取り出すにはどうすればよいですか?