From da8a42e9c702b76ddec84213a14ee0346f8dc787 Mon Sep 17 00:00:00 2001 From: Masashi Katsumata Date: Sun, 8 Nov 2026 00:17:19 -0800 Subject: [PATCH] Give each overlay kind its own layer z-index band MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Layer 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, above the basemap and under the native marker layer (600). Polygons, circles and polylines used to share 400 ± zIndex, so with equal zIndexes the one added last was on top. A raster could reach 350, over ground images (300). Marker tiles were in the raster band under every shape; they are in the marker band now. Needs the js-sdk-core release with overlayStackZ. --- src/helpers.ts | 15 ++++++++++++++- src/raster/OpenLayersRasterLayer.ts | 5 ++++- src/vector/OpenLayersVectorControllers.ts | 11 ++++------- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/helpers.ts b/src/helpers.ts index 87859d8..3ada826 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -1,4 +1,4 @@ -import { createGeoPoint, type GeoPoint, type GeoPointInterface } from '@mapconductor/js-sdk-core'; +import { createGeoPoint, overlayStackZ, type GeoPoint, type GeoPointInterface, type OverlayKind } from '@mapconductor/js-sdk-core'; import type { Coordinate } from 'ol/coordinate'; import type Map from 'ol/Map'; import type MapBrowserEvent from 'ol/MapBrowserEvent'; @@ -37,3 +37,16 @@ export function getLayerGroup(map: Map, name: string): BaseLayer | undefined { const groups = map.getLayerGroup().getLayersArray(); return groups.find(group => group.get('name') === name); } + +/** + * Layer z-index for an overlay, from the shared stack (js-sdk-core OVERLAY_STACK_ORDER): + * raster < ground image < polygon < circle < polyline < marker, zIndex within the band. + * + * Bands of 60 from 211 to 569: above the basemap (index 0, no zIndex) and below the native + * marker layer (600). zIndex is clamped to ±29 so it cannot cross a band. Polygons, circles + * and polylines used to share one range (400 ± zIndex), so with equal zIndexes the one added + * last was drawn on top; a raster could go up to 350, over ground images (300). + */ +export function overlayLayerZIndex(kind: OverlayKind, zIndex: number | null | undefined = 0): number { + return overlayStackZ(kind, zIndex, { base: 240, bandSize: 60 }); +} diff --git a/src/raster/OpenLayersRasterLayer.ts b/src/raster/OpenLayersRasterLayer.ts index e9771b9..77674a4 100644 --- a/src/raster/OpenLayersRasterLayer.ts +++ b/src/raster/OpenLayersRasterLayer.ts @@ -15,6 +15,7 @@ import type ImageTile from 'ol/ImageTile'; import TileLayerClass from 'ol/layer/Tile.js'; import XYZ from 'ol/source/XYZ.js'; import { renderXYZTemplate } from 'ol/uri.js'; +import { overlayLayerZIndex } from '../helpers'; import { OpenLayersMapViewHolder } from '../OpenLayersMapViewHolder'; import { parseLocalTileRequest, parseLocalTileTemplate } from './localTileUrl'; @@ -117,7 +118,9 @@ export class OpenLayersRasterLayerRenderer { const layer = new TileLayerClass({ source: tileSource, opacity: state.opacity, - zIndex: 250 + Math.max(-100, Math.min(100, state.zIndex)), + // Marker tiles are mounted as a raster but belong with the markers (under the native + // marker layer, over the shapes). + zIndex: state.id === 'mc-marker-tiles' ? overlayLayerZIndex('marker', 0) : overlayLayerZIndex('rasterLayer', state.zIndex), }); this.holder.map.addLayer(layer); diff --git a/src/vector/OpenLayersVectorControllers.ts b/src/vector/OpenLayersVectorControllers.ts index 7995db1..26b63b0 100644 --- a/src/vector/OpenLayersVectorControllers.ts +++ b/src/vector/OpenLayersVectorControllers.ts @@ -44,21 +44,18 @@ import IconClass from 'ol/style/Icon.js'; import ImageLayerClass from 'ol/layer/Image.js'; import StaticClass from 'ol/source/ImageStatic.js'; import { OpenLayersMapViewHolder } from '../OpenLayersMapViewHolder'; -import { toCoordinate } from '../helpers'; - -const VECTOR_BASE_Z_INDEX = 400; -const GROUND_IMAGE_BASE_Z_INDEX = 300; +import { overlayLayerZIndex, toCoordinate } from '../helpers'; function vectorLayer( holder: OpenLayersMapViewHolder, - kind: string, + kind: 'circle' | 'polyline' | 'polygon', id: string, zIndex: number, ): VectorLayer>> { const source = new VectorSourceClass>(); const layer = new VectorLayerClass({ source, - zIndex: VECTOR_BASE_Z_INDEX + Math.max(-100, Math.min(100, zIndex)), + zIndex: overlayLayerZIndex(kind, zIndex), }); layer.set('name', `mc-${kind}-${id}`); @@ -301,7 +298,7 @@ export class OpenLayersGroundImageRenderer extends AbstractGroundImageOverlayRen const source = new StaticClass({ url: state.imageUrl, imageExtent: extent }); const layer = new ImageLayerClass({ source, - zIndex: GROUND_IMAGE_BASE_Z_INDEX, + zIndex: overlayLayerZIndex('groundImage'), opacity: state.opacity, }); layer.set('name', `mc-ground-image-${state.id}`);