@vcmap/core 6.3.2 → 6.3.4

package/src/layer/cesium/imageryProvider/abstractVcsImageryProvider.ts

@@ -0,0 +1,126 @@
+import {
+  Event as CesiumEvent,
+  type ImageryTypes,
+  type Rectangle,
+  type TilingScheme,
+} from '@vcmap-cesium/engine';
+import type { Size } from 'ol/size.js';
+
+export type AbstractVcsImageryProviderOptions = {
+  tilingScheme: TilingScheme;
+  tileSize: Size;
+  minLevel: number;
+  maxLevel: number;
+  headers?: Record<string, string>;
+};
+
+export default abstract class AbstractVcsImageryProvider {
+  protected _tilingScheme: TilingScheme;
+
+  private _tileSize: Size;
+
+  private _errorEvent = new CesiumEvent();
+
+  headers?: Record<string, string>;
+
+  emptyCanvas: HTMLCanvasElement;
+
+  minLevel: number;
+
+  maxLevel: number;
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  _reload: undefined | (() => void) = undefined;
+
+  constructor(options: AbstractVcsImageryProviderOptions) {
+    this._tilingScheme = options.tilingScheme;
+    this._tileSize = options.tileSize;
+    this.minLevel = options.minLevel;
+    this.maxLevel = options.maxLevel;
+    this._errorEvent = new CesiumEvent();
+
+    this.emptyCanvas = document.createElement('canvas');
+    this.emptyCanvas.width = this.tileWidth;
+    this.emptyCanvas.height = this.tileHeight;
+    this.headers = options.headers;
+  }
+
+  // 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 tileWidth(): number {
+    return this._tileSize[0];
+  }
+
+  get tileHeight(): number {
+    return this._tileSize[1];
+  }
+
+  get maximumLevel(): number {
+    return this.maxLevel;
+  }
+
+  get minimumLevel(): number {
+    return this.minLevel;
+  }
+
+  get tilingScheme(): TilingScheme {
+    return this._tilingScheme;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get tileDiscardPolicy(): undefined {
+    return undefined;
+  }
+
+  get errorEvent(): CesiumEvent {
+    return this._errorEvent;
+  }
+
+  // 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;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get hasAlphaChannel(): boolean {
+    return true;
+  }
+
+  /**
+   * Requests the image for a given tile.  This function should
+   * not be called before  returns true.
+   *
+   * @param  x The tile X coordinate.
+   * @param  y The tile Y coordinate.
+   * @param  level The tile level.
+   * @returns  A promise for the image that will resolve when the image is available, or
+   *          undefined if there are too many active requests to the server, and the request
+   *          should be retried later.  The resolved image may be either an
+   *          Image or a Canvas DOM object.
+   */
+  abstract requestImage(
+    x: number,
+    y: number,
+    level: number,
+  ): Promise<ImageryTypes> | undefined;
+
+  // eslint-disable-next-line class-methods-use-this
+  destroy(): void {}
+}

package/src/layer/cesium/{cogImageryProvider.ts → imageryProvider/cogImageryProvider.ts}

@@ -11,7 +11,6 @@ import type { Size } from 'ol/size.js';
 import TileState from 'ol/TileState.js';
 import {
   Cartesian2,
-  Event as CesiumEvent,
   GeographicTilingScheme,
   type ImageryTypes,
   Math as CesiumMath,
@@ -24,7 +23,8 @@ import type TileGrid from 'ol/tilegrid/TileGrid.js';
 import {
   mercatorExtentToRectangle,
   rectangleToMercatorExtent,
-} from '../../util/math.js';
+} from '../../../util/math.js';
+import AbstractVcsImageryProvider from './abstractVcsImageryProvider.js';
 
 export function createEmptyCanvas(
   width: number,
@@ -134,10 +134,10 @@ function drawData(
   ctx.putImageData(imageData, offsetX, offsetY);
 }
 
-function getMaximumTileSize(tileGrid: TileGrid, source: GeoTIFFSource): Size {
+function getMaximumTileSize(source: GeoTIFFSource): Size {
   let width = 0;
   let height = 0;
-  const numResolutions = tileGrid.getResolutions().length;
+  const numResolutions = source.getTileGrid()!.getResolutions().length;
   for (let i = 0; i < numResolutions; i++) {
     // @ts-expect-error protected
     const size = source.getTileSize(i);
@@ -150,16 +150,12 @@ function getMaximumTileSize(tileGrid: TileGrid, source: GeoTIFFSource): Size {
   return [width, height];
 }
 
-export default class COGImageryProvider {
-  private _emptyCanvas: HTMLCanvasElement;
-
+export default class COGImageryProvider extends AbstractVcsImageryProvider {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   _reload: undefined | (() => void) = undefined;
 
   private _projection: Projection;
 
-  private _tilingScheme: TilingScheme;
-
   private _tileGrid: TileGrid;
 
   private _boundTileLoader: (
@@ -168,84 +164,26 @@ export default class COGImageryProvider {
     level: number,
   ) => Promise<ImageryTypes>;
 
-  readonly tileWidth: number = 256;
-
-  readonly tileHeight: number = 256;
-
   constructor(private _source: GeoTIFFSource) {
+    const tileSize = getMaximumTileSize(_source);
+    const maxLevel = _source.getTileGrid()?.getMaxZoom?.() ?? 26;
+
+    super({
+      tilingScheme: getTilingSchemeFromSource(_source),
+      tileSize,
+      minLevel: 0,
+      maxLevel,
+    });
+
     this._projection = this._source.getProjection()!;
     this._tileGrid = this._source.getTileGrid()!;
-    this._tilingScheme = getTilingSchemeFromSource(this._source);
     if (areGridsAligned(this._tileGrid, this._tilingScheme, this._source)) {
       this._boundTileLoader = this._loadAlignedTile.bind(this);
     } else {
       this._boundTileLoader = this._loadUnalignedTile.bind(this);
     }
-    const [width, height] = getMaximumTileSize(this._tileGrid, this._source);
-    this.tileWidth = width;
-    this.tileHeight = height;
-    this._emptyCanvas = createEmptyCanvas(this.tileWidth, this.tileHeight);
-  }
-
-  // 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 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 _getTileSizeForLevel(level: number): [number, number] {
     // @ts-expect-error protected
     const [width, height] = this._source.getTileSize(level);
@@ -306,7 +244,7 @@ export default class COGImageryProvider {
       return canvas;
     }
 
-    return this._emptyCanvas;
+    return this.emptyCanvas;
   }
 
   private async _loadUnalignedTile(
@@ -335,7 +273,7 @@ export default class COGImageryProvider {
 
     const ctx = canvas.getContext('2d');
     if (!ctx) {
-      return this._emptyCanvas;
+      return this.emptyCanvas;
     }
 
     const promises: Promise<void>[] = [];
@@ -413,10 +351,14 @@ export default class COGImageryProvider {
       return windowCanvas;
     }
 
-    return this._emptyCanvas;
+    return this.emptyCanvas;
   }
 
-  requestImage(x: number, y: number, level: number): Promise<ImageryTypes> {
+  requestImage(
+    x: number,
+    y: number,
+    level: number,
+  ): Promise<ImageryTypes> | undefined {
     return this._boundTileLoader(x, y, level);
   }
 }

package/src/layer/cesium/imageryProvider/mapboxStyleImageryProvider.ts

@@ -0,0 +1,63 @@
+import type LayerGroup from 'ol/layer/Group.js';
+import type { VectorTileImageryProviderOptions } from './vectorTileImageryProvider.js';
+import {
+  createOLImageRenderer,
+  type OLImageRenderer,
+} from './olImageRenderer.js';
+import AbstractVcsImageryProvider from './abstractVcsImageryProvider.js';
+import type TileProvider from '../../tileProvider/tileProvider.js';
+
+export type MapboxStyleImageryProviderOptions =
+  VectorTileImageryProviderOptions & {
+    styledMapboxLayerGroup: LayerGroup;
+    minimumTerrainLevel?: number;
+    maximumTerrainLevel?: number;
+    tileCacheSize?: number;
+  };
+
+/**
+ * Implementation of Cesium ImageryProvider Interface for Mapbox Style Tiles
+ */
+class MapboxStyleImageryProvider extends AbstractVcsImageryProvider {
+  static get className(): string {
+    return 'MapboxStyleImageryProvider';
+  }
+
+  tileProvider: TileProvider;
+
+  private _olImageRenderer: OLImageRenderer;
+
+  constructor(options: MapboxStyleImageryProviderOptions) {
+    super({
+      tilingScheme: options.tileProvider.tilingScheme,
+      tileSize: options.tileSize,
+      minLevel: 0,
+      maxLevel: 26,
+    });
+
+    this.tileProvider = options.tileProvider;
+
+    this._olImageRenderer = createOLImageRenderer({
+      tilingScheme: this.tileProvider.tilingScheme,
+      tileWidth: this.tileWidth,
+      tileHeight: this.tileHeight,
+      tileCacheSize: options.tileCacheSize,
+      emptyCanvas: this.emptyCanvas,
+    });
+    this._olImageRenderer.map.addLayer(options.styledMapboxLayerGroup);
+  }
+
+  requestImage(
+    x: number,
+    y: number,
+    level: number,
+  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
+    return this._olImageRenderer.requestImage(x, y, level);
+  }
+
+  destroy(): void {
+    this._olImageRenderer.destroy();
+  }
+}
+
+export default MapboxStyleImageryProvider;

package/src/layer/cesium/imageryProvider/olImageRenderer.ts

@@ -0,0 +1,219 @@
+import type { TilingScheme } from '@vcmap-cesium/engine';
+import OLMap from 'ol/Map.js';
+import LRUCache from 'ol/structs/LRUCache.js';
+import { buffer, type Extent, getCenter } from 'ol/extent.js';
+import { getLogger } from '@vcsuite/logger';
+import { parseInteger } from '@vcsuite/parsers';
+import { rectangleToMercatorExtent } from '../../../util/math.js';
+
+export type OLImageRenderer = {
+  readonly isRendering: boolean;
+  readonly map: OLMap;
+  requestImage(
+    x: number,
+    y: number,
+    level: number,
+  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined;
+  destroy(): void;
+};
+
+export type OLImageRendererOptions = {
+  tilingScheme: TilingScheme;
+  tileWidth: number;
+  tileHeight: number;
+  emptyCanvas: HTMLCanvasElement;
+  tileCacheSize?: number;
+  fetchFeatures?: (
+    x: number,
+    y: number,
+    level: number,
+    extent: Extent,
+  ) => Promise<void>;
+};
+
+function getTileCacheKey(x: number, y: number, level: number): string {
+  return `${x}-${y}-${level}`;
+}
+
+function getGutterSize(level: number): number {
+  if (level < 12) {
+    return 32;
+  }
+  if (level < 15) {
+    return 48;
+  }
+  return 64;
+}
+
+export function createOLImageRenderer(
+  options: OLImageRendererOptions,
+): OLImageRenderer {
+  const maxCacheSize = parseInteger(options.tileCacheSize, 100);
+  const { tilingScheme, tileWidth, tileHeight, emptyCanvas, fetchFeatures } =
+    options;
+  const renderMap = new OLMap({
+    target: document.createElement('div'),
+  });
+  const tileCacheByLevel = new Map<number, LRUCache<HTMLCanvasElement>>();
+
+  let isRendering = false;
+
+  function getLevelCache(level: number): LRUCache<HTMLCanvasElement> {
+    const existing = tileCacheByLevel.get(level);
+    if (existing) {
+      return existing;
+    }
+    const cache = new LRUCache<HTMLCanvasElement>(maxCacheSize);
+    tileCacheByLevel.set(level, cache);
+    return cache;
+  }
+
+  function renderTile(
+    level: number,
+    extent: Extent,
+    gutterSize: number,
+  ): Promise<HTMLCanvasElement> {
+    const TIMEOUT_MS = 2500;
+    return new Promise((resolve) => {
+      let isFinished = false;
+      const finish = (canvas: HTMLCanvasElement): void => {
+        if (isFinished) {
+          return;
+        }
+        isFinished = true;
+        resolve(canvas);
+      };
+
+      try {
+        if (!renderMap) {
+          finish(emptyCanvas);
+          return;
+        }
+
+        const renderWidth = tileWidth + 2 * gutterSize;
+        const renderHeight = tileHeight + 2 * gutterSize;
+
+        const view = renderMap.getView();
+        view.setCenter(getCenter(extent));
+        view.setZoom(level);
+        renderMap.setSize([renderWidth, renderHeight]);
+
+        const handleRenderComplete = (): void => {
+          renderMap?.un('rendercomplete', handleRenderComplete);
+
+          const renderedCanvas = renderMap
+            ?.getViewport()
+            .querySelector('canvas');
+
+          if (!renderedCanvas) {
+            finish(emptyCanvas);
+            return;
+          }
+
+          // Crop the canvas to extract the center portion (original tile size)
+          const tileCanvas = document.createElement('canvas');
+          tileCanvas.width = tileWidth;
+          tileCanvas.height = tileHeight;
+          const ctx = tileCanvas.getContext('2d');
+          if (ctx) {
+            const scaleX = renderedCanvas.width / renderWidth;
+            const scaleY = renderedCanvas.height / renderHeight;
+            ctx.drawImage(
+              renderedCanvas,
+              gutterSize * scaleX,
+              gutterSize * scaleY,
+              tileWidth * scaleX,
+              tileHeight * scaleY,
+              0,
+              0,
+              tileWidth,
+              tileHeight,
+            );
+          }
+
+          finish(tileCanvas);
+        };
+
+        const timeoutId = window.setTimeout(() => {
+          renderMap?.un('rendercomplete', handleRenderComplete);
+          getLogger('MapboxVectorTileImageryProvider').warning(
+            'Tile render timed out; returning empty tile.',
+          );
+          finish(emptyCanvas);
+        }, TIMEOUT_MS);
+
+        const wrappedHandleRenderComplete = (): void => {
+          window.clearTimeout(timeoutId);
+          handleRenderComplete();
+        };
+
+        renderMap.once('rendercomplete', wrappedHandleRenderComplete);
+        renderMap.render();
+      } catch (e: unknown) {
+        getLogger('MapboxVectorTileImageryProvider').error(
+          `Error rendering tile: ${(e as Error).message}`,
+        );
+        finish(emptyCanvas);
+      }
+    });
+  }
+
+  async function doRequestImage(
+    x: number,
+    y: number,
+    level: number,
+    cacheKey: string,
+  ): Promise<HTMLImageElement | HTMLCanvasElement> {
+    const rectangle = tilingScheme.tileXYToRectangle(x, y, level);
+    const extent = rectangleToMercatorExtent(rectangle);
+
+    // Add gutters to prevent labels from being cut off
+    const gutterSize = getGutterSize(level);
+    const gutter = ((extent[2] - extent[0]) / tileWidth) * gutterSize;
+    const expandedExtent = buffer(extent, gutter);
+
+    isRendering = true;
+    if (fetchFeatures) {
+      await fetchFeatures(x, y, level, expandedExtent);
+    }
+    const renderedTile = await renderTile(level, expandedExtent, gutterSize);
+    isRendering = false;
+    const levelCache = getLevelCache(level);
+    levelCache.set(cacheKey, renderedTile);
+    levelCache.expireCache();
+    return renderedTile;
+  }
+
+  return {
+    get map(): OLMap {
+      return renderMap;
+    },
+    get isRendering(): boolean {
+      return isRendering;
+    },
+    requestImage(
+      x: number,
+      y: number,
+      level: number,
+    ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
+      const cacheKey = getTileCacheKey(x, y, level);
+      const levelCache = getLevelCache(level);
+      if (levelCache.containsKey(cacheKey)) {
+        return Promise.resolve(levelCache.get(cacheKey));
+      }
+      if (isRendering) {
+        return undefined;
+      }
+      return doRequestImage(x, y, level, cacheKey);
+    },
+    destroy(): void {
+      for (const cache of tileCacheByLevel.values()) {
+        cache.clear();
+      }
+      tileCacheByLevel.clear();
+      isRendering = false;
+      renderMap.setTarget(undefined);
+      renderMap.dispose();
+    },
+  };
+}

package/src/layer/cesium/imageryProvider/panoramaDatasetImageryProvider.ts

@@ -0,0 +1,73 @@
+import { type Extent as OLExtent } from 'ol/extent.js';
+import VectorSource from 'ol/source/Vector.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import { type VectorTileImageryProviderOptions } from './vectorTileImageryProvider.js';
+import {
+  createOLImageRenderer,
+  type OLImageRenderer,
+} from './olImageRenderer.js';
+import Extent from '../../../util/extent.js';
+import { mercatorProjection } from '../../../util/projection.js';
+import AbstractVcsImageryProvider from './abstractVcsImageryProvider.js';
+import type TileProvider from '../../tileProvider/tileProvider.js';
+
+export default class PanoramaDatasetImageryProvider extends AbstractVcsImageryProvider {
+  private _source = new VectorSource({ useSpatialIndex: false });
+
+  private _olImageRenderer: OLImageRenderer;
+
+  tileProvider: TileProvider;
+
+  constructor(options: VectorTileImageryProviderOptions) {
+    super({
+      tilingScheme: options.tileProvider.tilingScheme,
+      tileSize: options.tileSize,
+      minLevel: 0,
+      maxLevel: 26,
+    });
+
+    this.tileProvider = options.tileProvider;
+
+    this._olImageRenderer = createOLImageRenderer({
+      tilingScheme: this.tileProvider.tilingScheme,
+      tileWidth: this.tileWidth,
+      tileHeight: this.tileHeight,
+      emptyCanvas: this.emptyCanvas,
+      fetchFeatures: this._fetchFeatures.bind(this),
+    });
+    this._olImageRenderer.map.addLayer(
+      new VectorLayer({ source: this._source, declutter: true }),
+    );
+  }
+
+  requestImage(
+    x: number,
+    y: number,
+    level: number,
+  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
+    return this._olImageRenderer.requestImage(x, y, level);
+  }
+
+  private async _fetchFeatures(
+    _x: number,
+    _y: number,
+    level: number,
+    extent: OLExtent,
+  ): Promise<void> {
+    const vcsExtent = new Extent({
+      coordinates: extent,
+      projection: mercatorProjection.toJSON(),
+    });
+    const features = await this.tileProvider.getFeaturesForExtent(
+      vcsExtent,
+      level,
+    );
+    this._source.clear(true);
+    this._source.addFeatures(features);
+  }
+
+  destroy(): void {
+    this._source.dispose();
+    this._olImageRenderer.destroy();
+  }
+}