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

package/src/layer/cesium/cogImageryProvider.ts

@@ -0,0 +1,389 @@
+import type { Projection } from 'ol/proj.js';
+import type GeoTIFFSource from 'ol/source/GeoTIFF.js';
+import {
+  createEmpty as createEmptyExtent,
+  extend as extendExtent,
+  getWidth as getExtentWidth,
+  getHeight as getExtentHeight,
+  getTopLeft as getTopLeftExtent,
+} from 'ol/extent.js';
+import TileState from 'ol/TileState.js';
+import {
+  Cartesian2,
+  Event as CesiumEvent,
+  GeographicTilingScheme,
+  type ImageryTypes,
+  Math as CesiumMath,
+  Rectangle,
+  type TilingScheme,
+  WebMercatorTilingScheme,
+} from '@vcmap-cesium/engine';
+import EventType from 'ol/events/EventType.js';
+import type TileGrid from 'ol/tilegrid/TileGrid.js';
+import {
+  mercatorExtentToRectangle,
+  rectangleToMercatorExtent,
+} from '../../util/math.js';
+
+export function createEmptyCanvas(
+  width: number,
+  height: number,
+): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+
+function areGridsAligned(
+  tileGrid: TileGrid,
+  tilingScheme: TilingScheme,
+): boolean {
+  const olRectangle = mercatorExtentToRectangle(
+    tileGrid.getTileCoordExtent([0, 0, 0]),
+  );
+  const cesiumRectangle = tilingScheme.tileXYToRectangle(0, 0, 0);
+
+  return Rectangle.equalsEpsilon(
+    cesiumRectangle,
+    olRectangle,
+    CesiumMath.EPSILON8,
+  );
+}
+
+function getTilingSchemeFromSource(source: GeoTIFFSource): TilingScheme {
+  const tileGrid = source.getTileGrid()!;
+  const projection = source.getProjection()!;
+  const extent = tileGrid.getExtent();
+  const level0TileRange = tileGrid.getTileRangeForExtentAndZ(extent, 0);
+
+  let tilingScheme: TilingScheme | undefined;
+
+  if (projection.getCode() === 'EPSG:4326') {
+    tilingScheme = new GeographicTilingScheme({
+      numberOfLevelZeroTilesX: level0TileRange.getWidth(),
+      numberOfLevelZeroTilesY: level0TileRange.getHeight(),
+      rectangle: mercatorExtentToRectangle(extent),
+    });
+  } else if (projection.getCode() === 'EPSG:3857') {
+    tilingScheme = new WebMercatorTilingScheme({
+      numberOfLevelZeroTilesX: level0TileRange.getWidth(),
+      numberOfLevelZeroTilesY: level0TileRange.getHeight(),
+      rectangleSouthwestInMeters: new Cartesian2(extent[0], extent[1]),
+      rectangleNortheastInMeters: new Cartesian2(extent[2], extent[3]),
+    });
+  }
+
+  if (!tilingScheme) {
+    throw new Error(`Unexpected code projection: ${projection.getCode()}`);
+  }
+  return tilingScheme;
+}
+
+export default class COGImageryProvider {
+  private _emptyCanvas: HTMLCanvasElement;
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  _reload: undefined | (() => void) = undefined;
+
+  private _projection: Projection;
+
+  private _tilingScheme: TilingScheme;
+
+  private _tileGrid: TileGrid;
+
+  private _boundTileLoader: (
+    x: number,
+    y: number,
+    level: number,
+  ) => Promise<ImageryTypes>;
+
+  constructor(private _source: GeoTIFFSource) {
+    this._emptyCanvas = createEmptyCanvas(this.tileWidth, this.tileHeight);
+    this._projection = this._source.getProjection()!;
+    this._tileGrid = this._source.getTileGrid()!;
+    this._tilingScheme = getTilingSchemeFromSource(this._source);
+    if (areGridsAligned(this._tileGrid, this._tilingScheme)) {
+      this._boundTileLoader = this._loadAlignedTile.bind(this);
+    } else {
+      this._boundTileLoader = this._loadUnalignedTile.bind(this);
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/naming-convention
+  get _ready(): boolean {
+    return true;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get ready(): boolean {
+    return true;
+  }
+
+  get rectangle(): Rectangle {
+    return this._tilingScheme.rectangle;
+  }
+
+  get tilingScheme(): TilingScheme {
+    return this._tilingScheme;
+  }
+
+  readonly errorEvent: CesiumEvent = new CesiumEvent();
+
+  // eslint-disable-next-line class-methods-use-this
+  get credit(): undefined {
+    return undefined;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get proxy(): undefined {
+    return undefined;
+  }
+
+  get tileWidth(): number {
+    const tileGrid = this._source.getTileGrid();
+    if (tileGrid) {
+      const tileSizeAtZoom0 = tileGrid.getTileSize(0);
+      if (Array.isArray(tileSizeAtZoom0)) {
+        return Math.round(tileSizeAtZoom0[0]);
+      } else {
+        return Math.round(tileSizeAtZoom0); // same width and height
+      }
+    }
+    return 256;
+  }
+
+  get tileHeight(): number {
+    const tileGrid = this._source.getTileGrid();
+    if (tileGrid) {
+      const tileSizeAtZoom0 = tileGrid.getTileSize(0);
+      if (Array.isArray(tileSizeAtZoom0)) {
+        return Math.round(tileSizeAtZoom0[1]);
+      } else {
+        return Math.round(tileSizeAtZoom0); // same width and height
+      }
+    }
+    return 256;
+  }
+
+  get maximumLevel(): number {
+    const tileGrid = this._source.getTileGrid();
+    if (tileGrid) {
+      return tileGrid.getMaxZoom();
+    } else {
+      return 18; // some arbitrary value
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get minimumLevel(): number {
+    // WARNING: Do not use the minimum level (at least until the extent is
+    // properly set). Cesium assumes the minimumLevel to contain only
+    // a few tiles and tries to load them all at once -- this can
+    // freeze and/or crash the browser !
+    return 0;
+    //var tg = this._source.getTileGrid();
+    //return tg ? tg.getMinZoom() : 0;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get tileDiscardPolicy(): undefined {
+    return undefined;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get hasAlphaChannel(): boolean {
+    return true;
+  }
+
+  private async _loadOLTile(
+    x: number,
+    y: number,
+    level: number,
+  ): Promise<Uint8Array | undefined> {
+    const tile = this._source.getTile(level, x, y, 1, this._projection);
+    if (tile) {
+      return new Promise<Uint8Array | undefined>((resolve) => {
+        const listener = (): void => {
+          const data = tile.getData() as Uint8Array | null;
+          if (data) {
+            tile.removeEventListener(EventType.CHANGE, listener);
+            resolve(data);
+          } else if (
+            tile.getState() === TileState.EMPTY ||
+            tile.getState() === TileState.ERROR
+          ) {
+            tile.removeEventListener(EventType.CHANGE, listener);
+            resolve(undefined);
+          }
+        };
+        if (tile.getState() === TileState.LOADED) {
+          listener();
+        } else if (
+          tile.getState() === TileState.EMPTY ||
+          tile.getState() === TileState.ERROR
+        ) {
+          resolve(undefined);
+        } else {
+          tile.addEventListener(EventType.CHANGE, listener);
+          if (tile.getState() === TileState.IDLE) {
+            tile.load();
+          }
+        }
+      });
+    }
+    return Promise.resolve(undefined);
+  }
+
+  private _drawData(
+    ctx: CanvasRenderingContext2D,
+    data: Uint8Array,
+    offsetX = 0,
+    offsetY = 0,
+  ): void {
+    const imageData = ctx.createImageData(this.tileWidth, this.tileHeight);
+    let usedData = data;
+    // this is a grey image
+    if (data.length === imageData.data.length / 2) {
+      usedData = new Uint8Array(imageData.data.length);
+      for (let i = 0; i < data.length; i++) {
+        const value = data[i];
+        if (i % 2 === 0) {
+          const pixelOffset = (i / 2) * 4;
+          usedData[pixelOffset] = value;
+          usedData[pixelOffset + 1] = value;
+          usedData[pixelOffset + 2] = value;
+        } else {
+          const pixelOffset = ((i - 1) / 2) * 4;
+          usedData[pixelOffset + 3] = value;
+        }
+      }
+    }
+
+    imageData.data.set(usedData);
+    ctx.putImageData(imageData, offsetX, offsetY);
+  }
+
+  private async _loadAlignedTile(
+    x: number,
+    y: number,
+    level: number,
+  ): Promise<ImageryTypes> {
+    const tileData = await this._loadOLTile(x, y, level);
+    if (tileData) {
+      const canvas = createEmptyCanvas(this.tileWidth, this.tileHeight);
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        this._drawData(ctx, tileData);
+      }
+      return canvas;
+    }
+
+    return this._emptyCanvas;
+  }
+
+  private async _loadUnalignedTile(
+    x: number,
+    y: number,
+    level: number,
+  ): Promise<ImageryTypes> {
+    const rectangle = this._tilingScheme.tileXYToRectangle(x, y, level);
+    const extent = rectangleToMercatorExtent(rectangle);
+    const resolution = Math.max(
+      getExtentWidth(extent) / this.tileWidth,
+      getExtentHeight(extent) / this.tileHeight,
+    );
+    const levelResolution = this._tileGrid.getZForResolution(resolution);
+    const tileRange = this._tileGrid.getTileRangeForExtentAndZ(
+      extent,
+      levelResolution,
+    );
+    const canvas = createEmptyCanvas(
+      this.tileWidth * tileRange.getWidth(),
+      this.tileHeight * tileRange.getHeight(),
+    );
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      return this._emptyCanvas;
+    }
+
+    const promises: Promise<void>[] = [];
+    const tileRangeExtent = createEmptyExtent();
+    for (
+      let partialX = tileRange.minX;
+      partialX <= tileRange.maxX;
+      partialX++
+    ) {
+      for (
+        let partialY = tileRange.minY;
+        partialY <= tileRange.maxY;
+        partialY++
+      ) {
+        extendExtent(
+          tileRangeExtent,
+          this._tileGrid.getTileCoordExtent([
+            levelResolution,
+            partialX,
+            partialY,
+          ]),
+        );
+        promises.push(
+          this._loadOLTile(partialX, partialY, levelResolution).then(
+            (tileData) => {
+              if (tileData) {
+                this._drawData(
+                  ctx,
+                  tileData,
+                  (partialX - tileRange.minX) * this.tileWidth,
+                  (partialY - tileRange.minY) * this.tileHeight,
+                );
+              }
+            },
+          ),
+        );
+      }
+    }
+    await Promise.all(promises);
+
+    const unitsPerPixelX =
+      getExtentWidth(tileRangeExtent) / (this.tileWidth * tileRange.getWidth());
+    const unitsPerPixelY =
+      getExtentHeight(tileRangeExtent) /
+      (this.tileHeight * tileRange.getHeight());
+
+    const tileRangeTopLeft = getTopLeftExtent(tileRangeExtent);
+    const extentTopLeft = getTopLeftExtent(extent);
+
+    const windowX =
+      Math.abs(tileRangeTopLeft[0] - extentTopLeft[0]) / unitsPerPixelX;
+    const windowY =
+      Math.abs(tileRangeTopLeft[1] - extentTopLeft[1]) / unitsPerPixelY;
+    const windowWidth = getExtentWidth(extent) / unitsPerPixelX;
+    const windowHeight = getExtentHeight(extent) / unitsPerPixelY;
+
+    const windowCanvas = createEmptyCanvas(this.tileWidth, this.tileHeight);
+    const windowCtx = windowCanvas.getContext('2d');
+
+    if (windowCtx) {
+      windowCtx.drawImage(
+        canvas,
+        windowX,
+        windowY,
+        windowWidth,
+        windowHeight,
+        0,
+        0,
+        this.tileWidth,
+        this.tileHeight,
+      );
+
+      return windowCanvas;
+    }
+
+    return this._emptyCanvas;
+  }
+
+  requestImage(x: number, y: number, level: number): Promise<ImageryTypes> {
+    return this._boundTileLoader(x, y, level);
+  }
+}

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 {