@vcmap/core 5.0.0-rc.21 → 5.0.0-rc.23

package/src/map/cesiumMap.js

@@ -27,13 +27,12 @@ import {
   KeyboardEventModifier,
   ScreenSpaceEventType,
   Cesium3DTileset,
-  ExperimentalFeatures,
 } from '@vcmap/cesium';
 
 import { check, checkMaybe } from '@vcsuite/check';
 import { parseBoolean, parseInteger } from '@vcsuite/parsers';
 import VcsMap from './vcsMap.js';
-import ViewPoint from '../util/viewpoint.js';
+import Viewpoint from '../util/viewpoint.js';
 import Projection, { mercatorProjection } from '../util/projection.js';
 import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
 import { vcsLayerName } from '../layer/layerSymbols.js';
@@ -51,6 +50,12 @@ import { mapClassRegistry } from '../classRegistry.js';
  * @api
  */
 
+/**
+ * @typedef {Object} CesiumMapEvent
+ * @property {import("@vcmap/cesium").Scene} scene
+ * @property {import("@vcmap/cesium").JulianDate} time
+ */
+
 /**
  * Ensures, a primitive/imageryLayer/entity is part of a collection and placed at the correct location
  * @param {import("@vcmap/cesium").PrimitiveCollection|import("@vcmap/cesium").ImageryLayerCollection} cesiumCollection
@@ -197,8 +202,6 @@ function setDebugOnVisualizations(visualizations, debug) {
     });
 }
 
-ExperimentalFeatures.enableModelExperimental = false; // TODO check on release
-
 /**
  * Cesium Globe Map Class (3D map)
  * @class
@@ -318,21 +321,11 @@ class CesiumMap extends VcsMap {
      * @private
      */
     this._cameraLimiterOptions = options.cameraLimiter || defaultOptions.cameraLimiter;
-    /**
-     * @type {Function}
-     * @private
-     */
-    this._terrainProviderChangedListener = null;
     /**
      * @type {Function}
      * @private
      */
     this._preUpdateListener = null;
-    /**
-     * @type {Function}
-     * @private
-     */
-    this._clockTickListener = null;
     /**
      * @type {Function}
      * @private
@@ -340,10 +333,10 @@ class CesiumMap extends VcsMap {
     this._clockSyncListener = null;
 
     /**
-     * @type {Function}
+     * @type {Array<function():void>}
      * @private
      */
-    this._removeClusterClockTickListener = null;
+    this._listeners = [];
 
     /**
      * @type {boolean}
@@ -516,11 +509,11 @@ class CesiumMap extends VcsMap {
 
       const { clock } = this._cesiumWidget;
       clock.shouldAnimate = true;
-      this._clockTickListener = clock.onTick.addEventListener(() => {
+      this._listeners.push(clock.onTick.addEventListener(() => {
         this.dataSourceDisplayClock.tick();
         const time = this.dataSourceDisplayClock.currentTime;
         this.dataSourceDisplay.update(time);
-      });
+      }));
 
       // deactivate cesium Requestthrottling let the browser manage that
       // RequestScheduler.throttleRequests = false;
@@ -531,7 +524,7 @@ class CesiumMap extends VcsMap {
       this._cesiumWidget.scene.globe.depthTestAgainstTerrain = true;
       this._cesiumWidget.scene.highDynamicRange = false;
       // this._cesiumWidget.scene.logarithmicDepthBuffer = false; // TODO observe this
-      this._cesiumWidget.scene.imagerySplitPosition = 0.5;
+      this._cesiumWidget.scene.splitPosition = 0.5;
 
       this._cesiumWidget.scene.globe.enableLighting = this.enableLightning;
 
@@ -559,8 +552,12 @@ class CesiumMap extends VcsMap {
 
       this.defaultTerrainProvider = this._cesiumWidget.scene.terrainProvider;
       this._terrainProvider = this.defaultTerrainProvider;
-      this._terrainProviderChangedListener =
-        this._cesiumWidget.scene.terrainProviderChanged.addEventListener(this._terrainProviderChanged.bind(this));
+      this._listeners.push(this._cesiumWidget.scene.terrainProviderChanged
+        .addEventListener(this._terrainProviderChanged.bind(this)));
+
+      this._listeners.push(this._cesiumWidget.scene.postRender.addEventListener((eventScene, time) => {
+        this.postRender.raiseEvent({ map: this, originalEvent: { scene: eventScene, time } });
+      }));
       if (this._debug) {
         this._setDebug();
       }
@@ -612,17 +609,17 @@ class CesiumMap extends VcsMap {
 
   /**
    * @inheritDoc
-   * @returns {Promise<null|ViewPoint>}
+   * @returns {Promise<null|Viewpoint>}
    */
-  async getViewPoint() {
-    return this.getViewPointSync();
+  async getViewpoint() {
+    return this.getViewpointSync();
   }
 
   /**
    * @inheritDoc
-   * @returns {ViewPoint|null}
+   * @returns {Viewpoint|null}
    */
-  getViewPointSync() {
+  getViewpointSync() {
     if (!this._cesiumWidget || !this._cesiumWidget.scene || !this.target) {
       return null;
     }
@@ -648,7 +645,7 @@ class CesiumMap extends VcsMap {
       CesiumMath.toDegrees(cameraPositionCartographic.latitude),
       cameraPositionCartographic.height,
     ];
-    return new ViewPoint({
+    return new Viewpoint({
       groundPosition,
       cameraPosition,
       distance,
@@ -659,12 +656,12 @@ class CesiumMap extends VcsMap {
   }
 
   /**
-   * @param {ViewPoint} viewpoint
+   * @param {Viewpoint} viewpoint
    * @param {number=} optMaximumHeight
    * @returns {Promise<void>}
    * @inheritDoc
    */
-  async gotoViewPoint(viewpoint, optMaximumHeight) {
+  async gotoViewpoint(viewpoint, optMaximumHeight) {
     if (this.movementDisabled || !viewpoint.isValid()) {
       return;
     }
@@ -883,10 +880,9 @@ class CesiumMap extends VcsMap {
       visualizersCallback,
     });
 
-    this._removeClusterClockTickListener =
-      this._cesiumWidget.clock.onTick.addEventListener((clock) => {
-        this._clusterDataSourceDisplay.update(clock.currentTime);
-      });
+    this._listeners.push(this._cesiumWidget.clock.onTick.addEventListener((clock) => {
+      this._clusterDataSourceDisplay.update(clock.currentTime);
+    }));
 
     return dataSourceCollection;
   }
@@ -1135,17 +1131,12 @@ class CesiumMap extends VcsMap {
       this.screenSpaceEventHandler.destroy();
       this.screenSpaceEventHandler = null;
     }
-    if (this._terrainProviderChangedListener) {
-      this._terrainProviderChangedListener();
-      this._terrainProviderChangedListener = null;
-    }
+    this._listeners.forEach((cb) => { cb(); });
+    this._listeners = [];
+
     this._terrainProvider = null;
     this.defaultTerrainProvider = null;
 
-    if (this._clockTickListener) {
-      this._clockTickListener();
-      this._clockTickListener = null;
-    }
 
     if (this._clockSyncListener) {
       this._clockSyncListener();
@@ -1160,9 +1151,6 @@ class CesiumMap extends VcsMap {
     if (this._cameraLimiter) {
       this._cameraLimiter = null;
     }
-    if (this._removeClusterClockTickListener) {
-      this._removeClusterClockTickListener();
-    }
 
     [...this.layerCollection].forEach((l) => { l.removedFromMap(this); });
 

package/src/map/obliqueMap.js

@@ -5,7 +5,7 @@ import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import Extent from '../util/extent.js';
 import { mercatorProjection, wgs84Projection } from '../util/projection.js';
 import { getResolutionOptions, getZoom } from '../layer/oblique/obliqueHelpers.js';
-import ViewPoint from '../util/viewpoint.js';
+import Viewpoint from '../util/viewpoint.js';
 import BaseOLMap from './baseOLMap.js';
 import VcsMap from './vcsMap.js';
 import VcsEvent from '../vcsEvent.js';
@@ -42,10 +42,10 @@ const defaultCollection = new DefaultObliqueCollection();
 
 /**
  * returns the direction which matches the heading of the viewpoint
- * @param {ViewPoint} viewpoint
+ * @param {Viewpoint} viewpoint
  * @returns {import("@vcmap/core").ObliqueViewDirection}
  */
-export function getViewDirectionFromViewPoint(viewpoint) {
+export function getViewDirectionFromViewpoint(viewpoint) {
   const { heading } = viewpoint;
   let direction = ViewDirection.NORTH;
   if (heading >= 45 && heading < 135) {
@@ -59,7 +59,7 @@ export function getViewDirectionFromViewPoint(viewpoint) {
 }
 
 /**
- * @param {ViewPoint} viewpoint
+ * @param {Viewpoint} viewpoint
  * @returns {import("ol/coordinate").Coordinate}
  * @private
  */
@@ -254,14 +254,14 @@ class ObliqueMap extends BaseOLMap {
   }
 
   /**
-   * @param {ViewPoint} viewpoint
+   * @param {Viewpoint} viewpoint
    * @returns {Promise<boolean>}
    * @api
    */
   async canShowViewpoint(viewpoint) {
     await this.initialize();
     if (this.collection) {
-      const viewDirection = getViewDirectionFromViewPoint(viewpoint);
+      const viewDirection = getViewDirectionFromViewpoint(viewpoint);
       const mercatorCoordinates = getMercatorViewpointCenter(viewpoint);
       return this.collection.hasImageAtCoordinate(mercatorCoordinates, viewDirection);
     }
@@ -305,7 +305,7 @@ class ObliqueMap extends BaseOLMap {
   /**
    * Sets a new oblique collection
    * @param {ObliqueCollection} obliqueCollection
-   * @param {ViewPoint=} viewpoint
+   * @param {Viewpoint=} viewpoint
    * @returns {Promise<void>}
    * @api
    */
@@ -331,7 +331,7 @@ class ObliqueMap extends BaseOLMap {
   /**
    * Sets a new oblique collection
    * @param {ObliqueCollection} obliqueCollection
-   * @param {ViewPoint=} viewpoint
+   * @param {Viewpoint=} viewpoint
    * @returns {Promise<void>}
    * @private
    */
@@ -342,14 +342,14 @@ class ObliqueMap extends BaseOLMap {
       this._setCollection(defaultCollection);
     });
     await obliqueCollection.load();
-    const vp = viewpoint || await this.getViewPoint();
+    const vp = viewpoint || await this.getViewpoint();
     if (this._loadingCollection !== obliqueCollection) {
       return;
     }
     this._obliqueProvider.setCollection(obliqueCollection);
     this.collectionChanged.raiseEvent(obliqueCollection);
     if (vp) {
-      await this.gotoViewPoint(vp);
+      await this.gotoViewpoint(vp);
     }
   }
 
@@ -372,10 +372,10 @@ class ObliqueMap extends BaseOLMap {
   }
 
   /**
-   * @returns {Promise<ViewPoint|null>}
+   * @returns {Promise<Viewpoint|null>}
    * @inheritDoc
    */
-  async getViewPoint() {
+  async getViewpoint() {
     const image = this.currentImage;
     if (!image) {
       return null;
@@ -393,9 +393,9 @@ class ObliqueMap extends BaseOLMap {
 
   /**
    * @inheritDoc
-   * @returns {ViewPoint|null}
+   * @returns {Viewpoint|null}
    */
-  getViewPointSync() {
+  getViewpointSync() {
     const image = this.currentImage;
     if (!image) {
       return null;
@@ -416,7 +416,7 @@ class ObliqueMap extends BaseOLMap {
 
   /**
    * @param {import("ol/coordinate").Coordinate} groundPosition
-   * @returns {ViewPoint}
+   * @returns {Viewpoint}
    * @private
    */
   _computeViewpointInternal(groundPosition) {
@@ -432,7 +432,7 @@ class ObliqueMap extends BaseOLMap {
     const avgHeight = groundPosition[2] || image.averageHeight;
     const cameraHeight = height + avgHeight;
 
-    return new ViewPoint({
+    return new Viewpoint({
       cameraPosition: [groundPosition[0], groundPosition[1], cameraHeight],
       groundPosition,
       heading: defaultHeadings[image.viewDirection],
@@ -443,16 +443,16 @@ class ObliqueMap extends BaseOLMap {
   }
 
   /**
-   * @param {ViewPoint} viewpoint
+   * @param {Viewpoint} viewpoint
    * @returns {Promise<void>}
    * @inheritDoc
    */
-  async gotoViewPoint(viewpoint) {
+  async gotoViewpoint(viewpoint) {
     if (this.movementDisabled || !this._obliqueProvider || !viewpoint.isValid()) {
       return;
     }
 
-    const viewDirection = getViewDirectionFromViewPoint(viewpoint);
+    const viewDirection = getViewDirectionFromViewpoint(viewpoint);
     const mercatorCoordinates = getMercatorViewpointCenter(viewpoint);
     const { distance } = viewpoint;
     await this._obliqueProvider.setView(mercatorCoordinates, viewDirection);

package/src/map/openlayersMap.js

@@ -4,7 +4,7 @@ import { getTransform } from 'ol/proj.js';
 import { inAndOut } from 'ol/easing.js';
 import { boundingExtent, containsXY } from 'ol/extent.js';
 import { parseBoolean } from '@vcsuite/parsers';
-import ViewPoint from '../util/viewpoint.js';
+import Viewpoint from '../util/viewpoint.js';
 import BaseOLMap from './baseOLMap.js';
 import VcsMap from './vcsMap.js';
 import { mapClassRegistry } from '../classRegistry.js';
@@ -65,17 +65,17 @@ class OpenlayersMap extends BaseOLMap {
 
   /**
    * @inheritDoc
-   * @returns {Promise<ViewPoint>}
+   * @returns {Promise<Viewpoint>}
    */
-  async getViewPoint() {
-    return this.getViewPointSync();
+  async getViewpoint() {
+    return this.getViewpointSync();
   }
 
   /**
    * @inheritDoc
-   * @returns {ViewPoint}
+   * @returns {Viewpoint}
    */
-  getViewPointSync() {
+  getViewpointSync() {
     const view = this.olMap.getView();
     const coord = view.getCenter();
     const toLatLon = getTransform(view.getProjection(), 'EPSG:4326');
@@ -100,7 +100,7 @@ class OpenlayersMap extends BaseOLMap {
     // don't add 0;
     const groundPosition = latlon; // .concat([0]);
     const pitch = -90;
-    return new ViewPoint({
+    return new Viewpoint({
       groundPosition,
       pitch,
       heading,
@@ -109,16 +109,17 @@ class OpenlayersMap extends BaseOLMap {
   }
 
   /**
-   * @param {ViewPoint} viewpoint
+   * @param {Viewpoint} viewpoint
    * @returns {Promise<void>}
    * @inheritDoc
    */
-  gotoViewPoint(viewpoint) {
+  gotoViewpoint(viewpoint) {
     if (this.movementDisabled || !viewpoint.isValid()) {
       return Promise.resolve();
     }
+    let { heading } = viewpoint;
     if (this.fixedNorthOrientation) {
-      viewpoint.heading = 0;
+      heading = 0;
     }
     const view = this.olMap.getView();
     const fromLatLon = getTransform('EPSG:4326', view.getProjection());
@@ -148,8 +149,8 @@ class OpenlayersMap extends BaseOLMap {
 
     if (viewpoint.animate) {
       let rotation = 0;
-      if (!this.fixedNorthOrientation && viewpoint.heading != null) {
-        rotation = -CesiumMath.toRadians(viewpoint.heading);
+      if (!this.fixedNorthOrientation && heading != null) {
+        rotation = -CesiumMath.toRadians(heading);
       }
       return new Promise((resolve) => {
         view.animate({
@@ -163,8 +164,8 @@ class OpenlayersMap extends BaseOLMap {
     } else {
       view.setCenter(center);
       view.setResolution(resolution);
-      if (!this.fixedNorthOrientation && viewpoint.heading != null) {
-        view.setRotation(-CesiumMath.toRadians(viewpoint.heading));
+      if (!this.fixedNorthOrientation && heading != null) {
+        view.setRotation(-CesiumMath.toRadians(heading));
       }
     }
     return Promise.resolve();

package/src/map/vcsMap.js

@@ -31,6 +31,12 @@ import { mapClassRegistry } from '../classRegistry.js';
  * @api stable
  */
 
+/**
+ * @typedef {Object} VcsMapRenderEvent
+ * @property {VcsMap} map
+ * @property {import("ol").MapEvent|CesiumMapEvent} originalEvent
+ */
+
 /**
  * @type {Object}
  */
@@ -152,6 +158,12 @@ class VcsMap extends VcsObject {
      * @api
      */
     this.splitScreen = null;
+
+    /**
+     * @type {VcsEvent<VcsMapRenderEvent>}
+     * @private
+     */
+    this._postRender = new VcsEvent();
   }
 
   /**
@@ -217,6 +229,15 @@ class VcsMap extends VcsObject {
     this._setLayerCollectionListeners();
   }
 
+  /**
+   * An event raised on the maps post render
+   * @type {VcsEvent<VcsMapRenderEvent>}
+   * @readonly
+   */
+  get postRender() {
+    return this._postRender;
+  }
+
   /**
    * @private
    */
@@ -240,7 +261,7 @@ class VcsMap extends VcsObject {
 
   /**
    * Determines whether this map can show this viewpoint. Returns true in any other map then {@link Oblique}
-   * @param {import("@vcmap/core").ViewPoint} viewpoint
+   * @param {import("@vcmap/core").Viewpoint} viewpoint
    * @returns {Promise<boolean>}
    * @api
    */
@@ -407,7 +428,7 @@ class VcsMap extends VcsObject {
   }
 
   /**
-   * prevent all movement, including navigation controls, gotoViewPoint & setting of oblique images
+   * prevent all movement, including navigation controls, gotoViewpoint & setting of oblique images
    * @param {boolean} prevent
    * @api
    */
@@ -417,14 +438,14 @@ class VcsMap extends VcsObject {
 
   /**
    * sets the view to the given viewpoint
-   * @param {import("@vcmap/core").ViewPoint} viewpoint
+   * @param {import("@vcmap/core").Viewpoint} viewpoint
    * @param {number=} optMaximumHeight during animation (can be used to get rid of the bunny hop)
-   * gotoViewPoint
+   * gotoViewpoint
    * @returns {Promise<void>}
    * @api stable
    */
   // eslint-disable-next-line no-unused-vars,class-methods-use-this
-  gotoViewPoint(viewpoint, optMaximumHeight) {
+  gotoViewpoint(viewpoint, optMaximumHeight) {
     return Promise.resolve();
   }
 
@@ -432,20 +453,20 @@ class VcsMap extends VcsObject {
   /**
    * Returns the most precise viewpoint possible in ObliqueMap.
    * @api
-   * @returns {Promise<import("@vcmap/core").ViewPoint|null>}
+   * @returns {Promise<import("@vcmap/core").Viewpoint|null>}
    */
   // eslint-disable-next-line class-methods-use-this
-  async getViewPoint() {
+  async getViewpoint() {
     return null;
   }
 
   /**
    * Returns an approximate viewpoint in ObliqueMap, not requesting terrain.
    * @api
-   * @returns {import("@vcmap/core").ViewPoint|null}
+   * @returns {import("@vcmap/core").Viewpoint|null}
    */
   // eslint-disable-next-line class-methods-use-this
-  getViewPointSync() {
+  getViewpointSync() {
     return null;
   }
 
@@ -523,6 +544,7 @@ class VcsMap extends VcsObject {
       this.pointerInteractionEvent = null;
     }
     this._layerCollection = null;
+    this._postRender.destroy();
   }
 }
 

package/src/oblique/obliqueProvider.js

@@ -10,7 +10,7 @@ import VcsEvent from '../vcsEvent.js';
 import { isDefaultImageSymbol } from './defaultObliqueCollection.js';
 
 /**
- * @typedef {Object} ObliqueViewPoint
+ * @typedef {Object} ObliqueViewpoint
  * @property {import("ol/coordinate").Coordinate} center - in mercator
  * @property {number} zoom
  * @property {import("@vcmap/core").ObliqueViewDirection} direction
@@ -399,7 +399,7 @@ class ObliqueProvider {
 
   /**
    * Returns a viewpoint for the currently set view.
-   * @returns {Promise<ObliqueViewPoint>}
+   * @returns {Promise<ObliqueViewpoint>}
    * @api
    */
   async getView() {

package/src/style/declarativeStyleItem.js

@@ -142,12 +142,8 @@ class DeclarativeStyleItem extends StyleItem {
   toJSON() {
     const config = /** @type {DeclarativeStyleItemOptions} */ (super.toJSON());
 
-    const styleOptions = this.cesiumStyle.ready ?
-      this.cesiumStyle.style :
-      this.styleOptions;
-
     config.declarativeStyle = Object.fromEntries(
-      Object.entries(styleOptions)
+      Object.entries(this.cesiumStyle.style)
         .filter(([, value]) => value != null)
         .map(([key, value]) => {
           if (is(value, Boolean)) {
@@ -181,9 +177,7 @@ class DeclarativeStyleItem extends StyleItem {
    */
   assign(styleItem) {
     super.assign(styleItem);
-    this._styleOptions = styleItem.cesiumStyle.ready ?
-      styleItem.cesiumStyle.style :
-      styleItem.styleOptions;
+    this._styleOptions = styleItem.cesiumStyle.style;
 
     this.cesiumStyle = new Cesium3DTileStyle(this._styleOptions);
     return this;