@vcmap/core 6.1.11 → 6.2.0-rc.2

package/src/layer/cesium/cesiumTilesetCesiumImpl.ts

@@ -1,3 +1,9 @@
+import type {
+  Cesium3DTile,
+  Cesium3DTileContent,
+  SplitDirection,
+  CustomShader,
+} from '@vcmap-cesium/engine';
 import {
   Composite3DTileContent,
   Cesium3DTileset,
@@ -7,18 +13,16 @@ import {
   Cartographic,
   Rectangle,
   Math as CesiumMath,
-  type SplitDirection,
-  Cesium3DTile,
-  Cesium3DTileContent,
-  type CustomShader,
 } from '@vcmap-cesium/engine';
-import { createEmpty, Extent as OLExtent } from 'ol/extent.js';
+import type { Extent as OLExtent } from 'ol/extent.js';
+import { createEmpty } from 'ol/extent.js';
 import type { Coordinate } from 'ol/coordinate.js';
 import LayerImplementation from '../layerImplementation.js';
 import { allowPicking, vcsLayerName } from '../layerSymbols.js';
-import FeatureVisibility, {
+import type { HighlightableFeature } from '../featureVisibility.js';
+import type FeatureVisibility from '../featureVisibility.js';
+import {
   hideFeature,
-  HighlightableFeature,
   highlightFeature,
   originalStyle,
   updateOriginalStyle,
@@ -32,7 +36,7 @@ import type {
 import type CesiumMap from '../../map/cesiumMap.js';
 import type { FeatureLayerImplementation } from '../featureLayer.js';
 import type StyleItem from '../../style/styleItem.js';
-import GlobalHider from '../globalHider.js';
+import type GlobalHider from '../globalHider.js';
 import { getResourceOrUrl } from './resourceHelper.js';
 
 export const cesiumTilesetLastUpdated: unique symbol = Symbol(
@@ -271,7 +275,7 @@ class CesiumTilesetCesiumImpl
     }
   }
 
-  updateStyle(style: StyleItem, _silent?: boolean): void {
+  updateStyle(style: StyleItem): void {
     this.style = style;
     if (this.initialized && this.cesium3DTileset) {
       this.cesium3DTileset.style = this.style.cesiumStyle;
@@ -346,7 +350,7 @@ class CesiumTilesetCesiumImpl
         if (feature) {
           let id = feature.getProperty('id') as string | undefined;
           if (!id) {
-            id = `${content.url}${batchId}`;
+            id = `${content.url}${String(batchId)}`;
           }
 
           let shouldUpdateOriginalStyle = true;

package/src/layer/cesium/cogCesiumImpl.ts

@@ -0,0 +1,36 @@
+import type GeoTIFFSource from 'ol/source/GeoTIFF.js';
+import { ImageryLayer as CesiumImageryLayer } from '@vcmap-cesium/engine';
+import RasterLayerCesiumImpl from './rasterLayerCesiumImpl.js';
+import COGImageryProvider from './cogImageryProvider.js';
+import type { COGLayerImplementationOptions } from '../cogLayer.js';
+import type CesiumMap from '../../map/cesiumMap.js';
+
+/**
+ * COG Layer implementation for {@link CesiumMap}.
+ */
+class COGCesiumImpl extends RasterLayerCesiumImpl {
+  static get className(): string {
+    return 'COGCesiumImpl';
+  }
+
+  private _source: GeoTIFFSource;
+
+  constructor(map: CesiumMap, options: COGLayerImplementationOptions) {
+    super(map, options);
+    this._source = options.source;
+  }
+
+  async getCesiumLayer(): Promise<CesiumImageryLayer> {
+    const imageryProvider = new COGImageryProvider(this._source);
+    const layerOptions = this.getCesiumLayerOptions();
+    return Promise.resolve(
+      // @ts-expect-error: other impl
+      new CesiumImageryLayer(imageryProvider, {
+        ...layerOptions,
+        rectangle: imageryProvider.tilingScheme.rectangle,
+      }),
+    );
+  }
+}
+
+export default COGCesiumImpl;

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/cesium/dataSourceCesiumImpl.ts

@@ -1,19 +1,21 @@
+import type {
+  DataSourceClock,
+  Scene,
+  DataSourceDisplay,
+  EntityCollection,
+} from '@vcmap-cesium/engine';
 import {
   CustomDataSource,
   BoundingSphereState,
   BoundingSphere,
   HeadingPitchRange,
   Math as CesiumMath,
-  type EntityCollection,
-  DataSourceClock,
-  Scene,
-  DataSourceDisplay,
 } from '@vcmap-cesium/engine';
 import LayerImplementation from '../layerImplementation.js';
 import { vcsLayerName } from '../layerSymbols.js';
-import CesiumMap from '../../map/cesiumMap.js';
+import type CesiumMap from '../../map/cesiumMap.js';
 import type { DataSourceImplementationOptions } from '../dataSourceLayer.js';
-import Viewpoint from '../../util/viewpoint.js';
+import type Viewpoint from '../../util/viewpoint.js';
 
 function synchronizeEntityCollections(
   source: EntityCollection,

package/src/layer/cesium/resourceHelper.ts

@@ -1,6 +1,5 @@
 import { Resource } from '@vcmap-cesium/engine';
 
-// eslint-disable-next-line import/prefer-default-export
 export function getResourceOrUrl(
   url: string,
   headers?: Record<string, string>,

package/src/layer/cesium/sourceVectorContextSync.ts

@@ -2,11 +2,11 @@ import { getLogger } from '@vcsuite/logger';
 import { unByKey } from 'ol/Observable.js';
 import type VectorSource from 'ol/source/Vector.js';
 import type { Feature } from 'ol';
-import { StyleLike } from 'ol/style/Style.js';
+import type { StyleLike } from 'ol/style/Style.js';
 import type { Scene } from '@vcmap-cesium/engine';
 import type VectorContext from './vectorContext.js';
 import type VectorClusterCesiumContext from '../../vectorCluster/vectorClusterCesiumContext.js';
-import VectorProperties from '../vectorProperties.js';
+import type VectorProperties from '../vectorProperties.js';
 
 export type SourceVectorContextSync = {
   readonly active: boolean;
@@ -90,7 +90,7 @@ export function createSourceVectorContextSync(
   const addFeatures = (features: Feature[]): void => {
     // TODO we should make this non-blocking to better handle larger data sets check in RIWA Impl
     features.forEach((f) => {
-      addFeature(f).catch((err) => {
+      addFeature(f).catch((err: unknown) => {
         getLogger('SourceVectorContextSync').error(
           'failed to convert feature',
           f,
@@ -120,7 +120,7 @@ export function createSourceVectorContextSync(
       removeFeature(event.feature as Feature);
     }),
     source.on('changefeature', (event) => {
-      featureChanged(event.feature as Feature).catch((_e) => {
+      featureChanged(event.feature as Feature).catch(() => {
         getLogger().error('failed to convert feature');
       });
     }),

package/src/layer/cesium/terrainCesiumImpl.ts

@@ -2,7 +2,7 @@ import type { CesiumTerrainProvider } from '@vcmap-cesium/engine';
 import LayerImplementation from '../layerImplementation.js';
 import { vcsLayerName } from '../layerSymbols.js';
 import { getTerrainProviderForUrl } from '../terrainHelpers.js';
-import CesiumMap from '../../map/cesiumMap.js';
+import type CesiumMap from '../../map/cesiumMap.js';
 import type { TerrainImplementationOptions } from '../terrainLayer.js';
 
 /**

package/src/layer/cesium/vcsTile/vcsChildTile.ts

@@ -1,7 +1,7 @@
-import { QuadtreeTile, TileBoundingRegion } from '@vcmap-cesium/engine';
+import type { QuadtreeTile, TileBoundingRegion } from '@vcmap-cesium/engine';
+import type { VcsTile } from './vcsTileHelpers.js';
 import {
   getTileBoundingRegion,
-  VcsTile,
   VcsTileState,
   VcsTileType,
 } from './vcsTileHelpers.js';
@@ -26,6 +26,6 @@ export default class VcsChildTile implements VcsTile {
     return this._tile.parent?.data?.show ?? false;
   }
 
-  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-empty-function
+  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-empty-function,no-empty-function
   set show(_show: boolean) {}
 }

package/src/layer/cesium/vcsTile/vcsDebugTile.ts

@@ -1,24 +1,19 @@
-import {
-  PrimitiveCollection,
-  QuadtreeTile,
-  SplitDirection,
-  TileBoundingRegion,
-} from '@vcmap-cesium/engine';
+import type { QuadtreeTile, TileBoundingRegion } from '@vcmap-cesium/engine';
+import { PrimitiveCollection, SplitDirection } from '@vcmap-cesium/engine';
 import { getLogger } from '@vcsuite/logger';
 import { Feature } from 'ol';
 import { Point } from 'ol/geom.js';
 import { getCenter } from 'ol/extent.js';
 import { fromExtent } from 'ol/geom/Polygon.js';
 import { Style, Text as OLText } from 'ol/style.js';
-import { StyleLike } from 'ol/style/Style.js';
+import type { StyleLike } from 'ol/style/Style.js';
 import VectorContext from '../vectorContext.js';
 import { vcsLayerName } from '../../layerSymbols.js';
+import type { VcsTile, VcsTileOptions } from './vcsTileHelpers.js';
 import {
   getTileBoundingRegion,
   getTileHash,
   getTileWgs84Extent,
-  VcsTile,
-  VcsTileOptions,
   VcsTileState,
   VcsTileType,
 } from './vcsTileHelpers.js';
@@ -28,7 +23,7 @@ import Projection, {
 } from '../../../util/projection.js';
 import { createSync } from '../../vectorSymbols.js';
 import VectorProperties from '../../vectorProperties.js';
-import CesiumMap from '../../../map/cesiumMap.js';
+import type CesiumMap from '../../../map/cesiumMap.js';
 import type TileProvider from '../../tileProvider/tileProvider.js';
 
 let vectorProperties: VectorProperties | undefined;

package/src/layer/cesium/vcsTile/vcsNoDataTile.ts

@@ -1,8 +1,8 @@
-import { QuadtreeTile, TileBoundingRegion } from '@vcmap-cesium/engine';
+import type { QuadtreeTile, TileBoundingRegion } from '@vcmap-cesium/engine';
 import type CesiumMap from '../../../map/cesiumMap.js';
+import type { VcsTile } from './vcsTileHelpers.js';
 import {
   getTileBoundingRegion,
-  VcsTile,
   VcsTileState,
   VcsTileType,
 } from './vcsTileHelpers.js';
@@ -25,6 +25,6 @@ export default class VcsNoDataTile implements VcsTile {
     return false;
   }
 
-  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-empty-function
+  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-empty-function,no-empty-function
   set show(_show: boolean) {}
 }