@vcmap/core 5.0.0-rc.0

package/src/vcs/vcm/oblique/parseImageJson.js

@@ -0,0 +1,248 @@
+import { v4 as uuidv4 } from 'uuid';
+import proj4 from 'proj4';
+import { register } from 'ol/proj/proj4.js';
+import { get as getProjection } from 'ol/proj.js';
+import { Matrix3, Cartesian3, Matrix4 } from '@vcmap/cesium';
+import ObliqueImage from './ObliqueImage.js';
+import { obliqueViewDirectionNames } from './ObliqueViewDirection.js';
+import ImageMeta from './ObliqueImageMeta.js';
+
+/**
+ * @param {Object} json
+ * @returns {ObliqueVersion} version
+ */
+export function getVersionFromImageJson(json) {
+  const version = {
+    version: null,
+    buildNumber: null,
+  };
+
+  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]);
+    }
+  }
+  return version;
+}
+
+/**
+ * @param {ObliqueImageJson} json
+ * @param {string} url
+ * @param {(import("ol/proj/Projection").default|null)=} projection
+ * @param {import("@vcmap/cesium").CesiumTerrainProvider=} terrainProvider
+ * @returns {Array<import("@vcmap/core").ObliqueImageMeta>}
+ */
+export function parseImageMeta(json, url, projection, terrainProvider) {
+  let size;
+  if (json.generalImageInfo.width && json.generalImageInfo.height) {
+    size = /** @type {import("ol/size").Size} */ ([json.generalImageInfo.width, json.generalImageInfo.height]);
+  }
+  const tileResolution = json.generalImageInfo['tile-resolution'];
+  const tileSize = /** @type {import("ol/size").Size} */ ([json.generalImageInfo['tile-width'], json.generalImageInfo['tile-height']]);
+  let imageProjection = projection;
+  const imageMetas = [];
+  if (!imageProjection && json.generalImageInfo.crs) {
+    const crsUuid = uuidv4();
+    proj4.defs(crsUuid, json.generalImageInfo.crs);
+    register(proj4);
+    imageProjection = getProjection(crsUuid);
+  }
+
+  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 }));
+      });
+    } else if (typeof json.generalImageInfo.cameraParameter === 'object') {
+      Object.entries(json.generalImageInfo.cameraParameter).forEach(([name, cameraOption]) => {
+        imageMetas.push(new ImageMeta({ name, ...defaultOptions, ...cameraOption }));
+      });
+    }
+  }
+
+  if (imageMetas.length === 0) {
+    imageMetas.push(new ImageMeta({ name: 'default', ...defaultOptions }));
+  }
+  return imageMetas;
+}
+
+/**
+ * @param {ObliqueImageJson} json
+ * @param {Array<import("@vcmap/core").ObliqueImageMeta>} imageMetas
+ * @returns {Array<ObliqueImage>}
+ */
+export function parseImageData(json, imageMetas) {
+  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 = [];
+    if (img[indices.pToRealworld]) {
+      img[indices.pToRealworld].forEach((value) => {
+        coordsArrayPToRealworld.push(...value);
+      });
+    }
+    const pToRealworld = img[indices.pToRealworld] ? new Matrix3(...coordsArrayPToRealworld) : null;
+
+    const coordsArrayPToImage = [];
+    if (img[indices.pToImage]) {
+      img[indices.pToImage].forEach((value) => {
+        coordsArrayPToImage.push(...value);
+      });
+      coordsArrayPToImage.push(0, 0, 0, 1);
+    }
+    const projectionCenter = img[indices.projectionCenter] ?
+      Cartesian3.fromArray(img[indices.projectionCenter]) :
+      null;
+    const pToImage = img[indices.pToImage] ? new Matrix4(...coordsArrayPToImage) : null;
+
+    const meta = imageMetas[img[indices.cameraIndex] || 0];
+    if (!meta.size) {
+      if (img[indices.height] && img[indices.width]) {
+        meta.size = [img[indices.width], img[indices.height]];
+      } 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];
+      } else {
+        // eslint-disable-next-line no-console
+        console.error('missing image meta tileResolution');
+      }
+    }
+
+    images[index - 1] = new ObliqueImage({
+      name: img[indices.name],
+      viewDirection: img[indices.viewDirection],
+      viewDirectionAngle: img[indices.viewDirectionAngle],
+      groundCoordinates: img[indices.groundCoordinates],
+      centerPointOnGround: img[indices.centerPointOnGround],
+      meta,
+      projectionCenter,
+      pToRealworld,
+      pToImage,
+    });
+  });
+
+  return images;
+}
+
+/**
+ * @param {ObliqueImageJson} json
+ * @param {Array<import("@vcmap/core").ObliqueImageMeta>} imageMetas
+ * @returns {Array<ObliqueImage>}
+ */
+export function parseLegacyImageData(json, imageMetas) {
+  const { cameraParameter } = json.generalImageInfo;
+  const { version, buildNumber } = getVersionFromImageJson(json);
+  return /** @type {Array<*>} */ (json.images).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 = {
+      name,
+      meta,
+      viewDirection,
+      viewDirectionAngle,
+      groundCoordinates,
+      centerPointOnGround,
+    };
+
+    if (imageMeta && cameraName) {
+      const cameraOptions = cameraParameter[cameraName];
+      const cameraMatrix = Matrix3.fromRowMajorArray([].concat(...cameraOptions['camera-matrix']));
+      const cameraMatrixInverse = Matrix3.inverse(cameraMatrix, new Matrix3());
+      const rotationMatrix = Matrix3.fromRowMajorArray([].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/vcs/vcm/util/clipping/clippingObject.js

@@ -0,0 +1,386 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Cesium3DTileset } from '@vcmap/cesium';
+
+import { check } from '@vcsuite/check';
+import { parseBoolean } from '@vcsuite/parsers';
+import { getLogger as getLoggerByName } from '@vcsuite/logger';
+import CesiumMap from '../../maps/cesium.js';
+import VcsEvent from '../../event/vcsEvent.js';
+import LayerCollection from '../layerCollection.js';
+
+/**
+ * @namespace clipping
+ * @export
+ * @api
+ */
+
+/**
+ * Object to define an entity which is clipped by this ClippingObject
+ * @typedef {Object} ClippingObjectEntityOption
+ * @property {string} layerName
+ * @property {string} entityId
+ * @api
+ */
+
+/**
+ * @typedef {Object} ClippingObjectOptions
+ * @property {Array<string>|undefined} layerNames
+ * @property {Array<ClippingObjectEntityOption>|undefined} entities
+ * @property {import("@vcmap/cesium").ClippingPlaneCollection|undefined} clippingPlaneCollection
+ * @property {boolean} [terrain=false]
+ * @property {boolean} [local=false] - if not local, coordinates are expected in ECEF
+ * @api
+ */
+
+/**
+ * @returns {import("@vcsuite/logger").Logger}
+ */
+function getLogger() {
+  return getLoggerByName('vcs.vcm.util.clipping.ClippingObject');
+}
+
+const globeSymbol = Symbol('ClippingObjectGlobe');
+
+/**
+ * The ClippingObject is a container for a Cesium.ClippingPlaneCollection. The container holds information on the
+ * targeted Cesium objects, based on layerNames (for [CesiumTileset]{@link CesiumTileset}) or
+ * layerName and entity id for Cesium.DataSource which are part of an [DataSource]{@link DataSource} layer.
+ * Adding a ClippingObject to the [ClippingObjectManager]{@link ClippingObjectManager} applies the
+ * objects Cesium.ClippingPlaneCollection where applicable. Once added, changes to the targets of the object are tracked.
+ * To update the Cesium.ClippingPlaneCollection or its definitions, you must trigger an update by setting the clippingPlaneCollection
+ * property to the new definition.
+ * @class
+ * @export
+ * @api stable
+ */
+class ClippingObject {
+  /**
+   * @param {ClippingObjectOptions=} options
+   */
+  constructor(options = {}) {
+    /** @type {string} */
+    this.id = uuidv4();
+
+    /**
+     * The current layerNames. Use add/removeimport("@vcmap/core").Layer to manipulate.
+     * @type {Array<string>}
+     * @readonly
+     * @api
+     */
+    this.layerNames = options.layerNames || [];
+
+    /**
+     * The current entities and their respective layerNames. Use add/removeEntity to manipulate
+     * @type {Array<ClippingObjectEntityOption>}
+     * @readonly
+     * @api
+     */
+    this.entities = options.entities || [];
+
+    /**
+     * Key is a semantic identifier, eg. layerName or layerName-entitiyId, depending on the target. Targets
+     * represent Cesium Object which support the clippingPlanes API
+     * @type {Map<(string|symbol), import("@vcmap/cesium").Entity|import("@vcmap/cesium").Cesium3DTileset|import("@vcmap/cesium").Globe>}
+     */
+    this.targets = new Map();
+
+    /**
+     * @type {import("@vcmap/cesium").ClippingPlaneCollection|null}
+     * @private
+     */
+    this._clippingPlaneCollection = options.clippingPlaneCollection || null;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._terrain = parseBoolean(options.terrain, false);
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._local = parseBoolean(options.local, false);
+
+    /**
+     * Event, raised on a change of targets
+     * @type {VcsEvent<void>}
+     * @api
+     */
+    this.targetsUpdated = new VcsEvent();
+
+    /**
+     * Event, raised on changes to the clippingPlaneCollection property
+     * @type {VcsEvent<void>}
+     * @api
+     */
+    this.clippingPlaneUpdated = new VcsEvent();
+
+    /**
+     * @type {Set<import("@vcmap/core").FeatureStore>}
+     * @private
+     */
+    this._cachedFeatureStoreLayers = new Set();
+    this._activeMap = null;
+    this._layerCollection = null;
+  }
+
+  /**
+   * The current Cesium.ClippingPlaneCollection. To update the collection, set this property to the new definition.
+   * @api
+   * @type {import("@vcmap/cesium").ClippingPlaneCollection|null}
+   */
+  get clippingPlaneCollection() { return this._clippingPlaneCollection; }
+
+  /**
+   * @param {import("@vcmap/cesium").ClippingPlaneCollection} clippingPlaneCollection
+   */
+  set clippingPlaneCollection(clippingPlaneCollection) {
+    this._clippingPlaneCollection = clippingPlaneCollection;
+    this.clippingPlaneUpdated.raiseEvent();
+  }
+
+  /**
+   * Flag to indicate whether the globe/terrain is part of the targets.
+   * @api
+   * @type {boolean}
+   */
+  get terrain() { return this._terrain; }
+
+  /**
+   * @param {boolean} terrain
+   */
+  set terrain(terrain) {
+    check(terrain, Boolean);
+
+    if (this._terrain !== terrain) {
+      this._terrain = terrain;
+      this.handleMapChanged(this._activeMap);
+    }
+  }
+
+  /**
+   * Flag to indicate, whether this ClippingObject represents coordinates in a local frame. If false,
+   * Plane coordiantes are assumed to be in ECEF or have an appropriate model matrix
+   * applied to the Cesium.ClippingPlaneCollection.
+   * @api
+   * @type {boolean}
+   */
+  get local() { return this._local; }
+
+  /**
+   * @param {boolean} local
+   */
+  set local(local) {
+    check(local, Boolean);
+
+    if (this._local !== local) {
+      this._local = local;
+      this.clippingPlaneUpdated.raiseEvent();
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/core").LayerCollection} layerCollection
+   */
+  setLayerCollection(layerCollection) {
+    check(layerCollection, LayerCollection);
+
+    if (this._layerCollection && this._layerCollection !== layerCollection) {
+      throw new Error('layerCollection has already been set');
+    }
+    this._layerCollection = layerCollection;
+    [...this._layerCollection].forEach((l) => {
+      this.handleLayerChanged(l);
+    });
+  }
+
+  /**
+   * @param {import("@vcmap/core").Layer} layer
+   */
+  handleLayerChanged(layer) {
+    const map = this._activeMap;
+    if (map instanceof CesiumMap) {
+      if (this.layerNames.includes(layer.name)) {
+        if (layer.active) {
+          const visualisations = map.getVisualizationsForLayer(layer);
+          const tilesets = visualisations ?
+            [...visualisations]
+              .filter(v => v instanceof Cesium3DTileset) :
+            [];
+
+          if (tilesets.length > 0) {
+            tilesets.forEach(/** @param {import("@vcmap/cesium").Cesium3DTileset} tileset */ (tileset) => {
+              tileset.readyPromise.then((cesium3DTileset) => {
+                if (this.layerNames.includes(layer.name) && layer.active) {
+                  this.targets.set(layer.name, cesium3DTileset);
+                  this.targetsUpdated.raiseEvent();
+                }
+              });
+            });
+          } else {
+            const index = this.layerNames.indexOf(layer.name);
+            getLogger().warning(`layer ${layer.name} cannot have a ClippingObject applied`);
+            this.layerNames.splice(index, 1);
+          }
+        } else if (this.targets.has(layer.name)) {
+          this.targets.delete(layer.name);
+          this.targetsUpdated.raiseEvent();
+        }
+      } else if (this.entities.find(eo => eo.layerName === layer.name)) {
+        let raise = false;
+        const visualisations = map.getVisualizationsForLayer(layer);
+        const dataSource = visualisations ?
+          [...visualisations][0] :
+          null;
+
+        if (!dataSource) {
+          const index = this.layerNames.indexOf(layer.name);
+          getLogger().warning(`layer ${layer.name} cannot have a ClippingObject applied`);
+          this.layerNames.splice(index, 1);
+          return;
+        }
+
+        this.entities
+          .filter(eo => eo.layerName === layer.name)
+          .forEach((eo) => {
+            const key = `${eo.layerName}-${eo.entityId}`;
+            if (layer.active) {
+              const entity = /** @type {import("@vcmap/cesium").CustomDataSource} */ (dataSource)
+                .entities.getById(eo.entityId);
+              if (entity) {
+                this.targets.set(key, entity);
+                raise = true;
+              } else {
+                const index = this.entities.indexOf(eo);
+                getLogger().warning(`could not find entity with id ${eo.entityId} in layer ${eo.layerName}`);
+                this.entities.splice(index, 1);
+              }
+            } else if (this.targets.has(key)) {
+              this.targets.delete(key);
+              raise = true;
+            }
+          });
+
+        if (raise) {
+          this.targetsUpdated.raiseEvent();
+        }
+      }
+    } else if (this.layerNames.includes(layer.name) && layer.className === 'vcs.vcm.layer.FeatureStore') {
+      if (layer.active) {
+        this._cachedFeatureStoreLayers.add(/** @type {import("@vcmap/core").FeatureStore} */ (layer));
+      } else if (this._cachedFeatureStoreLayers.has(/** @type {import("@vcmap/core").FeatureStore} */ (layer))) {
+        this._cachedFeatureStoreLayers.delete(/** @type {import("@vcmap/core").FeatureStore} */ (layer));
+      }
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/core").VcsMap|null} map
+   */
+  handleMapChanged(map) {
+    if (map instanceof CesiumMap) {
+      const { globe } = map.getScene();
+      let raise = false;
+      if (this._terrain && !this.targets.has(globeSymbol)) {
+        this.targets.set(globeSymbol, globe);
+        raise = true;
+      } else if (!this._terrain && this.targets.has(globeSymbol)) {
+        this.targets.delete(globeSymbol);
+        raise = true;
+      }
+
+      if (raise) {
+        this.targetsUpdated.raiseEvent();
+      }
+
+      if (this._cachedFeatureStoreLayers.size > 0) {
+        this._cachedFeatureStoreLayers.forEach((layer) => { this.handleLayerChanged(layer); });
+        this._cachedFeatureStoreLayers.clear();
+      }
+    }
+    this._activeMap = map;
+  }
+
+  /**
+   * add a layer name to the ClippingObject's layerNames array
+   * @api
+   * @param {string} layerName
+   */
+  addLayer(layerName) {
+    check(layerName, String);
+
+    if (!this.layerNames.includes(layerName)) {
+      this.layerNames.push(layerName);
+      const layer = this._layerCollection ?
+        this._layerCollection.getByKey(layerName) :
+        null;
+      // XXX active state is not part of this yet
+      if (layer && layer.active) {
+        this.handleLayerChanged(layer);
+      }
+    }
+  }
+
+  /**
+   * removes a layer from the ClippingObject's layerNames array
+   * @api
+   * @param {string} layerName
+   */
+  removeLayer(layerName) {
+    check(layerName, String);
+
+    const index = this.layerNames.indexOf(layerName);
+    if (index > -1) {
+      this.layerNames.splice(index, 1);
+    }
+
+    if (this.targets.has(layerName)) {
+      this.targets.delete(layerName);
+      this.targetsUpdated.raiseEvent();
+    }
+  }
+
+  /**
+   * add an entity to the ClippingObject's entities array
+   * @api
+   * @param {string} layerName
+   * @param {string} entityId
+   */
+  addEntity(layerName, entityId) {
+    check(layerName, String);
+    check(entityId, String);
+
+    if (!this.entities.find(eo => eo.layerName === layerName && eo.entityId === entityId)) {
+      this.entities.push({ layerName, entityId });
+      const layer = this._layerCollection ?
+        this._layerCollection.getByKey(layerName) :
+        null;
+      if (layer && layer.active) {
+        this.handleLayerChanged(layer);
+      }
+    }
+  }
+
+  /**
+   * remove entity from the ClippingObject's entities array
+   * @api
+   * @param {string} layerName
+   * @param {string} entityId
+   */
+  removeEntity(layerName, entityId) {
+    check(layerName, String);
+    check(entityId, String);
+
+    const index = this.entities.findIndex(c => c.layerName === layerName && c.entityId === entityId);
+    if (index > -1) {
+      this.entities.splice(index, 1);
+    }
+
+    const targetId = `${layerName}-${entityId}`;
+    if (this.targets.has(targetId)) {
+      this.targets.delete(targetId);
+      this.targetsUpdated.raiseEvent();
+    }
+  }
+}
+
+export default ClippingObject;