@vcmap/core 6.1.11 → 6.2.0-rc.1

package/dist/src/panorama/panoramaImage.js

@@ -0,0 +1,269 @@
+import { Cartesian3, Cartesian4, HeadingPitchRoll, Matrix4, Transforms, } from '@vcmap-cesium/engine';
+import { v4 as uuid } from 'uuid';
+import { fromUrl } from 'geotiff';
+import { getLogger } from '@vcsuite/logger';
+import { createPanoramaTileProvider } from './panoramaTileProvider.js';
+import { imageSphericalToCartesian } from './sphericalCoordinates.js';
+function createDefaultMetadata() {
+    return {
+        version: '1.0',
+        position: Cartesian3.fromDegrees(0, 0, 0),
+        orientation: HeadingPitchRoll.fromDegrees(0, 0, 0),
+        hasDepth: false,
+        hasIntensity: false,
+    };
+}
+function parsePanoramaGDALMetadata(gdalMetadata) {
+    const version = gdalMetadata?.PANORAMA_VERSION ?? '';
+    if (version !== '1.0') {
+        return createDefaultMetadata();
+    }
+    const position = Cartesian3.fromDegrees(0, 0, 0);
+    const orientation = new HeadingPitchRoll(0, 0, 0);
+    if (gdalMetadata?.PANORAMA_POSITION) {
+        const [lat, lon, z] = gdalMetadata.PANORAMA_POSITION.split(',')
+            .map(Number)
+            .filter((n) => !Number.isNaN(n));
+        if (lat != null && lon != null && z != null) {
+            Cartesian3.fromDegrees(lon, lat, z, undefined, position);
+        }
+    }
+    if (gdalMetadata?.PANORAMA_ORIENTATION) {
+        const [heading, pitch, roll] = gdalMetadata.PANORAMA_ORIENTATION.split(',')
+            .map(Number)
+            .filter((n) => !Number.isNaN(n));
+        if (heading != null && pitch != null && roll != null) {
+            orientation.heading = heading;
+            orientation.pitch = pitch;
+            orientation.roll = roll;
+        }
+    }
+    const hasDepth = gdalMetadata?.PANORAMA_DEPTH === '1';
+    const hasIntensity = gdalMetadata?.PANORAMA_INTENSITY === '1';
+    return {
+        version,
+        position,
+        orientation,
+        hasDepth,
+        hasIntensity,
+    };
+}
+function createDefaultDepthMetadata() {
+    return {
+        version: '1.0',
+        min: 0,
+        max: 50,
+    };
+}
+function parseDepthGDALMetadata(gdalMetadata) {
+    const version = gdalMetadata?.PANORAMA_DEPTH_VERSION ?? '';
+    const metadata = createDefaultDepthMetadata();
+    if (version !== '1.0') {
+        return metadata;
+    }
+    const max = gdalMetadata?.PANORAMA_DEPTH_MAX ?? '';
+    if (max) {
+        const maxNumber = Number(max);
+        if (Number.isFinite(maxNumber)) {
+            metadata.max = maxNumber;
+        }
+    }
+    const min = gdalMetadata?.PANORAMA_DEPTH_MIN ?? '';
+    if (min) {
+        const minNumber = Number(min);
+        if (Number.isFinite(minNumber)) {
+            metadata.min = minNumber;
+        }
+    }
+    return metadata;
+}
+async function loadMetadataFromImage(image) {
+    let imageCount = await image.getImageCount();
+    const promises = [];
+    while (imageCount) {
+        imageCount -= 1;
+        promises.push(image.getImage(imageCount));
+    }
+    const images = await Promise.all(promises);
+    const tileSize = [images[0].getTileWidth(), images[0].getTileHeight()];
+    let minLevelImage = images[0];
+    let minLevel = minLevelImage.getHeight() / tileSize[0] - 1;
+    while (minLevel < 0) {
+        getLogger('PanoramaImage').warning('Lowest level is not a full tile');
+        // lowest image is not a full tile, we skip it
+        images.shift();
+        minLevelImage = images[0];
+        minLevel = minLevelImage.getHeight() / tileSize[0] - 1;
+    }
+    const maxLevel = images.length - 1 + minLevel;
+    return {
+        images,
+        tileSize,
+        minLevel,
+        maxLevel,
+    };
+}
+async function loadRGBImages(image) {
+    const { images, ...meta } = await loadMetadataFromImage(image);
+    const gdalMetadata = parsePanoramaGDALMetadata(images.at(-1).getGDALMetadata());
+    images.forEach((i) => {
+        i.fileDirectory.vcsPanorama = { type: 'image' };
+    });
+    return {
+        images,
+        ...meta,
+        ...gdalMetadata,
+    };
+}
+function parseRgbUrl(imageUrl) {
+    const absoluteImageUrl = new URL(imageUrl, window.location.href);
+    const fileName = absoluteImageUrl.pathname.split('/').pop();
+    if (!fileName || !fileName.endsWith('_rgb.tif')) {
+        throw new Error('Invalid image url');
+    }
+    const name = fileName.slice(0, -8);
+    return {
+        name,
+        absoluteRootUrl: absoluteImageUrl.href,
+    };
+}
+/**
+ * This is an internal function to create a panorama image for specific use cases (e.g. testing).
+ * In most cases, you should use {@link createPanoramaImageFromURL} directly.
+ * Creates a panorama image from a GeoTIFF image. The image should contain the metadata in the GDAL metadata format.
+ * @param rgbImage - the RGB image
+ * @param [options]
+ */
+export async function createPanoramaImage(rgbImage, options = {}) {
+    const { images: rgb, tileSize, minLevel, maxLevel, position, orientation, hasIntensity, hasDepth, } = await loadRGBImages(rgbImage);
+    const { name, absoluteRootUrl, intensityImage, depthImage, dataset } = options;
+    const nameOrId = name ?? uuid();
+    const modelMatrix = Transforms.headingPitchRollToFixedFrame(position, new HeadingPitchRoll(orientation.heading + Math.PI / 2, // spheres are oriented down the X axis, twist it to align.
+    -orientation.pitch, // turn against camera pitch,
+    -orientation.roll));
+    const scaledModelMatrix = Matrix4.clone(modelMatrix);
+    Matrix4.setScale(modelMatrix, new Cartesian3(50, 50, 50), scaledModelMatrix);
+    const upCart4 = Matrix4.getColumn(modelMatrix, 2, new Cartesian4());
+    Cartesian4.normalize(upCart4, upCart4);
+    const up = Cartesian3.fromCartesian4(upCart4, new Cartesian3());
+    const invModelMatrix = Matrix4.inverseTransformation(modelMatrix, new Matrix4());
+    let getIntensityImages;
+    if (intensityImage || (hasIntensity && absoluteRootUrl)) {
+        getIntensityImages = async () => {
+            const usedIntensityImage = intensityImage ??
+                (await fromUrl(new URL(`${name}_intensity.tif`, absoluteRootUrl).href));
+            const { images: intensity, minLevel: intensityMinLevel, maxLevel: intensityMaxLevel, } = await loadMetadataFromImage(usedIntensityImage);
+            if (intensityMinLevel !== minLevel || intensityMaxLevel !== maxLevel) {
+                throw new Error('Intensity levels do not match RGB levels');
+            }
+            intensity.forEach((i) => {
+                i.fileDirectory.vcsPanorama = { type: 'image' };
+            });
+            return intensity;
+        };
+    }
+    let depth;
+    let usedDepthImage = depthImage;
+    if (!usedDepthImage && hasDepth && absoluteRootUrl) {
+        try {
+            usedDepthImage = await fromUrl(new URL(`${name}_depth.tif`, absoluteRootUrl).href);
+        }
+        catch (e) {
+            getLogger('PanoramaImage').warning(`ailed to load depth image for ${name}`);
+        }
+    }
+    if (usedDepthImage) {
+        const { images: depthImages, minLevel: depthMinLevel, maxLevel: depthMaxLevel, } = await loadMetadataFromImage(usedDepthImage);
+        if (depthMinLevel !== minLevel || depthMaxLevel !== maxLevel) {
+            throw new Error('Depth levels do not match RGB levels');
+        }
+        const depthMetadata = parseDepthGDALMetadata(depthImages.at(-1).getGDALMetadata());
+        depthImages.forEach((i) => {
+            i.fileDirectory.vcsPanorama = {
+                type: 'depth',
+            };
+        });
+        depth = { levelImages: depthImages, metadata: depthMetadata };
+    }
+    const tileProvider = createPanoramaTileProvider(rgb, scaledModelMatrix, tileSize, minLevel, maxLevel, getIntensityImages, depth, options.tileCacheSize, options.providerConcurrency, options.poolOrDecoder);
+    const positionAtDepth = async (imageCoordinate, mostDetailed, result) => {
+        const depthValue = mostDetailed
+            ? await tileProvider.getDepthAtImageCoordinateMostDetailed(imageCoordinate)
+            : await tileProvider.getDepthAtImageCoordinate(imageCoordinate);
+        if (depthValue === undefined) {
+            return undefined;
+        }
+        const cartesian = imageSphericalToCartesian(imageCoordinate, result);
+        Cartesian3.normalize(cartesian, cartesian);
+        Cartesian3.multiplyByScalar(cartesian, depthValue, cartesian);
+        Matrix4.multiplyByPoint(modelMatrix, cartesian, cartesian);
+        return cartesian;
+    };
+    return {
+        get name() {
+            return nameOrId;
+        },
+        get position() {
+            return position;
+        },
+        get orientation() {
+            return orientation;
+        },
+        get modelMatrix() {
+            return modelMatrix;
+        },
+        get up() {
+            return up;
+        },
+        get invModelMatrix() {
+            return invModelMatrix;
+        },
+        get tileProvider() {
+            return tileProvider;
+        },
+        get hasIntensity() {
+            return hasIntensity;
+        },
+        get hasDepth() {
+            return hasDepth;
+        },
+        get image() {
+            return rgbImage;
+        },
+        get tileSize() {
+            return tileSize;
+        },
+        get minLevel() {
+            return minLevel;
+        },
+        get maxLevel() {
+            return maxLevel;
+        },
+        get maxDepth() {
+            return depth?.metadata?.max ?? 50;
+        },
+        get dataset() {
+            return dataset;
+        },
+        async getPositionAtImageCoordinate(imageCoordinate, result) {
+            return positionAtDepth(imageCoordinate, false, result);
+        },
+        async getPositionAtImageCoordinateMostDetailed(imageCoordinate, result) {
+            return positionAtDepth(imageCoordinate, true, result);
+        },
+        destroy() {
+            tileProvider.destroy();
+        },
+    };
+}
+/**
+ * Creates a panorama image from a URL. The URL must point to a RGB image with the name ending in "_rgb.tif".
+ * @param rgbImageUrl - the url to the RGB image
+ * @param [dataset] - the dataset to which the image belongs, if applicable
+ */
+export async function createPanoramaImageFromURL(rgbImageUrl, dataset) {
+    const { name, absoluteRootUrl } = parseRgbUrl(rgbImageUrl);
+    const image = await fromUrl(absoluteRootUrl);
+    return createPanoramaImage(image, { dataset, absoluteRootUrl, name });
+}
+//# sourceMappingURL=panoramaImage.js.map

package/dist/src/panorama/panoramaImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panoramaImage.js","sourceRoot":"","sources":["../../../src/panorama/panoramaImage.ts"],"names":[],"mappings":"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"}

package/dist/src/panorama/panoramaImageCache.d.ts

@@ -0,0 +1,8 @@
+import LRUCache from 'ol/structs/LRUCache.js';
+import type { PanoramaImage } from './panoramaImage.js';
+/**
+ * A specialized LRU cache
+ */
+export declare class PanoramaImageCache extends LRUCache<Promise<PanoramaImage>> {
+    deleteOldest(): void;
+}

package/dist/src/panorama/panoramaImageCache.js

@@ -0,0 +1,18 @@
+import LRUCache from 'ol/structs/LRUCache.js';
+/**
+ * A specialized LRU cache
+ */
+export class PanoramaImageCache extends LRUCache {
+    deleteOldest() {
+        const entry = this.pop();
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        if (entry) {
+            entry
+                .then((image) => {
+                image.destroy();
+            })
+                .catch(() => { });
+        }
+    }
+}
+//# sourceMappingURL=panoramaImageCache.js.map

package/dist/src/panorama/panoramaImageCache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panoramaImageCache.js","sourceRoot":"","sources":["../../../src/panorama/panoramaImageCache.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAG9C;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,QAAgC;IACtE,YAAY;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,kEAAkE;QAClE,IAAI,KAAK,EAAE,CAAC;YACV,KAAK;iBACF,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;gBACd,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;CACF"}

package/dist/src/panorama/panoramaImageView.d.ts

@@ -0,0 +1,25 @@
+import type PanoramaMap from '../map/panoramaMap.js';
+import PanoramaTilePrimitiveCollection from './panoramaTilePrimitiveCollection.js';
+export type PanoramaImageView = {
+    /**
+     * Suspends the loading of tiles. This is used as a debug feature.
+     */
+    suspendTileLoading: boolean;
+    /**
+     * The primitive collection that contains the panorama tiles.
+     */
+    readonly tilePrimitiveCollection: PanoramaTilePrimitiveCollection;
+    /**
+     * Force a render of the panorama image. You do not need to call this for the normal rendering loop.
+     */
+    render(): void;
+    destroy(): void;
+};
+/**
+ * The panorama image view is responsible for rendering the current panorama image of a PanoramaMap.
+ * It will react to image changes and update the view. It tracks changes
+ * to the panorama camera and updates the panorama tiles accordingly. Typically, you will not
+ * have to create this directly, but rather use the PanoramaMap's imageView property.
+ * @param map
+ */
+export declare function createPanoramaImageView(map: PanoramaMap): PanoramaImageView;

package/dist/src/panorama/panoramaImageView.js

@@ -0,0 +1,331 @@
+import { Cartesian2, Matrix4, Cartesian3 } from '@vcmap-cesium/engine';
+import { getWidth } from 'ol/extent.js';
+import { getLogger } from '@vcsuite/logger';
+import { getFovImageSphericalExtent, windowPositionToImageSpherical, } from './fieldOfView.js';
+import { createTileCoordinate, getDistanceToTileCoordinate, getTileCoordinatesInImageExtent, tileSizeInRadians, } from './panoramaTileCoordinate.js';
+import PanoramaTilePrimitiveCollection from './panoramaTilePrimitiveCollection.js';
+import { imageSphericalToCartesian } from './sphericalCoordinates.js';
+import { PanoramaOverlayMode } from './panoramaTileMaterial.js';
+const baseLevelScaled = Symbol('baseLevelScaled');
+const MIN_DEPTH_MOVEMENT_DISTANCE = 5 ** 2; // 5 pixels squared, to avoid too many updates
+/**
+ * Creates all the tile coordinates for the minimum level of the panorama image.
+ * @param minLevel
+ */
+function createMinLevelTiles(minLevel) {
+    const tiles = [];
+    for (let x = 0; x < 2 ** minLevel * 2; x++) {
+        for (let y = 0; y < 2 ** minLevel; y++) {
+            tiles.push(createTileCoordinate(x, y, minLevel));
+        }
+    }
+    return tiles;
+}
+/**
+ * Calculates the pixel per radians for the given level and tile size.
+ * @param level
+ * @param tileSize
+ */
+function getLevelPixelPerRadians(level, tileSize) {
+    return tileSize[0] / tileSizeInRadians(level);
+}
+/**
+ * Creates an event listener that handles cursor position changes and sets the cursor position in the primitive collection based on depth information from the panorama image.
+ * This is set up by the panorama image wrapper, should the image have depth information.
+ * @param image
+ * @param primitiveCollection
+ * @param camera
+ * @param canvas
+ */
+function setupDepthHandling(image, primitiveCollection, camera, canvas) {
+    let windowPositon;
+    const handlePointerChanged = (x, y) => {
+        if (x != null && y != null) {
+            const newPosition = new Cartesian2(x, y);
+            if (windowPositon &&
+                Cartesian2.distanceSquared(windowPositon, newPosition) <
+                    MIN_DEPTH_MOVEMENT_DISTANCE) {
+                return;
+            }
+            windowPositon = newPosition;
+            const imageSpherical = windowPositionToImageSpherical(windowPositon, camera, image.invModelMatrix);
+            if (imageSpherical) {
+                image.tileProvider
+                    .getDepthAtImageCoordinate(imageSpherical)
+                    .then((depth) => {
+                    if (windowPositon !== newPosition) {
+                        return;
+                    }
+                    if (depth !== undefined) {
+                        const imageCartesian = imageSphericalToCartesian(imageSpherical);
+                        Cartesian3.multiplyByScalar(imageCartesian, depth / image.maxDepth, imageCartesian);
+                        primitiveCollection.cursorPosition = imageCartesian;
+                    }
+                    else {
+                        primitiveCollection.cursorPosition = new Cartesian3(-1, -1, -1);
+                    }
+                })
+                    .catch(() => {
+                    getLogger('PanoramaImageView').warning('Failed to get depth');
+                    primitiveCollection.cursorPosition = new Cartesian3(-1, -1, -1);
+                });
+            }
+            else {
+                primitiveCollection.cursorPosition = new Cartesian3(-1, -1, -1);
+            }
+        }
+        else {
+            primitiveCollection.cursorPosition = new Cartesian3(-1, -1, -1);
+            windowPositon = undefined;
+        }
+    };
+    const mouseMoveHandler = (event) => {
+        handlePointerChanged(event.offsetX, event.offsetY);
+    };
+    const leaveHandler = () => {
+        handlePointerChanged();
+    };
+    const touchMoveHandler = (event) => {
+        const { clientX, clientY } = event.touches[0];
+        handlePointerChanged(clientX, clientY);
+    };
+    canvas.addEventListener('mousemove', mouseMoveHandler);
+    canvas.addEventListener('mouseleave', leaveHandler);
+    canvas.addEventListener('touchmove', touchMoveHandler);
+    canvas.addEventListener('touchend', leaveHandler);
+    return () => {
+        canvas.removeEventListener('mousemove', mouseMoveHandler);
+        canvas.removeEventListener('mouseleave', leaveHandler);
+        canvas.removeEventListener('touchmove', touchMoveHandler);
+        canvas.removeEventListener('touchend', leaveHandler);
+    };
+}
+/**
+ * The image wrapper is responsible for managing the panorama image tiles and rendering them.
+ * @param image
+ * @param primitiveCollection
+ * @param camera
+ * @param canvas
+ */
+function createImageWrapper(image, primitiveCollection, camera, canvas) {
+    const { tileSize, maxLevel, minLevel, hasDepth } = image;
+    const baseTileCoordinates = createMinLevelTiles(minLevel);
+    const destroyDepth = hasDepth
+        ? setupDepthHandling(image, primitiveCollection, camera, canvas)
+        : () => { };
+    const currentTiles = new Map();
+    let currentLevel = minLevel;
+    let currentTileCoordinates = [
+        ...baseTileCoordinates,
+    ];
+    const createCurrentTiles = () => {
+        image.tileProvider.currentLevel = currentLevel;
+        image.tileProvider
+            .createVisibleTiles(currentTileCoordinates)
+            .forEach((tile) => {
+            if (!currentTiles.has(tile.tileCoordinate.key)) {
+                if (tile.tileCoordinate.level === minLevel &&
+                    !tile[baseLevelScaled]) {
+                    tile.primitive.modelMatrix = Matrix4.multiplyByScale(tile.primitive.modelMatrix, new Cartesian3(1.01, 1.01, 1.01), new Matrix4());
+                    tile[baseLevelScaled] = true;
+                }
+                currentTiles.set(tile.tileCoordinate.key, tile);
+                primitiveCollection.add(tile.primitive);
+            }
+        });
+    };
+    image.tileProvider.showIntensity =
+        primitiveCollection.overlay === PanoramaOverlayMode.Intensity;
+    const showIntensityListener = primitiveCollection.overlayChanged.addEventListener((overlayMode) => {
+        image.tileProvider.showIntensity =
+            overlayMode === PanoramaOverlayMode.Intensity;
+    });
+    camera.setView({
+        destination: image.position,
+        orientation: {
+            heading: camera.heading,
+            pitch: image.orientation.pitch,
+            roll: image.orientation.roll,
+        },
+    });
+    const levelPixelPerRadians = new Array(maxLevel); // XXX can be cached or pre calculated?
+    for (let i = 0; i <= maxLevel - minLevel; i++) {
+        levelPixelPerRadians[i] = getLevelPixelPerRadians(i + minLevel, tileSize);
+    }
+    let suspendTileLoading = false;
+    const render = () => {
+        if (suspendTileLoading) {
+            return;
+        }
+        const { extents, center: imageCenter } = getFovImageSphericalExtent(camera, image.invModelMatrix);
+        const currentImageRadiansWidth = extents.reduce((acc, extent) => acc + getWidth(extent), 0);
+        const currentScenePixelWidth = canvas.width;
+        const currentRadiansPerPixel = currentScenePixelWidth / currentImageRadiansWidth;
+        currentLevel = minLevel;
+        if (currentRadiansPerPixel > levelPixelPerRadians[maxLevel - minLevel]) {
+            currentLevel = maxLevel;
+        }
+        else if (currentRadiansPerPixel > levelPixelPerRadians[0]) {
+            currentLevel =
+                levelPixelPerRadians.findIndex((rpp) => rpp >= currentRadiansPerPixel) +
+                    minLevel;
+        }
+        if (currentLevel === minLevel) {
+            currentTileCoordinates = [];
+        }
+        else if (extents.length === 1) {
+            currentTileCoordinates = [
+                ...getTileCoordinatesInImageExtent(extents[0], currentLevel),
+            ];
+        }
+        else {
+            const leftExtent = extents[0];
+            const rightExtent = extents[1];
+            leftExtent[2] -= 0.0001; // dont overlap the extents since 0 === 2 * PI
+            currentTileCoordinates = [
+                ...getTileCoordinatesInImageExtent(leftExtent, currentLevel),
+                ...getTileCoordinatesInImageExtent(rightExtent, currentLevel),
+            ];
+        }
+        currentTileCoordinates = currentTileCoordinates
+            .map((tc) => ({
+            tc,
+            distance: getDistanceToTileCoordinate(imageCenter, tc),
+        }))
+            // we sort furthest first, since tiles are loaded from the back of the array with pop.
+            .sort((a, b) => b.distance - a.distance)
+            .map((tc) => tc.tc);
+        // push base tile coordinates onto the back of the array, so they are always loaded first.
+        currentTileCoordinates.push(...baseTileCoordinates);
+        currentTiles.forEach((tile) => {
+            if (!currentTileCoordinates.find((c) => c.key === tile.tileCoordinate.key)) {
+                primitiveCollection.remove(tile.primitive);
+                currentTiles.delete(tile.tileCoordinate.key);
+            }
+        });
+        createCurrentTiles();
+    };
+    render();
+    return {
+        image,
+        get suspendTileLoading() {
+            return suspendTileLoading;
+        },
+        set suspendTileLoading(value) {
+            suspendTileLoading = value;
+        },
+        render,
+        destroy() {
+            currentTiles.forEach((tile) => {
+                primitiveCollection.remove(tile.primitive);
+            });
+            currentTiles.clear();
+            showIntensityListener();
+            destroyDepth();
+        },
+    };
+}
+let emptyImageOverlay;
+function getEmptyImageBitmap() {
+    if (!emptyImageOverlay) {
+        const overlay = document.createElement('div');
+        overlay.style.position = 'absolute';
+        overlay.style.display = 'block';
+        overlay.style.top = '0px';
+        overlay.style.left = '0px';
+        overlay.style.bottom = '0px';
+        overlay.style.right = '0px';
+        overlay.style.backgroundColor = '#409D76';
+        overlay.style.padding = '8px';
+        overlay.style.font = 'bold 64px Monospace, Courier New';
+        overlay.style.textAlign = 'center';
+        overlay.style.alignContent = 'center';
+        overlay.style.color = '#424242';
+        overlay.innerText = 'No Image';
+        emptyImageOverlay = overlay;
+    }
+    return emptyImageOverlay;
+}
+function setupEmptyImageOverlay(container) {
+    const overlay = getEmptyImageBitmap();
+    container.appendChild(overlay);
+    let remover = () => {
+        container.removeChild(overlay);
+        remover = undefined; // we need to ensure this is only called once
+    };
+    return () => {
+        remover?.();
+    };
+}
+/**
+ * The panorama image view is responsible for rendering the current panorama image of a PanoramaMap.
+ * It will react to image changes and update the view. It tracks changes
+ * to the panorama camera and updates the panorama tiles accordingly. Typically, you will not
+ * have to create this directly, but rather use the PanoramaMap's imageView property.
+ * @param map
+ */
+export function createPanoramaImageView(map) {
+    const { scene } = map.getCesiumWidget();
+    const primitiveCollection = scene.primitives.add(new PanoramaTilePrimitiveCollection({
+        destroyPrimitives: false,
+        show: true,
+    }));
+    const defaultPosition = Cartesian3.fromDegrees(12, 53, 0);
+    let currentView;
+    let removeOverlay;
+    scene.camera.setView({
+        destination: defaultPosition,
+        orientation: {
+            heading: scene.camera.heading ?? 0,
+            pitch: 0,
+            roll: 0,
+        },
+    });
+    let suspendTileLoading = false;
+    const setCurrentView = (image) => {
+        const oldView = currentView;
+        removeOverlay?.();
+        if (image) {
+            currentView = createImageWrapper(image, primitiveCollection, scene.camera, scene.canvas);
+            currentView.suspendTileLoading = suspendTileLoading;
+        }
+        else {
+            currentView = undefined;
+            if (scene.canvas.parentElement) {
+                removeOverlay = setupEmptyImageOverlay(scene.canvas.parentElement);
+            }
+        }
+        oldView?.destroy();
+    };
+    setCurrentView(map.currentPanoramaImage);
+    const imageChangedListener = map.currentImageChanged.addEventListener(setCurrentView);
+    const render = () => {
+        currentView?.render();
+    };
+    const cameraChangedListener = scene.camera.changed.addEventListener(render);
+    render();
+    return {
+        get suspendTileLoading() {
+            return suspendTileLoading;
+        },
+        set suspendTileLoading(value) {
+            suspendTileLoading = value;
+            if (currentView) {
+                currentView.suspendTileLoading = value;
+            }
+        },
+        get tilePrimitiveCollection() {
+            return primitiveCollection;
+        },
+        render,
+        destroy() {
+            this.render = () => { };
+            scene.primitives.remove(primitiveCollection);
+            currentView?.destroy();
+            imageChangedListener();
+            cameraChangedListener();
+            removeOverlay?.();
+        },
+    };
+}
+//# sourceMappingURL=panoramaImageView.js.map