@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/oblique/obliqueDataSet.ts

@@ -0,0 +1,373 @@
+import type { CesiumTerrainProvider } from '@vcmap-cesium/engine';
+import { createXYZ } from 'ol/tilegrid.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { TileCoord } from 'ol/tilecoord.js';
+import type { Extent } from 'ol/extent.js';
+import { cartesian2DDistance } from '../util/math.js';
+import {
+  parseImageData,
+  parseImageMeta,
+  parseLegacyImageData,
+  getVersionFromImageJson,
+} from './parseImageJson.js';
+import VcsEvent from '../vcsEvent.js';
+import { getTerrainProviderForUrl } from '../layer/terrainHelpers.js';
+import Projection, { ProjectionOptions } from '../util/projection.js';
+import { requestJson } from '../util/fetch.js';
+import type ObliqueImage from './obliqueImage.js';
+import type {
+  ObliqueDataSetTerrainProviderOptions,
+  ObliqueImageJson,
+} from './obliqueCollection.js';
+import type ObliqueImageMeta from './obliqueImageMeta.js';
+import type { CopyrightOptions } from '../layer/layer.js';
+
+type ObliqueDataSetImagesLoaded = {
+  images: ObliqueImage[];
+  tileCoordinate?: string;
+};
+
+export type ObliqueDataSetOptions = {
+  url: string;
+  projection?: ProjectionOptions;
+  terrainProvider?: ObliqueDataSetTerrainProviderOptions;
+};
+
+export enum DataState {
+  PENDING = 1,
+  LOADING = 2,
+  READY = 3,
+}
+
+export function getStateFromStatesArray(states: DataState[]): DataState {
+  if (states.some((s) => s === DataState.PENDING)) {
+    return DataState.PENDING;
+  }
+
+  if (states.some((s) => s === DataState.LOADING)) {
+    return DataState.LOADING;
+  }
+
+  return DataState.READY;
+}
+
+class ObliqueDataSet {
+  url: string;
+
+  baseUrl: string;
+
+  projection: Projection;
+
+  private _terrainProviderOptions:
+    | ObliqueDataSetTerrainProviderOptions
+    | undefined;
+
+  private _terrainProvider: CesiumTerrainProvider | undefined = undefined;
+
+  private _imageMetas: ObliqueImageMeta[] = [];
+
+  /**
+   * Event raised when images are loaded.
+   */
+  imagesLoaded = new VcsEvent<ObliqueDataSetImagesLoaded>();
+
+  private _tiles: Map<string, DataState> = new Map();
+
+  private _loadingPromises: Map<string, Promise<void>> = new Map();
+
+  private _state = DataState.PENDING;
+
+  private _tileLevel: number | undefined = undefined;
+
+  private _tileGrid = createXYZ();
+
+  private _images: ObliqueImage[] = [];
+
+  private _loadingPromise: Promise<void> | undefined = undefined;
+
+  copyright: CopyrightOptions | undefined = undefined;
+
+  constructor(
+    url: string,
+    projection?: Projection | ProjectionOptions,
+    terrainProviderOptions?: ObliqueDataSetTerrainProviderOptions,
+  ) {
+    this.url = url;
+    if (!/\.json$/.test(this.url)) {
+      this.url = this.url.replace(/\/?$/, '/image.json');
+    }
+
+    this.baseUrl = this.url.replace(/\/?([^/]+\.json)?$/, '');
+
+    let projectionObject = projection;
+    if (projectionObject && !(projectionObject instanceof Projection)) {
+      projectionObject = new Projection(projectionObject);
+    }
+    this.projection = projectionObject as Projection;
+
+    this._terrainProviderOptions = terrainProviderOptions
+      ? { ...terrainProviderOptions }
+      : undefined;
+  }
+
+  /**
+   * The loaded images of this DataSet
+   */
+  get images(): ObliqueImage[] {
+    return this._images.slice();
+  }
+
+  /**
+   * Gets the state of the meta data information. For tiled data sets, this does not
+   * reflect the state of loaded tiles.
+   */
+  get state(): DataState {
+    return this._state;
+  }
+
+  /**
+   * Loads the data set.
+   */
+  async load(): Promise<void> {
+    if (!this._loadingPromise) {
+      this._state = DataState.LOADING;
+      this._loadingPromise = requestJson<ObliqueImageJson>(this.url)
+        .then((data) => {
+          return this._initialize(data);
+        })
+        .catch((err) => {
+          return Promise.reject(err);
+        });
+    }
+    return this._loadingPromise;
+  }
+
+  /**
+   * Returns all tiles of this data set, including its DataState
+   */
+  getTiles(): Record<string, DataState> {
+    const tiles: Record<string, DataState> = {};
+    this._tiles.forEach((state, tile) => {
+      tiles[tile] = state;
+    });
+    return tiles;
+  }
+
+  /**
+   * initialize the DataSet with an existing Object.
+   * DataSets cannot be initialized more then once.
+   */
+  async initialize(json: ObliqueImageJson): Promise<void> {
+    if (this._state !== DataState.PENDING) {
+      throw new Error('DataSet has already been loaded');
+    }
+    this._loadingPromise = Promise.resolve();
+    await this._initialize(json);
+  }
+
+  private async _initialize(json: ObliqueImageJson): Promise<void> {
+    if (this._terrainProviderOptions?.url) {
+      const terrainProviderOptions = {
+        requestVertexNormals: this._terrainProviderOptions.requestVertexNormals,
+        requestWaterMask: this._terrainProviderOptions.requestWaterMask,
+      };
+      this._terrainProvider = await getTerrainProviderForUrl(
+        this._terrainProviderOptions.url,
+        terrainProviderOptions,
+      );
+    }
+    this._parseMetaData(json);
+    this._state = DataState.READY;
+  }
+
+  private _parseMetaData(json: ObliqueImageJson): void {
+    this._imageMetas = parseImageMeta(
+      json,
+      this.baseUrl,
+      this.projection,
+      this._terrainProvider,
+    );
+    const { version, buildNumber } = getVersionFromImageJson(json);
+
+    if (json.tileLevel) {
+      this._tileLevel = json.tileLevel;
+      json.availableTiles!.forEach((tile) => {
+        this._tiles.set(tile, DataState.PENDING);
+      });
+    } else {
+      let images: ObliqueImage[] = [];
+      if (version >= 3.5 || (version === 3.4 && buildNumber > 36)) {
+        images = parseImageData(json, this._imageMetas);
+      } else if (version >= 3.1 || version === null) {
+        images = parseLegacyImageData(json, this._imageMetas);
+      }
+      if (images.length > 0) {
+        this._images = images;
+        this.imagesLoaded.raiseEvent({ images });
+      }
+    }
+  }
+
+  private _getClosestTileCoordinate(
+    mercatorCoordinate: Coordinate,
+  ): TileCoord | null {
+    if (!this._tileLevel) {
+      return null;
+    }
+    const actualTile = this._tileGrid.getTileCoordForCoordAndZ(
+      mercatorCoordinate,
+      this._tileLevel,
+    );
+    if (this._tiles.has(actualTile.join('/'))) {
+      return actualTile;
+    }
+
+    let minDistance = Infinity;
+    let minTile = null;
+    [...this._tiles.keys()].forEach((tile) => {
+      const tileCoord = tile.split('/').map(Number);
+      const dist = cartesian2DDistance(
+        [actualTile[1], actualTile[2]],
+        [tileCoord[1], tileCoord[2]],
+      );
+      if (dist < minDistance) {
+        minDistance = dist;
+        minTile = tileCoord;
+      }
+    });
+    return minTile || actualTile;
+  }
+
+  private _getTileCoordinatesForExtent(extent: Extent): string[] {
+    const topLeft = this._tileGrid.getTileCoordForCoordAndZ(
+      [extent[0], extent[3]],
+      this._tileLevel as number,
+    );
+    const bottomRight = this._tileGrid.getTileCoordForCoordAndZ(
+      [extent[2], extent[1]],
+      this._tileLevel as number,
+    );
+    const tileCoordinates = [];
+    for (let x = topLeft[1]; x <= bottomRight[1]; x++) {
+      for (let y = topLeft[2]; y <= bottomRight[2]; y++) {
+        tileCoordinates.push([this._tileLevel, x, y]);
+      }
+    }
+
+    return tileCoordinates
+      .map((tc) => tc.join('/'))
+      .filter((tc) => {
+        const state = this._tiles.get(tc);
+        return state && state !== DataState.READY;
+      });
+  }
+
+  /**
+   * Requests the state of data at a certain location. No data is automatically READY.
+   * @param  mercatorCoordinate - coordinate in web mercator
+   */
+  getDataStateForCoordinate(mercatorCoordinate: Coordinate): DataState {
+    if (this._state !== DataState.READY || this._tiles.size === 0) {
+      return this._state;
+    }
+
+    const tileCoordinate =
+      this._getClosestTileCoordinate(mercatorCoordinate)!.join('/');
+
+    return this._tiles.has(tileCoordinate)
+      ? (this._tiles.get(tileCoordinate) as DataState)
+      : DataState.READY;
+  }
+
+  /**
+   * Loads all the tiles for a given extent.
+   */
+  getDataStateForExtent(extent: Extent): DataState {
+    if (this._state !== DataState.READY || this._tiles.size === 0) {
+      return this._state;
+    }
+
+    const tileCoordinates = this._getTileCoordinatesForExtent(extent);
+    const states = tileCoordinates
+      .map((tc) => this._tiles.get(tc))
+      .filter((s) => s) as DataState[];
+    return getStateFromStatesArray(states);
+  }
+
+  private _loadTile(stringTileCoordinates: string): Promise<void> {
+    if (this._loadingPromises.has(stringTileCoordinates)) {
+      return this._loadingPromises.get(stringTileCoordinates) as Promise<void>;
+    }
+
+    if (this._tiles.get(stringTileCoordinates) !== DataState.PENDING) {
+      return Promise.resolve();
+    }
+
+    this._tiles.set(stringTileCoordinates, DataState.LOADING);
+    const promise = requestJson<ObliqueImageJson>(
+      `${this.baseUrl}/${stringTileCoordinates}.json`,
+    )
+      .then((data) => {
+        const images = parseImageData(data, this._imageMetas);
+        if (images.length > 0) {
+          this._images = this._images.concat(images);
+          this.imagesLoaded.raiseEvent({
+            images,
+            tileCoordinate: stringTileCoordinates,
+          });
+        }
+      })
+      .catch((err) => {
+        // eslint-disable-next-line no-console
+        console.error(err);
+      })
+      .finally(() => {
+        this._tiles.set(stringTileCoordinates, DataState.READY);
+        this._loadingPromises.delete(stringTileCoordinates);
+      });
+
+    this._loadingPromises.set(stringTileCoordinates, promise);
+    return promise;
+  }
+
+  /**
+   * Loads the closest data tile for a certain location. Resolves when all data for the location has been loaded.
+   * @param  mercatorCoordinate - coordinate in web mercator
+   */
+  async loadDataForCoordinate(mercatorCoordinate: Coordinate): Promise<void> {
+    const tileCoordinate = this._getClosestTileCoordinate(mercatorCoordinate);
+    if (tileCoordinate) {
+      await this._loadTile(tileCoordinate.join('/'));
+    }
+  }
+
+  /**
+   * Loads all the tiles for a given extent.
+   */
+  async loadDataForExtent(extent: Extent): Promise<void> {
+    const tileCoordinates = this._getTileCoordinatesForExtent(extent);
+    await Promise.all(tileCoordinates.map((tc) => this._loadTile(tc)));
+  }
+
+  destroy(): void {
+    this.imagesLoaded.destroy();
+    this._images = [];
+    this._imageMetas = [];
+    this._tiles.clear();
+    this._loadingPromises.clear();
+    this._terrainProvider = undefined;
+  }
+
+  toJSON(): ObliqueDataSetOptions {
+    const config: ObliqueDataSetOptions = { url: this.url };
+    if (this.projection) {
+      config.projection = this.projection.toJSON();
+    }
+    if (this._terrainProviderOptions) {
+      config.terrainProvider = { ...this._terrainProviderOptions };
+    }
+    return config;
+  }
+}
+
+export default ObliqueDataSet;

package/src/oblique/obliqueImage.ts

@@ -0,0 +1,259 @@
+import type { Coordinate } from 'ol/coordinate.js';
+import { Cartesian3, Cartesian4, Matrix3, Matrix4 } from '@vcmap-cesium/engine';
+import { transformCWIFC } from './helpers.js';
+import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
+import { ObliqueViewDirection } from './obliqueViewDirection.js';
+import type ObliqueImageMeta from './obliqueImageMeta.js';
+
+export const isDefaultImageSymbol = Symbol('isDefaultImage');
+
+export type ObliqueImageOptions = {
+  name: string;
+  viewDirection: ObliqueViewDirection;
+  viewDirectionAngle?: number;
+  groundCoordinates: Coordinate[];
+  centerPointOnGround: Coordinate;
+  meta: ObliqueImageMeta;
+  projectionCenter?: Cartesian3;
+  pToRealworld?: Matrix3;
+  pToImage?: Matrix4;
+};
+
+class ObliqueImage {
+  /**
+   * Name of the image
+   */
+  name: string;
+
+  /**
+   * Meta information shared across multiple images.
+   */
+  meta: ObliqueImageMeta;
+
+  /**
+   * viewDirection
+   */
+  viewDirection: ObliqueViewDirection;
+
+  /**
+   * viewDirectionAngle in radians, where 0 = east, PI / 2 = north, PI = west and PI * 1.5 = south
+   */
+  viewDirectionAngle: number | undefined;
+
+  /**
+   * The ground coordinates of the image corners (in image world projection).
+   */
+  groundCoordinates: Array<Coordinate>;
+
+  /**
+   * The center point of the image in world coordinates (in image world projection).
+   */
+  centerPointOnGround: Coordinate;
+
+  /**
+   * The transformation matrix image to real world (in image world projection).
+   */
+  pToRealworld: Matrix3 | null;
+
+  /**
+   * The transformation matrix real to image (in image world projection).
+   */
+  pToImage: Matrix4 | null;
+
+  /**
+   * The projection center in image world projection
+   */
+  projectionCenter: Cartesian3 | null;
+
+  /**
+   * The calculated average height of an image
+   */
+  private _averageHeight: number | null;
+
+  [isDefaultImageSymbol]?: boolean;
+
+  constructor(options: ObliqueImageOptions) {
+    this.name = options.name;
+    this.meta = options.meta;
+    this.viewDirection = options.viewDirection;
+    this.viewDirectionAngle = options.viewDirectionAngle;
+    this.groundCoordinates = options.groundCoordinates;
+    this.centerPointOnGround = options.centerPointOnGround;
+    this.pToRealworld = options.pToRealworld || null;
+    this.pToImage = options.pToImage || null;
+    this.projectionCenter = options.projectionCenter || null;
+    this._averageHeight = null;
+  }
+
+  /**
+   * returns the averageHeight of the image or 0 if not defined. Be sure to call calculateAverageHeight before hand.
+   */
+  get averageHeight(): number {
+    return this._averageHeight != null ? this._averageHeight : 0;
+  }
+
+  /**
+   * returns whether this image supports exact Coordinate transformation
+   */
+  get hasCamera(): boolean {
+    return !!this.meta.principalPoint;
+  }
+
+  /**
+   * @param  imageCoordinate
+   * @param  optAvgHeight
+   */
+  transformImage2RealWorld(
+    imageCoordinate: Coordinate,
+    optAvgHeight?: number,
+  ): Coordinate {
+    let distortedCoordinate = imageCoordinate;
+    if (!this.meta.principalPoint) {
+      return this._transformNoCamera(distortedCoordinate, true, optAvgHeight);
+    } else if (this.meta.hasRadial) {
+      distortedCoordinate = this.meta.radialDistortionCoordinate(
+        distortedCoordinate,
+        true,
+      );
+    }
+
+    const x = new Cartesian3(
+      distortedCoordinate[0],
+      this.meta.size[1] - distortedCoordinate[1],
+      1,
+    );
+    const rayWorld = Matrix3.multiplyByVector(
+      this.pToRealworld as Matrix3,
+      x,
+      new Cartesian3(),
+    );
+    const avgHeight = optAvgHeight || this.averageHeight;
+    const centerPointOnGround = new Cartesian3(
+      this.centerPointOnGround[0],
+      this.centerPointOnGround[1],
+      avgHeight,
+    );
+    const w0 = Cartesian3.subtract(
+      this.projectionCenter as Cartesian3,
+      centerPointOnGround,
+      new Cartesian3(),
+    );
+    const a = Cartesian3.dot(Cartesian3.UNIT_Z, w0) * -1;
+    const b = Cartesian3.dot(Cartesian3.UNIT_Z, rayWorld);
+
+    const r = a / b;
+
+    const intr = Cartesian3.add(
+      this.projectionCenter as Cartesian3,
+      Cartesian3.multiplyByScalar(rayWorld, r, new Cartesian3()),
+      new Cartesian3(),
+    );
+    return [intr.x, intr.y, avgHeight];
+  }
+
+  transformRealWorld2Image(
+    worldCoordinate: Coordinate,
+    optAvgHeight?: number,
+  ): Coordinate {
+    // if we dont have camera parameters
+    if (!this.meta.principalPoint) {
+      return this._transformNoCamera(worldCoordinate, false, optAvgHeight);
+    }
+
+    // usage of perspective projection
+    // the averaged height is used for projection so far
+    const avgHeight = optAvgHeight || this.averageHeight;
+
+    const P = new Cartesian4(
+      worldCoordinate[0],
+      worldCoordinate[1],
+      avgHeight,
+      1,
+    );
+
+    const camSys = Matrix4.multiplyByVector(
+      this.pToImage as Matrix4,
+      P,
+      new Cartesian4(),
+    );
+    const respectiveImageCoords = [camSys.x / camSys.z, camSys.y / camSys.z];
+    // adjust to ol image coordinates
+    const imCoords = [
+      respectiveImageCoords[0],
+      this.meta.size[1] - respectiveImageCoords[1],
+    ];
+
+    return this.meta.radialDistortionCoordinate(imCoords, false);
+  }
+
+  private _transformNoCamera(
+    coord: Coordinate,
+    isImage: boolean,
+    optAvgHeight?: number,
+  ): Coordinate {
+    const imageCoords = [
+      [0, 0],
+      [this.meta.size[0], 0],
+      this.meta.size,
+      [0, this.meta.size[1]],
+    ];
+    const intrCross = transformCWIFC(
+      isImage ? imageCoords : this.groundCoordinates,
+      isImage ? this.groundCoordinates : imageCoords,
+      isImage,
+      coord,
+      this.viewDirection,
+    );
+    const height = optAvgHeight || this.averageHeight;
+    // if intersection could not be determined write error and return center
+    if (intrCross === null || intrCross.x == null || intrCross.y == null) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Real world coordinate could not be determined from footprint data, center will be returned',
+      );
+      const coords = [this.centerPointOnGround[0], this.centerPointOnGround[1]];
+      if (isImage) {
+        coords.push(height);
+      }
+      return coords;
+    }
+    const coords = [intrCross.x, intrCross.y];
+    if (isImage) {
+      coords.push(height);
+    }
+    return coords;
+  }
+
+  /**
+   * calculates the averageHeight of this image, if a terrainProvider is given the height will be requested
+   */
+  calculateImageAverageHeight(): Promise<void> {
+    if (this._averageHeight === null) {
+      const averageHeight =
+        (this.groundCoordinates[0][2] +
+          this.groundCoordinates[1][2] +
+          this.groundCoordinates[2][2] +
+          this.groundCoordinates[3][2]) /
+        4;
+      if (averageHeight === 0 && this.meta.terrainProvider) {
+        return getHeightFromTerrainProvider(
+          this.meta.terrainProvider,
+          [this.centerPointOnGround.slice()],
+          this.meta.projection,
+        )
+          .then((coords) => {
+            if (coords[0] && coords[0][2] != null) {
+              this._averageHeight = coords[0][2];
+            }
+          })
+          .catch(() => {
+            this._averageHeight = averageHeight;
+          });
+      }
+      this._averageHeight = averageHeight;
+    }
+    return Promise.resolve();
+  }
+}
+
+export default ObliqueImage;