@vcmap/core 5.0.0-rc.0

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

@@ -0,0 +1,359 @@
+import {
+  Composite3DTileContent,
+  Cesium3DTileset,
+  Cesium3DTileColorBlendMode,
+  Matrix4,
+  Cartesian3,
+  Cartographic,
+  Rectangle,
+  Math as CesiumMath,
+} from '@vcmap/cesium';
+import { createEmpty } from 'ol/extent.js';
+import LayerImplementation from '../layerImplementation.js';
+import { vcsLayerName } from '../layerSymbols.js';
+import { getGlobalHider } from '../globalHider.js';
+import { originalStyle, updateOriginalStyle } from '../featureVisibility.js';
+import Projection from '../../util/projection.js';
+import { circleFromCenterRadius } from '../../util/geometryHelpers.js';
+
+/**
+ * @type {symbol}
+ */
+export const cesiumTilesetLastUpdated = Symbol('cesiumTilesetLastUpdated');
+
+/**
+ * @param {import("@vcmap/cesium").Cesium3DTileset} cesium3DTileset
+ * @returns {import("ol/extent").Extent} in mercator
+ */
+export function getExtentFromTileset(cesium3DTileset) {
+  if (!cesium3DTileset.ready) {
+    return createEmpty();
+  }
+  const { rectangle } = cesium3DTileset.root.boundingVolume;
+  if (rectangle) {
+    const scratchSW = Rectangle.southwest(rectangle);
+    const scratchNE = Rectangle.northeast(rectangle);
+    const mercatorSW = Projection.wgs84ToMercator([
+      CesiumMath.toDegrees(scratchSW.longitude),
+      CesiumMath.toDegrees(scratchSW.latitude),
+    ]);
+
+    const mercatorNE = Projection.wgs84ToMercator([
+      CesiumMath.toDegrees(scratchNE.longitude),
+      CesiumMath.toDegrees(scratchNE.latitude),
+    ]);
+    return /** @type {import("ol/extent").Extent} */ ([mercatorSW[0], mercatorSW[1], mercatorNE[0], mercatorNE[1]]);
+  }
+
+  const { center, radius } = cesium3DTileset.boundingSphere;
+  const cart = Cartographic.fromCartesian(center);
+  const mercatorCenter = Projection.wgs84ToMercator([
+    CesiumMath.toDegrees(cart.longitude),
+    CesiumMath.toDegrees(cart.latitude),
+    cart.height,
+  ]);
+  const circle = circleFromCenterRadius(mercatorCenter, radius);
+  return circle.getExtent();
+}
+
+/**
+ * represents the cesium implementation for a {@link CesiumTileset} layer.
+ * @class
+ * @export
+ * @extends {LayerImplementation<import("@vcmap/core").CesiumMap>}}
+ * @implements {FeatureLayerImplementation}
+ * @api stable
+ */
+class CesiumTilesetCesium extends LayerImplementation {
+  /** @type {string} */
+  static get className() { return 'vcs.vcm.layer.cesium.CesiumTilesetCesium'; }
+
+  /**
+   * @param {import("@vcmap/core").CesiumMap} map
+   * @param {CesiumTilesetImplementationOptions} options
+   */
+  constructor(map, options) {
+    super(map, options);
+
+    /** @type {import("@vcmap/cesium").Cesium3DTileset} */
+    this.cesium3DTileset = null;
+    /** @type {Object} */
+    this.tilesetOptions = options.tilesetOptions;
+    /** @type {import("@vcmap/cesium").ImagerySplitDirection} */
+    this.splitDirection = options.splitDirection;
+    /** @type {import("@vcmap/core").StyleItem} */
+    this.style = options.style;
+    /** @type {import("@vcmap/core").FeatureVisibility} */
+    this.featureVisibility = options.featureVisibility;
+    /** @type {Array<CesiumTilesetTilesetProperties>} */
+    this.tilesetProperties = options.tilesetProperties;
+    /** @type {import("@vcmap/cesium").Matrix4} */
+    this.modelMatrix = options.modelMatrix;
+    /** @type {import("ol/coordinate").Coordinate} */
+    this.offset = options.offset;
+    /**
+     * @type {Promise<void>}
+     * @private
+     */
+    this._initializedPromise = null;
+    /**
+     * @type {import("@vcmap/cesium").Cartesian3}
+     * @private
+     */
+    this._originalOrigin = null;
+    /**
+     * @type {number}
+     * @private
+     */
+    this._styleLastUpdated = Date.now();
+    this.globalHider = getGlobalHider();
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async initialize() {
+    if (!this._initializedPromise) {
+      /** @type {import("@vcmap/cesium").Cesium3DTileset} */
+      this.cesium3DTileset = new Cesium3DTileset(this.tilesetOptions);
+      if (this.tilesetProperties) {
+        this.tilesetProperties.forEach(({ key, value }) => {
+          this.cesium3DTileset[key] = value;
+        });
+      }
+      this.cesium3DTileset[vcsLayerName] = this.name;
+      this.cesium3DTileset.tileVisible.addEventListener(this.applyStyle.bind(this));
+      this.cesium3DTileset.tileUnload.addEventListener((tile) => {
+        delete tile[cesiumTilesetLastUpdated];
+      });
+
+      this._initializedPromise = new Promise((resolve, reject) => {
+        this.cesium3DTileset.readyPromise.then(() => { resolve(); }, reject);
+      });
+
+      await this._initializedPromise;
+      this._originalOrigin = Cartesian3.clone(this.cesium3DTileset.boundingSphere.center);
+
+      if (this.modelMatrix) {
+        this.cesium3DTileset.modelMatrix = this.modelMatrix;
+      } else if (this.offset) {
+        this._calculateOffset();
+      }
+      this.map.addPrimitiveCollection(this.cesium3DTileset);
+      await super.initialize();
+      if (this.splitDirection) {
+        this.updateSplitDirection(this.splitDirection);
+      }
+      this.updateStyle(this.style);
+    }
+    return this._initializedPromise;
+  }
+
+  /**
+   * @private
+   */
+  _calculateOffset() {
+    if (this.cesium3DTileset && !this.modelMatrix) {
+      if (!this.offset) {
+        this.cesium3DTileset.modelMatrix = Matrix4.IDENTITY;
+      } else {
+        const cartographicCenter = Cartographic.fromCartesian(this._originalOrigin);
+        cartographicCenter.longitude += CesiumMath.toRadians(this.offset[0]);
+        cartographicCenter.latitude += CesiumMath.toRadians(this.offset[1]);
+        cartographicCenter.height += this.offset[2];
+        const offset = Cartographic.toCartesian(cartographicCenter);
+        const translation = Cartesian3.subtract(offset, this._originalOrigin, offset);
+        this.cesium3DTileset.modelMatrix = Matrix4.fromTranslation(translation);
+      }
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/cesium").Matrix4=} modelMatrix
+   */
+  updateModelMatrix(modelMatrix) {
+    this.modelMatrix = modelMatrix;
+    if (this.cesium3DTileset) {
+      if (!this.modelMatrix) {
+        if (this.offset) {
+          this._calculateOffset();
+        } else {
+          this.cesium3DTileset.modelMatrix = Matrix4.IDENTITY;
+        }
+      } else {
+        this.cesium3DTileset.modelMatrix = modelMatrix;
+      }
+    }
+  }
+
+  /**
+   * @param {import("ol/coordinate").Coordinate=} offset
+   */
+  updateOffset(offset) {
+    this.offset = offset;
+    this._calculateOffset();
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async activate() {
+    await super.activate();
+    if (this.active) {
+      this.cesium3DTileset.show = true;
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  deactivate() {
+    super.deactivate();
+    if (this.cesium3DTileset) {
+      this.cesium3DTileset.show = false;
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/core").StyleItem} style
+   * @param {boolean=} silent
+   */
+  // eslint-disable-next-line no-unused-vars
+  updateStyle(style, silent) {
+    this.style = style;
+    if (this.initialized) {
+      this.cesium3DTileset.style = this.style.cesiumStyle;
+      if (this._onStyleChangeRemover) {
+        this._onStyleChangeRemover();
+      }
+      this._onStyleChangeRemover = this.style.styleChanged.addEventListener(() => {
+        this.cesium3DTileset.makeStyleDirty();
+        this._styleLastUpdated = Date.now();
+      });
+      this._styleLastUpdated = Date.now();
+      this.cesium3DTileset.readyPromise.then(() => {
+        if (this.cesium3DTileset.colorBlendMode !== this.style.colorBlendMode) {
+          // we only support replace and mix mode if the _3DTILESDIFFUSE Flag is set in the tileset
+          if (this.style.colorBlendMode !== Cesium3DTileColorBlendMode.HIGHLIGHT) {
+            // eslint-disable-next-line no-underscore-dangle
+            if (this.cesium3DTileset.extras && this.cesium3DTileset.extras._3DTILESDIFFUSE) {
+              this.cesium3DTileset.colorBlendMode = this.style.colorBlendMode;
+            }
+          } else {
+            this.cesium3DTileset.colorBlendMode = this.style.colorBlendMode;
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/cesium").ImagerySplitDirection} splitDirection
+   */
+  updateSplitDirection(splitDirection) {
+    const { splitScreen } = this.map;
+    if (splitScreen) { // XXX edge case: what if the map get splitScreen added later?
+      const previousClippingObject = splitScreen.getClippingObjectForDirection(this.splitDirection);
+      if (previousClippingObject) {
+        previousClippingObject.removeLayer(this.name);
+      }
+      this.splitDirection = splitDirection;
+      const currentClippingObject = splitScreen.getClippingObjectForDirection(this.splitDirection);
+      if (currentClippingObject) {
+        currentClippingObject.addLayer(this.name);
+      }
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/cesium").Cesium3DTile} tile
+   */
+  applyStyle(tile) {
+    if (tile.content instanceof Composite3DTileContent) {
+      for (let i = 0; i < tile.content.innerContents.length; i++) {
+        this.styleContent(tile.content.innerContents[i]);
+      }
+    } else {
+      this.styleContent(tile.content);
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/cesium").Cesium3DTileContent} content
+   */
+  styleContent(content) {
+    if (
+      !content[cesiumTilesetLastUpdated] ||
+      content[cesiumTilesetLastUpdated] < this.featureVisibility.lastUpdated ||
+      content[cesiumTilesetLastUpdated] < this.globalHider.lastUpdated ||
+      content[cesiumTilesetLastUpdated] < this._styleLastUpdated
+    ) {
+      const batchSize = content.featuresLength;
+      for (let batchId = 0; batchId < batchSize; batchId++) {
+        const feature = content.getFeature(batchId);
+        if (feature) {
+          let id = feature.getProperty('id');
+          if (!id) {
+            id = `${content.url}${batchId}`;
+          }
+
+          if (
+            this.featureVisibility.highlightedObjects[id] &&
+            !this.featureVisibility.hasHighlightFeature(id, feature)
+          ) {
+            this.featureVisibility.addHighlightFeature(id, feature);
+          }
+
+          if (this.featureVisibility.hiddenObjects[id] && !this.featureVisibility.hasHiddenFeature(id, feature)) {
+            this.featureVisibility.addHiddenFeature(id, feature);
+          }
+
+          if (this.globalHider.hiddenObjects[id] && !this.globalHider.hasFeature(id, feature)) {
+            this.globalHider.addFeature(id, feature);
+          }
+
+          if (
+            this._styleLastUpdated > content[cesiumTilesetLastUpdated] &&
+            feature[originalStyle] // can only be a color for cesium, so no check for undefined required
+          ) {
+            updateOriginalStyle(feature);
+          }
+        }
+      }
+      content[cesiumTilesetLastUpdated] = Date.now();
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    if (this.cesium3DTileset) {
+      if (this.map.initialized) {
+        const toRemove = this.cesium3DTileset;
+        this.map.removePrimitiveCollection(/** @type {undefined} */ (toRemove)); // cast to undefined do to missing inheritance
+      } else {
+        this.cesium3DTileset.destroy();
+      }
+
+      this.cesium3DTileset = null;
+    }
+
+    if (this._onStyleChangeRemover) {
+      this._onStyleChangeRemover();
+    }
+
+    if (this.splitDirection && this.map.splitScreen) {
+      const previousClippingObject = this.map.splitScreen.getClippingObjectForDirection(this.splitDirection);
+      if (previousClippingObject) {
+        previousClippingObject.removeLayer(this.name);
+      }
+    }
+
+    super.destroy();
+  }
+}
+
+export default CesiumTilesetCesium;

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

@@ -0,0 +1,95 @@
+import { removeFeatureFromMap, addPrimitiveToContext, removeArrayFromCollection } from './vectorContext.js';
+
+/**
+ * @class
+ */
+class ClusterContext {
+  /**
+   * @param {import("@vcmap/cesium").CustomDataSource} dataSource
+   */
+  constructor(dataSource) {
+    /** @type {import("@vcmap/cesium").EntityCollection} */
+    this.entities = dataSource.entities;
+    /** @type {Map<import("ol").Feature<import("ol/geom/Geometry").default>, Array<import("@vcmap/cesium").Entity>>} */
+    this.featureToBillboardMap = new Map();
+    /** @type {Map<import("ol").Feature<import("ol/geom/Geometry").default>, Array<import("@vcmap/cesium").Entity>>} */
+    this.featureToLabelMap = new Map();
+  }
+
+  /**
+   * @param {Array<import("@vcmap/cesium").Primitive|import("@vcmap/cesium").GroundPrimitive|import("@vcmap/cesium").GroundPolylinePrimitive|import("@vcmap/cesium").ClassificationPrimitive|import("@vcmap/cesium").Model>} primitives
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @param {boolean=} allowPicking
+   */
+  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  addPrimitives(primitives, feature, allowPicking) {}
+
+  /**
+   * @param {Array<Object>} billboardOptions
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @param {boolean=} allowPicking
+   */
+  addBillboards(billboardOptions, feature, allowPicking) {
+    addPrimitiveToContext(
+      billboardOptions.map(billboard => ({ billboard, position: billboard.position })),
+      feature,
+      allowPicking,
+      this.entities,
+      this.featureToBillboardMap,
+    );
+  }
+
+  /**
+   * @param {Array<Object>} labelOptions
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @param {boolean=} allowPicking
+   */
+  addLabels(labelOptions, feature, allowPicking) {
+    addPrimitiveToContext(
+      labelOptions.map(label => ({ label, position: label.position })),
+      feature,
+      allowPicking,
+      this.entities,
+      this.featureToLabelMap,
+    );
+  }
+
+  /**
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   */
+  removeFeature(feature) {
+    removeFeatureFromMap(feature, this.featureToBillboardMap, this.entities);
+    removeFeatureFromMap(feature, this.featureToLabelMap, this.entities);
+  }
+
+  /**
+   * Caches the current cesium resources for a feature, removing them from the feature map
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>}feature
+   * @returns {VectorContextFeatureCache}
+   */
+  createFeatureCache(feature) {
+    /** @type {VectorContextFeatureCache} */
+    const cache = {};
+    cache.billboards = this.featureToBillboardMap.get(feature);
+    this.featureToBillboardMap.delete(feature);
+    cache.labels = this.featureToLabelMap.get(feature);
+    this.featureToLabelMap.delete(feature);
+    return cache;
+  }
+
+  /**
+   * @param {VectorContextFeatureCache} cache
+   */
+  clearFeatureCache(cache) {
+    removeArrayFromCollection(this.entities, cache.billboards);
+    removeArrayFromCollection(this.entities, cache.labels);
+  }
+
+  clear() {
+    this.entities.removeAll();
+    this.featureToBillboardMap.clear();
+    this.featureToLabelMap.clear();
+  }
+}
+
+export default ClusterContext;

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

@@ -0,0 +1,171 @@
+import {
+  CustomDataSource,
+  BoundingSphereState,
+  BoundingSphere,
+  HeadingPitchRange,
+  Math as CesiumMath,
+} from '@vcmap/cesium';
+import LayerImplementation from '../layerImplementation.js';
+import { vcsLayerName } from '../layerSymbols.js';
+
+/**
+ * @param {import("@vcmap/cesium").EntityCollection} source
+ * @param {import("@vcmap/cesium").EntityCollection} destination
+ * @returns {Function}
+ */
+function synchronizeEntityCollections(source, destination) {
+  source.values.forEach((entity) => {
+    destination.add(entity);
+  });
+  return source.collectionChanged.addEventListener((c, added, removed) => {
+    added.forEach((e) => { destination.add(e); });
+    removed.forEach((e) => { destination.remove(e); });
+  });
+}
+
+/**
+ * @class
+ * @export
+ * @extends {LayerImplementation<import("@vcmap/core").CesiumMap>}}
+ */
+class DataSourceCesium extends LayerImplementation {
+  /**
+   * @param {import("@vcmap/core").CesiumMap} map
+   * @param {DataSourceImplementationOptions} options
+   */
+  constructor(map, options) {
+    super(map, options);
+
+    /**
+     * @type {import("@vcmap/cesium").CustomDataSource|import("@vcmap/cesium").CzmlDataSource}
+     */
+    this.dataSource = new CustomDataSource(this.name);
+    this.dataSource[vcsLayerName] = this.name;
+    /**
+     * @type {import("@vcmap/cesium").EntityCollection}
+     */
+    this.entities = options.entities;
+    /**
+     * @type {import("@vcmap/cesium").DataSourceClock|undefined}
+     */
+    this.clock = options.clock;
+    /**
+     * @type {Function}
+     * @private
+     */
+    this._collectionListener = () => {};
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async initialize() {
+    if (!this.initialized) {
+      this._collectionListener = synchronizeEntityCollections(this.entities, this.dataSource.entities);
+      await this.map.addDataSource(this.dataSource);
+    }
+    await super.initialize();
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async activate() {
+    await super.activate();
+    if (this.active) {
+      this.dataSource.show = true;
+    }
+    if (this.clock) {
+      this.map.setDataSourceDisplayClock(this.clock);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  deactivate() {
+    super.deactivate();
+    this.dataSource.show = false;
+    if (this.clock) {
+      this.map.unsetDataSourceDisplayClock(this.clock);
+    }
+  }
+
+  /**
+   * @param {string} id
+   */
+  flyToEntity(id) {
+    if (this.active) {
+      const entity = this.dataSource.entities.getById(id);
+      if (!entity) {
+        this.getLogger().warning('could not find entity on this layer');
+        return;
+      }
+      const dataSource = this.map.getDataSourceDisplay();
+      const scene = this.map.getScene();
+      const { camera } = scene;
+
+      const bSphere = new BoundingSphere();
+
+      const viewpoint = this.map.getViewPointSync();
+      const { heading, pitch } = viewpoint;
+      const offset = new HeadingPitchRange(
+        CesiumMath.toRadians(heading),
+        CesiumMath.toRadians(pitch < -45 ? pitch : -45),
+        undefined,
+      );
+      let listener;
+      let count = 0;
+
+      const onRender = () => {
+        const state = dataSource.getBoundingSphere(entity, true, bSphere);
+        if (state === BoundingSphereState.PENDING) {
+          return;
+        }
+
+        if (state === BoundingSphereState.FAILED) {
+          count += 1;
+          if (count > 3) {
+            listener();
+          }
+          return;
+        }
+
+        camera.flyToBoundingSphere(bSphere, {
+          duration: 1,
+          offset,
+        });
+        listener();
+      };
+
+      const datas = dataSource.defaultDataSource;
+      if (datas.isLoading) {
+        const loadedListener = datas.loadingEvent.addEventListener(() => {
+          listener = scene.postRender.addEventListener(onRender);
+          loadedListener();
+        });
+      } else {
+        listener = scene.postRender.addEventListener(onRender);
+      }
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    if (this.map.initialized && !this.isDestroyed) {
+      this.map.removeDataSource(this.dataSource);
+    }
+    this._collectionListener();
+    this.dataSource.entities.removeAll();
+    if (this.clock) {
+      this.map.unsetDataSourceDisplayClock(this.clock);
+    }
+    super.destroy();
+  }
+}
+
+export default DataSourceCesium;

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

@@ -0,0 +1,29 @@
+import { OpenStreetMapImageryProvider, ImageryLayer as CesiumImageryLayer } from '@vcmap/cesium';
+import RasterLayerCesium from './rasterLayerCesium.js';
+
+/**
+ * represents a specific OpenStreetMap layer for cesium.
+ * @class
+ * @export
+ * @extends {RasterLayerCesium}
+ */
+class OpenStreetMapCesium extends RasterLayerCesium {
+  static get className() { return 'vcs.vcm.layer.cesium.OpenStreetMapCesium'; }
+
+  /**
+   * @inheritDoc
+   * @returns {import("@vcmap/cesium").ImageryLayer}
+   */
+  getCesiumLayer() {
+    return new CesiumImageryLayer(
+      new OpenStreetMapImageryProvider({ maximumLevel: this.maxLevel }),
+      {
+        alpha: this.opacity,
+        splitDirection: this.splitDirection,
+      },
+    );
+  }
+}
+
+
+export default OpenStreetMapCesium;

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

@@ -0,0 +1,58 @@
+import { Cesium3DTileStyle } from '@vcmap/cesium';
+import CesiumTilesetCesium from './cesiumTilesetCesium.js';
+
+/**
+ * represents a specific PointCloud layer for cesium.
+ * <h3>Config Parameter</h3>
+ * <ul>
+ *  <li>url: string: url to the p3dm dataset
+ *  <li>pointSize: number: size of the points to display
+ * </ul>
+ *
+ * @class
+ * @export
+ * @extends {CesiumTilesetCesium}
+ * @api stable
+ */
+class PointCloudCesium extends CesiumTilesetCesium {
+  static get className() { return 'vcs.vcm.layer.cesium.PointCloud'; }
+
+  /**
+   * @param {import("@vcmap/core").CesiumMap} map
+   * @param {PointCloudImplementationOptions} options
+   */
+  constructor(map, options) {
+    super(map, options);
+    /** @type {string|number} */
+    this.pointSize = options.pointSize;
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async initialize() {
+    await super.initialize();
+    this.updatePointSize(this.pointSize);
+  }
+
+  /**
+   * @param {string|number} size
+   */
+  updatePointSize(size) {
+    this.pointSize = size;
+    if (this.initialized) {
+      if (this.cesium3DTileset.style) {
+        // @ts-ignore
+        this.cesium3DTileset.style.pointSize = this.pointSize;
+        this.cesium3DTileset.makeStyleDirty();
+      } else if (this.pointSize != null) {
+        this.cesium3DTileset.style = new Cesium3DTileStyle({
+          pointSize: this.pointSize.toString(),
+        });
+      }
+    }
+  }
+}
+
+export default PointCloudCesium;