@vcmap/core 5.0.0-rc.0

package/src/vcs/vcm/oblique/ObliqueDataSet.js

@@ -0,0 +1,357 @@
+import { Event as CesiumEvent } from '@vcmap/cesium';
+import axios from 'axios';
+import { createXYZ } from 'ol/tilegrid.js';
+import { destroyCesiumEvent } from './helpers.js';
+import { cartesian2DDistance } from '../util/math.js';
+import { parseImageData, parseImageMeta, parseLegacyImageData, getVersionFromImageJson } from './parseImageJson.js';
+
+/**
+ * Enumeration of data set states
+ * @enum {number}
+ * @property {number} PENDING
+ * @property {number} LOADING
+ * @property {number} READY
+ * @export
+ * @api
+ */
+export const DataState = {
+  PENDING: 1,
+  LOADING: 2,
+  READY: 3,
+};
+
+/**
+ * @param {Array<DataState>} states
+ * @returns {DataState}
+ */
+export function getStateFromStatesArray(states) {
+  if (states.some(s => s === DataState.PENDING)) {
+    return DataState.PENDING;
+  }
+
+  if (states.some(s => s === DataState.LOADING)) {
+    return DataState.LOADING;
+  }
+
+  return DataState.READY;
+}
+
+/**
+ * @class
+ * @export
+ */
+class ObliqueDataSet {
+  /**
+   * @param {string} url
+   * @param {import("ol/proj/Projection").default} projection
+   * @param {import("@vcmap/cesium").CesiumTerrainProvider=} terrainProvider
+   */
+  constructor(url, projection, terrainProvider) {
+    /** @type {string} */
+    this.url = url;
+    if (!/\.json$/.test(this.url)) {
+      this.url = this.url.replace(/\/?$/, '/image.json');
+    }
+
+    /** @type {string} */
+    this.baseUrl = this.url.replace(/\/?([^/]+\.json)?$/, '');
+    /** @type {import("ol/proj/Projection").default} */
+    this.projection = projection;
+    /** @type {import("@vcmap/cesium").CesiumTerrainProvider|undefined} */
+    this.terrainProvider = terrainProvider;
+    /**
+     * @type {Array<import("@vcmap/core").ObliqueImageMeta>}
+     * @private
+     */
+    this._imageMetas = [];
+    /**
+     * Event raised when images are loaded. Is passed an Array of ObliqueImages as the first argument and optionally
+     * a string representing the tile coordinate ("z/x/y"), if the images where loaded for a tile.
+     * @type {import("@vcmap/cesium").Event}
+     * @api
+     */
+    this.imagesLoaded = new CesiumEvent();
+    /** @type {Map<string, DataState>} */
+    this._tiles = new Map();
+    /** @type {Map<string, Promise<void>>} */
+    this._loadingPromises = new Map();
+    this._state = DataState.PENDING;
+    /**
+     * @type {number|null}
+     * @private
+     */
+    this._tileLevel = null;
+    /** @type {import("ol/tilegrid/TileGrid").default} */
+    this._tileGrid = createXYZ();
+
+    /**
+     * @type {Array<import("@vcmap/core").ObliqueImage>}
+     * @private
+     */
+    this._images = [];
+
+    /**
+     * @type {CopyrightOptions|undefined}
+     * @api
+     */
+    this.copyright = undefined;
+  }
+
+  /**
+   * The loaded images of this DataSet
+   * @api
+   * @readonly
+   * @type {Array<import("@vcmap/core").ObliqueImage>}
+   */
+  get images() {
+    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.
+   * @type {DataState}
+   * @api
+   * @readonly
+   */
+  get state() {
+    return this._state;
+  }
+
+  /**
+   * Loads the data set.
+   * @returns {Promise<void>}
+   * @api
+   */
+  load() {
+    if (!this._loadingPromise) {
+      this._state = DataState.LOADING;
+
+      this._loadingPromise = axios.get(this.url)
+        .then(({ data }) => {
+          this._initialize(data);
+        });
+    }
+    return this._loadingPromise;
+  }
+
+  /**
+   * Returns all tiles of this data set, including its DataState
+   * @returns {Object<string, DataState>}
+   * @api
+   */
+  getTiles() {
+    /** @type {Object<string, DataState>} */
+    const tiles = {};
+    this._tiles.forEach((state, tile) => {
+      tiles[tile] = state;
+    });
+    return tiles;
+  }
+
+  /**
+   * initialize the DataSet with an existing Object.
+   * DataSets cannot be initialized more then once.
+   * @param {ObliqueImageJson} json
+   * @api
+   */
+  initialize(json) {
+    if (this._state !== DataState.PENDING) {
+      throw new Error('DataSet has already been loaded');
+    }
+    this._loadingPromise = Promise.resolve();
+    this._initialize(json);
+  }
+
+  /**
+   * @param {ObliqueImageJson} json
+   * @private
+   */
+  _initialize(json) {
+    this._parseMetaData(json);
+    this._state = DataState.READY;
+  }
+
+  /**
+   * @param {ObliqueImageJson} json
+   * @private
+   */
+  _parseMetaData(json) {
+    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 = [];
+      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);
+      }
+    }
+  }
+
+  /**
+   * @param {import("ol/coordinate").Coordinate} mercatorCoordinate
+   * @returns {import("ol/tilecoord").TileCoord|null}
+   * @private
+   */
+  _getClosestTileCoordinate(mercatorCoordinate) {
+    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;
+  }
+
+  /**
+   * @param {import("ol/extent").Extent} extent
+   * @returns {Array<string>}
+   * @private
+   */
+  _getTileCoordinatesForExtent(extent) {
+    const topLeft = this._tileGrid.getTileCoordForCoordAndZ([extent[0], extent[3]], this._tileLevel);
+    const bottomRight = this._tileGrid.getTileCoordForCoordAndZ([extent[2], extent[1]], this._tileLevel);
+    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 {import("ol/coordinate").Coordinate} mercatorCoordinate - coordinate in web mercator
+   * @returns {DataState}
+   * @api
+   */
+  getDataStateForCoordinate(mercatorCoordinate) {
+    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) : DataState.READY;
+  }
+
+  /**
+   * Loads all the tiles for a given extent.
+   * @param {import("ol/extent").Extent} extent
+   * @returns {DataState}
+   * @api
+   */
+  getDataStateForExtent(extent) {
+    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);
+    return getStateFromStatesArray(states);
+  }
+
+  /**
+   * @param {string} stringTileCoordinates
+   * @returns {Promise<void>}
+   * @private
+   */
+  _loadTile(stringTileCoordinates) {
+    if (this._loadingPromises.has(stringTileCoordinates)) {
+      return this._loadingPromises.get(stringTileCoordinates);
+    }
+
+    if (this._tiles.get(stringTileCoordinates) !== DataState.PENDING) {
+      return Promise.resolve();
+    }
+
+    this._tiles.set(stringTileCoordinates, DataState.LOADING);
+    const promise = axios
+      .get(`${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, 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 {import("ol/coordinate").Coordinate} mercatorCoordinate - coordinate in web mercator
+   * @returns {Promise<void>}
+   * @api
+   */
+  async loadDataForCoordinate(mercatorCoordinate) {
+    const tileCoordinate = this._getClosestTileCoordinate(mercatorCoordinate);
+    if (tileCoordinate) {
+      await this._loadTile(tileCoordinate.join('/'));
+    }
+  }
+
+  /**
+   * Loads all the tiles for a given extent.
+   * @param {import("ol/extent").Extent} extent
+   * @returns {Promise<void>}
+   * @api
+   */
+  async loadDataForExtent(extent) {
+    const tileCoordinates = this._getTileCoordinatesForExtent(extent);
+    await Promise.all(tileCoordinates.map(tc => this._loadTile(tc)));
+  }
+
+  destroy() {
+    destroyCesiumEvent(this.imagesLoaded);
+    this._images = [];
+    this._imageMetas = [];
+    this._tiles.clear();
+    this._loadingPromises.clear();
+    this._tileGrid = null;
+    this.terrainProvider = null;
+  }
+}
+
+export default ObliqueDataSet;

package/src/vcs/vcm/oblique/ObliqueImage.js

@@ -0,0 +1,247 @@
+import { Cartesian3, Cartesian4, Matrix3, Matrix4 } from '@vcmap/cesium';
+import { transformCWIFC } from './helpers.js';
+import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
+
+/**
+ * @typedef {Object} ObliqueImageOptions
+ * @property {!string} name
+ * @property {import("@vcmap/core").ObliqueViewDirection} viewDirection
+ * @property {number} viewDirectionAngle
+ * @property {!Array<import("ol/coordinate").Coordinate>} groundCoordinates
+ * @property {!import("ol/coordinate").Coordinate} centerPointOnGround
+ * @property {!import("@vcmap/core").ObliqueImageMeta} meta
+ * @property {import("@vcmap/cesium").Cartesian3|undefined} projectionCenter
+ * @property {import("@vcmap/cesium").Matrix3|undefined} pToRealworld
+ * @property {import("@vcmap/cesium").Matrix4|undefined} pToImage
+ * @property {import("ol/proj/Projection").default|undefined} [projection]
+ * @property {import("@vcmap/cesium").CesiumTerrainProvider|undefined} terrainProvider
+ * @api
+ */
+
+/**
+ * @class
+ * @export
+ */
+class ObliqueImage {
+  /**
+   * @param {ObliqueImageOptions} options
+   */
+  constructor(options) {
+    /**
+     * Name of the image
+     * @type {string}
+     * @api
+     */
+    this.name = options.name;
+
+    /**
+     * Meta information shared across multiple images.
+     * @type {import("@vcmap/core").ObliqueImageMeta}
+     * @api
+     */
+    this.meta = options.meta;
+
+    /**
+     * viewDirection
+     * @type {import("@vcmap/core").ObliqueViewDirection}
+     * @api
+     */
+    this.viewDirection = options.viewDirection;
+
+    /**
+     * viewDirectionAngle in radians, where 0 = east, PI / 2 = north, PI = west and PI * 1.5 = south
+     * @type {number|null}
+     * @api
+     */
+    this.viewDirectionAngle = options.viewDirectionAngle;
+
+    /**
+     * The ground coordinates of the image corners (in image world projection).
+     * @type {Array<import("ol/coordinate").Coordinate>}
+     * @api
+     */
+    this.groundCoordinates = options.groundCoordinates;
+
+    /**
+     * The center point of the image in world coordinates (in image world projection).
+     * @type {import("ol/coordinate").Coordinate}
+     * @api
+     */
+    this.centerPointOnGround = options.centerPointOnGround;
+
+    /**
+     * The transformation matrix image to real world (in image world projection).
+     * @type {import("@vcmap/cesium").Matrix3}
+     * @api
+     */
+    this.pToRealworld = options.pToRealworld || null;
+
+    /**
+     * The transformation matrix real to image (in image world projection).
+     * @type {import("@vcmap/cesium").Matrix4}
+     */
+    this.pToImage = options.pToImage || null;
+
+    /**
+     * The projection center in image world projection
+     * @type {import("@vcmap/cesium").Cartesian3}
+     * @api
+     */
+    this.projectionCenter = options.projectionCenter || null;
+
+    /**
+     * The calculated average height of an image
+     * @type {number|null}
+     * @private
+     */
+    this._averageHeight = null;
+  }
+
+  /**
+   * returns the averageHeight of the image or 0 if not defined. Be sure to call calculateAverageHeight before hand.
+   * @type {number}
+   * @readonly
+   * @api
+   */
+  get averageHeight() {
+    return this._averageHeight != null ? this._averageHeight : 0;
+  }
+
+  /**
+   * returns whether this image supports exact Coordinate transformation
+   * @type {boolean}
+   * @readonly
+   * @api
+   */
+  get hasCamera() {
+    return !!this.meta.principalPoint;
+  }
+
+  /**
+   * @param {import("ol/coordinate").Coordinate} imageCoordinate
+   * @param {number=} optAvgHeight
+   * @returns {import("ol/coordinate").Coordinate}
+   * @api
+   */
+  transformImage2RealWorld(imageCoordinate, optAvgHeight) {
+    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, 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, 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,
+      Cartesian3.multiplyByScalar(rayWorld, r, new Cartesian3()),
+      new Cartesian3(),
+    );
+    return [intr.x, intr.y, avgHeight];
+  }
+
+  /**
+   * @param {import("ol/coordinate").Coordinate} worldCoordinate
+   * @param {number=} optAvgHeight
+   * @returns {import("ol/coordinate").Coordinate}
+   * @api
+   */
+  transformRealWorld2Image(worldCoordinate, optAvgHeight) {
+    // 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, 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);
+  }
+
+
+  /**
+   * @param {import("ol/coordinate").Coordinate} coord
+   * @param {boolean} isImage
+   * @param {number=} optAvgHeight
+   * @private
+   * @returns {import("ol/coordinate").Coordinate}
+   */
+  _transformNoCamera(coord, isImage, optAvgHeight) {
+    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
+   * @returns {Promise<void>}
+   * @api
+   */
+  calculateImageAverageHeight() {
+    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;