@npm9912/v-map 0.1.0

package/dist/collection/map-provider/deck/DeckGLGeoTIFFTerrainLayer.js

@@ -0,0 +1,410 @@
+import { log, warn, error } from "../../utils/logger";
+import { loadGeoTIFFSource } from "../geotiff/geotiff-source";
+import { GeoTIFFTileProcessor, getTileProcessorConfig, } from "../geotiff/utils/GeoTIFFTileProcessor";
+import { getColorStops, } from "../geotiff/utils/colormap-utils";
+const LOG_PREFIX = 'v-map - deck - terrain-geotiff - ';
+const TILE_LAYER_LOG_PREFIX = 'v-map - deck - terrain-geotiff - tilelayer - ';
+/**
+ * Factory-Funktion zum Erstellen eines DeckGLGeoTIFFTerrainLayer
+ *
+ * Rendert GeoTIFF-Höhendaten als 3D-Terrain-Mesh (Standard) oder als
+ * colormap-basierte 2D-Kacheln.
+ *
+ * Im terrain-Modus (Standard) wird der Martini-Algorithmus (@mapbox/martini)
+ * für adaptive RTIN-Mesh-Generierung verwendet. meshMaxError, wireframe und
+ * elevationScale sind in diesem Modus funktional.
+ */
+export async function createDeckGLGeoTIFFTerrainLayer(props) {
+    const [{ CompositeLayer }, { TileLayer }, { BitmapLayer }, { SimpleMeshLayer }, MartiniModule, { default: proj4 }, geotiffModule, geokeysModule,] = await Promise.all([
+        import('@deck.gl/core'),
+        import('@deck.gl/geo-layers'),
+        import('@deck.gl/layers'),
+        import('@deck.gl/mesh-layers'),
+        import('@mapbox/martini'),
+        import('proj4'),
+        import('geotiff'),
+        import('geotiff-geokeys-to-proj4'),
+    ]);
+    const Martini = MartiniModule.default ?? MartiniModule;
+    class DeckGLGeoTIFFTerrainLayer extends CompositeLayer {
+        static layerName = 'DeckGLGeoTIFFTerrainLayer';
+        static defaultProps = {
+            minZoom: 0,
+            maxZoom: 24,
+            tileSize: 256,
+            noDataValue: 0,
+            forceProjection: false,
+            meshMaxError: 4.0,
+            wireframe: false,
+            elevationScale: 1.0,
+            colorMap: 'terrain',
+            renderMode: 'terrain',
+        };
+        tiff;
+        image;
+        fromProjection = 'EPSG:4326';
+        viewProjection = 'EPSG:3857';
+        sourceBounds = [0, 0, 0, 0];
+        tileProcessor;
+        activeLoad;
+        loadedSignature;
+        loadToken = 0;
+        storeRuntimeState() {
+            this.setState({
+                runtime: {
+                    tiff: this.tiff,
+                    image: this.image,
+                    fromProjection: this.fromProjection,
+                    sourceBounds: this.sourceBounds,
+                    tileProcessor: this.tileProcessor,
+                },
+            });
+        }
+        restoreRuntimeState() {
+            const runtime = this.state.runtime;
+            if (!runtime)
+                return;
+            this.tiff ??= runtime.tiff;
+            this.image ??= runtime.image;
+            this.tileProcessor ??= runtime.tileProcessor;
+            this.fromProjection = runtime.fromProjection ?? this.fromProjection;
+            this.sourceBounds = runtime.sourceBounds ?? this.sourceBounds;
+        }
+        constructor(layerProps) {
+            super(layerProps);
+        }
+        getLoadSignature(props = this.props) {
+            return JSON.stringify({
+                url: props.url ?? null,
+                projection: props.projection ?? null,
+                forceProjection: props.forceProjection ?? false,
+                noDataValue: props.noDataValue ?? null,
+            });
+        }
+        scheduleLoad(reason) {
+            const signature = this.getLoadSignature();
+            if (this.activeLoad?.signature === signature) {
+                log(`${LOG_PREFIX}skip duplicate load: ${reason}`);
+                return;
+            }
+            if (this.loadedSignature === signature && this.state.init) {
+                log(`${LOG_PREFIX}skip already-loaded source: ${reason}`);
+                return;
+            }
+            const token = ++this.loadToken;
+            this.activeLoad = { signature, token };
+            this.setState({ init: false });
+            void this._loadAsync(token, signature, reason);
+        }
+        async _loadAsync(token, signature, reason) {
+            try {
+                const applied = await this.loadGeoTIFF(token);
+                if (!applied || this.activeLoad?.token !== token) {
+                    return;
+                }
+                this.loadedSignature = signature;
+                this.setState({ init: true });
+                log(`${LOG_PREFIX}load complete: ${reason}`);
+            }
+            finally {
+                if (this.activeLoad?.token === token) {
+                    this.activeLoad = undefined;
+                }
+            }
+        }
+        // ============================================================================
+        // LIFECYCLE METHODS
+        // ============================================================================
+        async initializeState(_context) {
+            this.scheduleLoad('initializeState');
+        }
+        shouldUpdateState({ changeFlags }) {
+            return Boolean(changeFlags.propsOrDataChanged || changeFlags.updateTriggersChanged);
+        }
+        updateState({ props: newProps, oldProps, changeFlags, }) {
+            this.restoreRuntimeState();
+            const reloadPropsChanged = newProps.url !== oldProps.url ||
+                newProps.projection !== oldProps.projection ||
+                newProps.forceProjection !== oldProps.forceProjection ||
+                newProps.noDataValue !== oldProps.noDataValue;
+            const invalidatePropsChanged = newProps.meshMaxError !== oldProps.meshMaxError ||
+                newProps.wireframe !== oldProps.wireframe ||
+                newProps.texture !== oldProps.texture ||
+                newProps.color !== oldProps.color ||
+                newProps.colorMap !== oldProps.colorMap ||
+                newProps.valueRange !== oldProps.valueRange ||
+                newProps.elevationScale !== oldProps.elevationScale ||
+                newProps.opacity !== oldProps.opacity ||
+                newProps.visible !== oldProps.visible ||
+                newProps.renderMode !== oldProps.renderMode ||
+                changeFlags.updateTriggersChanged;
+            if (changeFlags.dataChanged ||
+                newProps.data !== oldProps.data ||
+                reloadPropsChanged) {
+                this.scheduleLoad('updateState');
+                return;
+            }
+            if (invalidatePropsChanged) {
+                this.setNeedsRedraw();
+            }
+        }
+        finalizeState(_context) {
+            if (this.tiff) {
+                this.tiff = null;
+            }
+            this.image = null;
+        }
+        // ============================================================================
+        // GEOTIFF LOADING
+        // ============================================================================
+        async loadGeoTIFF(token) {
+            const { url, projection, forceProjection } = this.props;
+            if (!url) {
+                this.tiff = undefined;
+                this.image = undefined;
+                this.tileProcessor = undefined;
+                this.sourceBounds = [0, 0, 0, 0];
+                this.storeRuntimeState();
+                log(`${LOG_PREFIX}no URL provided, skipping GeoTIFF loading`);
+                this.loadedSignature = this.getLoadSignature();
+                return true;
+            }
+            log(`${LOG_PREFIX}loadGeoTIFF: url=${url}, token=${token}`);
+            try {
+                const source = await loadGeoTIFFSource(url, {
+                    projection,
+                    forceProjection,
+                    nodata: this.props.noDataValue,
+                }, {
+                    geotiff: geotiffModule,
+                    proj4,
+                    geokeysToProj4: geokeysModule,
+                });
+                if (this.activeLoad?.token !== token) {
+                    log(`${LOG_PREFIX}ignore stale source load result: token=${token}`);
+                    return false;
+                }
+                this.tiff = source.tiff;
+                this.image = source.baseImage;
+                this.fromProjection = source.fromProjection;
+                this.sourceBounds = source.sourceBounds;
+                const config = await getTileProcessorConfig(source, this.viewProjection);
+                if (this.activeLoad?.token !== token) {
+                    log(`${LOG_PREFIX}ignore stale tile processor result: token=${token}`);
+                    return false;
+                }
+                this.tileProcessor = new GeoTIFFTileProcessor(config);
+                this.tileProcessor.createGlobalTriangulation();
+                this.storeRuntimeState();
+                log(`${LOG_PREFIX}loaded: projection=${this.fromProjection}→${this.viewProjection}, bounds=[${this.sourceBounds.map(v => v.toFixed(0)).join(',')}]`);
+                this.setNeedsRedraw();
+                return true;
+            }
+            catch (err) {
+                error(`${LOG_PREFIX}failed to load GeoTIFF:`, err);
+                this.raiseError(err, 'Failed to load GeoTIFF');
+                return false;
+            }
+        }
+        // ============================================================================
+        // VIEW EXTENT
+        // ============================================================================
+        getViewExtent() {
+            if (!this.tileProcessor)
+                return null;
+            const [srcWest, srcSouth, srcEast, srcNorth] = this.sourceBounds;
+            const MAX_LAT = 85.05112878;
+            const clampLon = (lon) => Math.max(-180, Math.min(180, Number.isFinite(lon) ? lon : 0));
+            const clampLat = (lat) => Math.max(-MAX_LAT, Math.min(MAX_LAT, Number.isFinite(lat) ? lat : 0));
+            const transformSourceToWGS84 = (coord) => {
+                if (this.fromProjection === 'EPSG:4326') {
+                    return coord;
+                }
+                const result = proj4(this.fromProjection, 'EPSG:4326', coord);
+                return [Number(result[0]), Number(result[1])];
+            };
+            try {
+                const corners = [
+                    transformSourceToWGS84([srcWest, srcSouth]),
+                    transformSourceToWGS84([srcEast, srcSouth]),
+                    transformSourceToWGS84([srcEast, srcNorth]),
+                    transformSourceToWGS84([srcWest, srcNorth]),
+                ];
+                const minLng = clampLon(Math.min(...corners.map(corner => corner[0])));
+                const maxLng = clampLon(Math.max(...corners.map(corner => corner[0])));
+                const minLat = clampLat(Math.min(...corners.map(corner => corner[1])));
+                const maxLat = clampLat(Math.max(...corners.map(corner => corner[1])));
+                if (minLng > maxLng || minLat > maxLat) {
+                    warn(`${LOG_PREFIX}invalid extent calculated from source bounds`);
+                    return null;
+                }
+                return [minLng, minLat, maxLng, maxLat];
+            }
+            catch (err) {
+                warn(`${LOG_PREFIX}failed to calculate extent from source bounds:`, err);
+                return null;
+            }
+        }
+        // ============================================================================
+        // TILE DATA GENERATION
+        // ============================================================================
+        async getTileData(tile) {
+            if (!this.image || !this.tileProcessor)
+                return null;
+            const { x, y, z } = tile.index;
+            const { tileSize, renderMode } = this.props;
+            try {
+                if (renderMode === 'colormap') {
+                    return this._getTileDataColormap(x, y, z, tileSize);
+                }
+                return this._getTileDataTerrain(x, y, z, tileSize);
+            }
+            catch (err) {
+                warn(`${LOG_PREFIX}tile [${z}/${x}/${y}] failed:`, err);
+                return null;
+            }
+        }
+        async _getTileDataColormap(x, y, z, tileSize) {
+            const { colorMap, valueRange } = this.props;
+            let colorStops;
+            if (colorMap) {
+                colorStops = getColorStops(colorMap, valueRange).stops;
+            }
+            const rgbaData = await this.tileProcessor.getTileData({
+                x, y, z,
+                tileSize,
+                resolution: 1.0,
+                resampleMethod: 'bilinear',
+                colorStops,
+            });
+            if (!rgbaData)
+                return null;
+            return { data: rgbaData, width: tileSize, height: tileSize };
+        }
+        async _getTileDataTerrain(x, y, z, tileSize) {
+            const elevationData = await this.tileProcessor.getElevationData({ x, y, z, tileSize });
+            if (!elevationData)
+                return null;
+            return { elevationData, gridSize: tileSize + 1 };
+        }
+        // ============================================================================
+        // RENDERING
+        // ============================================================================
+        renderLayers() {
+            this.restoreRuntimeState();
+            if (!this.image || !this.tileProcessor || this.props.visible === false) {
+                return null;
+            }
+            const { minZoom, maxZoom, tileSize, renderMode, opacity } = this.props;
+            const extent = this.getViewExtent();
+            const layerConfig = {
+                id: `${this.props.id}-tiles`,
+                minZoom,
+                maxZoom,
+                tileSize,
+                opacity,
+                visible: this.props.visible,
+                getTileData: this.getTileData.bind(this),
+                onTileError: (err) => {
+                    warn(`${TILE_LAYER_LOG_PREFIX}error: ${err.message}`);
+                    this.props.onTileLoadError?.(err);
+                },
+                renderSubLayers: renderMode === 'colormap'
+                    ? this._renderColormapSubLayer.bind(this)
+                    : this._renderTerrainSubLayer.bind(this),
+            };
+            if (extent) {
+                layerConfig.extent = extent;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TileLayer constructor expects TileLayerProps which conflicts with dynamic config assembly
+            return new TileLayer(layerConfig);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- deck.gl renderSubLayers pass-through pattern requires any for prop spreading
+        _renderColormapSubLayer(subProps) {
+            const { tile } = subProps;
+            if (!tile?.data)
+                return null;
+            const { data, width, height } = tile.data;
+            const { west, south, east, north } = subProps.tile.bbox;
+            const bounds = [west, south, east, north];
+            const { opacity, visible } = this.props;
+            const webgl = globalThis.WebGLRenderingContext;
+            const textureMinFilter = webgl?.TEXTURE_MIN_FILTER ?? 10241;
+            const textureMagFilter = webgl?.TEXTURE_MAG_FILTER ?? 10240;
+            const linear = webgl?.LINEAR ?? 9729;
+            return new BitmapLayer({
+                ...subProps,
+                id: `${subProps.id}-bitmap`,
+                opacity,
+                visible,
+                image: { data, width, height },
+                bounds,
+                textureParameters: {
+                    [textureMinFilter]: linear,
+                    [textureMagFilter]: linear,
+                },
+            });
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- deck.gl renderSubLayers pass-through pattern requires any for prop spreading
+        _renderTerrainSubLayer(subProps) {
+            const { tile } = subProps;
+            if (!tile?.data)
+                return null;
+            const { elevationData, gridSize } = tile.data;
+            const { west, south, east, north } = subProps.tile.bbox;
+            const { meshMaxError, wireframe, color, elevationScale, texture, opacity, visible } = this.props;
+            // Martini mesh is rebuilt here on each renderSubLayers call.
+            // This is acceptable because TileLayer only invokes renderSubLayers
+            // when tile data actually changes (new tile loaded or evicted),
+            // not on every frame redraw.
+            const martini = new Martini(gridSize);
+            const martiniTile = martini.createTile(elevationData);
+            const { vertices, triangles } = martiniTile.getMesh(meshMaxError ?? 4.0);
+            const tileSize = gridSize - 1;
+            const numVertices = vertices.length / 2;
+            const positions = new Float32Array(numVertices * 3);
+            const texCoords = new Float32Array(numVertices * 2);
+            const lonRange = east - west;
+            const latRange = north - south;
+            const scale = elevationScale ?? 1.0;
+            for (let i = 0; i < numVertices; i++) {
+                const px = vertices[i * 2];
+                const py = vertices[i * 2 + 1];
+                const elevation = elevationData[py * gridSize + px];
+                positions[i * 3 + 0] = west + (px / tileSize) * lonRange;
+                positions[i * 3 + 1] = north - (py / tileSize) * latRange;
+                positions[i * 3 + 2] = elevation * scale;
+                texCoords[i * 2 + 0] = px / tileSize;
+                texCoords[i * 2 + 1] = py / tileSize;
+            }
+            const mesh = {
+                attributes: {
+                    POSITION: { value: positions, size: 3 },
+                    TEXCOORD_0: { value: texCoords, size: 2 },
+                },
+                indices: { value: Uint32Array.from(triangles), size: 1 },
+                mode: 4, // TRIANGLES
+            };
+            const tileIndex = subProps.tile?.index;
+            const tileTexture = typeof texture === 'string'
+                ? texture
+                    .replaceAll('{x}', String(tileIndex?.x ?? '{x}'))
+                    .replaceAll('{y}', String(tileIndex?.y ?? '{y}'))
+                    .replaceAll('{z}', String(tileIndex?.z ?? '{z}'))
+                : undefined;
+            return new SimpleMeshLayer({
+                ...subProps,
+                id: `${subProps.id}-mesh`,
+                opacity,
+                visible,
+                mesh,
+                data: [[0, 0, 0]],
+                getPosition: (d) => d,
+                getColor: tileTexture ? [255, 255, 255] : (color ?? [200, 200, 200]),
+                texture: tileTexture ?? null,
+                wireframe: wireframe ?? false,
+            });
+        }
+    }
+    return new DeckGLGeoTIFFTerrainLayer(props);
+}

package/dist/collection/map-provider/deck/LayerGroupWithModel.js

@@ -0,0 +1,169 @@
+import { log } from "../../utils/logger";
+export class LayerGroupWithModel {
+    id;
+    _visible = true;
+    _syncMode = 'force-model';
+    _models = new Map();
+    _instances = new Map();
+    _recreateOnNextEmit = false;
+    _overrides = new Map(); // <<<< NEU
+    _dirty = true;
+    _cachedLayers = [];
+    _basemap = null;
+    constructor(opts) {
+        this.id = opts.id;
+        this._visible = opts.visible ?? true;
+        this._syncMode = opts.syncMode ?? 'force-model';
+        this._basemap = opts.basemap ?? null;
+        (opts.models ?? []).forEach(m => this.addModel(m));
+    }
+    get visible() {
+        return this._visible;
+    }
+    set visible(v) {
+        if (this._visible === v)
+            return;
+        this._visible = v;
+        if (!v) {
+            this._instances.clear(); // finalisierte Instanzen verwerfen
+            this._recreateOnNextEmit = true;
+        }
+        this._dirty = true;
+    }
+    get syncMode() {
+        return this._syncMode;
+    }
+    set syncMode(m) {
+        if (this._syncMode !== m) {
+            this._syncMode = m;
+            this._dirty = true;
+        }
+    }
+    set basemap(b) {
+        if (this._basemap === b)
+            return;
+        this._basemap = b;
+        // Basemap-Änderung kann viele Modelle temporär entfernen
+        this._instances.clear();
+        this._recreateOnNextEmit = true;
+        this._dirty = true;
+    }
+    get basemap() {
+        return this._basemap;
+    }
+    isDirty() {
+        return this._dirty;
+    }
+    addModel(model) {
+        if (!model?.id)
+            throw new Error('LayerModel benötigt id');
+        this._models.set(model.id, { ...model });
+        this._dirty = true;
+    }
+    addModels(models) {
+        models.forEach(m => this.addModel(m));
+    }
+    getModel(id) {
+        const m = this._models.get(id);
+        return m ? { ...m } : undefined;
+    }
+    removeModel(id) {
+        if (this._models.delete(id)) {
+            this._instances.delete(id);
+            this._overrides.delete(id);
+            this._dirty = true;
+        }
+    }
+    clear() {
+        this._models.clear();
+        this._instances.clear();
+        this._overrides.clear();
+        this._cachedLayers = [];
+        this._dirty = true;
+    }
+    setModelEnabled(id, enabled) {
+        const m = this._models.get(id);
+        if (!m)
+            throw new Error(`LayerModel "${id}" nicht gefunden`);
+        if (m.enabled === enabled)
+            return;
+        m.enabled = enabled;
+        if (!enabled) {
+            this._instances.delete(id); // bei Disable die Instanz verwerfen
+        }
+        this._dirty = true;
+    }
+    replaceModel(model) {
+        const had = this._models.has(model.id);
+        this._models.set(model.id, { ...model });
+        this._dirty = this._dirty || !had;
+    }
+    setModelOverrides(id, overrides) {
+        if (!this._models.has(id))
+            throw new Error(`LayerModel "${id}" nicht gefunden`);
+        const current = this._overrides.get(id) ?? {};
+        this._overrides.set(id, { ...current, ...overrides });
+        this._dirty = true;
+    }
+    clearModelOverrides(id) {
+        if (this._overrides.delete(id))
+            this._dirty = true;
+    }
+    getLayers() {
+        if (!this._dirty && this._cachedLayers.length)
+            return this._cachedLayers;
+        if (!this._visible) {
+            this._cachedLayers = [];
+            this._dirty = false;
+            return this._cachedLayers;
+        }
+        const out = [];
+        for (const [id, model] of this._models.entries()) {
+            let effective = this._visible && model.enabled;
+            if (this._basemap && model.elementId !== this._basemap) {
+                effective = false;
+            }
+            if (!effective) {
+                this._instances.delete(id);
+                continue;
+            }
+            // Instanz frisch erzeugen, wenn keine da (oder nach clear)
+            let inst = this._instances.get(id);
+            if (!inst || this._recreateOnNextEmit) {
+                log('deck - lgwm - getLayers - model.make()');
+                const base = model.make(); // neue Instanz
+                const cur = base.props.visible ?? true;
+                inst = cur === true ? base : base.clone({ visible: true });
+                this._instances.set(id, inst);
+            }
+            // force-model: Sichtbarkeit durchsetzen
+            if (this._syncMode === 'force-model') {
+                const cur = inst.props.visible ?? true;
+                if (cur !== effective) {
+                    inst = inst.clone({ visible: effective });
+                    this._instances.set(id, inst);
+                }
+            }
+            // Overrides anwenden (nur klonen, wenn sich was ändert)
+            const ov = this._overrides.get(id);
+            if (ov && Object.keys(ov).length) {
+                const needClone = Object.entries(ov).some(([k, v]) => inst.props[k] !== v);
+                if (needClone) {
+                    inst = inst.clone(ov);
+                    this._instances.set(id, inst);
+                }
+            }
+            // nur liefern, wenn Model enabled
+            // if (model.enabled)
+            out.push(inst);
+        }
+        this._recreateOnNextEmit = false;
+        this._cachedLayers = out;
+        this._dirty = false;
+        return this._cachedLayers;
+    }
+    destroy() {
+        this._instances.forEach(l => l.finalize?.());
+        this.clear();
+    }
+}