@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/layer/{layerImplementation.js → layerImplementation.ts}

@@ -1,77 +1,66 @@
 import VcsObject from '../vcsObject.js';
 import LayerState from './layerState.js';
+import type VcsMap from '../map/vcsMap.js';
+import type { LayerImplementationOptions } from './layer.js';
 
 /**
  * represents an implementation for a Layer for a specific Map
- * @class
- * @export
- * @extends {VcsObject}
- * @abstract
- * @api
- * @template {import("@vcmap/core").VcsMap} T
  */
-class LayerImplementation extends VcsObject {
-  static get className() { return 'LayerImplementation'; }
+class LayerImplementation<M extends VcsMap> extends VcsObject {
+  static get className(): string {
+    return 'LayerImplementation';
+  }
 
-  /**
-   * @param {T} map
-   * @param {LayerImplementationOptions} options
-   */
-  constructor(map, options) {
+  private _map: M | undefined;
+
+  url: string | undefined;
+
+  protected _state: LayerState = LayerState.INACTIVE;
+
+  private _initialized = false;
+
+  constructor(map: M, options: LayerImplementationOptions) {
     super(options);
-    /** @type {T} */
-    this.map = map;
-    /**
-     * @type {string}
-     */
+    this._map = map;
     this.url = options.url;
-    /**
-     * The current active state of the implementation
-     * @type {LayerState}
-     * @private
-     */
-    this._state = LayerState.INACTIVE;
-    /**
-     * @type {boolean}
-     * @private
-     */
-    this._initialized = false;
+  }
+
+  get map(): M {
+    if (!this._map) {
+      throw new Error('Accessing destroyed implementation');
+    }
+    return this._map;
   }
 
   /**
    * Whether this implementation has been initialized (e.g. activated at least once)
-   * @type {boolean}
-   * @readonly
    */
-  get initialized() { return this._initialized; }
+  get initialized(): boolean {
+    return this._initialized;
+  }
 
-  /**
-   * @type {boolean}
-   * @api
-   */
-  get active() { return this._state === LayerState.ACTIVE; }
+  get active(): boolean {
+    return this._state === LayerState.ACTIVE;
+  }
 
-  /**
-   * @type {boolean}
-   * @api
-   */
-  get loading() { return this._state === LayerState.LOADING; }
+  get loading(): boolean {
+    return this._state === LayerState.LOADING;
+  }
 
   /**
    * interface to initialize this implementation, is used to setup elements which have to be created only once.
    * Has to set this.initialized = true;
-   * @returns {Promise<void>}
    */
-  async initialize() {
+  initialize(): Promise<void> {
     this._initialized = true;
+    return Promise.resolve();
   }
 
   /**
    * activates the implementation, if the map is also active. calls initialize (only use internally)
    * Once the promise resolves, the layer can still be inactive, if deactivate was called while initializing the layer.
-   * @returns {Promise<void>}
    */
-  async activate() {
+  async activate(): Promise<void> {
     if (this.map.active && !this.active) {
       this._state = LayerState.LOADING;
       await this.initialize();
@@ -84,17 +73,17 @@ class LayerImplementation extends VcsObject {
   /**
    * deactivates the implementation (only use internally)
    */
-  deactivate() {
+  deactivate(): void {
     this._state = LayerState.INACTIVE;
   }
 
   /**
    * destroys this implementation, after destroying the implementation cannot be used anymore.
    */
-  destroy() {
+  destroy(): void {
     this._initialized = false;
     this._state = LayerState.INACTIVE;
-    this.map = null;
+    this._map = undefined;
     super.destroy();
   }
 }

package/src/layer/layerState.ts

@@ -0,0 +1,11 @@
+/**
+ * Enumeration of possible layer states.
+ * State machine: inactive <-> loading -> active -> inactive
+ */
+enum LayerState {
+  INACTIVE = 1,
+  ACTIVE = 2,
+  LOADING = 4,
+}
+
+export default LayerState;

package/src/layer/layerSymbols.ts

@@ -0,0 +1,5 @@
+/**
+ * Symbol to declare a layers name on its visualizations, e.g. ol.layer.Layer, Cesium.Cesium3DTileset*
+ */
+/* eslint-disable import/prefer-default-export */
+export const vcsLayerName: unique symbol = Symbol('vcsLayerName');

package/src/layer/oblique/layerObliqueImpl.ts

@@ -0,0 +1,49 @@
+import type { Layer as OLLayer } from 'ol/layer.js';
+import LayerImplementation from '../layerImplementation.js';
+import { vcsLayerName } from '../layerSymbols.js';
+import type ObliqueMap from '../../map/obliqueMap.js';
+
+class LayerObliqueImpl extends LayerImplementation<ObliqueMap> {
+  olLayer: OLLayer | null = null;
+
+  initialize(): Promise<void> {
+    if (!this.initialized) {
+      this.olLayer = this.getOLLayer();
+      this.olLayer[vcsLayerName] = this.name;
+      this.map.addOLLayer(this.olLayer);
+    }
+    return super.initialize();
+  }
+
+  async activate(): Promise<void> {
+    await super.activate();
+    if (this.active && this.olLayer) {
+      this.olLayer.setVisible(true);
+    }
+  }
+
+  deactivate(): void {
+    super.deactivate();
+    if (this.olLayer) {
+      this.olLayer.setVisible(false);
+    }
+  }
+
+  /**
+   * returns the ol Layer
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getOLLayer(): OLLayer {
+    throw new Error();
+  }
+
+  destroy(): void {
+    if (this.olLayer) {
+      this.map.removeOLLayer(this.olLayer);
+    }
+    this.olLayer = null;
+    super.destroy();
+  }
+}
+
+export default LayerObliqueImpl;

package/src/layer/oblique/obliqueHelpers.ts

@@ -0,0 +1,216 @@
+import Circle from 'ol/geom/Circle.js';
+import { fromCircle } from 'ol/geom/Polygon.js';
+import { getTransform } from 'ol/proj.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import type OLMap from 'ol/Map.js';
+import type { Geometry } from 'ol/geom.js';
+import type { Feature } from 'ol/index.js';
+
+import { Cartographic, sampleTerrainMostDetailed } from '@vcmap-cesium/engine';
+import { cartesian2DDistance } from '../../util/math.js';
+import Projection, {
+  mercatorProjection,
+  wgs84Projection,
+} from '../../util/projection.js';
+import {
+  actuallyIsCircle,
+  alreadyTransformedToImage,
+  obliqueGeometry,
+} from '../vectorSymbols.js';
+import {
+  convertGeometryToPolygon,
+  getFlatCoordinatesFromGeometry,
+} from '../../util/geometryHelpers.js';
+import { transformFromImage } from '../../oblique/helpers.js';
+import type ObliqueImage from '../../oblique/obliqueImage.js';
+
+export function getLongestSide(coordinates: Coordinate[]): number {
+  let side = 0;
+  for (let i = 0; i < coordinates.length; i++) {
+    let j = i + 1;
+    if (j >= coordinates.length) {
+      j = 0;
+    }
+    const point1 = coordinates[i];
+    const point2 = coordinates[j];
+    const currentSide = cartesian2DDistance(point1, point2);
+    if (currentSide > side) {
+      side = currentSide;
+    }
+  }
+  return side;
+}
+
+export function getResolutionOptions(
+  olMap: OLMap,
+  image: ObliqueImage,
+): {
+  size: { height: number; width: number };
+  fovy: number;
+  metersPerUnit: number;
+} {
+  const longestSide = getLongestSide(image.groundCoordinates);
+  const fov = Math.PI / 3.0;
+  const viewport = olMap.getViewport();
+  const size = {
+    height: viewport.offsetHeight || 1,
+    width: viewport.offsetWidth || 1,
+  };
+  const aspectRatio = size.width / size.height;
+  const fovy = Math.atan(Math.tan(fov * 0.5) / aspectRatio) * 2.0;
+
+  const [imageSizeX, imageSizeY] = image.meta.size;
+  const longestImageSize = imageSizeX > imageSizeY ? imageSizeX : imageSizeY;
+  const metersPerUnit = longestSide / longestImageSize;
+  return {
+    size,
+    fovy,
+    metersPerUnit,
+  };
+}
+
+export function getZoom(
+  olMap: OLMap,
+  image: ObliqueImage,
+  distance: number,
+): number {
+  const { size, fovy, metersPerUnit } = getResolutionOptions(olMap, image);
+  const visibleMeters = 2 * distance * Math.tan(fovy / 2);
+  const visibleMapUnits = visibleMeters / metersPerUnit;
+  const resolution = visibleMapUnits / size.height;
+  return olMap.getView().getZoomForResolution(resolution) as number;
+}
+
+/**
+ * converts a geometry in mercator format to image coordinates
+ * @param  inputSourceGeometry
+ * @param  destinationGeometry
+ * @param  image
+ */
+export async function mercatorGeometryToImageGeometry(
+  inputSourceGeometry: Geometry,
+  destinationGeometry: Geometry,
+  image: ObliqueImage,
+): Promise<Geometry> {
+  const sourceGeometry =
+    inputSourceGeometry instanceof Circle
+      ? fromCircle(inputSourceGeometry)
+      : inputSourceGeometry;
+  const coordinates = sourceGeometry.getCoordinates() as any[];
+  const flattenCoordinates = getFlatCoordinatesFromGeometry(
+    sourceGeometry,
+    coordinates,
+  );
+  let transformer = getTransform(
+    mercatorProjection.proj,
+    image.meta.projection.proj,
+  );
+
+  let updatedPositions: Cartographic[] = [];
+  if (image.meta.terrainProvider) {
+    const cartographicCoordinates = flattenCoordinates.map((coord) => {
+      Projection.mercatorToWgs84(coord, true);
+      return Cartographic.fromDegrees(coord[0], coord[1]);
+    });
+    transformer = getTransform(
+      wgs84Projection.proj,
+      image.meta.projection.proj,
+    );
+    updatedPositions = await sampleTerrainMostDetailed(
+      image.meta.terrainProvider,
+      cartographicCoordinates,
+    );
+  }
+
+  flattenCoordinates.forEach((coord, index) => {
+    transformer(coord, coord, 3);
+    const exactHeight = updatedPositions[index]
+      ? updatedPositions[index].height
+      : null;
+    const imageCoords = image.transformRealWorld2Image(
+      coord,
+      exactHeight || coord[2] || image.averageHeight,
+    );
+    flattenCoordinates[index][0] = imageCoords[0];
+    flattenCoordinates[index][1] = imageCoords[1];
+  });
+
+  destinationGeometry.setCoordinates(coordinates);
+  return destinationGeometry;
+}
+
+/**
+ * returns a cloned geometry geometry with coordinates to format to image coordinates
+ * @param  sourceGeometry
+ * @param  destinationGeometry
+ * @param  image
+ */
+export function imageGeometryToMercatorGeometry(
+  sourceGeometry: Geometry,
+  destinationGeometry: Geometry,
+  image: ObliqueImage,
+): Promise<Geometry> {
+  const coordinates = sourceGeometry.getCoordinates() as any[];
+  const flattenCoordinates = getFlatCoordinatesFromGeometry(
+    sourceGeometry,
+    coordinates,
+  );
+  const promises = flattenCoordinates.map((coord) =>
+    transformFromImage(image, coord).then((coords) => {
+      coord[0] = coords.coords[0];
+      coord[1] = coords.coords[1];
+      coord[2] = coords.coords[2];
+    }),
+  );
+  return Promise.all(promises).then(() => {
+    destinationGeometry.setCoordinates(coordinates);
+    return destinationGeometry;
+  });
+}
+
+/**
+ * @param  feature
+ * @param  [retainRectangle=false]
+ */
+export function getPolygonizedGeometry(
+  feature: Feature,
+  retainRectangle = false,
+): Geometry {
+  const geom = feature.getGeometry() as Geometry;
+  const isRectangle =
+    geom.get('_vcsGeomType') === 'bbox' ||
+    geom.get('_vcsGeomType') === 'rectangle';
+  if (isRectangle && retainRectangle) {
+    return geom;
+  }
+
+  const isCircle = geom instanceof Circle;
+  const converted = convertGeometryToPolygon(geom);
+  converted[actuallyIsCircle] = isCircle;
+  return converted;
+}
+
+/**
+ * sets the geometry from the originalfeature to the oblique feature
+ * @param  originalFeature
+ * @param  obliqueFeature
+ */
+export function setNewGeometry(
+  originalFeature: Feature,
+  obliqueFeature: Feature,
+): void {
+  const originalGeometry = originalFeature.getGeometry() as Geometry;
+  const originalGeometryClone = originalFeature.getGeometry()!.clone();
+  obliqueFeature.setGeometry(
+    !originalGeometry[alreadyTransformedToImage]
+      ? convertGeometryToPolygon(originalGeometryClone)
+      : originalGeometryClone,
+  );
+  if (originalGeometry[alreadyTransformedToImage]) {
+    // TODO handle UI for bbox and rectangle
+    obliqueFeature
+      .getGeometry()!
+      .setProperties(originalFeature.getGeometry()!.getProperties(), false);
+  }
+  originalFeature[obliqueGeometry] = obliqueFeature.getGeometry();
+}