@vcmap/core 6.2.2 → 6.3.0-rc.1

package/src/map/obliqueMap.ts

@@ -110,8 +110,8 @@ class ObliqueMap extends BaseOLMap {
   }
 
   constructor(options: ObliqueOptions) {
-    super(options);
     const defaultOptions = ObliqueMap.getDefaultOptions();
+    super({ ...defaultOptions, ...options });
     this._loadingCollection = null;
 
     this._mapChangeEvent = options.changeOnMoveEnd ? 'moveend' : 'postrender';
@@ -483,9 +483,8 @@ class ObliqueMap extends BaseOLMap {
     return containsXY(transformedBbox, coords[0], coords[1]);
   }
 
-  toJSON(): ObliqueOptions {
-    const config: ObliqueOptions = super.toJSON();
-    const defaultOptions = ObliqueMap.getDefaultOptions();
+  toJSON(defaultOptions = ObliqueMap.getDefaultOptions()): ObliqueOptions {
+    const config: ObliqueOptions = super.toJSON(defaultOptions);
 
     if (this.mapChangeEvent === 'moveend') {
       config.changeOnMoveEnd = true;

package/src/map/openlayersMap.ts

@@ -35,9 +35,8 @@ class OpenlayersMap extends BaseOLMap {
    * @param  options
    */
   constructor(options: OpenlayersOptions) {
-    super(options);
-
     const defaultOptions = OpenlayersMap.getDefaultOptions();
+    super({ ...defaultOptions, ...options });
 
     this.fixedNorthOrientation = parseBoolean(
       options.fixedNorthOrientation,
@@ -190,10 +189,11 @@ class OpenlayersMap extends BaseOLMap {
     return containsXY(boundingExtent(bbox), coords[0], coords[1]);
   }
 
-  toJSON(): OpenlayersOptions {
-    const config: OpenlayersOptions = super.toJSON();
+  toJSON(
+    defaultOptions = OpenlayersMap.getDefaultOptions(),
+  ): OpenlayersOptions {
+    const config: OpenlayersOptions = super.toJSON(defaultOptions);
 
-    const defaultOptions = OpenlayersMap.getDefaultOptions();
     if (this.fixedNorthOrientation !== defaultOptions.fixedNorthOrientation) {
       config.fixedNorthOrientation = this.fixedNorthOrientation;
     }

package/src/map/panoramaMap.ts

@@ -1,9 +1,7 @@
-import type { JulianDate, Cesium3DTileset, Scene } from '@vcmap-cesium/engine';
+import { parseNumber } from '@vcsuite/parsers';
 import {
   Color,
-  PrimitiveCollection,
   CesiumWidget,
-  ScreenSpaceEventHandler,
   ShadowMode,
   Math as CesiumMath,
 } from '@vcmap-cesium/engine';
@@ -13,20 +11,15 @@ import type { PanoramaImage } from '../panorama/panoramaImage.js';
 import { mapClassRegistry } from '../classRegistry.js';
 import type { PanoramaImageView } from '../panorama/panoramaImageView.js';
 import { createPanoramaImageView } from '../panorama/panoramaImageView.js';
-import {
-  getViewpointFromScene,
-  setupCesiumInteractions,
-} from './cesiumMapHelpers.js';
 import VcsEvent from '../vcsEvent.js';
 import type { PanoramaCameraController } from '../panorama/panoramaCameraController.js';
 import { createPanoramaCameraController } from '../panorama/panoramaCameraController.js';
 import type Viewpoint from '../util/viewpoint.js';
-import { ensureInCollection, indexChangedOnPrimitive } from './cesiumMap.js';
 import Projection from '../util/projection.js';
-import type Layer from '../layer/layer.js';
 import { defaultCursorColor } from '../panorama/panoramaTileMaterial.js';
 import LayerState from '../layer/layerState.js';
 import type PanoramaDatasetLayer from '../layer/panoramaDatasetLayer.js';
+import BaseCesiumMap from './baseCesiumMap.js';
 
 export type PanoramaMapOptions = VcsMapOptions & {
   /**
@@ -37,9 +30,13 @@ export type PanoramaMapOptions = VcsMapOptions & {
    * Css color string to use for the cursor color.
    */
   cursorColor?: string;
+  /**
+   * The default field of view in degrees when loading a new image.
+   */
+  defaultFov?: number;
 };
 
-export default class PanoramaMap extends VcsMap {
+export default class PanoramaMap extends BaseCesiumMap {
   static get className(): string {
     return 'PanoramaMap';
   }
@@ -50,6 +47,8 @@ export default class PanoramaMap extends VcsMap {
       overlayNaNColor: 'rgba(255, 0, 0, 1)',
       cursorColor: defaultCursorColor,
       fallbackToCurrentMap: false,
+      layerTypes: ['PanoramaDatasetLayer', 'TerrainLayer', 'VectorLayer'],
+      defaultFov: 90,
     };
   }
 
@@ -59,24 +58,20 @@ export default class PanoramaMap extends VcsMap {
    */
   readonly currentImageChanged = new VcsEvent<PanoramaImage | undefined>();
 
-  private _cesiumWidget: CesiumWidget | undefined;
-
   private _imageView: PanoramaImageView | undefined;
 
   private _currentImage: PanoramaImage | undefined;
 
-  private _screenSpaceListener: (() => void) | undefined;
-
-  private _screenSpaceEventHandler: ScreenSpaceEventHandler | undefined;
-
   private _cameraController: PanoramaCameraController | undefined;
 
-  private _listeners: (() => void)[] = [];
+  protected _listeners: (() => void)[] = [];
 
   private _overlayNaNColor: string | undefined;
 
   private _cursorColor: string | undefined;
 
+  private _defaultFov = 90;
+
   constructor(options: PanoramaMapOptions) {
     const defaultOptions = PanoramaMap.getDefaultOptions();
     super({ ...defaultOptions, ...options });
@@ -84,16 +79,10 @@ export default class PanoramaMap extends VcsMap {
     this._overlayNaNColor =
       options.overlayNaNColor ?? defaultOptions.overlayNaNColor;
     this._cursorColor = options.cursorColor ?? defaultOptions.cursorColor;
-  }
-
-  /**
-   * Internal API. throws if not properly initialized
-   */
-  get screenSpaceEventHandler(): ScreenSpaceEventHandler {
-    if (!this._screenSpaceEventHandler) {
-      throw new Error('ScreenSpaceEventHandler not initialized');
-    }
-    return this._screenSpaceEventHandler;
+    this._defaultFov = parseNumber(
+      options.defaultFov,
+      defaultOptions.defaultFov,
+    );
   }
 
   get currentPanoramaImage(): PanoramaImage | undefined {
@@ -122,10 +111,27 @@ export default class PanoramaMap extends VcsMap {
     return this._cameraController;
   }
 
+  get defaultFov(): number {
+    if (!this._imageView) {
+      return this._defaultFov;
+    }
+    return CesiumMath.toDegrees(this._imageView.defaultFov);
+  }
+
+  /**
+   * Sets the default field of view in degrees when loading a new image.
+   */
+  set defaultFov(fov: number) {
+    this._defaultFov = fov;
+    if (this._imageView) {
+      this._imageView.defaultFov = CesiumMath.toRadians(fov);
+    }
+  }
+
   /**
    * Access to the raw cesium widget for finer control. Throws if not properly initialized.
    */
-  getCesiumWidget(): CesiumWidget {
+  override getCesiumWidget(): CesiumWidget {
     if (!this._cesiumWidget) {
       throw new Error('CesiumWidget not initialized');
     }
@@ -134,31 +140,40 @@ export default class PanoramaMap extends VcsMap {
 
   override async initialize(): Promise<void> {
     if (!this.initialized) {
-      this._cesiumWidget = new CesiumWidget(this.mapElement, {
+      const cesiumWidget = new CesiumWidget(this.mapElement, {
         requestRenderMode: false,
         scene3DOnly: true,
         baseLayer: false,
         shadows: false,
         skyBox: false,
         skyAtmosphere: false,
-        globe: false,
         terrainShadows: ShadowMode.DISABLED,
         msaaSamples: 1,
       });
 
-      this._cesiumWidget.scene.screenSpaceCameraController.enableInputs = false;
-      this._cesiumWidget.scene.primitives.destroyPrimitives = false;
+      cesiumWidget.scene.globe.depthTestAgainstTerrain = true;
+      cesiumWidget.scene.globe.baseColor = Color.WHITE.withAlpha(0.01);
+      const defaultTranslucency = cesiumWidget.scene.globe.translucency;
+      defaultTranslucency.enabled = true;
+      defaultTranslucency.backFaceAlpha = 0.75;
+      defaultTranslucency.frontFaceAlpha = 0.75;
 
-      this._screenSpaceEventHandler = new ScreenSpaceEventHandler(
-        this._cesiumWidget.canvas,
-      );
+      cesiumWidget.scene.screenSpaceCameraController.enableInputs = false;
+      cesiumWidget.scene.screenSpaceCameraController.enableCollisionDetection =
+        false;
+
+      cesiumWidget.scene.primitives.destroyPrimitives = false;
+
+      cesiumWidget.scene.highDynamicRange = true;
+      cesiumWidget.scene.gamma = 1.8;
+
+      this.initialized = true;
+      this._initializeCesiumWidget(cesiumWidget);
 
-      this._screenSpaceListener = setupCesiumInteractions(
+      this._imageView = createPanoramaImageView(
         this,
-        this._cesiumWidget.scene,
-        this.screenSpaceEventHandler,
+        CesiumMath.toRadians(this._defaultFov),
       );
-      this._imageView = createPanoramaImageView(this);
 
       if (this._overlayNaNColor) {
         this._imageView.tilePrimitiveCollection.overlayNaNColor =
@@ -171,48 +186,10 @@ export default class PanoramaMap extends VcsMap {
       }
 
       this._cameraController = createPanoramaCameraController(this);
-      this.initialized = true;
-
-      this._listeners.push(
-        this._cesiumWidget.scene.postRender.addEventListener(
-          (eventScene: Scene, time: JulianDate) => {
-            this.postRender.raiseEvent({
-              map: this,
-              originalEvent: { scene: eventScene, time },
-            });
-          },
-        ),
-      );
     }
     await super.initialize();
   }
 
-  override async activate(): Promise<void> {
-    await super.activate();
-    if (this.active && this._cesiumWidget) {
-      this._cesiumWidget.useDefaultRenderLoop = true;
-      this._cesiumWidget.resize();
-    }
-  }
-
-  override deactivate(): void {
-    super.deactivate();
-    if (this._cesiumWidget) {
-      this._cesiumWidget.useDefaultRenderLoop = false;
-    }
-  }
-
-  override getViewpoint(): Promise<null | Viewpoint> {
-    return Promise.resolve(this.getViewpointSync());
-  }
-
-  override getViewpointSync(): Viewpoint | null {
-    if (!this._cesiumWidget || !this._cesiumWidget.scene || !this.target) {
-      return null;
-    }
-    return getViewpointFromScene(this._cesiumWidget.scene);
-  }
-
   /**
    * Sets the current image to the closest image to the given coordinate. Unsets the
    * current image, if there is no image within the default distance.
@@ -249,6 +226,15 @@ export default class PanoramaMap extends VcsMap {
     this.setCurrentImage(closestImage);
   }
 
+  override getViewpointSync(): Viewpoint | null {
+    const vp = super.getViewpointSync();
+    if (vp) {
+      vp.groundPosition = null;
+      vp.distance = 100;
+    }
+    return vp;
+  }
+
   /**
    * {@link getClosestImage} for the given viewpoint. Prefers the ground position
    * @param viewpoint
@@ -308,8 +294,8 @@ export default class PanoramaMap extends VcsMap {
     });
 
     if (closestIndex !== -1) {
-      const { imageName, dataset } = images[closestIndex]!;
-      return dataset.createPanoramaImage(imageName); // XXX position is a HACK to support frankenstein datasets
+      const { imageName, dataset, time } = images[closestIndex]!;
+      return dataset.createPanoramaImage(imageName, time);
     }
 
     return undefined;
@@ -328,55 +314,10 @@ export default class PanoramaMap extends VcsMap {
     }
   }
 
-  override indexChanged(layer: Layer): void {
-    const viz = this.getVisualizationsForLayer(layer);
-    if (viz) {
-      viz.forEach((item) => {
-        if (item instanceof PrimitiveCollection) {
-          indexChangedOnPrimitive(
-            this.getCesiumWidget().scene.primitives,
-            item,
-            this.layerCollection,
-          );
-        }
-      });
-    }
-  }
-
-  /**
-   * Internal API used to register visualizations from layer implementations
-   * @param  primitiveCollection
-   */
-  addPrimitiveCollection(
-    primitiveCollection: PrimitiveCollection | Cesium3DTileset,
-  ): void {
-    if (!this._cesiumWidget) {
-      throw new Error('Cannot add primitive to uninitialized map');
-    }
-    if (this.validateVisualization(primitiveCollection)) {
-      this.addVisualization(primitiveCollection);
-      ensureInCollection(
-        this._cesiumWidget.scene.primitives,
-        primitiveCollection,
-        this.layerCollection,
-      );
-    }
-  }
-
-  /**
-   * Internal API to unregister the visualization for a layers implementation
-   * @param  primitiveCollection
-   */
-  removePrimitiveCollection(
-    primitiveCollection: PrimitiveCollection | Cesium3DTileset,
-  ): void {
-    this.removeVisualization(primitiveCollection);
-    this._cesiumWidget?.scene.primitives.remove(primitiveCollection);
-  }
-
-  override toJSON(): PanoramaMapOptions {
-    const config = super.toJSON() as Partial<PanoramaMapOptions>;
-    const defaultOptions = PanoramaMap.getDefaultOptions();
+  override toJSON(
+    defaultOptions = PanoramaMap.getDefaultOptions(),
+  ): PanoramaMapOptions {
+    const config = super.toJSON(defaultOptions) as Partial<PanoramaMapOptions>;
 
     if (this._overlayNaNColor !== defaultOptions.overlayNaNColor) {
       config.overlayNaNColor = this._overlayNaNColor;
@@ -386,10 +327,11 @@ export default class PanoramaMap extends VcsMap {
       config.cursorColor = this._cursorColor;
     }
 
-    if (this.fallbackToCurrentMap !== defaultOptions.fallbackToCurrentMap) {
-      config.fallbackToCurrentMap = this.fallbackToCurrentMap;
-    } else {
-      delete config.fallbackToCurrentMap;
+    const defaultFov = this._imageView
+      ? CesiumMath.toDegrees(this._imageView.defaultFov)
+      : this._defaultFov;
+    if (defaultFov !== defaultOptions.defaultFov) {
+      config.defaultFov = defaultFov;
     }
 
     return config;
@@ -400,13 +342,6 @@ export default class PanoramaMap extends VcsMap {
     this._currentImage?.destroy();
     this._cameraController?.destroy();
     this._imageView?.destroy();
-    this._screenSpaceListener?.();
-    this._screenSpaceEventHandler?.destroy();
-    this._cesiumWidget?.destroy();
-    this._cesiumWidget = undefined;
-    this._listeners.forEach((cb) => {
-      cb();
-    });
 
     super.destroy();
   }

package/src/map/vcsMap.ts

@@ -14,13 +14,14 @@ import MapState from './mapState.js';
 import { vcsLayerName } from '../layer/layerSymbols.js';
 import VcsEvent from '../vcsEvent.js';
 import { mapClassRegistry } from '../classRegistry.js';
-import type { CesiumMapEvent, CesiumVisualisationType } from './cesiumMap.js';
+import type { CesiumMapEvent } from './cesiumMap.js';
 import type Viewpoint from '../util/viewpoint.js';
 import type Layer from '../layer/layer.js';
 import type { MapEvent } from '../interaction/abstractInteraction.js';
 import type { DisableMapControlOptions } from '../util/mapCollection.js';
 import type VectorClusterGroup from '../vectorCluster/vectorClusterGroup.js';
 import { vectorClusterGroupName } from '../vectorCluster/vectorClusterSymbols.js';
+import type { CesiumVisualisationType } from './baseCesiumMap.js';
 
 function getLogger(): Logger {
   return getLoggerByName('vcMap');
@@ -43,6 +44,10 @@ export type VcsMapOptions = VcsObjectOptions & {
    * the HTMLElement to render the map into
    */
   target?: string | HTMLElement;
+  /**
+   * The types of layers to display on this map.
+   */
+  layerTypes?: string[];
 };
 
 export type VisualisationType = CesiumVisualisationType | OLLayer;
@@ -67,6 +72,7 @@ class VcsMap<
     return {
       fallbackMap: undefined,
       fallbackToCurrentMap: false,
+      layerTypes: [],
     };
   }
 
@@ -142,12 +148,16 @@ class VcsMap<
 
   private _postRender = new VcsEvent<VcsMapRenderEvent<V>>();
 
+  private _layerTypes: string[];
+
+  readonly layerTypesChanged = new VcsEvent<string[]>();
+
   /**
    * @param  options
    */
   constructor(options: VcsMapOptions) {
-    super(options);
     const defaultOptions = VcsMap.getDefaultOptions();
+    super({ ...defaultOptions, ...options });
     this.mapElement = document.createElement('div');
     this.mapElement.setAttribute('id', uuidv4());
     this.mapElement.classList.add('mapElement');
@@ -188,6 +198,8 @@ class VcsMap<
     this.pointerInteractionEvent = new VcsEvent();
 
     this._splitPosition = 0.5;
+
+    this._layerTypes = options.layerTypes || defaultOptions.layerTypes || [];
   }
 
   /**
@@ -315,6 +327,26 @@ class VcsMap<
     return this._postRender;
   }
 
+  get layerTypes(): string[] {
+    return this._layerTypes.slice();
+  }
+
+  /**
+   * The types of layers to display on this map. An empty array means all types.
+   * @param types
+   */
+  set layerTypes(types: string[]) {
+    check(types, [String]);
+
+    if (
+      types.length !== this._layerTypes.length ||
+      !types.every((t) => this._layerTypes.includes(t))
+    ) {
+      this._layerTypes = types.slice();
+      this.layerTypesChanged.raiseEvent(this._layerTypes.slice());
+    }
+  }
+
   private _setLayerCollectionListeners(): void {
     this._collectionListeners.forEach((cb) => {
       cb();
@@ -597,14 +629,21 @@ class VcsMap<
   // eslint-disable-next-line class-methods-use-this
   requestRender(): void {}
 
-  toJSON(): VcsMapOptions {
-    const config: VcsMapOptions = super.toJSON();
+  toJSON(defaultOptions = VcsMap.getDefaultOptions()): VcsMapOptions {
+    const config: VcsMapOptions = super.toJSON(defaultOptions);
+
     if (this.fallbackMap) {
       config.fallbackMap = this.fallbackMap;
     }
+
     if (this.fallbackToCurrentMap) {
       config.fallbackToCurrentMap = this.fallbackToCurrentMap;
     }
+
+    if (this._layerTypes.some((l) => !defaultOptions.layerTypes?.includes(l))) {
+      config.layerTypes = this._layerTypes.slice();
+    }
+
     return config;
   }
 
@@ -625,6 +664,7 @@ class VcsMap<
       cb();
     });
     this._collectionListeners = [];
+    this.layerTypesChanged.destroy();
 
     if (this.layerCollection) {
       [...this.layerCollection].forEach((l) => {

package/src/oblique/obliqueCollection.ts

@@ -183,8 +183,8 @@ class ObliqueCollection extends VcsObject {
    * @param  options
    */
   constructor(options: ObliqueCollectionOptions) {
-    super(options);
     const defaultOptions = ObliqueCollection.getDefaultOptions();
+    super({ ...defaultOptions, ...options });
 
     this.viewOptions = {
       maxZoom: parseInteger(options.maxZoom, defaultOptions.maxZoom),
@@ -607,9 +607,10 @@ class ObliqueCollection extends VcsObject {
     this._destroyed.destroy();
   }
 
-  toJSON(): ObliqueCollectionOptions {
-    const config: ObliqueCollectionOptions = super.toJSON();
-    const defaultOptions = ObliqueCollection.getDefaultOptions();
+  toJSON(
+    defaultOptions = ObliqueCollection.getDefaultOptions(),
+  ): ObliqueCollectionOptions {
+    const config: ObliqueCollectionOptions = super.toJSON(defaultOptions);
     if (this.viewOptions.maxZoom !== defaultOptions.maxZoom) {
       config.maxZoom = this.viewOptions.maxZoom;
     }

package/src/panorama/panoramaCameraController.ts

@@ -46,6 +46,10 @@ const DECAY_FRAMES = 60;
  * by dragging the mouse and zooming in and out with the mouse wheel.
  */
 export type PanoramaCameraController = {
+  /**
+   * Whether the controller is enabled. If false, the camera will not respond to user input.
+   */
+  enabled: boolean;
   /**
    * Zooms in, until MIN_FOV of 10 degrees is reached
    * @param [step=0.1] - optional step in radians
@@ -63,6 +67,7 @@ export function createPanoramaCameraController(
   map: PanoramaMap,
 ): PanoramaCameraController {
   const widget = map.getCesiumWidget();
+  let enabled = true;
   const { camera } = widget;
   const frustum = camera.frustum as PerspectiveFrustum;
 
@@ -114,7 +119,7 @@ export function createPanoramaCameraController(
     }
   }
 
-  map.screenSpaceEventHandler.setInputAction((event: number): void => {
+  map.screenSpaceEventHandler!.setInputAction((event: number): void => {
     if (!map.movementPointerEventsDisabled) {
       panoZoom(event);
     }
@@ -140,6 +145,7 @@ export function createPanoramaCameraController(
   const loop = (): void => {
     if (
       currentImage &&
+      enabled &&
       !widget.scene.screenSpaceCameraController.enableInputs &&
       !map.movementPointerEventsDisabled
     ) {
@@ -188,6 +194,12 @@ export function createPanoramaCameraController(
   loop();
 
   return {
+    get enabled(): boolean {
+      return enabled;
+    },
+    set enabled(value: boolean) {
+      enabled = value;
+    },
     zoomIn(step = 0.1): void {
       if (!map.movementApiCallsDisabled) {
         panoZoom(1, step);

package/src/panorama/panoramaImage.ts

@@ -68,6 +68,10 @@ export type PanoramaImage = Readonly<
    * The image name
    */
   readonly name: string;
+  /**
+   * The image time, if known
+   */
+  readonly time?: Date;
   readonly up: Cartesian3;
   readonly modelMatrix: Matrix4;
   readonly invModelMatrix: Matrix4;
@@ -122,6 +126,10 @@ export type CreatePanoramaImageOptions = {
    * The dataset an image may belong to
    */
   dataset?: PanoramaDatasetLayer;
+  /**
+   * The time of the image, if known
+   */
+  time?: Date;
   /**
    * The root URL for the image. This is used to load the intensity and depth images.
    */
@@ -333,9 +341,10 @@ export async function createPanoramaImage(
     hasIntensity,
     hasDepth,
   } = await loadRGBImages(rgbImage);
-  const { name, absoluteRootUrl, intensityImage, depthImage, dataset } =
+  const { name, absoluteRootUrl, intensityImage, depthImage, dataset, time } =
     options;
 
+  const imageTime = time ? new Date(time) : undefined;
   const nameOrId = name ?? uuid();
   const modelMatrix = Transforms.headingPitchRollToFixedFrame(
     position,
@@ -449,7 +458,7 @@ export async function createPanoramaImage(
           imageCoordinate,
         )
       : await tileProvider.getDepthAtImageCoordinate(imageCoordinate);
-    if (depthValue === undefined) {
+    if (depthValue === undefined || depthValue === 0) {
       return undefined;
     }
     const cartesian = imageSphericalToCartesian(imageCoordinate, result);
@@ -463,6 +472,9 @@ export async function createPanoramaImage(
     get name(): string {
       return nameOrId;
     },
+    get time(): Date | undefined {
+      return imageTime;
+    },
     get position(): Cartesian3 {
       return position;
     },
@@ -534,12 +546,14 @@ export async function createPanoramaImage(
  * Creates a panorama image from a URL. The URL must point to a RGB image with the name ending in "_rgb.tif".
  * @param rgbImageUrl - the url to the RGB image
  * @param [dataset] - the dataset to which the image belongs, if applicable
+ * @param [time] - the time of the image, if known
  */
 export async function createPanoramaImageFromURL(
   rgbImageUrl: string,
   dataset?: PanoramaDatasetLayer,
+  time?: Date,
 ): Promise<PanoramaImage> {
   const { name, absoluteRootUrl } = parseRgbUrl(rgbImageUrl);
   const image = await fromUrl(absoluteRootUrl);
-  return createPanoramaImage(image, { dataset, absoluteRootUrl, name });
+  return createPanoramaImage(image, { dataset, absoluteRootUrl, name, time });
 }