@vcmap/core 6.2.0-rc.1 → 6.2.0-rc.3

package/src/layer/cogLayer.ts

@@ -0,0 +1,162 @@
+import GeoTIFF, { type Options as GeoTIFFOptions } from 'ol/source/GeoTIFF.js';
+import type { EventsKey } from 'ol/events.js';
+import { unByKey } from 'ol/Observable.js';
+import RasterLayer, {
+  type RasterLayerImplementationOptions,
+  type RasterLayerOptions,
+  TilingScheme,
+} from './rasterLayer.js';
+import OpenlayersMap from '../map/openlayersMap.js';
+import CesiumMap from '../map/cesiumMap.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import type VcsMap from '../map/vcsMap.js';
+import COGOpenlayersImpl from './openlayers/cogOpenlayersImpl.js';
+import COGCesiumImpl from './cesium/cogCesiumImpl.js';
+import Extent from '../util/extent.js';
+import { mercatorProjection } from '../util/projection.js';
+
+export type COGLayerOptions = Omit<RasterLayerOptions, 'tilingSchema'> & {
+  /**
+   * Passed directly to the GeoTIFF source.
+   */
+  convertToRGB?: boolean | 'auto';
+  /**
+   * Passed directly to the GeoTIFF source.
+   */
+  normalize?: boolean;
+  /**
+   * Passed directly to the GeoTIFF source.
+   */
+  interpolate?: boolean;
+};
+
+export type COGLayerImplementationOptions = RasterLayerImplementationOptions & {
+  source: GeoTIFF;
+};
+
+function getTilingSchemaFromSource(source: GeoTIFF): Promise<TilingScheme> {
+  let key: EventsKey | undefined;
+  return new Promise<TilingScheme>((resolve, reject) => {
+    const handleChange = (): void => {
+      if (source.getState() === 'ready') {
+        if (key) {
+          unByKey(key);
+        }
+
+        const projection = source.getProjection();
+        if (!source.getTileGrid()) {
+          reject(new Error(`Missing tilegrid in GeoTIFF source not found.`));
+        } else if (projection?.getCode() === 'EPSG:4326') {
+          resolve(TilingScheme.GEOGRAPHIC);
+        } else if (projection?.getCode() === 'EPSG:3857') {
+          resolve(TilingScheme.MERCATOR);
+        } else {
+          reject(new Error(`Unexpected code projection`));
+        }
+      }
+    };
+
+    key = source.on('change', handleChange);
+    handleChange();
+  });
+}
+
+class COGLayer extends RasterLayer<COGOpenlayersImpl | COGCesiumImpl> {
+  static get className(): string {
+    return 'COGLayer';
+  }
+
+  static getDefaultOptions(): COGLayerOptions {
+    return {
+      ...RasterLayer.getDefaultOptions(),
+      convertToRGB: 'auto',
+      normalize: undefined,
+      interpolate: undefined,
+    };
+  }
+
+  private _sourceOptions: Partial<GeoTIFFOptions>;
+  private _source: GeoTIFF | undefined;
+
+  constructor(options: COGLayerOptions) {
+    super(options);
+    const defaultOptions = COGLayer.getDefaultOptions();
+    this._sourceOptions = {
+      convertToRGB: options.convertToRGB ?? defaultOptions.convertToRGB,
+      normalize: options.normalize,
+      interpolate: options.interpolate,
+    };
+
+    this._supportedMaps = [OpenlayersMap.className, CesiumMap.className];
+  }
+
+  async initialize(): Promise<void> {
+    if (!this.initialized) {
+      this._source = new GeoTIFF({
+        ...this._sourceOptions,
+        sources: [{ url: this.url }],
+      });
+      this.tilingSchema = await getTilingSchemaFromSource(this._source);
+    }
+    return super.initialize();
+  }
+
+  getImplementationOptions(): COGLayerImplementationOptions {
+    return {
+      ...super.getImplementationOptions(),
+      source: this._source!,
+    };
+  }
+
+  createImplementationsForMap(
+    map: VcsMap,
+  ): (COGOpenlayersImpl | COGCesiumImpl)[] {
+    if (map instanceof OpenlayersMap) {
+      return [new COGOpenlayersImpl(map, this.getImplementationOptions())];
+    } else if (map instanceof CesiumMap) {
+      return [new COGCesiumImpl(map, this.getImplementationOptions())];
+    }
+
+    return [];
+  }
+
+  toJSON(): COGLayerOptions {
+    const config: Partial<COGLayerOptions> & RasterLayerOptions =
+      super.toJSON();
+    const defaultOptions = COGLayer.getDefaultOptions();
+
+    delete config.tilingSchema;
+    if (this._sourceOptions.convertToRGB !== defaultOptions.convertToRGB) {
+      config.convertToRGB = this._sourceOptions.convertToRGB;
+    }
+
+    if (this._sourceOptions.normalize != null) {
+      config.normalize = this._sourceOptions.normalize;
+    }
+
+    if (this._sourceOptions.interpolate != null) {
+      config.interpolate = this._sourceOptions.interpolate;
+    }
+
+    return config;
+  }
+
+  destroy(): void {
+    this._source?.dispose();
+    super.destroy();
+  }
+
+  getZoomToExtent(): Extent | null {
+    const extent = this._source?.getTileGrid()?.getExtent();
+    if (extent) {
+      return new Extent({
+        coordinates: extent,
+        projection: mercatorProjection.toJSON(),
+      });
+    }
+    return super.getZoomToExtent();
+  }
+}
+
+layerClassRegistry.registerClass(COGLayer.className, COGLayer);
+export default COGLayer;

package/src/layer/openlayers/cogOpenlayersImpl.ts

@@ -0,0 +1,75 @@
+import type GeoTIFFSource from 'ol/source/GeoTIFF.js';
+import WebGLTile from 'ol/layer/WebGLTile.js';
+import { getRenderPixel } from 'ol/render.js';
+import type RenderEvent from 'ol/render/Event.js';
+import { SplitDirection } from '@vcmap-cesium/engine';
+import RasterLayerOpenlayersImpl from './rasterLayerOpenlayersImpl.js';
+import type { COGLayerImplementationOptions } from '../cogLayer.js';
+import type OpenlayersMap from '../../map/openlayersMap.js';
+
+const vcsCleared = Symbol('vcsCleared');
+
+declare global {
+  interface WebGL2RenderingContext {
+    [vcsCleared]: number;
+  }
+}
+
+/**
+ * COGLayer implementation for {@link OpenlayersMap}.
+ */
+class COGOpenlayersImpl extends RasterLayerOpenlayersImpl {
+  static get className(): string {
+    return 'COGOpenlayersImpl';
+  }
+
+  private _source: GeoTIFFSource;
+
+  constructor(map: OpenlayersMap, options: COGLayerImplementationOptions) {
+    super(map, options);
+    this._source = options.source;
+  }
+
+  getOLLayer(): WebGLTile {
+    return new WebGLTile({
+      source: this._source,
+      opacity: this.opacity,
+      minZoom: this.minRenderingLevel,
+      maxZoom: this.maxRenderingLevel,
+    });
+  }
+
+  protected override _splitPreRender(event: RenderEvent): void {
+    const gl = event.context as WebGL2RenderingContext;
+    if (gl[vcsCleared] !== event.frameState?.time) {
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    }
+    gl.enable(gl.SCISSOR_TEST);
+
+    const mapSize = this.map.olMap?.getSize();
+    if (!mapSize) {
+      throw new Error('Map size is not available for scissor test');
+    }
+
+    const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
+    const topRight = getRenderPixel(event, [mapSize[0], 0]);
+
+    const width = Math.round(
+      (topRight[0] - bottomLeft[0]) * this.map.splitPosition,
+    );
+    const height = topRight[1] - bottomLeft[1];
+    if (this.splitDirection === SplitDirection.LEFT) {
+      gl.scissor(bottomLeft[0], bottomLeft[1], width, height);
+    } else {
+      gl.scissor(bottomLeft[0] + width, bottomLeft[1], topRight[0], height);
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  protected override _splitPostReder(event: RenderEvent): void {
+    const gl = event.context as WebGL2RenderingContext;
+    gl.disable(gl.SCISSOR_TEST);
+  }
+}
+
+export default COGOpenlayersImpl;

package/src/layer/openlayers/layerOpenlayersImpl.ts

@@ -88,16 +88,14 @@ class LayerOpenlayersImpl extends LayerImplementation<OpenlayersMap> {
           this.olLayer!.on('prerender', this._splitPreRender.bind(this)),
         );
         this._splitDirectionRenderListeners.push(
-          this.olLayer!.on('postrender', (event) => {
-            (event.context as CanvasRenderingContext2D).restore();
-          }),
+          this.olLayer!.on('postrender', this._splitPostReder.bind(this)),
         );
         this.olLayer!.changed();
       }
     }
   }
 
-  private _splitPreRender(event: RenderEvent): void {
+  protected _splitPreRender(event: RenderEvent): void {
     const context = event.context as CanvasRenderingContext2D;
     const width = context.canvas.width * this.map.splitPosition;
     context.save();
@@ -116,6 +114,11 @@ class LayerOpenlayersImpl extends LayerImplementation<OpenlayersMap> {
     context.clip();
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  protected _splitPostReder(event: RenderEvent): void {
+    (event.context as CanvasRenderingContext2D).restore();
+  }
+
   destroy(): void {
     if (this.olLayer) {
       this.map.removeOLLayer(this.olLayer);

package/src/layer/panoramaDatasetLayer.ts

@@ -15,7 +15,6 @@ import { layerClassRegistry } from '../classRegistry.js';
 import FlatGeobufTileProvider from './tileProvider/flatGeobufTileProvider.js';
 import { mercatorProjection, wgs84Projection } from '../util/projection.js';
 import { panoramaFeature } from './vectorSymbols.js';
-import { PanoramaImageCache } from '../panorama/panoramaImageCache.js';
 import {
   createPanoramaImageFromURL,
   type PanoramaImage,
@@ -63,8 +62,6 @@ export default class PanoramaDatasetLayer extends VectorTileLayer<PanoramaDatase
 
   private _panoramaVectorProperties = new VectorProperties({});
 
-  private _cache = new PanoramaImageCache();
-
   private _dataExtent?: Extent;
 
   readonly baseUrl: string;
@@ -178,15 +175,7 @@ export default class PanoramaDatasetLayer extends VectorTileLayer<PanoramaDatase
    * @returns
    */
   createPanoramaImage(name: string): Promise<PanoramaImage> {
-    const imageUrl = `${this.baseUrl}/${name}_rgb.tif`;
-    if (this._cache.containsKey(imageUrl)) {
-      return this._cache.get(imageUrl);
-    }
-    const imagePromise = createPanoramaImageFromURL(imageUrl, this);
-    this._cache.set(imageUrl, imagePromise);
-    this._cache.expireCache();
-
-    return imagePromise;
+    return createPanoramaImageFromURL(`${this.baseUrl}/${name}_rgb.tif`, this);
   }
 
   override getZoomToExtent(): Extent | null {

package/src/map/panoramaMap.ts

@@ -236,9 +236,12 @@ export default class PanoramaMap extends VcsMap {
 
     if (closestImage) {
       if (viewpoint.heading != null) {
-        this._cesiumWidget.camera.setView({
+        const { camera } = this._cesiumWidget;
+        camera.setView({
           orientation: {
             heading: CesiumMath.toRadians(viewpoint.heading),
+            pitch: camera.pitch,
+            roll: camera.roll,
           },
         });
       }
@@ -317,8 +320,10 @@ export default class PanoramaMap extends VcsMap {
    * @param image
    */
   setCurrentImage(image?: PanoramaImage): void {
-    if (this._currentImage !== image) {
+    if (!this._currentImage?.equals(image)) {
+      const currentImage = this._currentImage;
       this._currentImage = image;
+      currentImage?.destroy();
       this.currentImageChanged.raiseEvent(image);
     }
   }

package/src/panorama/panoramaImage.ts

@@ -104,6 +104,13 @@ export type PanoramaImage = Readonly<
     coordinate: [number, number],
     result?: Cartesian3,
   ): Promise<Cartesian3 | undefined>;
+  /**
+   * Checks if this panorama image is equal to another panorama image
+   * by comparing name and baseUrl of dataset.
+   * @param other - the other image to compare with
+   * @returns true if the images represent the same panorama data
+   */
+  equals(other?: PanoramaImage): boolean;
   destroy(): void;
 };
 
@@ -510,6 +517,13 @@ export async function createPanoramaImage(
     ): Promise<Cartesian3 | undefined> {
       return positionAtDepth(imageCoordinate, true, result);
     },
+    equals(other?: PanoramaImage): boolean {
+      return (
+        other != null &&
+        nameOrId === other.name &&
+        dataset?.baseUrl === other.dataset?.baseUrl
+      );
+    },
     destroy(): void {
       tileProvider.destroy();
     },

package/src/panorama/panoramaImageView.ts

@@ -1,4 +1,4 @@
-import type { Camera } from '@vcmap-cesium/engine';
+import type { Camera, Primitive } from '@vcmap-cesium/engine';
 import { Cartesian2, Matrix4, Cartesian3 } from '@vcmap-cesium/engine';
 import { getWidth } from 'ol/extent.js';
 import type { Size } from 'ol/size.js';
@@ -164,16 +164,13 @@ function setupDepthHandling(
 
 /**
  * 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: PanoramaImage,
   primitiveCollection: PanoramaTilePrimitiveCollection,
   camera: Camera,
   canvas: HTMLCanvasElement,
+  map: PanoramaMap,
 ): ImageWrapper {
   const { tileSize, maxLevel, minLevel, hasDepth } = image;
   const baseTileCoordinates = createMinLevelTiles(minLevel);
@@ -181,7 +178,7 @@ function createImageWrapper(
     ? setupDepthHandling(image, primitiveCollection, camera, canvas)
     : (): void => {};
 
-  const currentTiles = new Map<string, PanoramaTile>();
+  const currentTiles = new Map<string, Primitive>();
   let currentLevel = minLevel;
   let currentTileCoordinates: PanoramaTileCoordinate[] = [
     ...baseTileCoordinates,
@@ -193,14 +190,15 @@ function createImageWrapper(
       .createVisibleTiles(currentTileCoordinates)
       .forEach((tile) => {
         if (!currentTiles.has(tile.tileCoordinate.key)) {
+          const primitive = tile.getPrimitive(map);
           if (
             tile.tileCoordinate.level === minLevel &&
             !(tile as PanoramaTile & { [baseLevelScaled]?: boolean })[
               baseLevelScaled
             ]
           ) {
-            tile.primitive.modelMatrix = Matrix4.multiplyByScale(
-              tile.primitive.modelMatrix,
+            primitive.modelMatrix = Matrix4.multiplyByScale(
+              primitive.modelMatrix,
               new Cartesian3(1.01, 1.01, 1.01),
               new Matrix4(),
             );
@@ -209,8 +207,8 @@ function createImageWrapper(
             ] = true;
           }
 
-          currentTiles.set(tile.tileCoordinate.key, tile);
-          primitiveCollection.add(tile.primitive);
+          currentTiles.set(tile.tileCoordinate.key, primitive);
+          primitiveCollection.add(primitive);
         }
       });
   };
@@ -290,12 +288,10 @@ function createImageWrapper(
 
     // 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);
+    currentTiles.forEach((primitive, key) => {
+      if (!currentTileCoordinates.find((c) => c.key === key)) {
+        primitiveCollection.remove(primitive);
+        currentTiles.delete(key);
       }
     });
 
@@ -313,8 +309,8 @@ function createImageWrapper(
     },
     render,
     destroy(): void {
-      currentTiles.forEach((tile) => {
-        primitiveCollection.remove(tile.primitive);
+      currentTiles.forEach((primitive) => {
+        primitiveCollection.remove(primitive);
       });
       currentTiles.clear();
       showIntensityListener();
@@ -323,31 +319,26 @@ function createImageWrapper(
   };
 }
 
-let emptyImageOverlay: HTMLDivElement | undefined;
-function getEmptyImageBitmap(): HTMLDivElement {
-  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 createEmptyImageBitmap(): HTMLDivElement {
+  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';
+  return overlay;
 }
 
 function setupEmptyImageOverlay(container: HTMLElement): () => void {
-  const overlay = getEmptyImageBitmap();
+  const overlay = createEmptyImageBitmap();
   container.appendChild(overlay);
 
   let remover: (() => void) | undefined = () => {
@@ -400,6 +391,7 @@ export function createPanoramaImageView(map: PanoramaMap): PanoramaImageView {
         primitiveCollection,
         scene.camera,
         scene.canvas,
+        map,
       );
       currentView.suspendTileLoading = suspendTileLoading;
     } else {

package/src/panorama/panoramaTile.ts

@@ -1,4 +1,3 @@
-import type { Matrix4 } from '@vcmap-cesium/engine';
 import {
   Cartesian3,
   EllipsoidGeometry,
@@ -6,16 +5,28 @@ import {
   MaterialAppearance,
   Primitive,
   VertexFormat,
+  type Matrix4,
 } from '@vcmap-cesium/engine';
 import type { Size } from 'ol/size.js';
 import PanoramaTileMaterial from './panoramaTileMaterial.js';
 import type { PanoramaTileCoordinate } from './panoramaTileCoordinate.js';
 import { tileSizeInRadians } from './panoramaTileCoordinate.js';
+import type PanoramaMap from '../map/panoramaMap.js';
+import type {
+  PanoramaResourceData,
+  PanoramaResourceType,
+} from './panoramaTileProvider.js';
 
 export type PanoramaTile = {
-  readonly primitive: Primitive;
+  hasResource(type: PanoramaResourceType): boolean;
+  setResource<T extends PanoramaResourceType>(
+    type: T,
+    resource: PanoramaResourceData<T>,
+  ): void;
+  getDepthAtPixel(x: number, y: number): number | undefined;
   readonly tileCoordinate: PanoramaTileCoordinate;
-  readonly material: PanoramaTileMaterial;
+  getPrimitive(map: PanoramaMap): Primitive;
+  getMaterial(map: PanoramaMap): PanoramaTileMaterial | undefined;
   destroy(): void;
 };
 
@@ -64,26 +75,80 @@ export function createPanoramaTile(
   modelMatrix: Matrix4,
   tileSize: Size,
 ): PanoramaTile {
-  const material = new PanoramaTileMaterial(tileCoordinate, tileSize);
-  const primitive = createPanoramaTilePrimitive(
-    tileCoordinate,
-    modelMatrix,
-    material,
-  );
+  let destroyed = false;
+  const primitives = new Map<
+    PanoramaMap,
+    { primitive: Primitive; material: PanoramaTileMaterial }
+  >();
+
+  let resources: { [K in PanoramaResourceType]?: PanoramaResourceData<K> } = {};
 
   return {
-    get primitive(): Primitive {
-      return primitive;
-    },
     get tileCoordinate(): PanoramaTileCoordinate {
       return tileCoordinate;
     },
-    get material(): PanoramaTileMaterial {
-      return material;
+    hasResource(type: PanoramaResourceType): boolean {
+      return resources[type] != null;
+    },
+    setResource<T extends PanoramaResourceType>(
+      type: T,
+      resource: PanoramaResourceData<T>,
+    ): void {
+      if (this.hasResource(type)) {
+        throw new Error(
+          `Resource of type "${type}" already set for this tile. Cannot overwrite.`,
+        );
+      }
+      resources[type] = resource as ImageBitmap & Float32Array;
+      primitives.forEach(({ material }) => {
+        material.setTexture(type, resource);
+      });
+    },
+    getPrimitive(map: PanoramaMap): Primitive {
+      if (destroyed) {
+        throw new Error('Cannot get primitive from destroyed panorama tile.');
+      }
+      if (primitives.has(map)) {
+        return primitives.get(map)!.primitive;
+      }
+      const material = new PanoramaTileMaterial(tileCoordinate, tileSize);
+      Object.entries(resources).forEach(([type, resource]) => {
+        material.setTexture(type as PanoramaResourceType, resource);
+      });
+      const primitive = createPanoramaTilePrimitive(
+        tileCoordinate,
+        modelMatrix,
+        material,
+      );
+      primitives.set(map, { primitive, material });
+      return primitive;
+    },
+    getMaterial(map: PanoramaMap): PanoramaTileMaterial | undefined {
+      if (primitives.has(map)) {
+        return primitives.get(map)!.material;
+      }
+      return undefined;
+    },
+    /**
+     * Returns the normalized depth value [0, 1] at the given pixel coordinates in the panorama tile.
+     * @param x
+     * @param y
+     */
+    getDepthAtPixel(x: number, y: number): number | undefined {
+      if (!resources.depth) {
+        return undefined;
+      }
+
+      const index = y * tileSize[0] + x;
+      return resources.depth[index];
     },
     destroy(): void {
-      primitive.destroy();
-      material.destroy();
+      destroyed = true;
+      resources = {};
+      primitives.forEach(({ primitive, material }) => {
+        primitive.destroy();
+        material.destroy();
+      });
     },
   };
 }

package/src/panorama/panoramaTileMaterial.ts

@@ -258,20 +258,6 @@ export default class PanoramaTileMaterial extends Material {
     return this.uniforms[uniform] !== Material.DefaultImageId;
   }
 
-  /**
-   * Returns the normalized depth value [0, 1] at the given pixel coordinates in the panorama tile.
-   * @param x
-   * @param y
-   */
-  getDepthAtPixel(x: number, y: number): number | undefined {
-    if (!this._depthData) {
-      return undefined;
-    }
-
-    const index = y * this._tileSize[0] + x;
-    return this._depthData[index];
-  }
-
   /**
    * Internal cesium API to update the material.
    * @param context