@vcmap/core 5.0.0-rc.0

package/src/vcs/vcm/util/projection.js

@@ -0,0 +1,348 @@
+import { getTransform, get as getProjection, equivalent } from 'ol/proj.js';
+import { register } from 'ol/proj/proj4.js';
+import proj4 from 'proj4';
+import { getLogger as getLoggerByName } from '@vcsuite/logger';
+import { check } from '@vcsuite/check';
+
+/**
+ * @typedef {Object} ProjectionOptions
+ * @property {string|number} [epsg] -  EPSG of the projection, for example: "EPSG:4326" if not specified, uses the framework projection
+ * @property {string|undefined|null} [proj4] - definition of the projection. See for example: {@link http://spatialreference.org/ref/epsg/4326/proj4/} proj4
+ * @property {Array<string>|undefined|null} [alias] - aliases to define
+ * @api stable
+ */
+
+export const wgs84ToMercatorTransformer = getTransform('EPSG:4326', 'EPSG:3857');
+export const mercatorToWgs84Transformer = getTransform('EPSG:3857', 'EPSG:4326');
+
+
+/**
+ * @returns {import("@vcsuite/logger").Logger}
+ */
+function getLogger() {
+  return getLoggerByName('vcs.vcm.util.Projection');
+}
+
+/**
+ * @type {ProjectionOptions}
+ */
+let defaultProjectionOption = {
+  epsg: 'EPSG:4326',
+};
+
+/**
+ * @param {string|number} value
+ * @param {string=} [prefix="EPSG:"]
+ * @returns {string}
+ */
+function parseEPSGCode(value, prefix = 'EPSG:') {
+  const matches = `${value}`.match(/^(?:epsg:)?(\d+)/i);
+  if (matches && matches[1]) {
+    return `${prefix}${matches[1]}`;
+  }
+  return '';
+}
+
+/**
+ * @param {ProjectionOptions} options
+ * @returns {boolean}
+ */
+function validateProjectionOptions(options) {
+  let proj = null;
+  if (options.epsg) {
+    try {
+      // @ts-ignore
+      proj = proj4(parseEPSGCode(options.epsg));
+    } catch (error) {
+      proj = null;
+    }
+  }
+  if (options.proj4) {
+    try {
+      // @ts-ignore
+      proj = proj4(options.proj4);
+    } catch (error) {
+      proj = null;
+    }
+  }
+  return proj != null;
+}
+
+/**
+ * @param {ProjectionOptions} options
+ * @returns {ProjectionOptions} valid options
+ */
+function registerProjection(options) {
+  const saneOptions = {};
+  if (options.epsg) {
+    saneOptions.epsg = parseEPSGCode(options.epsg);
+    if (saneOptions.epsg) {
+      if (options.proj4) {
+        saneOptions.proj4 = options.proj4;
+        proj4.defs(saneOptions.epsg, options.proj4);
+        register(proj4);
+      }
+      if (options.alias && Array.isArray(options.alias)) {
+        saneOptions.alias = options.alias;
+        saneOptions.alias.forEach((alias) => {
+          proj4.defs(alias, proj4.defs(saneOptions.epsg));
+          register(proj4);
+        });
+      }
+    }
+  }
+  return saneOptions;
+}
+
+/**
+ * Set the default projections epsg and proj4. Does not update
+ * projection created prior to this functions call.
+ * @param {ProjectionOptions} options
+ * @api
+ * @export
+ */
+export function setDefaultProjectionOptions(options) {
+  check(options, { epsg: [String, Number], proj4: [String, undefined, null] });
+  if (!validateProjectionOptions(options)) {
+    throw new Error('Cannot set invalid projection options as default options');
+  }
+  defaultProjectionOption = registerProjection(options);
+}
+
+/**
+ * Projection Class, if no valid options are given, the Projection will initialize with the Framework default Projection
+ * @class
+ * @export
+ * For example:
+ *     <pre><code>
+ *         {
+ *          "epsg" : "EPSG:25833"
+ *          "proj4" : "+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs"
+ *         }
+ *     </code></pre>
+ * @api stable
+ */
+class Projection {
+  /**
+   * @param {ProjectionOptions} options
+   */
+  constructor(options = { epsg: '' }) {
+    const saneOptions = registerProjection(options);
+    /**
+     * @type {string|null}
+     * @private
+     */
+    this._proj4 = saneOptions.proj4;
+
+    /**
+     * @type {string}
+     * @private
+     */
+    this._epsg = /** @type {string} */ (saneOptions.epsg);
+
+    if (!this.proj) {
+      this._epsg = Projection.parseEPSGCode(defaultProjectionOption.epsg);
+    }
+  }
+
+  /**
+   * epsg code in the format "EPSG:25832"
+   * @type {string}
+   * @api
+   * @readonly
+   */
+  get epsg() {
+    return this._epsg;
+  }
+
+  /**
+   * proj4js string example for epsg:25832: +proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs
+   * @type {string|null}
+   * @api
+   * @readonly
+   */
+  get proj4() {
+    return this._proj4;
+  }
+
+  /**
+   * @type {import("ol/proj/Projection").default}
+   * @api
+   * @readonly
+   */
+  get proj() {
+    return getProjection(this.epsg);
+  }
+
+  /**
+   * @returns {import("ol/proj/Projection").default}
+   * @api
+   * @deprecated 3.7
+   */
+  getProjection() {
+    getLogger().deprecate('getProjection', 'Access the property proj directly');
+    return this.proj;
+  }
+
+  /**
+   * @param {Projection} projection
+   * @returns {boolean}
+   */
+  equals(projection) {
+    return equivalent(this.proj, projection.proj);
+  }
+
+  /**
+   * @static
+   * @param {Projection} dest
+   * @param {Projection} source
+   * @param {import("ol/coordinate").Coordinate} coords
+   * @returns {import("ol/coordinate").Coordinate}
+   * @api stable
+   */
+  static transform(dest, source, coords) {
+    const transformer = getTransform(source.proj, dest.proj);
+    const newCoords = new Array(2);
+    transformer([coords[0], coords[1]], newCoords, 2);
+    if (coords.length > 2) {
+      newCoords.push(coords[2]);
+    }
+    return newCoords;
+  }
+
+  /**
+   * @param {Projection} dest
+   * @param {import("ol/coordinate").Coordinate} coords
+   * @returns {import("ol/coordinate").Coordinate}
+   * @api stable
+   */
+  transformTo(dest, coords) {
+    return Projection.transform(dest, this, coords);
+  }
+
+  /**
+   * @static
+   * @param {Projection} dest
+   * @param {Projection} source
+   * @param {Array.<import("ol/coordinate").Coordinate>} coords
+   * @returns {Array.<import("ol/coordinate").Coordinate>}
+   * @api stable
+   */
+  static transformCoordinates(dest, source, coords) {
+    const newCoords = [];
+    for (let i = 0; i < coords.length; i++) {
+      newCoords.push(Projection.transform(dest, source, coords[i]));
+    }
+    return newCoords;
+  }
+
+  /**
+   * returns a function to transform coordinates from source to dest
+   * @static
+   * @param {Projection} dest
+   * @param {Projection} source
+   * @returns {import("ol/proj").TransformFunction}
+   */
+  static getTransformer(dest, source) {
+    return getTransform(source.proj, dest.proj);
+  }
+
+  /**
+   * @param {Projection} source
+   * @param {import("ol/coordinate").Coordinate} coords
+   * @returns {import("ol/coordinate").Coordinate}
+   * @api stable
+   */
+  transformFrom(source, coords) {
+    return Projection.transform(this, source, coords);
+  }
+
+  /**
+   * Returns the object literal representation of this object
+   * @returns {ProjectionOptions}
+   * @api stable
+   */
+  getConfigObject() {
+    const configObject = {
+      epsg: this.epsg,
+    };
+    if (this.proj4) {
+      configObject.proj4 = this.proj4;
+    }
+    return configObject;
+  }
+
+  /**
+   * Fast transform from Web-Mercator to WGS84
+   * @param {import("ol/coordinate").Coordinate} coords
+   * @param {boolean=} inPlace - whether to transform in place
+   * @returns {import("ol/coordinate").Coordinate}
+   * @api
+   */
+  static mercatorToWgs84(coords, inPlace) {
+    return mercatorToWgs84Transformer(coords, inPlace ? coords : undefined, coords.length);
+  }
+
+  /**
+   * Fast transform from WGS84 to Web-Mercator
+   * @param {import("ol/coordinate").Coordinate} coords
+   * @param {boolean=} inPlace - whether to transform in place
+   * @returns {import("ol/coordinate").Coordinate}
+   * @api
+   */
+  static wgs84ToMercator(coords, inPlace) {
+    return wgs84ToMercatorTransformer(coords, inPlace ? coords : undefined, coords.length);
+  }
+
+  /**
+   * validates projection options, combination of epsg code and proj4
+   * @param {ProjectionOptions} options
+   * @returns {boolean}
+   * @api
+   */
+  static validateOptions(options) {
+    return validateProjectionOptions(options);
+  }
+
+  /**
+   * parses an epsg code returns empty string if no code has been found
+   * for example:
+   * parseEPSGCode('epsg:4326') ==> '4326'
+   * parseEPSGCode('epsg:4326', 'EPSG:') ==> 'EPSG:4326'
+   * parseEPSGCode('asdasd', 'EPSG:') ==> ''
+   * @param {string|number|undefined} value
+   * @param {string|undefined} prefix default EPSG:
+   * @returns {string}
+   * @api
+   */
+  static parseEPSGCode(value, prefix = 'EPSG:') {
+    return parseEPSGCode(value, prefix);
+  }
+}
+
+export default Projection;
+
+/**
+ * Returns the default Projection.
+ * @api stable
+ * @returns {Projection}
+ * @export
+ */
+export function getDefaultProjection() {
+  return new Projection(defaultProjectionOption);
+}
+
+/**
+ * wgs84 Projection EPSG Code: 4326
+ * @api stable
+ * @type {Projection}
+ * @export
+ */
+export const wgs84Projection = new Projection({ epsg: 4326 });
+/**
+ * mercator Projection EPSG Code: 3857
+ * @api stable
+ * @type {Projection}
+ * @export
+ */
+export const mercatorProjection = new Projection({ epsg: 3857 });

package/src/vcs/vcm/util/splitScreen.js

@@ -0,0 +1,233 @@
+import {
+  Cartesian3,
+  Matrix4,
+  Plane,
+  ClippingPlane,
+  ClippingPlaneCollection,
+  ImagerySplitDirection,
+} from '@vcmap/cesium';
+
+import { check } from '@vcsuite/check';
+import CesiumMap from '../maps/cesium.js';
+import ClippingObject from './clipping/clippingObject.js';
+import Openlayers from '../maps/openlayers.js';
+
+/**
+ * @class
+ * @api
+ */
+class SplitScreen {
+  /**
+   * @param {import("@vcmap/core").ClippingObjectManager} clippingObjectManager
+   */
+  constructor(clippingObjectManager) {
+    /**
+     * @type {number}
+     * @private
+     */
+    this._position = 0.5;
+    /**
+     * @type {import("@vcmap/cesium").Scene|null}
+     */
+    this.scene = null;
+    /**
+     * @type {import("ol/Map").default|null}
+     */
+    this.olMap = null;
+    /**
+     * @type {boolean}
+     * @api
+     */
+    this.initialized = false;
+    /**
+     * @type {ClippingObject}
+     */
+    this.leftScreenClippingObject = new ClippingObject();
+    /**
+     * @type {ClippingObject}
+     */
+    this.rightScreenClippingObject = new ClippingObject();
+    /**
+     * @type {Function|null}
+     * @private
+     */
+    this._cameraListener = null;
+    /**
+     * @type {number|null}
+     */
+    this.originalCameraPercentageChanged = null;
+    /**
+     * @type {Array<Function>}
+     * @private
+     */
+    this._targetsChangedListeners = [];
+
+    this._targetsChangedListeners = [
+      this.rightScreenClippingObject.targetsUpdated.addEventListener(() => { this._targetsChanged(); }),
+      this.leftScreenClippingObject.targetsUpdated.addEventListener(() => { this._targetsChanged(); }),
+    ];
+
+    /**
+     * @type {import("@vcmap/core").ClippingObjectManager}
+     * @private
+     */
+    this._clippingObjectManager = clippingObjectManager;
+    this._clippingObjectManager.addClippingObject(this.rightScreenClippingObject);
+    this._clippingObjectManager.addClippingObject(this.leftScreenClippingObject);
+  }
+
+  /**
+   * @type {number}
+   * @api
+   */
+  get position() { return this._position; }
+
+  /**
+   * @param {number} position
+   */
+  set position(position) {
+    check(position, Number);
+    if (position < 0 || position > 1) {
+      throw new Error('Position must be between 0 and 1');
+    }
+
+    if (Math.abs(this._position - position) > 0.0001) {
+      this._updatePosition(position);
+    }
+  }
+
+  _targetsChanged() {
+    if (this.scene) {
+      const numTargets = this.rightScreenClippingObject.targets.size + this.leftScreenClippingObject.targets.size;
+      const { camera } = this.scene;
+
+      if (this._cameraListener && numTargets === 0) {
+        this._cameraListener();
+        this._cameraListener = null;
+        camera.percentageChanged = this.originalCameraPercentageChanged;
+      } else if (!this._cameraListener && numTargets > 0) {
+        this.originalCameraPercentageChanged = camera.percentageChanged;
+        camera.percentageChanged = 0;
+        this._cameraListener = camera.changed.addEventListener(this._updateClippingPlanes.bind(this));
+        this._updateClippingPlanes();
+      }
+    }
+  }
+
+  /**
+   * @param {number} position
+   * @private
+   */
+  _updatePosition(position) {
+    this._position = position;
+    if (this.scene) {
+      this.scene.imagerySplitPosition = position;
+      this._updateClippingPlanes();
+    } else if (this.olMap) {
+      this.olMap.render();
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/core").VcsMap} map
+   */
+  mapActivated(map) {
+    if (map instanceof CesiumMap) {
+      this.scene = map.getScene();
+      this.olMap = null;
+      this._targetsChanged();
+    } else if (map instanceof Openlayers) {
+      this.scene = null;
+      this.olMap = map.olMap;
+    }
+    this._updatePosition(this.position);
+  }
+
+  /**
+   * calculate a clipping plane from the current swipe position for the given Cesium3DTileset
+   * @returns {import("@vcmap/cesium").ClippingPlane}
+   * @private
+   */
+  _calcClippingPlane() {
+    const { camera } = this.scene;
+    const { fov, near } = /** @type {import("@vcmap/cesium").PerspectiveFrustum} */ (camera.frustum);
+    const screenWidth = this.scene.canvas.width || 1;
+    const screenHeight = this.scene.canvas.height || 1;
+    let pixelSize;
+    if (screenHeight > screenWidth) {
+      pixelSize = (near * Math.tan(0.5 * fov) * 2.0) / screenHeight;
+    } else {
+      pixelSize = (near * Math.tan(0.5 * fov) * 2.0) / screenWidth;
+    }
+
+    // extract 3 points lying on swipe plane
+    const screenX = (screenWidth * this.position) - (screenWidth / 2);
+    const screenY = screenHeight / 2;
+    const p1 = new Cartesian3(pixelSize * screenX, pixelSize * screenY, -1 * near);
+    const p2 = new Cartesian3(pixelSize * screenX, -1 * pixelSize * screenY, -1 * near);
+    Matrix4.multiplyByPoint(camera.inverseViewMatrix, p1, p1);
+    Matrix4.multiplyByPoint(camera.inverseViewMatrix, p2, p2);
+    const p3WC = camera.positionWC;
+
+    Cartesian3.subtract(p3WC, p1, p1);
+    Cartesian3.subtract(p3WC, p2, p2);
+    const normal = Cartesian3.cross(p1, p2, new Cartesian3());
+    Cartesian3.normalize(normal, normal);
+    const planeInFixedFrame = Plane.fromPointNormal(p3WC, normal);
+
+    return ClippingPlane.fromPlane(planeInFixedFrame);
+  }
+
+  /**
+   * update the clipping planes for all Cesium3DTilesets loaded in the vcMap
+   * @private
+   */
+  _updateClippingPlanes() {
+    const plane = this._calcClippingPlane();
+    this.leftScreenClippingObject.clippingPlaneCollection = new ClippingPlaneCollection({ planes: [plane] });
+    const revClippingPlane = ClippingPlane.clone(plane);
+    revClippingPlane.normal = Cartesian3.negate(revClippingPlane.normal, revClippingPlane.normal);
+    revClippingPlane.distance *= -1;
+    this.rightScreenClippingObject.clippingPlaneCollection =
+      new ClippingPlaneCollection({ planes: [revClippingPlane] });
+  }
+
+  /**
+   * Gets the clipping object for a split direction
+   * @param {import("@vcmap/cesium").ImagerySplitDirection} splitDirection
+   * @returns {ClippingObject|null}
+   * @api
+   */
+  getClippingObjectForDirection(splitDirection) {
+    check(splitDirection, [
+      ImagerySplitDirection.LEFT,
+      ImagerySplitDirection.RIGHT,
+      ImagerySplitDirection.NONE,
+    ]);
+
+    if (splitDirection === ImagerySplitDirection.LEFT) {
+      return this.leftScreenClippingObject;
+    }
+    if (splitDirection === ImagerySplitDirection.RIGHT) {
+      return this.rightScreenClippingObject;
+    }
+
+    return null;
+  }
+
+  destroy() {
+    if (this._clippingObjectManager) {
+      this._clippingObjectManager.removeClippingObject(this.rightScreenClippingObject);
+      this._clippingObjectManager.removeClippingObject(this.leftScreenClippingObject);
+    }
+    this._targetsChangedListeners.forEach((cb) => { cb(); });
+    this._targetsChangedListeners = [];
+    this._clippingObjectManager = null;
+    if (this._cameraListener) {
+      this._cameraListener();
+      this._cameraListener = null;
+    }
+  }
+}
+
+export default SplitScreen;