@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/oblique/obliqueImageMeta.ts

@@ -0,0 +1,125 @@
+import type { Size } from 'ol/size.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { CesiumTerrainProvider } from '@vcmap-cesium/engine';
+import { cartesian2DDistance } from '../util/math.js';
+import type Projection from '../util/projection.js';
+
+export type ObliqueImageMetaOptions = {
+  'principal-point'?: Coordinate;
+  'pixel-size'?: Coordinate;
+  'radial-distorsion-expected-2-found'?: number[];
+  'radial-distorsion-found-2-expected'?: number[];
+  size: Size;
+  tileSize: Size;
+  tileResolution: number[];
+  projection: Projection;
+  url: string;
+  terrainProvider?: CesiumTerrainProvider;
+  name: string;
+  format?: string;
+};
+
+class ObliqueImageMeta {
+  /**
+   * The name of the camera associated with these meta data
+   */
+  readonly name: string;
+
+  principalPoint: Coordinate | undefined;
+
+  pixelSize: Coordinate | undefined;
+
+  radialE2F: Array<number> | undefined;
+
+  radialF2E: Array<number> | undefined;
+
+  hasRadial: boolean;
+
+  /**
+   * The size of the images associated with this meta data
+   */
+  size: Size;
+
+  /**
+   * The tile size of the images associated with this meta data
+   */
+  tileSize: Size;
+
+  /**
+   * The tile resolutions of the images associated with this meta data
+   */
+  tileResolution: Array<number>;
+
+  /**
+   * The world projection of the images associated with this meta
+   */
+  projection: Projection;
+
+  url: string;
+
+  /**
+   * An optional terrain provider
+   */
+  terrainProvider: CesiumTerrainProvider | undefined;
+
+  format: string;
+
+  constructor(options: ObliqueImageMetaOptions) {
+    this.name = options.name;
+    this.principalPoint = options['principal-point'];
+    this.pixelSize = options['pixel-size'];
+    this.radialE2F = options['radial-distorsion-expected-2-found'];
+    this.radialF2E = options['radial-distorsion-found-2-expected'];
+    this.hasRadial = !!(this.pixelSize && this.radialE2F && this.radialF2E);
+    this.size = options.size;
+    this.tileSize = options.tileSize;
+    this.tileResolution = options.tileResolution;
+    this.projection = options.projection;
+    this.url = options.url;
+    this.terrainProvider = options.terrainProvider;
+    this.format = options.format || 'jpg';
+  }
+
+  /**
+   * Removes radial distortion in image coordinates. Radial coefficients must be provided
+   * @param  coordinate
+   * @param  [useF2E=false] useFound2Expected, if not true expectedToFound is used
+   */
+  radialDistortionCoordinate(
+    coordinate: Coordinate,
+    useF2E: unknown,
+  ): Coordinate {
+    if (this.hasRadial && this.principalPoint) {
+      const coefficientsArray = (
+        useF2E ? this.radialF2E : this.radialE2F
+      ) as number[];
+
+      const distC2PPInMM =
+        cartesian2DDistance(this.principalPoint, coordinate) *
+        this.pixelSize![0];
+      if (distC2PPInMM === 0) {
+        return coordinate.slice();
+      }
+      const diffX = coordinate[0] - this.principalPoint[0];
+      const diffY = coordinate[1] - this.principalPoint[1];
+
+      // get shift value
+      let shift = 0;
+      for (let i = 0; i < coefficientsArray.length; ++i) {
+        shift += coefficientsArray[i] * distC2PPInMM ** i;
+      }
+
+      // get new position through spherical coordinates system - http://mathworld.wolfram.com/SphericalCoordinates.html
+      const newDistInPixel = (distC2PPInMM + shift) / this.pixelSize![0];
+      const angleTheta = Math.atan2(diffY, diffX);
+      return [
+        this.principalPoint[0] + newDistInPixel * Math.cos(angleTheta),
+        this.principalPoint[1] + newDistInPixel * Math.sin(angleTheta),
+      ];
+    }
+
+    return coordinate.slice();
+  }
+}
+
+export default ObliqueImageMeta;

package/src/oblique/{obliqueProvider.js → obliqueProvider.ts}

@@ -1,28 +1,32 @@
 import { getTransform } from 'ol/proj.js';
 import View from 'ol/View.js';
+import type olMap from 'ol/Map.js';
 import { unByKey } from 'ol/Observable.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { EventsKey } from 'ol/events.js';
+
 import { DataState } from './obliqueDataSet.js';
-import OLView from './obliqueView.js';
+import ObliqueView from './obliqueView.js';
 import { transformFromImage } from './helpers.js';
 import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
 import { mercatorProjection } from '../util/projection.js';
 import VcsEvent from '../vcsEvent.js';
-import { isDefaultImageSymbol } from './defaultObliqueCollection.js';
-
-/**
- * @typedef {Object} ObliqueViewPoint
- * @property {import("ol/coordinate").Coordinate} center - in mercator
- * @property {number} zoom
- * @property {import("@vcmap/core").ObliqueViewDirection} direction
- * @api
- */
-
-/**
- * @param {number} number
- * @param {number} max
- * @returns {number}
- */
-function withinBounds(number, max) {
+import type ObliqueImage from './obliqueImage.js';
+import { isDefaultImageSymbol } from './obliqueImage.js';
+import { ObliqueViewDirection } from './obliqueViewDirection.js';
+import type ObliqueCollection from './obliqueCollection.js';
+import ObliqueImageMeta from './obliqueImageMeta.js';
+
+export type ObliqueViewpoint = {
+  /**
+   * in mercator
+   */
+  center: Coordinate;
+  zoom: number;
+  direction: ObliqueViewDirection;
+};
+
+function withinBounds(number: number, max: number): number {
   if (number < 0) {
     return 0;
   }
@@ -33,118 +37,90 @@ function withinBounds(number, max) {
   return number;
 }
 
-/**
- * @class
- * @export
- */
+export type ObliqueProviderMapChangeEventType = 'postrender' | 'moveend';
+
 class ObliqueProvider {
+  private _active = false;
+
+  private _loadingImage: ObliqueImage | string | null = null;
+
+  private _olMap: olMap;
+
+  private _viewCache: Map<ObliqueImageMeta, ObliqueView> = new Map();
+
+  private _currentImage: ObliqueImage | null = null;
+
+  private _currentView: ObliqueView | undefined = undefined;
+
+  private _collection: ObliqueCollection | null = null;
+
+  private _mapChangeEvent: ObliqueProviderMapChangeEventType = 'postrender';
+
   /**
-   * @param {import("ol").Map} olMap
+   * Event raised once a new image is set on the provider. Will be passed the new image as the only argument.
    */
-  constructor(olMap) {
-    this._active = false;
-    /** @type {import("@vcmap/core").ObliqueImage|string|null} */
-    this._loadingImage = null;
-    /** @type {import("ol").Map} */
+  imageChanged = new VcsEvent<ObliqueImage>();
+
+  /**
+   * Whether the post render handler should switch on image edge. Setting
+   * this to false will suspend all post render handler switches.
+   */
+  switchEnabled = true;
+
+  /**
+   * Threshold from 0 to 1 to define when to start switching to other images. Where 0 indicates
+   * to only switch, when the view center is outside of the image and 1 to always switch. 0.2 would start switching
+   * if the view center is within the outer 20% of the image.
+   */
+  switchThreshold = 0;
+
+  private _postRenderListener: EventsKey | undefined = undefined;
+
+  constructor(olMap: olMap) {
     this._olMap = olMap;
-    this._viewCache = new Map();
-    /**
-     * @type {import("@vcmap/core").ObliqueImage|null}
-     */
-    this._currentImage = null; // XXX defaultImage
-    /**
-     * @type {import("@vcmap/core").ObliqueView|null}
-     * @private
-     */
-    this._currentView = null;
-    /** @type {import("@vcmap/core").ObliqueCollection} */
-    this._collection = null; // XXX should we also make a default collection?
-    /** @type {string} */
-    this._mapChangeEvent = 'postrender';
-
-    /**
-     * Event raised once a new image is set on the provider. Will be passed the new image as the only argument.
-     * @type {import("@vcmap/core").VcsEvent<import("@vcmap/core").ObliqueImage>}
-     * @api
-     */
-    this.imageChanged = new VcsEvent();
-    /**
-     * Whether the post render handler should switch on image edge. Setting
-     * this to false will suspend all post render handler switches.
-     * @type {boolean}
-     * @api
-     */
-    this.switchEnabled = true;
-    /**
-     * Threshold from 0 to 1 to define when to start switching to other images. Where 0 indicates
-     * to only switch, when the view center is outside of the image and 1 to always switch. 0.2 would start switching
-     * if the view center is within the outer 20% of the image.
-     * @type {number}
-     * @api
-     */
-    this.switchThreshold = 0;
   }
 
   /**
    * The event to listen to on the map. can be 'postrender' or 'moveend'. Default is 'postrender'
-   * @type {string}
-   * @api
    */
-  get mapChangeEvent() {
+  get mapChangeEvent(): ObliqueProviderMapChangeEventType {
     return this._mapChangeEvent;
   }
 
-  /**
-   * @param {string} eventName
-   */
-  set mapChangeEvent(eventName) {
+  set mapChangeEvent(eventName: ObliqueProviderMapChangeEventType) {
     this._mapChangeEvent = eventName;
     if (this._active) {
       if (this._postRenderListener) {
         unByKey(this._postRenderListener);
       }
-      // @ts-ignore
-      this._postRenderListener = this._olMap.on(this._mapChangeEvent, this._postRenderHandler.bind(this));
+      this._postRenderListener = this._olMap.on(
+        this._mapChangeEvent,
+        this._postRenderHandler.bind(this),
+      );
     }
   }
 
-  /**
-   * @returns {boolean}
-   * @api
-   */
-  get loading() {
+  get loading(): boolean {
     return !!this._loadingImage;
   }
 
-  /**
-   * @returns {boolean}
-   * @api
-   */
-  get active() {
+  get active(): boolean {
     return this._active;
   }
 
-  /**
-   * @readonly
-   * @type {import("@vcmap/core").ObliqueImage|null}
-   * @api
-   */
-  get currentImage() { return this._currentImage; }
+  get currentImage(): ObliqueImage | null {
+    return this._currentImage;
+  }
 
-  /**
-   * @readonly
-   * @type {import("@vcmap/core").ObliqueCollection|null}
-   * @api
-   */
-  get collection() { return this._collection; }
+  get collection(): ObliqueCollection | null {
+    return this._collection;
+  }
 
   /**
    * Set a new collection. The collection must be loaded.
    * If a previous collection was set, the current image and its resources will be removed from the olMap.
-   * @param {import("@vcmap/core").ObliqueCollection} collection
-   * @api
    */
-  setCollection(collection) {
+  setCollection(collection: ObliqueCollection): void {
     this._loadingImage = null;
     if (!collection.loaded) {
       // eslint-disable-next-line no-console
@@ -153,53 +129,53 @@ class ObliqueProvider {
     }
     this._collection = collection;
     this._removeCurrentView();
-    this._currentView = null;
+    this._currentView = undefined;
     this._currentImage = null;
   }
 
   /**
    * Activate the provider, its current view and its post render handler
-   * @api
    */
-  activate() {
+  activate(): void {
     if (!this._collection) {
-      throw new Error('cannot activate provider without an oblique collection.');
+      throw new Error(
+        'cannot activate provider without an oblique collection.',
+      );
     }
     if (!this._active) {
       this._active = true;
       this._setCurrentView();
       if (!this._postRenderListener) {
-        // @ts-ignore
-        this._postRenderListener = this._olMap.on(this._mapChangeEvent, this._postRenderHandler.bind(this));
+        this._postRenderListener = this._olMap.on(
+          this._mapChangeEvent,
+          this._postRenderHandler.bind(this),
+        );
       }
     }
   }
 
   /**
    * Deactivates the provider, removing the current view and post render handler from the map
-   * @api
    */
-  deactivate() {
+  deactivate(): void {
     if (this._currentView) {
       this._removeCurrentView();
     }
 
     if (this._postRenderListener) {
       unByKey(this._postRenderListener);
-      this._postRenderListener = null;
+      this._postRenderListener = undefined;
     }
 
     this._active = false;
   }
 
-  /**
-   * @param {import("ol/coordinate").Coordinate} coord
-   * @returns {import("ol/coordinate").Coordinate}
-   * @private
-   */
-  _pullCoordinateToImageCenter(coord) {
+  private _pullCoordinateToImageCenter(coord: Coordinate): Coordinate {
     if (this.currentImage) {
-      const center = [this.currentImage.meta.size[0] / 2, this.currentImage.meta.size[1] / 2];
+      const center = [
+        this.currentImage.meta.size[0] / 2,
+        this.currentImage.meta.size[1] / 2,
+      ];
       if (coord[0] < center[0]) {
         coord[0] += 50;
       } else {
@@ -215,47 +191,68 @@ class ObliqueProvider {
     return coord;
   }
 
-  _postRenderHandler() {
+  private _postRenderHandler(): void {
     if (this._active && !this.loading && this.switchEnabled) {
-      const currentSize = this._currentImage ? this._currentImage.meta.size : null;
-      const imageCoordinates = this._olMap.getView().getCenter();
+      const currentSize = this._currentImage
+        ? this._currentImage.meta.size
+        : null;
+      const imageCoordinates = this._olMap.getView().getCenter() as Coordinate;
       const ratioLower = this.switchThreshold; // XXX this.switchThreshold;
       const ratioUpper = 1 - ratioLower;
       if (
-        !this._currentImage || (
-          imageCoordinates[0] / currentSize[0] > ratioLower &&
-          imageCoordinates[0] / currentSize[0] < ratioUpper &&
-          imageCoordinates[1] / currentSize[1] > ratioLower &&
-          imageCoordinates[1] / currentSize[1] < ratioUpper
-        )
+        !this._currentImage ||
+        (imageCoordinates[0] / currentSize![0] > ratioLower &&
+          imageCoordinates[0] / currentSize![0] < ratioUpper &&
+          imageCoordinates[1] / currentSize![1] > ratioLower &&
+          imageCoordinates[1] / currentSize![1] < ratioUpper)
       ) {
         return;
       }
-      const pulledCenter = this._pullCoordinateToImageCenter(imageCoordinates.slice());
-      const worldCoords = this._currentImage.transformImage2RealWorld(pulledCenter).slice(0, 2);
-      const transform = getTransform(this._currentImage.meta.projection.proj, mercatorProjection.proj);
+      const pulledCenter = this._pullCoordinateToImageCenter(
+        imageCoordinates.slice(),
+      );
+      const worldCoords = this._currentImage
+        .transformImage2RealWorld(pulledCenter)
+        .slice(0, 2);
+      const transform = getTransform(
+        this._currentImage.meta.projection.proj,
+        mercatorProjection.proj,
+      );
       // error in TransformFunction type definition, remove undefined after openlayer fixed the type
       const mercatorCoords = transform(worldCoords, undefined, undefined);
       const buffer = 200; // XXX make configurable?
       const extent = [
-        mercatorCoords[0] - buffer, mercatorCoords[1] - buffer,
-        mercatorCoords[0] + buffer, mercatorCoords[1] + buffer,
+        mercatorCoords[0] - buffer,
+        mercatorCoords[1] - buffer,
+        mercatorCoords[0] + buffer,
+        mercatorCoords[1] + buffer,
       ];
-      const dataState = this._collection.getDataStateForExtent(extent);
+      const dataState = this._collection!.getDataStateForExtent(extent);
       if (dataState === DataState.READY) {
-        const image = this._collection.getImageForCoordinate(mercatorCoords, this._currentImage.viewDirection);
+        const image = this._collection!.getImageForCoordinate(
+          mercatorCoords,
+          this._currentImage.viewDirection,
+        );
         if (image && image.name !== this._currentImage.name) {
-          this._changeImage(image, imageCoordinates);
+          // eslint-disable-next-line no-void
+          void this._changeImage(image, imageCoordinates);
         }
       } else if (dataState === DataState.PENDING) {
-        this._collection.loadDataForExtent(extent);
+        // eslint-disable-next-line no-void
+        void this._collection!.loadDataForExtent(extent);
       }
     }
   }
 
-  async _changeImage(image, imageCoordinates) {
+  private async _changeImage(
+    image: ObliqueImage,
+    imageCoordinates: Coordinate,
+  ): Promise<void> {
     this._loadingImage = image;
-    const { coords } = await transformFromImage(this._currentImage, imageCoordinates);
+    const { coords } = await transformFromImage(
+      this._currentImage as ObliqueImage,
+      imageCoordinates,
+    );
     if (this._loadingImage !== image) {
       return;
     }
@@ -264,17 +261,19 @@ class ObliqueProvider {
 
   /**
    * Sets the current image
-   * @param {import("@vcmap/core").ObliqueImage} image
-   * @param {import("ol/coordinate").Coordinate=} optCenter - mercator coordinates of an optional center to use. uses the images center if undefined
-   * @returns {Promise<boolean>}
-   * @api
+   * @param  image
+   * @param  optCenter - mercator coordinates of an optional center to use. uses the images center if undefined
    */
-  async setImage(image, optCenter) {
+  async setImage(
+    image: ObliqueImage,
+    optCenter?: Coordinate,
+  ): Promise<boolean> {
     if (!this._collection) {
       throw new Error('cannot set an image without an oblique collection.');
     }
     this._loadingImage = image;
-    const isNewImage = !this._currentImage || this._currentImage.name !== image.name;
+    const isNewImage =
+      !this._currentImage || this._currentImage.name !== image.name;
     this._currentImage = image;
     if (isNewImage) {
       await image.calculateImageAverageHeight();
@@ -284,18 +283,21 @@ class ObliqueProvider {
       return false;
     }
 
-    let olView;
+    let olView: ObliqueView;
     if (this._viewCache.has(image.meta)) {
-      olView = this._viewCache.get(image.meta);
+      olView = this._viewCache.get(image.meta) as ObliqueView;
     } else {
-      olView = new OLView(image.meta, this._collection.viewOptions);
+      olView = new ObliqueView(image.meta, this._collection.viewOptions);
       this._viewCache.set(image.meta, olView);
     }
 
     const previousView = this._currentView;
     this._currentView = olView;
     if (isNewImage) {
-      this._currentView.setImageName(this._currentImage.name, this._currentImage[isDefaultImageSymbol]);
+      this._currentView.setImageName(
+        this._currentImage.name,
+        this._currentImage[isDefaultImageSymbol],
+      );
     }
 
     const [width, height] = this._currentImage.meta.size;
@@ -306,7 +308,10 @@ class ObliqueProvider {
         mercatorProjection.proj,
         this._currentImage.meta.projection.proj,
       )(optCenter.slice(0, 2), undefined, undefined);
-      const imageCenter = this._currentImage.transformRealWorld2Image(worldCenter, optCenter[2]);
+      const imageCenter = this._currentImage.transformRealWorld2Image(
+        worldCenter,
+        optCenter[2],
+      );
       imageCenter[0] = withinBounds(imageCenter[0], width);
       imageCenter[1] = withinBounds(imageCenter[1], height);
       center = imageCenter;
@@ -324,11 +329,7 @@ class ObliqueProvider {
     return true;
   }
 
-  /**
-   * @param {import("@vcmap/core").ObliqueView=} previousView
-   * @private
-   */
-  _setCurrentView(previousView) {
+  private _setCurrentView(previousView?: ObliqueView): void {
     if (this._currentView) {
       const isSame = previousView && previousView === this._currentView;
       if (!isSame) {
@@ -337,7 +338,9 @@ class ObliqueProvider {
         }
 
         if (this._olMap.getView() && this._olMap.getView().getResolution()) {
-          this._currentView.view.setResolution(this._olMap.getView().getResolution());
+          this._currentView.view.setResolution(
+            this._olMap.getView().getResolution(),
+          );
         }
 
         this._olMap.setView(this._currentView.view);
@@ -346,7 +349,7 @@ class ObliqueProvider {
     }
   }
 
-  _removeCurrentView() {
+  private _removeCurrentView(): void {
     if (this._currentView) {
       if (this._olMap.getView() === this._currentView.view) {
         this._olMap.setView(new View());
@@ -357,13 +360,15 @@ class ObliqueProvider {
 
   /**
    * Sets a new image based on a ground coordinate and a direction.
-   * @param {import("ol/coordinate").Coordinate} coordinate
-   * @param {import("@vcmap/core").ObliqueViewDirection} direction
-   * @param {number} [zoom=2]
-   * @returns {Promise<void>}
-   * @api
+   * @param  coordinate
+   * @param  direction
+   * @param  [zoom=2]
    */
-  async setView(coordinate, direction, zoom = 2) {
+  async setView(
+    coordinate: Coordinate,
+    direction: ObliqueViewDirection,
+    zoom = 2,
+  ): Promise<void> {
     if (!this._collection) {
       throw new Error('cannot set the view without an oblique collection.');
     }
@@ -371,7 +376,10 @@ class ObliqueProvider {
     const usedCoordinate = coordinate.slice();
     const coordinateHash = `${coordinate.join('')}${direction}${zoom}`;
     this._loadingImage = coordinateHash;
-    const image = await this._collection.loadImageForCoordinate(coordinate, direction);
+    const image = await this._collection.loadImageForCoordinate(
+      coordinate,
+      direction,
+    );
     if (image) {
       if (this._loadingImage !== coordinateHash) {
         return;
@@ -390,7 +398,7 @@ class ObliqueProvider {
         return;
       }
       const imageSet = await this.setImage(image, usedCoordinate);
-      if (imageSet) {
+      if (imageSet && this._currentView) {
         this._currentView.view.setZoom(zoom);
       }
     } else {
@@ -400,17 +408,18 @@ class ObliqueProvider {
 
   /**
    * Returns a viewpoint for the currently set view.
-   * @returns {Promise<ObliqueViewPoint>}
-   * @api
    */
-  async getView() {
+  async getView(): Promise<ObliqueViewpoint | null> {
     if (this._currentView && this._currentImage) {
-      const imageCoord = this._currentView.view.getCenter();
-      const { coords: center } = await transformFromImage(this._currentImage, imageCoord);
+      const imageCoord = this._currentView.view.getCenter() as Coordinate;
+      const { coords: center } = await transformFromImage(
+        this._currentImage,
+        imageCoord,
+      );
       return {
         center,
         direction: this._currentImage.viewDirection,
-        zoom: this._currentView.view.getZoom(),
+        zoom: this._currentView.view.getZoom() as number,
       };
     }
     return null;
@@ -418,21 +427,24 @@ class ObliqueProvider {
 
   /**
    * Destroys all openlayers resources created by this oblique provider
-   * @api
    */
-  destroy() {
+  destroy(): void {
     this._removeCurrentView();
-    [...this._viewCache.values()].forEach((ov) => { ov.destroy(); });
+    [...this._viewCache.values()].forEach((ov) => {
+      ov.destroy();
+    });
     this._viewCache.clear();
     this._loadingImage = null;
     if (this._postRenderListener) {
       unByKey(this._postRenderListener);
-      this._postRenderListener = null;
+      this._postRenderListener = undefined;
     }
 
     this.imageChanged.destroy();
     this._collection = null;
-    this._olMap = null;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    this._olMap = undefined;
   }
 }