@vcmap/core 5.0.0-rc.8 → 5.0.0

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

@@ -1,23 +1,23 @@
 import { v4 as uuidv4 } from 'uuid';
+import type { ImageTile } from 'ol';
+import type { Size } from 'ol/size.js';
 import OLProjection from 'ol/proj/Projection.js';
 import View from 'ol/View.js';
 import TileGrid from 'ol/tilegrid/TileGrid.js';
-import TileImage from 'ol/source/TileImage.js';
+import TileImage, {
+  type Options as TileImageOptions,
+} from 'ol/source/TileImage.js';
 import Tile from 'ol/layer/Tile.js';
 import { hasSameOrigin } from './helpers.js';
+import type ObliqueImageMeta from './obliqueImageMeta.js';
 
-/** @type {string} */
 let defaultImage = '';
-
-/**
- * @returns {string}
- */
-function getDefaultImage() {
+function getDefaultImage(): string {
   if (!defaultImage) {
     const canvas = document.createElement('canvas');
     canvas.height = 512;
     canvas.width = 512;
-    const context = canvas.getContext('2d');
+    const context = canvas.getContext('2d') as CanvasRenderingContext2D;
     context.fillStyle = '#409D76';
     context.fillRect(0, 0, 512, 512);
     context.font = 'bold 46px Monospace, Courier New';
@@ -29,80 +29,75 @@ function getDefaultImage() {
   return defaultImage;
 }
 
-/**
- * @typedef {Object} ObliqueViewOptions
- * @property {number} minZoom
- * @property {number} maxZoom
- * @property {number} scaleFactor
- * @property {number} hideLevels
- * @api
- */
-
-/**
- * @class
- * @export
- */
+export type ObliqueViewOptions = {
+  minZoom: number;
+  maxZoom: number;
+  scaleFactor: number;
+  hideLevels: number;
+};
+
 class ObliqueView {
-  /**
-   * @param {import("@vcmap/core").ObliqueImageMeta} imageMeta
-   * @param {ObliqueViewOptions} options
-   */
-  constructor(imageMeta, options) {
-    /** @type {string} */
-    this.id = uuidv4();
-    /** @type {import("ol/size").Size} */
+  id = uuidv4();
+
+  size: Size;
+
+  url: string;
+
+  tileSize: Size;
+
+  format: string;
+
+  minZoom: number;
+
+  maxZoom: number;
+
+  scaleFactor: number;
+
+  tileResolution: number[];
+
+  private _view: View | undefined;
+
+  private _tileImageSource: TileImage | undefined;
+
+  private _layer: Tile<TileImage> | undefined;
+
+  constructor(imageMeta: ObliqueImageMeta, options: ObliqueViewOptions) {
     this.size = imageMeta.size;
-    /** @type {string} */
     this.url = imageMeta.url;
-    /** @type {import("ol/size").Size} */
     this.tileSize = imageMeta.tileSize;
-    /** @type {string} */
     this.format = imageMeta.format;
-    /** @type {number} */
     this.minZoom = options.minZoom;
-    /** @type {number} */
     this.maxZoom = options.maxZoom;
-    /** @type {number} */
     this.scaleFactor = options.scaleFactor;
     const { tileResolution } = imageMeta;
-    /** @type {Array<number>} */
-    this.tileResolution = tileResolution.slice(0, tileResolution.length - options.hideLevels);
-    this._createViewAndLayer();
-  }
+    this.tileResolution = tileResolution.slice(
+      0,
+      tileResolution.length - options.hideLevels,
+    );
 
-  _createViewAndLayer() {
-    const extent = /** @type {import("ol/extent").Extent} */ ([0, 0, ...this.size]);
+    const 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);
 
-    /**
-     * The view for these oblique images.
-     * @type {import("ol/View").default}
-     * @api
-     */
-    this.view = new View({
+    this._view = new View({
       projection: zoomifyProjection,
       center: [this.size[0] / 2, this.size[1] / 2],
       constrainOnlyCenter: true,
       minZoom: this.minZoom * zoomMultiplier,
       maxZoom: maxZoom * zoomMultiplier,
-      extent: /** @type {import("ol/extent").Extent} */ ([
-        -2000,
-        -2000,
-        this.size[0] + 2000,
-        this.size[1] + 2000,
-      ]),
+      extent: [-2000, -2000, this.size[0] + 2000, this.size[1] + 2000],
       zoom: this.minZoom * zoomMultiplier,
       zoomFactor: this.scaleFactor,
     });
 
-    const tileImageOptions = {
+    const tileImageOptions: TileImageOptions = {
       projection: zoomifyProjection,
       tileGrid: new TileGrid({
         origin: [0, 0],
@@ -114,30 +109,55 @@ class ObliqueView {
     if (!hasSameOrigin(this.url)) {
       tileImageOptions.crossOrigin = 'anonymous';
     }
-    /** @type {import("ol/source/TileImage").default} */
-    this.tileImageSource = new TileImage(tileImageOptions);
-
-    /**
-     * The layer of these images.
-     * @type {import("ol/layer/Tile").default<import("ol/source/TileImage").default>}
-     * @api
-     */
-    this.layer = new Tile({
+
+    this._tileImageSource = new TileImage(tileImageOptions);
+
+    this._layer = new Tile({
       source: this.tileImageSource,
       extent,
     });
   }
 
+  /**
+   * The view for these oblique images.
+   */
+  get view(): View {
+    if (!this._view) {
+      throw new Error('trying to access destroyed oblique view');
+    }
+    return this._view;
+  }
+
+  /**
+   * The layer of these images.
+   */
+  get layer(): Tile<TileImage> {
+    if (!this._layer) {
+      throw new Error('trying to access destroyed oblique view');
+    }
+    return this._layer;
+  }
+
+  /**
+   * The layer of these images.
+   */
+  get tileImageSource(): TileImage {
+    if (!this._tileImageSource) {
+      throw new Error('trying to access destroyed oblique view');
+    }
+    return this._tileImageSource;
+  }
+
   /**
    * Sets the layers source to request data for this image
-   * @param {string} name
-   * @param {boolean} [isDefaultImage=false]
-   * @api
+   * @param  name
+   * @param  [isDefaultImage=false]
    */
-  setImageName(name, isDefaultImage = false) {
+  setImageName(name: string, isDefaultImage: unknown = false): void {
     if (isDefaultImage) {
-      this.tileImageSource.setTileLoadFunction(/** @param {import("ol").ImageTile} tile */ (tile) => {
-        /** @type {HTMLImageElement} */ (tile.getImage()).src = getDefaultImage();
+      this.tileImageSource.setTileLoadFunction((tile) => {
+        ((tile as ImageTile).getImage() as HTMLImageElement).src =
+          getDefaultImage();
         tile.load();
       });
     }
@@ -149,11 +169,11 @@ class ObliqueView {
     this.tileImageSource.refresh();
   }
 
-  destroy() {
-    this.view = null;
-    this.layer = null;
+  destroy(): void {
+    this._view = undefined;
+    this._layer = undefined;
     this.tileImageSource.clear();
-    this.tileImageSource = null;
+    this._tileImageSource = undefined;
   }
 }
 

package/src/oblique/obliqueViewDirection.ts

@@ -0,0 +1,25 @@
+export enum ObliqueViewDirection {
+  NORTH = 1,
+  EAST = 2,
+  SOUTH = 3,
+  WEST = 4,
+  NADIR = 5,
+}
+
+export const obliqueViewDirectionNames = {
+  north: ObliqueViewDirection.NORTH,
+  east: ObliqueViewDirection.EAST,
+  south: ObliqueViewDirection.SOUTH,
+  west: ObliqueViewDirection.WEST,
+  nadir: ObliqueViewDirection.NADIR,
+};
+
+export function getDirectionName(
+  direction: ObliqueViewDirection,
+): string | undefined {
+  const entry = Object.entries(obliqueViewDirectionNames).find(
+    ([, namedDirection]) => namedDirection === direction,
+  );
+
+  return entry?.[0];
+}

package/src/oblique/parseImageJson.ts

@@ -0,0 +1,337 @@
+import type { Size } from 'ol/size.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import {
+  Matrix3,
+  Cartesian3,
+  Matrix4,
+  type CesiumTerrainProvider,
+} from '@vcmap-cesium/engine';
+import ObliqueImage, { ObliqueImageOptions } from './obliqueImage.js';
+import {
+  ObliqueViewDirection,
+  obliqueViewDirectionNames,
+} from './obliqueViewDirection.js';
+import ImageMeta, { ObliqueImageMetaOptions } from './obliqueImageMeta.js';
+import Projection from '../util/projection.js';
+import type {
+  ObliqueCameraOptions,
+  ObliqueImageJson,
+  ObliqueVersion,
+} from './obliqueCollection.js';
+
+let customObliqueProjectionId = 0;
+
+function getNextObliqueProjectionId(): number {
+  customObliqueProjectionId += 1;
+  return customObliqueProjectionId;
+}
+
+export function getVersionFromImageJson(json: {
+  version?: string;
+}): ObliqueVersion {
+  const version: Partial<ObliqueVersion> = {};
+
+  if (json.version) {
+    const number = json.version.match(/\d+\.\d+/);
+    if (number) {
+      version.version = Number(number[0]);
+    }
+    const buildNumber = json.version.match(/-\d+-/);
+    if (buildNumber) {
+      version.buildNumber = Number(
+        buildNumber?.[0]?.match?.(/\d+/)?.[0] as string,
+      );
+    }
+  }
+  return version as ObliqueVersion;
+}
+
+/**
+ * @param  json
+ * @param  url
+ * @param  projection
+ * @param  terrainProvider
+ */
+export function parseImageMeta(
+  json: ObliqueImageJson,
+  url: string,
+  projection?: Projection,
+  terrainProvider?: CesiumTerrainProvider,
+): ImageMeta[] {
+  let size: Size = [0, 0];
+  if (json.generalImageInfo.width && json.generalImageInfo.height) {
+    size = [json.generalImageInfo.width, json.generalImageInfo.height];
+  }
+  const tileResolution = json.generalImageInfo['tile-resolution'];
+  const tileSize = [
+    json.generalImageInfo['tile-width'],
+    json.generalImageInfo['tile-height'],
+  ];
+  let imageProjection = projection;
+  const imageMetas = [];
+  if (!imageProjection && json.generalImageInfo.crs) {
+    imageProjection = new Projection({
+      epsg: getNextObliqueProjectionId(),
+      prefix: 'OBLIQUE:',
+      proj4: json.generalImageInfo.crs,
+    });
+  }
+
+  const defaultOptions = {
+    size,
+    tileResolution,
+    tileSize,
+    projection: imageProjection,
+    url,
+    terrainProvider,
+  };
+
+  if (json.generalImageInfo.cameraParameter) {
+    if (Array.isArray(json.generalImageInfo.cameraParameter)) {
+      json.generalImageInfo.cameraParameter.forEach((cameraOption) => {
+        imageMetas.push(
+          new ImageMeta({
+            ...defaultOptions,
+            ...cameraOption,
+          } as ObliqueImageMetaOptions),
+        );
+      });
+    } else if (typeof json.generalImageInfo.cameraParameter === 'object') {
+      Object.entries(json.generalImageInfo.cameraParameter).forEach(
+        ([name, cameraOption]) => {
+          imageMetas.push(
+            new ImageMeta({
+              name,
+              ...defaultOptions,
+              ...cameraOption,
+            } as ObliqueImageMetaOptions),
+          );
+        },
+      );
+    }
+  }
+
+  if (imageMetas.length === 0) {
+    imageMetas.push(
+      new ImageMeta({
+        name: 'default',
+        ...defaultOptions,
+      } as ObliqueImageMetaOptions),
+    );
+  }
+  return imageMetas;
+}
+
+export function parseImageData(
+  json: ObliqueImageJson,
+  imageMetas: ImageMeta[],
+): ObliqueImage[] {
+  const imagesHeader = json.images![0];
+  const indices = {
+    name: imagesHeader.indexOf('name'),
+    width: imagesHeader.indexOf('width'),
+    height: imagesHeader.indexOf('height'),
+    tileResolution: imagesHeader.indexOf('tile-resolution'),
+    viewDirection: imagesHeader.indexOf('view-direction'),
+    viewDirectionAngle: imagesHeader.indexOf('view-direction-angle'),
+    groundCoordinates: imagesHeader.indexOf('groundCoordinates'),
+    centerPointOnGround: imagesHeader.indexOf('centerPointOnGround'),
+    cameraIndex: imagesHeader.indexOf('camera-index'),
+    projectionCenter: imagesHeader.indexOf('projection-center'),
+    pToRealworld: imagesHeader.indexOf('p-to-realworld'),
+    pToImage: imagesHeader.indexOf('p-to-image'),
+  };
+
+  const images = new Array(json.images!.length - 1);
+  json.images!.forEach((img, index) => {
+    if (index === 0) {
+      // skip header image
+      return;
+    }
+    const coordsArrayPToRealworld: number[] = [];
+    if (img[indices.pToRealworld]) {
+      (img[indices.pToRealworld] as number[][]).forEach((value) => {
+        coordsArrayPToRealworld.push(...value);
+      });
+    }
+    const pToRealworld = img[indices.pToRealworld]
+      ? new Matrix3(...coordsArrayPToRealworld)
+      : undefined;
+
+    const coordsArrayPToImage: number[] = [];
+    if (img[indices.pToImage]) {
+      (img[indices.pToImage] as number[][]).forEach((value) => {
+        coordsArrayPToImage.push(...value);
+      });
+      coordsArrayPToImage.push(0, 0, 0, 1);
+    }
+    const projectionCenter = img[indices.projectionCenter]
+      ? Cartesian3.fromArray(img[indices.projectionCenter] as number[])
+      : undefined;
+    const pToImage = img[indices.pToImage]
+      ? new Matrix4(...coordsArrayPToImage)
+      : undefined;
+
+    const meta = imageMetas[(img[indices.cameraIndex] as number) || 0];
+    if (!meta.size || (meta.size[0] === 0 && meta.size[1] === 0)) {
+      if (img[indices.height] && img[indices.width]) {
+        meta.size = [
+          img[indices.width] as number,
+          img[indices.height] as number,
+        ];
+      } else {
+        // eslint-disable-next-line no-console
+        console.error('missing image meta size');
+      }
+    }
+
+    if (!meta.tileResolution) {
+      if (img[indices.tileResolution]) {
+        meta.tileResolution = img[indices.tileResolution] as Size;
+      } else {
+        // eslint-disable-next-line no-console
+        console.error('missing image meta tileResolution');
+      }
+    }
+
+    images[index - 1] = new ObliqueImage({
+      name: img[indices.name] as string,
+      viewDirection: img[indices.viewDirection] as ObliqueViewDirection,
+      viewDirectionAngle: img[indices.viewDirectionAngle] as number,
+      groundCoordinates: img[indices.groundCoordinates] as Coordinate[],
+      centerPointOnGround: img[indices.centerPointOnGround] as Coordinate,
+      meta,
+      projectionCenter,
+      pToRealworld,
+      pToImage,
+    });
+  });
+
+  return images as ObliqueImage[];
+}
+
+type LegacyImageJson = {
+  'view-direction': keyof typeof obliqueViewDirectionNames;
+  'view-directionAngle'?: number;
+  'projection-center': Coordinate;
+  name: string;
+  groundCoordinates: Coordinate[];
+  centerPointOnGround: Coordinate;
+  'camera-name': string;
+  height?: number;
+  width?: number;
+  tileResolution?: Size;
+  'rotation-matrix': number[][];
+};
+
+export function parseLegacyImageData(
+  json: ObliqueImageJson,
+  imageMetas: ImageMeta[],
+): ObliqueImage[] {
+  const { cameraParameter } = json.generalImageInfo;
+  const { version, buildNumber } = getVersionFromImageJson(json);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return (json.images as LegacyImageJson[]).map((img) => {
+    const viewDirection = obliqueViewDirectionNames[img['view-direction']];
+    const viewDirectionAngle =
+      version >= 3.4 && buildNumber >= 18
+        ? img['view-directionAngle']
+        : undefined;
+    const projectionCenter = img['projection-center'];
+    const { name, groundCoordinates, centerPointOnGround } = img;
+
+    const cameraName = img['camera-name'];
+    const imageMeta = imageMetas.find((value) => value.name === cameraName);
+    const meta = imageMeta || imageMetas[0];
+    if (!meta.size) {
+      if (img.height && img.width) {
+        meta.size = [img.width, img.height];
+      } else {
+        // eslint-disable-next-line no-console
+        console.error('missing image meta size');
+      }
+    }
+
+    if (!meta.tileResolution) {
+      if (img.tileResolution) {
+        meta.tileResolution = img.tileResolution;
+      } else {
+        // eslint-disable-next-line no-console
+        console.error('missing image meta tileResolution');
+      }
+    }
+
+    const imageOptions: ObliqueImageOptions = {
+      name,
+      meta,
+      viewDirection,
+      viewDirectionAngle,
+      groundCoordinates,
+      centerPointOnGround,
+    };
+
+    if (imageMeta && cameraName) {
+      const cameraOptions = (
+        cameraParameter as Record<
+          string,
+          ObliqueCameraOptions & {
+            'camera-matrix': number[][];
+            'focal-length': number;
+          }
+        >
+      )[cameraName];
+      const cameraMatrix = Matrix3.fromRowMajorArray(
+        ([] as number[]).concat(...cameraOptions['camera-matrix']),
+      );
+      const cameraMatrixInverse = Matrix3.inverse(cameraMatrix, new Matrix3());
+      const rotationMatrix = Matrix3.fromRowMajorArray(
+        ([] as number[]).concat(...img['rotation-matrix']),
+      );
+      const rotationMatrixTransposed = Matrix3.transpose(
+        rotationMatrix,
+        new Matrix3(),
+      );
+      const focalLength = cameraOptions['focal-length'] * -1;
+      Matrix3.multiplyByScalar(
+        cameraMatrixInverse,
+        focalLength,
+        cameraMatrixInverse,
+      );
+      const pToRealworld = Matrix3.multiply(
+        rotationMatrixTransposed,
+        cameraMatrixInverse,
+        new Matrix3(),
+      );
+
+      const cameraMatrix4 = Matrix4.fromRotationTranslation(
+        cameraMatrix,
+        Cartesian3.ZERO,
+        new Matrix4(),
+      );
+      const projectionCenterCartesian = Cartesian3.fromArray(projectionCenter);
+      const e = Matrix4.fromTranslation(
+        Cartesian3.multiplyByScalar(
+          projectionCenterCartesian,
+          -1,
+          new Cartesian3(),
+        ),
+        new Matrix4(),
+      );
+      const rotationMatrix4 = Matrix4.fromRotationTranslation(
+        rotationMatrix,
+        Cartesian3.ZERO,
+        new Matrix4(),
+      );
+      const pToImage = Matrix4.multiply(
+        cameraMatrix4,
+        Matrix4.multiply(rotationMatrix4, e, new Matrix4()),
+        new Matrix4(),
+      );
+      imageOptions.projectionCenter = projectionCenterCartesian;
+      imageOptions.pToRealworld = pToRealworld;
+      imageOptions.pToImage = pToImage;
+    }
+    return new ObliqueImage(imageOptions);
+  });
+}

package/src/ol/feature.ts

@@ -0,0 +1,93 @@
+import Feature from 'ol/Feature.js';
+import { Style } from 'ol/style.js';
+import type { StyleFunction, StyleLike } from 'ol/style/Style.js';
+import {
+  globalHidden,
+  hidden,
+  highlighted,
+} from '../layer/featureVisibility.js';
+
+/**
+ * To be used for cesium 3D style functions
+ * @param {string} property
+ * @returns {*}
+ */
+Feature.prototype.getProperty = function getProperty(
+  this: Feature,
+  property,
+): unknown {
+  if (property === 'attributes') {
+    const properties = this.getProperties();
+    if (this.getGeometryName()) {
+      delete properties[this.getGeometryName()];
+    }
+    return properties;
+  } else if (property === 'olcs_geometryType') {
+    const type = this.getGeometry()?.getType();
+    if (type === 'Polygon') {
+      return 1;
+    } else if (type === 'LineString') {
+      return 2;
+    } else if (type === 'Point') {
+      return 3;
+    } else if (type === 'Circle') {
+      return 1;
+    } else if (type === 'MultiPolygon') {
+      return 1;
+    } else if (type === 'MultiLineString') {
+      return 2;
+    } else if (type === 'MultiPoint') {
+      return 3;
+    }
+    return undefined;
+  }
+  return this.get(property);
+};
+
+/**
+ * To be used for cesium 3D style functions
+ * @param {string} property
+ * @returns {*}
+ */
+Feature.prototype.getPropertyInherited = function getPropertyInherited(
+  this: Feature,
+  property,
+): any {
+  return this.getProperty(property);
+};
+
+// eslint-disable-next-line @typescript-eslint/unbound-method
+const originalStyleFunction = Feature.prototype.getStyleFunction;
+Feature.prototype.getStyleFunction = function getStyleFunction(
+  this: Feature,
+): StyleFunction | undefined {
+  if (this[hidden] || this[globalHidden]) {
+    return () => [];
+  }
+
+  if (this[highlighted]) {
+    return ((): (StyleLike | undefined)[] => [
+      this[highlighted]?.style,
+    ]) as StyleFunction;
+  }
+  return originalStyleFunction.bind(this)();
+};
+
+// eslint-disable-next-line @typescript-eslint/unbound-method
+const originalGetStyle = Feature.prototype.getStyle;
+Feature.prototype.getStyle = function getStyle(
+  this: Feature,
+): StyleLike | undefined {
+  if (this[hidden] || this[globalHidden]) {
+    return new Style({});
+  }
+
+  if (this[highlighted]) {
+    return this[highlighted].style;
+  }
+
+  return originalGetStyle.bind(this)();
+};
+
+// TODO implement getExactClassName, isClass & isExactClass
+// TODO implement feature.content.tileset.timeSinceLoad