@vcmap/core 5.0.0-rc.3 → 5.0.0-rc.30

package/src/{vcs/vcm/oblique/ObliqueImage.js → oblique/obliqueImage.js}

@@ -1,4 +1,4 @@
-import { Cartesian3, Cartesian4, Matrix3, Matrix4 } from '@vcmap/cesium';
+import { Cartesian3, Cartesian4, Matrix3, Matrix4 } from '@vcmap-cesium/engine';
 import { transformCWIFC } from './helpers.js';
 import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
 
@@ -10,17 +10,16 @@ import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
  * @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("@vcmap-cesium/engine").Cartesian3|undefined} projectionCenter
+ * @property {import("@vcmap-cesium/engine").Matrix3|undefined} pToRealworld
+ * @property {import("@vcmap-cesium/engine").Matrix4|undefined} pToImage
  * @property {import("@vcmap/core").Projection|undefined} [projection]
- * @property {import("@vcmap/cesium").CesiumTerrainProvider|undefined} terrainProvider
+ * @property {import("@vcmap-cesium/engine").CesiumTerrainProvider|undefined} terrainProvider
  * @api
  */
 
 /**
  * @class
- * @export
  */
 class ObliqueImage {
   /**
@@ -71,20 +70,20 @@ class ObliqueImage {
 
     /**
      * The transformation matrix image to real world (in image world projection).
-     * @type {import("@vcmap/cesium").Matrix3}
+     * @type {import("@vcmap-cesium/engine").Matrix3}
      * @api
      */
     this.pToRealworld = options.pToRealworld || null;
 
     /**
      * The transformation matrix real to image (in image world projection).
-     * @type {import("@vcmap/cesium").Matrix4}
+     * @type {import("@vcmap-cesium/engine").Matrix4}
      */
     this.pToImage = options.pToImage || null;
 
     /**
      * The projection center in image world projection
-     * @type {import("@vcmap/cesium").Cartesian3}
+     * @type {import("@vcmap-cesium/engine").Cartesian3}
      * @api
      */
     this.projectionCenter = options.projectionCenter || null;
@@ -128,16 +127,34 @@ class ObliqueImage {
     if (!this.meta.principalPoint) {
       return this._transformNoCamera(distortedCoordinate, true, optAvgHeight);
     } else if (this.meta.hasRadial) {
-      distortedCoordinate = this.meta.radialDistortionCoordinate(distortedCoordinate, true);
+      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 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 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;
@@ -166,17 +183,24 @@ class ObliqueImage {
     // 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 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]];
+    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
@@ -185,7 +209,12 @@ class ObliqueImage {
    * @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 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,
@@ -197,7 +226,9 @@ class ObliqueImage {
     // 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');
+      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);
@@ -218,11 +249,12 @@ class ObliqueImage {
    */
   calculateImageAverageHeight() {
     if (this._averageHeight === null) {
-      const averageHeight = (
-        this.groundCoordinates[0][2] +
-        this.groundCoordinates[1][2] +
-        this.groundCoordinates[2][2] +
-        this.groundCoordinates[3][2]) / 4;
+      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,

package/src/{vcs/vcm/oblique/ObliqueImageMeta.js → oblique/obliqueImageMeta.js}

@@ -11,16 +11,14 @@ import { cartesian2DDistance } from '../util/math.js';
  * @property {Array<number>} tileResolution
  * @property {import("@vcmap/core").Projection} projection
  * @property {string} url
- * @property {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
+ * @property {import("@vcmap-cesium/engine").CesiumTerrainProvider} [terrainProvider]
  * @property {string} name
  * @property {string|undefined} [format='jpg']
  * @api
  */
 
-
 /**
  * @class
- * @export
  */
 class ObliqueImageMeta {
   /**
@@ -43,7 +41,7 @@ class ObliqueImageMeta {
     /** @type {Array<number>|undefined} */
     this.radialF2E = options['radial-distorsion-found-2-expected'];
     /** @type {boolean} */
-    this.hasRadial = !!(this.pixelSize && (this.radialE2F && this.radialF2E));
+    this.hasRadial = !!(this.pixelSize && this.radialE2F && this.radialF2E);
     /**
      * The size of the images associated with this meta data
      * @type {import("ol/size").Size}
@@ -75,7 +73,7 @@ class ObliqueImageMeta {
     this.url = options.url;
     /**
      * An optional terrain provider
-     * @type {import("@vcmap/cesium").CesiumTerrainProvider}
+     * @type {import("@vcmap-cesium/engine").CesiumTerrainProvider|undefined}
      * @api
      */
     this.terrainProvider = options.terrainProvider;
@@ -97,7 +95,9 @@ class ObliqueImageMeta {
     if (this.hasRadial && this.principalPoint) {
       const coefficientsArray = useF2E ? this.radialF2E : this.radialE2F;
 
-      const distC2PPInMM = cartesian2DDistance(this.principalPoint, coordinate) * this.pixelSize[0];
+      const distC2PPInMM =
+        cartesian2DDistance(this.principalPoint, coordinate) *
+        this.pixelSize[0];
       if (distC2PPInMM === 0) {
         return coordinate.slice();
       }
@@ -107,15 +107,15 @@ class ObliqueImageMeta {
       // get shift value
       let shift = 0;
       for (let i = 0; i < coefficientsArray.length; ++i) {
-        shift += coefficientsArray[i] * (distC2PPInMM ** 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)),
+        this.principalPoint[0] + newDistInPixel * Math.cos(angleTheta),
+        this.principalPoint[1] + newDistInPixel * Math.sin(angleTheta),
       ];
     }
 

package/src/{vcs/vcm/oblique/ObliqueProvider.js → oblique/obliqueProvider.js}

@@ -1,15 +1,16 @@
 import { getTransform } from 'ol/proj.js';
 import View from 'ol/View.js';
 import { unByKey } from 'ol/Observable.js';
-import { DataState } from './ObliqueDataSet.js';
-import OLView from './ObliqueView.js';
+import { DataState } from './obliqueDataSet.js';
+import OLView from './obliqueView.js';
 import { transformFromImage } from './helpers.js';
 import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
 import { mercatorProjection } from '../util/projection.js';
-import VcsEvent from '../event/vcsEvent.js';
+import VcsEvent from '../vcsEvent.js';
+import { isDefaultImageSymbol } from './defaultObliqueCollection.js';
 
 /**
- * @typedef {Object} ObliqueViewPoint
+ * @typedef {Object} ObliqueViewpoint
  * @property {import("ol/coordinate").Coordinate} center - in mercator
  * @property {number} zoom
  * @property {import("@vcmap/core").ObliqueViewDirection} direction
@@ -34,7 +35,6 @@ function withinBounds(number, max) {
 
 /**
  * @class
- * @export
  */
 class ObliqueProvider {
   /**
@@ -102,8 +102,11 @@ class ObliqueProvider {
       if (this._postRenderListener) {
         unByKey(this._postRenderListener);
       }
-      // @ts-ignore
-      this._postRenderListener = this._olMap.on(this._mapChangeEvent, this._postRenderHandler.bind(this));
+      this._postRenderListener = this._olMap.on(
+        // @ts-ignore
+        this._mapChangeEvent,
+        this._postRenderHandler.bind(this),
+      );
     }
   }
 
@@ -128,14 +131,18 @@ class ObliqueProvider {
    * @type {import("@vcmap/core").ObliqueImage|null}
    * @api
    */
-  get currentImage() { return this._currentImage; }
+  get currentImage() {
+    return this._currentImage;
+  }
 
   /**
    * @readonly
    * @type {import("@vcmap/core").ObliqueCollection|null}
    * @api
    */
-  get collection() { return this._collection; }
+  get collection() {
+    return this._collection;
+  }
 
   /**
    * Set a new collection. The collection must be loaded.
@@ -162,14 +169,19 @@ class ObliqueProvider {
    */
   activate() {
     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(
+          // @ts-ignore
+          this._mapChangeEvent,
+          this._postRenderHandler.bind(this),
+        );
       }
     }
   }
@@ -198,7 +210,10 @@ class ObliqueProvider {
    */
   _pullCoordinateToImageCenter(coord) {
     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 {
@@ -216,32 +231,46 @@ class ObliqueProvider {
 
   _postRenderHandler() {
     if (this._active && !this.loading && this.switchEnabled) {
-      const currentSize = this._currentImage ? this._currentImage.meta.size : null;
+      const currentSize = this._currentImage
+        ? this._currentImage.meta.size
+        : null;
       const imageCoordinates = this._olMap.getView().getCenter();
       const ratioLower = this.switchThreshold; // XXX this.switchThreshold;
       const ratioUpper = 1 - ratioLower;
       if (
-        !this._currentImage || (
-          imageCoordinates[0] / currentSize[0] > ratioLower &&
+        !this._currentImage ||
+        (imageCoordinates[0] / currentSize[0] > ratioLower &&
           imageCoordinates[0] / currentSize[0] < ratioUpper &&
           imageCoordinates[1] / currentSize[1] > ratioLower &&
-          imageCoordinates[1] / currentSize[1] < ratioUpper
-        )
+          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 mercatorCoords = transform(worldCoords);
+      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);
       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);
         }
@@ -253,7 +282,10 @@ class ObliqueProvider {
 
   async _changeImage(image, imageCoordinates) {
     this._loadingImage = image;
-    const { coords } = await transformFromImage(this._currentImage, imageCoordinates);
+    const { coords } = await transformFromImage(
+      this._currentImage,
+      imageCoordinates,
+    );
     if (this._loadingImage !== image) {
       return;
     }
@@ -272,7 +304,8 @@ class ObliqueProvider {
       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();
@@ -293,17 +326,24 @@ class ObliqueProvider {
     const previousView = this._currentView;
     this._currentView = olView;
     if (isNewImage) {
-      this._currentView.setImageName(this._currentImage.name);
+      this._currentView.setImageName(
+        this._currentImage.name,
+        this._currentImage[isDefaultImageSymbol],
+      );
     }
 
     const [width, height] = this._currentImage.meta.size;
     let center = [width / 2, height / 2];
     if (optCenter) {
+      // error in TransformFunction type definition, remove undefined after openlayer fixed the type
       const worldCenter = getTransform(
         mercatorProjection.proj,
         this._currentImage.meta.projection.proj,
-      )(optCenter.slice(0, 2));
-      const imageCenter = this._currentImage.transformRealWorld2Image(worldCenter, optCenter[2]);
+      )(optCenter.slice(0, 2), undefined, undefined);
+      const imageCenter = this._currentImage.transformRealWorld2Image(
+        worldCenter,
+        optCenter[2],
+      );
       imageCenter[0] = withinBounds(imageCenter[0], width);
       imageCenter[1] = withinBounds(imageCenter[1], height);
       center = imageCenter;
@@ -334,7 +374,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);
@@ -368,7 +410,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;
@@ -397,13 +442,16 @@ class ObliqueProvider {
 
   /**
    * Returns a viewpoint for the currently set view.
-   * @returns {Promise<ObliqueViewPoint>}
+   * @returns {Promise<ObliqueViewpoint>}
    * @api
    */
   async getView() {
     if (this._currentView && this._currentImage) {
       const imageCoord = this._currentView.view.getCenter();
-      const { coords: center } = await transformFromImage(this._currentImage, imageCoord);
+      const { coords: center } = await transformFromImage(
+        this._currentImage,
+        imageCoord,
+      );
       return {
         center,
         direction: this._currentImage.viewDirection,
@@ -419,7 +467,9 @@ class ObliqueProvider {
    */
   destroy() {
     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) {

package/src/{vcs/vcm/oblique/ObliqueView.js → oblique/obliqueView.js}

@@ -6,6 +6,29 @@ import TileImage from 'ol/source/TileImage.js';
 import Tile from 'ol/layer/Tile.js';
 import { hasSameOrigin } from './helpers.js';
 
+/** @type {string} */
+let defaultImage = '';
+
+/**
+ * @returns {string}
+ */
+function getDefaultImage() {
+  if (!defaultImage) {
+    const canvas = document.createElement('canvas');
+    canvas.height = 512;
+    canvas.width = 512;
+    const context = canvas.getContext('2d');
+    context.fillStyle = '#409D76';
+    context.fillRect(0, 0, 512, 512);
+    context.font = 'bold 46px Monospace, Courier New';
+    context.fillStyle = '#424242';
+    context.textAlign = 'center';
+    context.fillText('No Image', 256, 256);
+    defaultImage = canvas.toDataURL('png');
+  }
+  return defaultImage;
+}
+
 /**
  * @typedef {Object} ObliqueViewOptions
  * @property {number} minZoom
@@ -17,7 +40,6 @@ import { hasSameOrigin } from './helpers.js';
 
 /**
  * @class
- * @export
  */
 class ObliqueView {
   /**
@@ -43,19 +65,27 @@ class ObliqueView {
     this.scaleFactor = options.scaleFactor;
     const { tileResolution } = imageMeta;
     /** @type {Array<number>} */
-    this.tileResolution = tileResolution.slice(0, tileResolution.length - options.hideLevels);
+    this.tileResolution = tileResolution.slice(
+      0,
+      tileResolution.length - options.hideLevels,
+    );
     this._createViewAndLayer();
   }
 
   _createViewAndLayer() {
-    const extent = /** @type {import("ol/extent").Extent} */ ([0, 0, ...this.size]);
+    const extent = /** @type {import("ol/extent").Extent} */ ([
+      0,
+      0,
+      ...this.size,
+    ]);
     const zoomifyProjection = new OLProjection({
       code: 'ZOOMIFY',
       units: 'pixels',
       extent,
     });
 
-    const maxZoom = this.maxZoom > 0 ? this.maxZoom : this.tileResolution.length + 4;
+    const maxZoom =
+      this.maxZoom > 0 ? this.maxZoom : this.tileResolution.length + 4;
     const zoomMultiplier = Math.log(2) / Math.log(this.scaleFactor);
 
     /**
@@ -108,9 +138,19 @@ class ObliqueView {
   /**
    * Sets the layers source to request data for this image
    * @param {string} name
+   * @param {boolean} [isDefaultImage=false]
    * @api
    */
-  setImageName(name) {
+  setImageName(name, isDefaultImage = false) {
+    if (isDefaultImage) {
+      this.tileImageSource.setTileLoadFunction(
+        /** @param {import("ol").ImageTile} tile */ (tile) => {
+          /** @type {HTMLImageElement} */ (tile.getImage()).src =
+            getDefaultImage();
+          tile.load();
+        },
+      );
+    }
     this.tileImageSource.setTileUrlFunction((coords) => {
       const [z, x, yInverted] = coords;
       const y = -yInverted - 1;

package/src/{vcs/vcm/oblique/ObliqueViewDirection.js → oblique/obliqueViewDirection.js}

@@ -6,7 +6,6 @@
  * @property {number} SOUTH
  * @property {number} WEST
  * @property {number} NADIR
- * @export
  * @api
  */
 export const ObliqueViewDirection = {
@@ -19,7 +18,6 @@ export const ObliqueViewDirection = {
 
 /**
  * @type {Object<string, ObliqueViewDirection>}
- * @export
  */
 export const obliqueViewDirectionNames = {
   north: ObliqueViewDirection.NORTH,
@@ -32,9 +30,9 @@ export const obliqueViewDirectionNames = {
 /**
  * @param {number} direction
  * @returns {string|undefined}
- * @export
  */
 export function getDirectionName(direction) {
-  return Object.keys(obliqueViewDirectionNames)
-    .find((name => obliqueViewDirectionNames[name] === direction));
+  return Object.keys(obliqueViewDirectionNames).find(
+    (name) => obliqueViewDirectionNames[name] === direction,
+  );
 }