@npm9912/v-map 0.1.0

package/dist/collection/map-provider/cesium/CesiumGeoTIFFTerrainProvider.js

@@ -0,0 +1,285 @@
+import { log, warn, error } from "../../utils/logger";
+import { loadGeoTIFFSource } from "../geotiff/geotiff-source";
+const LOG_PREFIX = 'v-map - cesium - terrain-geotiff - ';
+/**
+ * Custom Cesium Terrain Provider for GeoTIFF elevation data
+ *
+ * This provider loads a GeoTIFF file containing elevation data and provides
+ * it to Cesium's terrain system as a heightmap.
+ */
+export class CesiumGeoTIFFTerrainProvider {
+    Cesium;
+    image;
+    fromProjection = 'EPSG:4326';
+    sourceBounds = [0, 0, 0, 0];
+    wgs84Bounds = [0, 0, 0, 0];
+    width = 0;
+    height = 0;
+    noDataValue = 0;
+    ready = false;
+    _readyPromise;
+    heightmapWidth = 65;
+    heightmapHeight = 65;
+    proj4;
+    tilingScheme;
+    constructor(options) {
+        this.Cesium = options.Cesium;
+        // Initialize with GeographicTilingScheme (WGS84)
+        this.tilingScheme = new this.Cesium.GeographicTilingScheme();
+        // Start loading the GeoTIFF
+        this._readyPromise = this.initialize(options);
+    }
+    async initialize(options) {
+        try {
+            log(`${LOG_PREFIX}loadGeoTIFF: url=${options.url}`);
+            const [geotiffModule, { default: proj4 }, geokeysModule] = await Promise.all([
+                import('geotiff'),
+                import('proj4'),
+                import('geotiff-geokeys-to-proj4'),
+            ]);
+            const source = await loadGeoTIFFSource(options.url, {
+                projection: options.projection,
+                forceProjection: options.forceProjection ?? false,
+                nodata: options.nodata,
+            }, {
+                geotiff: geotiffModule,
+                proj4,
+                geokeysToProj4: geokeysModule,
+            });
+            this.image = source.baseImage;
+            this.fromProjection = source.fromProjection;
+            this.sourceBounds = source.sourceBounds;
+            this.wgs84Bounds = source.wgs84Bounds;
+            this.width = source.width;
+            this.height = source.height;
+            this.noDataValue = source.noDataValue ?? 0;
+            this.proj4 = source.proj4; // Store proj4 instance with registered projections
+            log(`${LOG_PREFIX}loaded: projection=${this.fromProjection}, bounds=[${this.sourceBounds.map(v => v.toFixed(0)).join(',')}], wgs84=[${this.wgs84Bounds.map(v => v.toFixed(4)).join(',')}], size=${this.width}x${this.height}`);
+            this.ready = true;
+            return true;
+        }
+        catch (err) {
+            error(`${LOG_PREFIX}failed to load GeoTIFF:`, err);
+            this.ready = false;
+            return false;
+        }
+    }
+    /**
+     * Get the coverage rectangle in WGS84 coordinates
+     */
+    get rectangle() {
+        if (!this.ready || !this.wgs84Bounds) {
+            return this.Cesium.Rectangle.MAX_VALUE;
+        }
+        const [west, south, east, north] = this.wgs84Bounds;
+        return this.Cesium.Rectangle.fromDegrees(west, south, east, north);
+    }
+    /**
+     * Request tile geometry for a specific tile
+     */
+    async requestTileGeometry(x, y, level) {
+        if (!this.ready || !this.image) {
+            return undefined;
+        }
+        try {
+            // Get tile bounds in WGS84
+            const rectangle = this.tilingScheme.tileXYToRectangle(x, y, level);
+            let west = this.Cesium.Math.toDegrees(rectangle.west);
+            let south = this.Cesium.Math.toDegrees(rectangle.south);
+            let east = this.Cesium.Math.toDegrees(rectangle.east);
+            let north = this.Cesium.Math.toDegrees(rectangle.north);
+            // Get GeoTIFF bounds in WGS84
+            const [geoWest, geoSouth, geoEast, geoNorth] = this.wgs84Bounds;
+            // Check if tile intersects with GeoTIFF bounds
+            if (east < geoWest ||
+                west > geoEast ||
+                north < geoSouth ||
+                south > geoNorth) {
+                // Tile is completely outside GeoTIFF bounds, return flat heightmap
+                return this.createFlatHeightmap();
+            }
+            // Clamp tile bounds to GeoTIFF coverage area
+            // This prevents transformation errors when the GeoTIFF projection
+            // doesn't support the full WGS84 range (e.g., Mercator and poles)
+            west = Math.max(geoWest, Math.min(geoEast, west));
+            east = Math.max(geoWest, Math.min(geoEast, east));
+            south = Math.max(geoSouth, Math.min(geoNorth, south));
+            north = Math.max(geoSouth, Math.min(geoNorth, north));
+            // Transform tile bounds to source projection
+            // Use the stored proj4 instance that has the projection definitions
+            const transformToSource = (coord) => {
+                try {
+                    return this.proj4('EPSG:4326', this.fromProjection, coord);
+                }
+                catch (err) {
+                    warn(`${LOG_PREFIX}transform failed:`, err);
+                    return coord;
+                }
+            };
+            const swSource = transformToSource([west, south]);
+            const neSource = transformToSource([east, north]);
+            // Calculate pixel coordinates in GeoTIFF
+            const [srcWest, srcSouth, srcEast, srcNorth] = this.sourceBounds;
+            const srcWidth = this.width;
+            const srcHeight = this.height;
+            const pixelWidth = srcEast - srcWest;
+            const pixelHeight = srcNorth - srcSouth;
+            const x0 = Math.floor(((swSource[0] - srcWest) / pixelWidth) * srcWidth);
+            const y0 = Math.floor(((srcNorth - neSource[1]) / pixelHeight) * srcHeight);
+            const x1 = Math.ceil(((neSource[0] - srcWest) / pixelWidth) * srcWidth);
+            const y1 = Math.ceil(((srcNorth - swSource[1]) / pixelHeight) * srcHeight);
+            // Clamp to image bounds
+            const windowX = Math.max(0, Math.min(x0, srcWidth));
+            const windowY = Math.max(0, Math.min(y0, srcHeight));
+            const windowWidth = Math.max(1, Math.min(x1 - x0, srcWidth - windowX));
+            const windowHeight = Math.max(1, Math.min(y1 - y0, srcHeight - windowY));
+            // Read elevation data from GeoTIFF
+            const rasterData = await this.image.readRasters({
+                window: [
+                    windowX,
+                    windowY,
+                    windowX + windowWidth,
+                    windowY + windowHeight,
+                ],
+                width: this.heightmapWidth,
+                height: this.heightmapHeight,
+                resampleMethod: 'bilinear',
+            });
+            // Convert to heightmap array (first band contains elevation)
+            const elevationData = rasterData[0];
+            const buffer = new Float32Array(this.heightmapWidth * this.heightmapHeight);
+            for (let i = 0; i < buffer.length; i++) {
+                let value = elevationData[i];
+                // Replace nodata values with 0
+                if (value === this.noDataValue || !isFinite(value)) {
+                    value = 0;
+                }
+                buffer[i] = value;
+            }
+            // Create Cesium HeightmapTerrainData
+            return new this.Cesium.HeightmapTerrainData({
+                buffer,
+                width: this.heightmapWidth,
+                height: this.heightmapHeight,
+                childTileMask: 0,
+                structure: {
+                    heightScale: 1.0,
+                    heightOffset: 0.0,
+                    elementsPerHeight: 1,
+                    stride: 1,
+                    elementMultiplier: 1.0,
+                },
+            });
+        }
+        catch (err) {
+            warn(`${LOG_PREFIX}failed to load tile geometry:`, err);
+            return this.createFlatHeightmap();
+        }
+    }
+    /**
+     * Create a flat heightmap for tiles outside the GeoTIFF bounds
+     */
+    createFlatHeightmap() {
+        const buffer = new Float32Array(this.heightmapWidth * this.heightmapHeight);
+        buffer.fill(0);
+        return new this.Cesium.HeightmapTerrainData({
+            buffer,
+            width: this.heightmapWidth,
+            height: this.heightmapHeight,
+            childTileMask: 0,
+        });
+    }
+    /**
+     * Get the availability of tiles
+     */
+    get availability() {
+        // For now, we say all tiles are available
+        // In a more sophisticated implementation, we'd track which tiles
+        // intersect with the GeoTIFF bounds
+        return undefined;
+    }
+    /**
+     * Get the tiling scheme
+     */
+    getTilingScheme() {
+        return this.tilingScheme;
+    }
+    /**
+     * Get the maximum geometric error allowed at a specific level
+     * Required by Cesium's TerrainProvider interface
+     *
+     * The geometric error is the difference (in meters) between the actual terrain
+     * and the terrain approximation at this level. Higher levels have lower error.
+     */
+    getLevelMaximumGeometricError(level) {
+        // Standard geometric error calculation for terrain providers
+        // Based on Cesium's approach: error decreases exponentially with level
+        // Formula: maximumRadius / (tileWidth * (2^level))
+        const ellipsoid = this.tilingScheme.ellipsoid;
+        const maximumRadius = ellipsoid.maximumRadius;
+        const tileWidth = 65; // Standard heightmap width
+        return maximumRadius / (tileWidth * Math.pow(2, level));
+    }
+    loadTileDataAvailability(_x, _y, _level) {
+        return undefined;
+    }
+    /**
+     * Check if tile data is available for a specific tile
+     * Required by Cesium's TerrainProvider interface
+     */
+    getTileDataAvailable(x, y, level) {
+        if (!this.ready) {
+            return false;
+        }
+        // Check if tile intersects with GeoTIFF bounds
+        const rectangle = this.tilingScheme.tileXYToRectangle(x, y, level);
+        const west = this.Cesium.Math.toDegrees(rectangle.west);
+        const south = this.Cesium.Math.toDegrees(rectangle.south);
+        const east = this.Cesium.Math.toDegrees(rectangle.east);
+        const north = this.Cesium.Math.toDegrees(rectangle.north);
+        const [geoWest, geoSouth, geoEast, geoNorth] = this.wgs84Bounds;
+        // Return true if tile intersects with GeoTIFF bounds
+        return !(east < geoWest ||
+            west > geoEast ||
+            north < geoSouth ||
+            south > geoNorth);
+    }
+    /**
+     * Check if the provider is ready
+     */
+    get readyPromise() {
+        return this._readyPromise;
+    }
+    /**
+     * Get the credit to display
+     */
+    get credit() {
+        return new this.Cesium.Credit('GeoTIFF Terrain');
+    }
+    /**
+     * Check if the provider has water mask
+     */
+    get hasWaterMask() {
+        return false;
+    }
+    /**
+     * Check if the provider has vertex normals
+     */
+    get hasVertexNormals() {
+        return false;
+    }
+    /**
+     * Get the error event
+     */
+    get errorEvent() {
+        return new this.Cesium.Event();
+    }
+}
+/**
+ * Factory function to create a CesiumGeoTIFFTerrainProvider
+ */
+export async function createCesiumGeoTIFFTerrainProvider(options) {
+    const provider = new CesiumGeoTIFFTerrainProvider(options);
+    await provider.readyPromise;
+    return provider;
+}

package/dist/collection/map-provider/cesium/CesiumLayerGroups.js

@@ -0,0 +1,159 @@
+/**
+ * Eine Gruppe verwaltet Sichtbarkeit & Basemap-Filter ihrer Cesium-Layer.
+ * - group.visible = false  => Alle Layer der Gruppe unsichtbar.
+ * - group.basemap = "X"    => Nur Layer mit elementId==="X" in der Gruppe sichtbar.
+ * - Der ursprüngliche Sichtbarkeitszustand jedes Layers wird gemerkt und bei
+ *   Re-Aktivierung wiederhergestellt.
+ */
+export class CesiumLayerGroup {
+    id;
+    _visible = true;
+    _basemap = null;
+    _layers = new Map();
+    _originalVisible = new Map();
+    _dirty = true;
+    constructor(id, visible = true) {
+        this.id = id;
+        this._visible = visible;
+    }
+    get visible() {
+        return this._visible;
+    }
+    set visible(v) {
+        if (this._visible === v)
+            return;
+        this._visible = v;
+        this._dirty = true;
+    }
+    get basemap() {
+        return this._basemap;
+    }
+    set basemap(b) {
+        if (this._basemap === b)
+            return;
+        this._basemap = b;
+        this._dirty = true;
+    }
+    isDirty() {
+        return this._dirty;
+    }
+    addLayer(ref) {
+        if (this._layers.has(ref.id))
+            return;
+        this._layers.set(ref.id, ref);
+        this._originalVisible.set(ref.id, ref.layer.getVisible());
+        this._dirty = true;
+    }
+    /** optional zum Nachziehen von elementId (z. B. wenn erst später bekannt) */
+    setLayerElementId(layerId, elementId) {
+        const r = this._layers.get(layerId);
+        if (!r)
+            return;
+        if (r.elementId === elementId)
+            return;
+        r.elementId = elementId ?? null;
+        this._dirty = true;
+    }
+    removeLayer(layerId) {
+        const had = this._layers.delete(layerId);
+        this._originalVisible.delete(layerId);
+        if (had)
+            this._dirty = true;
+        return had;
+    }
+    clear() {
+        this._layers.clear();
+        this._originalVisible.clear();
+        this._dirty = true;
+    }
+    /** zentrale Logik: Basemap/Visibility anwenden */
+    apply() {
+        if (!this._dirty)
+            return;
+        for (const [id, ref] of this._layers) {
+            const original = this._originalVisible.get(id) ?? true;
+            // effektive Sichtbarkeit nach Gruppenregeln
+            let effective = this._visible && original;
+            if (effective && this._basemap) {
+                // innerhalb der Gruppe nur Layer mit passender elementId anzeigen
+                effective = ref.elementId === this._basemap;
+            }
+            // Nur dann setzen, wenn sich etwas ändert
+            if (ref.layer.getVisible() !== effective) {
+                ref.layer.setVisible(effective);
+            }
+        }
+        this._dirty = false;
+    }
+}
+/**
+ * Root-Store für mehrere Cesium-Gruppen.
+ * - Ordnung/Z-Index übernimmst du weiterhin im LayerManager pro Layer.
+ * - Diese Klasse kümmert sich um Gruppensichtbarkeit & Basemap-Filter.
+ */
+export class CesiumLayerGroups {
+    _groups = [];
+    _dirty = true;
+    get groups() {
+        return [...this._groups];
+    }
+    getGroup(id) {
+        return this._groups.find(g => g.id === id);
+    }
+    hasGroup(id) {
+        return this._groups.some(g => g.id === id);
+    }
+    ensureGroup(id, visible = true) {
+        let g = this.getGroup(id);
+        if (g)
+            return g;
+        g = new CesiumLayerGroup(id, visible);
+        this._groups.push(g);
+        this._dirty = true;
+        return g;
+    }
+    addLayerToGroup(groupId, visible, ref) {
+        const g = this.ensureGroup(groupId, visible);
+        g.addLayer(ref);
+        this._dirty = true;
+    }
+    removeLayer(layerId, removeFromAll = true) {
+        let removed = false;
+        for (const g of this._groups) {
+            if (g.removeLayer(layerId)) {
+                removed = true;
+                if (!removeFromAll)
+                    break;
+            }
+        }
+        if (removed)
+            this._dirty = true;
+        return removed;
+    }
+    setGroupVisible(groupId, visible) {
+        const g = this.getGroup(groupId);
+        if (!g)
+            throw new Error(`CesiumLayerGroup "${groupId}" nicht gefunden`);
+        g.visible = visible;
+        this._dirty = true;
+    }
+    setBasemap(groupId, basemap) {
+        const g = this.getGroup(groupId);
+        if (!g)
+            throw new Error(`CesiumLayerGroup "${groupId}" nicht gefunden`);
+        g.basemap = basemap;
+        this._dirty = true;
+    }
+    /** Wendet alle Gruppenregeln an (sichtbar/basemap). */
+    apply() {
+        if (!this._dirty && !this._groups.some(g => g.isDirty()))
+            return;
+        for (const g of this._groups)
+            g.apply();
+        this._dirty = false;
+    }
+    clear() {
+        this._groups = [];
+        this._dirty = true;
+    }
+}

package/dist/collection/map-provider/cesium/GeoTIFFImageryProvider.js

@@ -0,0 +1,192 @@
+import { log, warn } from "../../utils/logger";
+/**
+ * Custom ImageryProvider that renders GeoTIFF tiles on demand using
+ * the shared GeoTIFFTileProcessor (triangulation-based reprojection).
+ */
+export class GeoTIFFImageryProvider {
+    tileWidth;
+    tileHeight;
+    tilingScheme;
+    rectangle;
+    errorEvent;
+    credit = undefined;
+    tileDiscardPolicy = undefined;
+    proxy = undefined;
+    hasAlphaChannel = true;
+    minimumLevel;
+    maximumLevel;
+    Cesium;
+    tileProcessor;
+    resolution;
+    resampleMethod;
+    colorStops;
+    readyPromiseInternal;
+    ready = false;
+    constructor(options) {
+        const { Cesium, rectangleDegrees, tileProcessor, tileSize, resolution, resampleMethod, colorStops, minimumLevel, maximumLevel, } = options;
+        this.Cesium = Cesium;
+        this.tileProcessor = tileProcessor;
+        this.tileWidth = tileSize;
+        this.tileHeight = tileSize;
+        this.resolution = resolution;
+        this.resampleMethod = resampleMethod;
+        this.colorStops = colorStops;
+        this.minimumLevel = minimumLevel ?? 0;
+        this.maximumLevel = maximumLevel;
+        this.rectangle = Cesium.Rectangle.fromDegrees(rectangleDegrees[0], rectangleDegrees[1], rectangleDegrees[2], rectangleDegrees[3]);
+        // Always use WebMercatorTilingScheme because the GeoTIFFTileProcessor
+        // interprets (x,y,z) as Web Mercator tile coordinates.
+        this.tilingScheme = new Cesium.WebMercatorTilingScheme();
+        this.errorEvent = new Cesium.Event();
+        this.ready = true;
+        this.readyPromiseInternal = Promise.resolve(true);
+    }
+    get tilingSchemeName() {
+        // Expose helper for debugging if needed.
+        return this.tilingScheme instanceof this.Cesium.WebMercatorTilingScheme
+            ? 'WebMercator'
+            : undefined;
+    }
+    get readyPromise() {
+        return this.readyPromiseInternal;
+    }
+    get tileCredits() {
+        return undefined;
+    }
+    getTileCredits(_x, _y, _level) {
+        return undefined;
+    }
+    get url() {
+        return undefined;
+    }
+    /**
+     * Flips a canvas vertically (Y-axis inversion) for Cesium.
+     * Creates a new canvas with the flipped content.
+     *
+     * @param sourceCanvas - The canvas to flip
+     * @param width - Width of the canvas
+     * @param height - Height of the canvas
+     * @returns A new canvas with vertically flipped content, or the source canvas if flipping fails
+     */
+    flipCanvasVertically(sourceCanvas, width, height) {
+        const flippedCanvas = document.createElement('canvas');
+        flippedCanvas.width = width;
+        flippedCanvas.height = height;
+        const flippedCtx = flippedCanvas.getContext('2d');
+        if (!flippedCtx) {
+            warn('v-map - cesium - failed to get 2d context for flip');
+            return sourceCanvas; // Fallback to source canvas
+        }
+        flippedCtx.translate(0, height);
+        flippedCtx.scale(1, -1);
+        flippedCtx.drawImage(sourceCanvas, 0, 0);
+        return flippedCanvas;
+    }
+    /**
+     * Creates a flipped ImageBitmap from RGBA data.
+     * Uses ImageBitmap for better performance when available.
+     *
+     * @param rgbaData - The RGBA pixel data
+     * @param sampleSize - Size of the tile (width and height)
+     * @returns A flipped ImageBitmap, or undefined if creation fails
+     */
+    async createFlippedImageBitmap(rgbaData, sampleSize) {
+        if (typeof createImageBitmap !== 'function') {
+            return undefined;
+        }
+        try {
+            // Create temporary canvas for Y-axis flip
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = sampleSize;
+            tempCanvas.height = sampleSize;
+            const tempCtx = tempCanvas.getContext('2d');
+            if (!tempCtx) {
+                throw new Error('Failed to get 2d context');
+            }
+            const imageData = tempCtx.createImageData(sampleSize, sampleSize);
+            imageData.data.set(rgbaData);
+            tempCtx.putImageData(imageData, 0, 0);
+            // Flip vertically for Cesium
+            const flippedCanvas = this.flipCanvasVertically(tempCanvas, sampleSize, sampleSize);
+            return await createImageBitmap(flippedCanvas);
+        }
+        catch (err) {
+            warn('v-map - cesium - createImageBitmap failed, falling back', err);
+            return undefined;
+        }
+    }
+    /**
+     * Creates a flipped image (ImageBitmap or Canvas) from RGBA data.
+     * Prefers ImageBitmap for better performance, falls back to Canvas.
+     *
+     * @param rgbaData - The RGBA pixel data
+     * @returns A flipped ImageBitmap or Canvas, or undefined if creation fails
+     */
+    async createFlippedImageFromRGBA(rgbaData) {
+        // Calculate actual sample size (may differ from tileWidth due to resolution)
+        const sampleSize = Math.ceil(this.tileWidth * this.resolution);
+        // Prefer ImageBitmap when available for better performance
+        const imageBitmap = await this.createFlippedImageBitmap(rgbaData, sampleSize);
+        if (imageBitmap) {
+            return imageBitmap;
+        }
+        // Fallback to Canvas
+        const canvas = document.createElement('canvas');
+        canvas.width = sampleSize;
+        canvas.height = sampleSize;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            warn('v-map - cesium - unable to acquire canvas 2d context');
+            return undefined;
+        }
+        const imageData = ctx.createImageData(sampleSize, sampleSize);
+        imageData.data.set(rgbaData);
+        ctx.putImageData(imageData, 0, 0);
+        // Flip the canvas vertically for Cesium (Y-axis inversion)
+        return this.flipCanvasVertically(canvas, sampleSize, sampleSize);
+    }
+    async requestImage(x, y, level) {
+        if (!this.ready)
+            return undefined;
+        if (level < this.minimumLevel ||
+            (this.maximumLevel !== undefined && level > this.maximumLevel)) {
+            return undefined;
+        }
+        const params = {
+            x,
+            y,
+            z: level,
+            tileSize: this.tileWidth,
+            resolution: this.resolution,
+            resampleMethod: this.resampleMethod,
+            colorStops: this.colorStops,
+        };
+        let rgbaData = null;
+        try {
+            rgbaData = await this.tileProcessor.getTileData(params);
+            if (!rgbaData) {
+                log(`v-map - cesium - geotiff - requestImage(${x},${y},${level}): no data returned`);
+                return undefined;
+            }
+            log(`v-map - cesium - geotiff - requestImage(${x},${y},${level}): rgba ${rgbaData.length} bytes, sampleSize=${Math.ceil(this.tileWidth * this.resolution)}`);
+        }
+        catch (err) {
+            this.errorEvent.raiseEvent(err);
+            warn('v-map - cesium - getTileData - GeoTIFF tile request failed', err);
+            return undefined;
+        }
+        try {
+            const result = await this.createFlippedImageFromRGBA(rgbaData);
+            log(`v-map - cesium - geotiff - requestImage(${x},${y},${level}): result=${result?.constructor?.name ?? 'undefined'}, size=${result instanceof HTMLCanvasElement ? `${result.width}x${result.height}` : result instanceof ImageBitmap ? `${result.width}x${result.height}` : 'n/a'}`);
+            return result;
+        }
+        catch (err) {
+            this.errorEvent.raiseEvent(err);
+            warn('v-map - cesium - createFlippedImageFromRGBA - GeoTIFF tile request failed', err);
+            return undefined;
+        }
+    }
+    pickFeatures() {
+        return undefined;
+    }
+}

package/dist/collection/map-provider/cesium/GeoTIFFImageryProvider.test.js

@@ -0,0 +1,57 @@
+import { describe, expect, it, vi } from "vitest";
+vi.mock('../../utils/logger', () => ({
+    log: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+}));
+import { GeoTIFFImageryProvider, } from "./GeoTIFFImageryProvider";
+const mockTileProcessor = {
+    getTileData: vi.fn().mockResolvedValue(new Uint8ClampedArray(16 * 16 * 4)),
+    createGlobalTriangulation: vi.fn(),
+};
+const mockCesium = {
+    Rectangle: {
+        fromDegrees: vi.fn().mockImplementation((w, s, e, n) => ({
+            west: w,
+            south: s,
+            east: e,
+            north: n,
+        })),
+    },
+    WebMercatorTilingScheme: vi.fn().mockImplementation(function () {
+        return { _type: 'WebMercatorTilingScheme' };
+    }),
+    Event: vi.fn().mockImplementation(function () {
+        return { raiseEvent: vi.fn() };
+    }),
+};
+describe('GeoTIFFImageryProvider browser example', () => {
+    it('renders tile data through real browser canvas APIs', async () => {
+        const provider = new GeoTIFFImageryProvider({
+            Cesium: mockCesium,
+            rectangleDegrees: [8, 50, 9, 51],
+            tileProcessor: mockTileProcessor,
+            tileSize: 16,
+            resolution: 1,
+            resampleMethod: 'bilinear',
+        });
+        const result = await provider.requestImage(1, 2, 5);
+        expect(mockTileProcessor.getTileData).toHaveBeenCalledWith(expect.objectContaining({
+            x: 1,
+            y: 2,
+            z: 5,
+            tileSize: 16,
+        }));
+        expect(result).toBeTruthy();
+        expect(result instanceof HTMLCanvasElement || result instanceof ImageBitmap).toBe(true);
+        if (result instanceof HTMLCanvasElement) {
+            expect(result.width).toBe(16);
+            expect(result.height).toBe(16);
+        }
+        else {
+            expect(result.width).toBe(16);
+            expect(result.height).toBe(16);
+            result.close();
+        }
+    });
+});