Skip to content

Give each overlay kind its own pane z-index band - #13

Open
wf9a5m75 wants to merge 1 commit into
developfrom
fix/overlay-stacking-order
Open

wf9a5m75 wants to merge 1 commit into
developfrom
fix/overlay-stacking-order

Conversation

@wf9a5m75

@wf9a5m75 wf9a5m75 commented Nov 8, 2026 •

Copy link
Copy Markdown
Contributor

なぜ

利用者の決定で、すべてのプロバイダ・3 プラットフォームで、オーバーレイを下から次の順に重ねます。

  1. ラスターレイヤー(RasterLayerState)
  2. GroundImage
  3. ポリゴン(ネイティブのポリゴンと、ポリゴンのタイルレイヤーが同じ帯)
  4. サークル
  5. ポリライン
  6. マーカー(ネイティブのマーカーと、マーカーのタイルレイヤーが同じ帯)

追加した順・送り直した順(clearOverlays の後など)・デザイン変更の後に左右されません。帯の中は zIndex、同じ zIndex なら渡された順です。

プロバイダごとに重なり順がばらばらでした(TomTom のラスターがポリゴンを覆う、送り直した GroundImage がポリゴンより上に来る、GL 系でサークルがポリゴンの下になる、など)。

何を変えたか

pane の z-index を overlayStackZ から取ります(211〜569 の 60 幅の帯、帯の中は zIndex を ±29 に丸める。Leaflet の tilePane 200 と markerPane 600 の間)。前はポリゴン・サークル・ポリラインが 400 ± zIndex を共有し、同じ zIndex なら先に作った pane が下でした。ラスターは 350 まで行き GroundImage(300)を越えられ、マーカータイルはラスターの帯にいました。

地図のラベルとの関係(今のまま)

今のままです。GL 系(MapLibre・Mapbox・MapTiler・Mappls・TomTom・Longdo)は、ラスターがベースマップのラベルの下、GroundImage・図形・マーカーはラベルの上(変更なし)。ラスターの帯を一番下にする決定とは矛盾しません(ラスターは自分の他のレイヤーより下で、かつラベルの下)。ラベルの扱いを変えるなら別の判断が必要です。

検証

2026-11-08 に develop(fix/mapview-teardown、fix/geodesic-polygon-fill、fix/clear-followups、refactor/polygon-controller などのマージ後)の上に載せ直してから確かめています。

  • 合成した react-sdk のツリーで、stacking だけの構成と develop + clear-strategy + stacking の構成の両方で、全パッケージのビルド・テスト・api-surface check が通りました(公開 API は export 名の追加のみ)。
  • OverlayStacking.test.mjs(追加順 5040 通り)、GL 系 6 本の OverlayStackOrder.test.mjs(120 通り・送り直し・スタイルの差し替え)が通ります。
  • 載せ直しで、GL 系 6 本の develop 由来のテスト test/PolygonController.test.mjs の偽の地図に getLayersOrder() を 1 行足しました(stacking は今のレイヤー順を読んで beforeId を決めるため。本物の地図にはある API で、テストの期待する並びは変えていません)。
  • Playwright で 15 プロバイダ・17 ルートを撮り直しました(普通に追加・逆の順・clearOverlays → 送り直し・デザイン変更)。ArcGIS 2D/3D・Google 3D・MapKit 以外は自動判定もすべて OK、画像でも下から ラスター < GroundImage < ポリゴン < サークル < ポリライン < マーカー でした。ArcGIS 2D/3D・Google 3D は探針が 3D の陰影や位置ずれで外れるだけで、画像では順が正しいことを見ています。

確認できていないもの

  • MapKit JS: GroundImage が図形の上に出て、ラスターは出ません(制約。直す前と同じ)。検証ページのマーカーも写りません(直す前から同じ、未解決)。
  • ArcGIS 2D はベースマップとラスターが出ない別件があります(別の担当が調査中)。
  • Cesium・OpenLayers・deck.gl は検証ページにデザインの候補が無く、「デザイン変更」の場面は実際には変わっていません。
  • web のプロバイダは js-sdk-core の新しい版が要ります(npm 公開と依存の引き上げ待ち)。

関連 PR(fix/overlay-stacking-order の一式)

マージの順番:

  1. fix/clear-strategy の一式(先に入れる想定。衝突はしないことを git merge-tree で確認済み)
  2. 各プラットフォームの core(android-sdk-core / ios-sdk-core / js-sdk-core)
  3. そのプラットフォームのプロバイダ(core の新しいヘルパーを使うので、core より先に入れるとビルドが通りません)
  • Android MapTiler は fix/maptiler-overlay-restore の上に載せています(同じ削除処理を両方が書き換えたため)。先に restore の PR(Remove style layers and sources by object so they can come back android-for-maptiler#17)を入れてください。
  • web はさらに js-sdk-core の npm 公開と、各 react-for-* の依存の引き上げが前提です(npm 公開はまだしない、という決定なので、web のプロバイダ PR はそれまで保留です)。

Pane z-indexes come from overlayStackZ (js-sdk-core): bands of 60 from
211 to 569 in the shared order raster < ground image < polygon < circle
< polyline < marker, zIndex clamped to ±29 inside a band, between
Leaflet's tilePane (200) and markerPane (600).

Polygons, circles and polylines used to share 400 ± zIndex, so with
equal zIndexes the pane created first was drawn under the others (a
circle added after a polygon was on top, added before it was under).
A raster could reach 350, over ground images (300). Marker tiles,
mounted as a raster, were in the raster band under every shape; they
are in the marker band now.

Needs the js-sdk-core release with overlayStackZ.
This was referenced Nov 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant