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}`);