@vcmap/core 5.0.0-rc.0

package/src/vcs/vcm/layer/cesium/x3dmHelper.js

@@ -0,0 +1,22 @@
+/**
+ * @param {import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature} feature
+ * @returns {Object}
+ */
+export default function getJSONObjectFromObject(feature) {
+  const properties = feature.getPropertyNames();
+  const JSONObject = {};
+  for (let i = 0; i < properties.length; i++) {
+    JSONObject[properties[i]] = feature.getProperty(properties[i]);
+  }
+  if (JSONObject.id == null) {
+    JSONObject.id = `${feature.content.url}${feature._batchId}`;
+  }
+  if (JSONObject.attributes) {
+    JSONObject.attributes.gmlId = JSONObject.id;
+  } else if (JSONObject.gmlId == null) {
+    JSONObject.gmlId = JSONObject.id;
+  }
+  // @ts-ignore
+  JSONObject.clickedPosition = feature.clickedPosition ? feature.clickedPosition : {};
+  return JSONObject;
+}

package/src/vcs/vcm/layer/cesiumTileset.js

@@ -0,0 +1,376 @@
+import { ImagerySplitDirection, Matrix4 } from '@vcmap/cesium';
+
+import { checkMaybe } from '@vcsuite/check';
+import { parseInteger } from '@vcsuite/parsers';
+import getJSONObjectFromObject from './cesium/x3dmHelper.js';
+import VectorStyleItem from '../util/style/vectorStyleItem.js';
+import FeatureLayer from './featureLayer.js';
+import CesiumTilesetCesium, { getExtentFromTileset } from './cesium/cesiumTilesetCesium.js';
+import CesiumMap from '../maps/cesium.js';
+import VcsEvent from '../event/vcsEvent.js';
+import Extent from '../util/extent.js';
+import { mercatorProjection } from '../util/projection.js';
+import { isMobile } from '../util/isMobile.js';
+import { referenceableStyleSymbol } from '../util/style/styleItem.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * @typedef {LayerOptions} CesiumTilesetOptions
+ * @property {number|undefined} [screenSpaceError=16] -  relates inversely to the depth over which the layer is activated
+ * @property {number|undefined} [screenSpaceErrorMobile=32] -  relates inversely to the depth over which the layer is activated
+ * @property {number|undefined} [maximumMemoryUsage=16] - sets the cesium maximumMemoryUsage Parameter (Is when the cached tiles exceed this value cesium starts to clear the cached tiles)
+ * @property {Object|undefined} tilesetOptions
+ * @property {import("@vcmap/core").VectorStyleItem|VectorStyleItemOptions|undefined} highlightStyle
+ * @property {import("@vcmap/core").FeatureVisibility|undefined} featureVisibility
+ * @property {string|undefined} splitDirection - either 'left' or 'right', if omitted none is applied
+ * @property {import("ol/coordinate").Coordinate|undefined} offset - an offset of x, y, z. x and y in degrees longitude/latitude respectively
+ * @api
+ */
+
+/**
+ * @typedef {Object} CesiumTilesetTilesetProperties
+ * @property {string|symbol} key
+ * @property {*} value
+ * @api
+ */
+
+/**
+ * @typedef {FeatureLayerImplementationOptions} CesiumTilesetImplementationOptions
+ * @property {Object|undefined} tilesetOptions
+ * @property {import("@vcmap/cesium").ImagerySplitDirection} splitDirection
+ * @property {Array<CesiumTilesetTilesetProperties>|undefined} tilesetProperties
+ * @property {import("@vcmap/cesium").Matrix4|undefined} modelMatrix
+ * @property {import("ol/coordinate").Coordinate|undefined} offset
+ * @api
+ */
+
+/**
+ * represents a specific Building layer for cesium.
+ * @class
+ * @extends {FeatureLayer}
+ * @implements {SplitLayer}
+ * @api stable
+ * @export
+ */
+class CesiumTileset extends FeatureLayer {
+  /** @type {string} */
+  static get className() { return 'vcs.vcm.layer.CesiumTileset'; }
+
+  /**
+   * @returns {CesiumTilesetOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...FeatureLayer.getDefaultOptions(),
+      highlightStyle: undefined,
+      screenSpaceError: 16,
+      screenSpaceErrorMobile: 32,
+      maximumMemoryUsage: 16,
+      tilesetOptions: {},
+      splitDirection: undefined,
+      offset: undefined,
+    };
+  }
+
+  /**
+   * @param {CesiumTilesetOptions} options
+   */
+  constructor(options) {
+    super(options);
+    this._supportedMaps = [
+      CesiumMap.className,
+    ];
+    const defaultOptions = CesiumTileset.getDefaultOptions();
+    if (this.url && !/\.json$/.test(this.url)) {
+      this.url = `${this.url.replace(/\/$/, '')}/tileset.json`;
+    }
+
+    /** @type {VectorStyleItem} */
+    this.highlightStyle = null;
+    if (options.highlightStyle) {
+      this.highlightStyle = options.highlightStyle instanceof VectorStyleItem ?
+        options.highlightStyle :
+        new VectorStyleItem(/** @type {VectorStyleItemOptions} */ (options.highlightStyle));
+    }
+    /** @type {number} */
+    this.screenSpaceError = parseInteger(options.screenSpaceError, defaultOptions.screenSpaceError);
+
+    /** @type {number} */
+    this.screenSpaceErrorMobile = parseInteger(options.screenSpaceErrorMobile, defaultOptions.screenSpaceErrorMobile);
+
+    /** @type {number} */
+    this.maximumMemoryUsage = parseInteger(options.maximumMemoryUsage, defaultOptions.maximumMemoryUsage);
+
+    const tilesetOptions = options.tilesetOptions || defaultOptions.tilesetOptions;
+
+    /** @type {!Object} */
+    this.tilesetOptions = {
+      url: this.url,
+      maximumScreenSpaceError: isMobile() ? this.screenSpaceErrorMobile : this.screenSpaceError,
+      maximumMemoryUsage: this.maximumMemoryUsage,
+      ...tilesetOptions,
+    };
+
+    /** @type {import("@vcmap/cesium").ImagerySplitDirection} */
+    this._splitDirection = ImagerySplitDirection.NONE;
+
+    if (options.splitDirection) {
+      this._splitDirection = options.splitDirection === 'left' ?
+        ImagerySplitDirection.LEFT :
+        ImagerySplitDirection.RIGHT;
+    }
+
+    /**
+     * raised if the split direction changes, is passed the split direction as its only argument
+     * @type {VcsEvent<import("@vcmap/cesium").ImagerySplitDirection>}
+     * @api
+     */
+    this.splitDirectionChanged = new VcsEvent();
+
+    /**
+     * @type {import("@vcmap/cesium").Matrix4|undefined}
+     * @private
+     */
+    this._modelMatrix = undefined;
+
+    /**
+     * @type {import("ol/coordinate").Coordinate|undefined}
+     * @private
+     */
+    this._offset = options.offset || defaultOptions.offset;
+  }
+
+  /**
+   * A model matrix to apply to each cesium3DTileset created from this layer.
+   * This will overwrite any modelMatrix calculated by the offset property.
+   * @api
+   * @returns {import("@vcmap/cesium").Matrix4|undefined}
+   */
+  get modelMatrix() {
+    return this._modelMatrix;
+  }
+
+  /**
+   * @param {import("@vcmap/cesium").Matrix4|undefined} modelMatrix
+   */
+  set modelMatrix(modelMatrix) {
+    checkMaybe(modelMatrix, Matrix4);
+
+    this._modelMatrix = modelMatrix;
+    this.getImplementations()
+      .forEach(/** @param {CesiumTilesetCesium} impl */ (impl) => {
+        impl.updateModelMatrix(modelMatrix);
+      });
+  }
+
+  /**
+   * An offset in x, y, z. x and y are in degrees longitude latitude respectively.
+   * If a modelMatrix is defined on this layer, setting an offset will not take effect until you
+   * set the modelMatrix to undefined.
+   * @api
+   * @type {import("ol/coordinate").Coordinate|undefined}
+   */
+  get offset() {
+    return this._offset;
+  }
+
+  /**
+   * @param {import("ol/coordinate").Coordinate|undefined} offset
+   */
+  set offset(offset) {
+    checkMaybe(offset, [Number]);
+
+    this._offset = offset;
+    this.getImplementations()
+      .forEach(/** @param {CesiumTilesetCesium} impl */ (impl) => {
+        impl.updateOffset(offset);
+      });
+  }
+
+  /**
+   * @api
+   * @type {import("@vcmap/cesium").ImagerySplitDirection}
+   */
+  get splitDirection() { return this._splitDirection; }
+
+  /**
+   * @param {import("@vcmap/cesium").ImagerySplitDirection} direction
+   */
+  set splitDirection(direction) {
+    if (direction !== this._splitDirection) {
+      this.getImplementations().forEach((impl) => {
+        /** @type {CesiumTilesetCesium} */ (impl).updateSplitDirection(direction);
+      });
+      this._splitDirection = direction;
+      this.splitDirectionChanged.raiseEvent(this._splitDirection);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {CesiumTilesetImplementationOptions}
+   */
+  getImplementationOptions() {
+    return {
+      ...super.getImplementationOptions(),
+      tilesetOptions: this.tilesetOptions,
+      splitDirection: this.splitDirection,
+      modelMatrix: this.modelMatrix,
+      offset: this.offset,
+    };
+  }
+
+  /**
+   * @inheritDoc
+   * @param {import("@vcmap/core").VcsMap} map
+   * @returns {Array<CesiumTilesetCesium>}
+   */
+  createImplementationsForMap(map) {
+    if (map instanceof CesiumMap) {
+      return [new CesiumTilesetCesium(map, this.getImplementationOptions())];
+    }
+    return [];
+  }
+
+  /**
+   * @inheritDoc
+   * @param {import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature} object
+   * @returns {?Object}
+   */
+  objectClickedHandler(object) {
+    if (this.allowPicking) {
+      const jsonObject = getJSONObjectFromObject(object);
+      if (jsonObject) {
+        return {
+          id: jsonObject.id,
+          feature: jsonObject,
+        };
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Returns the configured Extent of this layer or tries to calculate the extent based on tileset.
+   * Returns null of no extent was configured and the layers tileset is not yet loaded or ready.
+   * @returns {Extent|null}
+   * @api
+   */
+  getZoomToExtent() {
+    const metaExtent = super.getZoomToExtent();
+    if (metaExtent) {
+      return metaExtent;
+    }
+    const impl = /** @type {CesiumTilesetCesium} */ (this.getImplementations()[0]);
+    if (impl) {
+      const threeDimExtent = getExtentFromTileset(impl.cesium3DTileset);
+
+      const actualExtent = new Extent({
+        ...mercatorProjection.getConfigObject(),
+        coordinates: threeDimExtent,
+      });
+
+      if (actualExtent.isValid()) {
+        return actualExtent;
+      }
+    }
+
+    return null;
+  }
+
+  // TODO type params
+  getGenericFeatureFromClickedObject(object) {
+    const attributes = { ...this.genericFeatureProperties, ...object.attributes || object };
+    return {
+      layerName: this.name,
+      layerClass: this.className,
+      attributes,
+      longitude: object.clickedPosition.longitude,
+      latitude: object.clickedPosition.latitude,
+      height: object.clickedPosition.height + this.balloonHeightOffset,
+      relativeToGround: false,
+    };
+  }
+
+  /**
+   * set the maximum screenspace error of this layer
+   * @param {number} value
+   * @api stable
+   */
+  setMaximumScreenSpaceError(value) {
+    this.getImplementations()
+      .forEach(/** @param {CesiumTilesetCesium} impl */(impl) => {
+        if (impl.cesium3DTileset) {
+          impl.cesium3DTileset.maximumScreenSpaceError = value;
+        }
+      });
+  }
+
+  /**
+   * @returns {CesiumTilesetOptions}
+   */
+  getConfigObject() {
+    /** @type {CesiumTilesetOptions} */
+    const config = super.getConfigObject();
+    const defaultOptions = CesiumTileset.getDefaultOptions();
+    if (this.highlightStyle) {
+      config.highlightStyle = this.highlightStyle[referenceableStyleSymbol] ?
+        this.highlightStyle.getReference() :
+        this.highlightStyle.getOptions();
+    }
+
+    if (this.screenSpaceError !== defaultOptions.screenSpaceError) {
+      config.screenSpaceError = this.screenSpaceError;
+    }
+
+    if (this.screenSpaceErrorMobile !== defaultOptions.screenSpaceErrorMobile) {
+      config.screenSpaceErrorMobile = this.screenSpaceErrorMobile;
+    }
+
+    if (this.maximumMemoryUsage !== defaultOptions.maximumMemoryUsage) {
+      config.maximumMemoryUsage = this.maximumMemoryUsage;
+    }
+
+    const tilesetOptions = { ...this.tilesetOptions };
+    if (tilesetOptions.url === this.url) {
+      delete tilesetOptions.url;
+    }
+
+    const usedScreenSpaceError = isMobile() ? this.screenSpaceErrorMobile : this.screenSpaceError;
+    if (tilesetOptions.maximumScreenSpaceError === usedScreenSpaceError) {
+      delete tilesetOptions.maximumScreenSpaceError;
+    }
+
+    if (tilesetOptions.maximumMemoryUsage === this.maximumMemoryUsage) {
+      delete tilesetOptions.maximumMemoryUsage;
+    }
+
+    if (Object.keys(tilesetOptions).length > 0) {
+      config.tilesetOptions = tilesetOptions;
+    }
+
+    if (this._splitDirection !== ImagerySplitDirection.NONE) {
+      config.splitDirection = this._splitDirection === ImagerySplitDirection.RIGHT ?
+        'right' :
+        'left';
+    }
+
+    if (Array.isArray(this.offset)) {
+      config.offset = this.offset.slice();
+    }
+
+    return config;
+  }
+
+  /**
+   * disposes of this layer, removes instances from the current maps and the framework
+   * @api stable
+   */
+  destroy() {
+    super.destroy();
+    this.splitDirectionChanged.destroy();
+  }
+}
+
+VcsClassRegistry.registerClass(CesiumTileset.className, CesiumTileset);
+export default CesiumTileset;

package/src/vcs/vcm/layer/czml.js

@@ -0,0 +1,141 @@
+import { CzmlDataSource } from '@vcmap/cesium';
+
+import DataSource from './dataSource.js';
+import { vcsLayerName } from './layerSymbols.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * @typedef {DataSourceOptions} CzmlOptions
+ * @property {string|undefined} sourceUri
+ * @api
+ */
+
+/**
+ * @class
+ * @export
+ * @extends {DataSource}
+ */
+class Czml extends DataSource {
+  static get className() { return 'vcs.vcm.layer.Czml'; }
+
+  /**
+   * @returns {CzmlOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...DataSource.getDefaultOptions(),
+      sourceUri: undefined,
+    };
+  }
+
+  /**
+   * @param {CzmlOptions} options
+   */
+  constructor(options) {
+    super(options);
+    this.dataSource = new CzmlDataSource();
+    this.entities = this.dataSource.entities;
+
+    const defaultOptions = Czml.getDefaultOptions();
+    /** @type {string|null} */
+    this.sourceUri = options.sourceUri || defaultOptions.sourceUri;
+    /** @type {Function} */
+    this._loadedResolve = () => {};
+    /** @type {Function} */
+    this._loadedReject = () => {};
+    /**
+     * A Promise resolving with the DataSource on load
+     * @type {Promise<void>}
+     * @api stable
+     */
+    this.loaded = new Promise(((resolve, reject) => {
+      this._loadedResolve = resolve;
+      this._loadedReject = reject;
+    }));
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  initialize() {
+    if (!this._initializedPromise) {
+      this._initializedPromise = this._loadData()
+        .then(() => super.initialize())
+        .then(() => {
+          this._loadedResolve();
+        })
+        .catch((err) => {
+          this._loadedReject(err);
+        });
+    }
+    return this._initializedPromise;
+  }
+
+  /**
+   * @returns {Promise<void>}
+   * @private
+   */
+  async _loadData() {
+    const loaded = /** @type {import("@vcmap/cesium").CzmlDataSource} */ (this.dataSource)
+      .load(this.url, this.sourceUri ? { sourceUri: this.sourceUri } : undefined);
+    await new Promise((resolve, reject) => {
+      loaded.then(resolve, reject);
+    });
+    this.entities.values.forEach((entity) => {
+      entity[vcsLayerName] = this.name;
+    });
+    this.clock = this.dataSource.clock;
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async reload() {
+    this.entities.removeAll();
+    await this._loadData();
+    await this.forceRedraw();
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {CzmlOptions}
+   */
+  getConfigObject() {
+    const config = /** @type {CzmlOptions} */ (super.getConfigObject());
+    if (this.sourceUri) {
+      config.sourceUri = this.sourceUri;
+    }
+    return config;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    super.destroy();
+    // @ts-ignore
+    // eslint-disable-next-line no-underscore-dangle
+    this.dataSource._entityCluster.destroy();
+    // @ts-ignore
+    // eslint-disable-next-line no-underscore-dangle
+    this.dataSource._entityCluster = null;
+    // @ts-ignore
+    // eslint-disable-next-line no-underscore-dangle
+    this.dataSource._entityCollection = null;
+    // @ts-ignore
+    // eslint-disable-next-line no-underscore-dangle
+    this.dataSource._changed = null;
+    // @ts-ignore
+    // eslint-disable-next-line no-underscore-dangle
+    this.dataSource._error = null;
+    // @ts-ignore
+    // eslint-disable-next-line no-underscore-dangle
+    this.dataSource._loading = null;
+    this.dataSource = null;
+  }
+}
+
+VcsClassRegistry.registerClass(Czml.className, Czml);
+export default Czml;