@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/layer/cesiumTilesetLayer.ts

@@ -0,0 +1,267 @@
+import { type Cesium3DTileset, Matrix4 } from '@vcmap-cesium/engine';
+
+import { checkMaybe } from '@vcsuite/check';
+import { parseInteger } from '@vcsuite/parsers';
+import type { Coordinate } from 'ol/coordinate.js';
+import VectorStyleItem, {
+  VectorStyleItemOptions,
+} from '../style/vectorStyleItem.js';
+import FeatureLayer, {
+  FeatureLayerImplementationOptions,
+} from './featureLayer.js';
+import CesiumTilesetCesiumImpl, {
+  getExtentFromTileset,
+} from './cesium/cesiumTilesetCesiumImpl.js';
+import CesiumMap from '../map/cesiumMap.js';
+import Extent from '../util/extent.js';
+import { mercatorProjection } from '../util/projection.js';
+import { isMobile } from '../util/isMobile.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import type { LayerOptions } from './layer.js';
+import FeatureVisibility from './featureVisibility.js';
+import VcsMap from '../map/vcsMap.js';
+
+export type CesiumTilesetOptions = LayerOptions & {
+  /**
+   * relates inversely to the depth over which the layer is activated
+   */
+  screenSpaceError?: number;
+  /**
+   * relates inversely to the depth over which the layer is activated
+   */
+  screenSpaceErrorMobile?: number;
+  tilesetOptions?: object;
+  highlightStyle?: VectorStyleItem | VectorStyleItemOptions;
+  featureVisibility?: FeatureVisibility;
+  /**
+   * an offset of x, y, z. x and y in degrees longitude/latitude respectively
+   */
+  offset?: Coordinate;
+};
+
+export type CesiumTilesetTilesetProperties = {
+  key: keyof Cesium3DTileset;
+  value: unknown;
+};
+
+export type CesiumTilesetImplementationOptions =
+  FeatureLayerImplementationOptions & {
+    tilesetOptions?: Record<string, unknown>;
+    tilesetProperties?: CesiumTilesetTilesetProperties[];
+    modelMatrix?: Matrix4;
+    offset?: Coordinate;
+  };
+
+/**
+ * represents a specific Building layer for cesium.
+ * @group Layer
+ */
+class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
+  static get className(): string {
+    return 'CesiumTilesetLayer';
+  }
+
+  static getDefaultOptions(): CesiumTilesetOptions {
+    return {
+      ...FeatureLayer.getDefaultOptions(),
+      highlightStyle: undefined,
+      screenSpaceError: 16,
+      screenSpaceErrorMobile: 32,
+      tilesetOptions: {},
+      offset: undefined,
+    };
+  }
+
+  highlightStyle: VectorStyleItem | null;
+
+  screenSpaceError: number;
+
+  screenSpaceErrorMobile: number;
+
+  tilesetOptions: Record<string, unknown>;
+
+  private _modelMatrix: Matrix4 | undefined;
+
+  private _offset: Coordinate | undefined;
+
+  protected _supportedMaps = [CesiumMap.className];
+
+  constructor(options: CesiumTilesetOptions) {
+    super(options);
+    this._supportedMaps = [CesiumMap.className];
+    const defaultOptions = CesiumTilesetLayer.getDefaultOptions();
+    if (this.url && !/\.json$/.test(this.url)) {
+      this.url = `${this.url.replace(/\/$/, '')}/tileset.json`;
+    }
+
+    this.highlightStyle = null;
+    if (options.highlightStyle) {
+      this.highlightStyle =
+        options.highlightStyle instanceof VectorStyleItem
+          ? options.highlightStyle
+          : new VectorStyleItem(options.highlightStyle);
+    }
+
+    this.screenSpaceError = parseInteger(
+      options.screenSpaceError,
+      defaultOptions.screenSpaceError,
+    );
+
+    this.screenSpaceErrorMobile = parseInteger(
+      options.screenSpaceErrorMobile,
+      defaultOptions.screenSpaceErrorMobile,
+    );
+
+    const tilesetOptions =
+      options.tilesetOptions || defaultOptions.tilesetOptions;
+
+    this.tilesetOptions = {
+      maximumScreenSpaceError: isMobile()
+        ? this.screenSpaceErrorMobile
+        : this.screenSpaceError,
+      ...tilesetOptions,
+    };
+
+    this._modelMatrix = undefined;
+
+    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.
+   */
+  get modelMatrix(): Matrix4 | undefined {
+    return this._modelMatrix;
+  }
+
+  set modelMatrix(modelMatrix: Matrix4 | undefined) {
+    checkMaybe(modelMatrix, Matrix4);
+
+    this._modelMatrix = modelMatrix;
+    this.getImplementations().forEach((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.
+   */
+  get offset(): Coordinate | undefined {
+    return this._offset;
+  }
+
+  set offset(offset: Coordinate | undefined) {
+    checkMaybe(offset, [Number]);
+
+    this._offset = offset;
+    this.getImplementations().forEach((impl) => {
+      impl.updateOffset(offset);
+    });
+  }
+
+  getImplementationOptions(): CesiumTilesetImplementationOptions {
+    return {
+      ...super.getImplementationOptions(),
+      tilesetOptions: this.tilesetOptions,
+      modelMatrix: this.modelMatrix,
+      offset: this.offset,
+    };
+  }
+
+  createImplementationsForMap(map: VcsMap): CesiumTilesetCesiumImpl[] {
+    if (map instanceof CesiumMap) {
+      return [
+        new CesiumTilesetCesiumImpl(map, this.getImplementationOptions()),
+      ];
+    }
+    return [];
+  }
+
+  /**
+   * 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.
+   */
+  getZoomToExtent(): Extent | null {
+    const metaExtent = super.getZoomToExtent();
+    if (metaExtent) {
+      return metaExtent;
+    }
+    const impl = this.getImplementations()[0];
+    if (impl?.cesium3DTileset) {
+      const threeDimExtent = getExtentFromTileset(impl.cesium3DTileset);
+
+      const actualExtent = new Extent({
+        projection: mercatorProjection.toJSON(),
+        coordinates: threeDimExtent,
+      });
+
+      if (actualExtent.isValid()) {
+        return actualExtent;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * set the maximum screenspace error of this layer
+   */
+  setMaximumScreenSpaceError(value: number): void {
+    this.getImplementations().forEach((impl) => {
+      if (impl.cesium3DTileset) {
+        impl.cesium3DTileset.maximumScreenSpaceError = value;
+      }
+    });
+  }
+
+  toJSON(): CesiumTilesetOptions {
+    const config: CesiumTilesetOptions = super.toJSON();
+    const defaultOptions = CesiumTilesetLayer.getDefaultOptions();
+    if (this.highlightStyle) {
+      config.highlightStyle = this.highlightStyle.toJSON();
+    }
+
+    if (this.screenSpaceError !== defaultOptions.screenSpaceError) {
+      config.screenSpaceError = this.screenSpaceError;
+    }
+
+    if (this.screenSpaceErrorMobile !== defaultOptions.screenSpaceErrorMobile) {
+      config.screenSpaceErrorMobile = this.screenSpaceErrorMobile;
+    }
+
+    const tilesetOptions: Record<string, unknown> = { ...this.tilesetOptions };
+
+    const usedScreenSpaceError = isMobile()
+      ? this.screenSpaceErrorMobile
+      : this.screenSpaceError;
+    if (tilesetOptions.maximumScreenSpaceError === usedScreenSpaceError) {
+      delete tilesetOptions.maximumScreenSpaceError;
+    }
+
+    if (Object.keys(tilesetOptions).length > 0) {
+      config.tilesetOptions = tilesetOptions;
+    }
+
+    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
+   */
+  destroy(): void {
+    super.destroy();
+  }
+}
+
+layerClassRegistry.registerClass(
+  CesiumTilesetLayer.className,
+  CesiumTilesetLayer,
+);
+export default CesiumTilesetLayer;

package/src/layer/czmlLayer.ts

@@ -0,0 +1,144 @@
+import { CzmlDataSource } from '@vcmap-cesium/engine';
+
+import DataSourceLayer from './dataSourceLayer.js';
+import { vcsLayerName } from './layerSymbols.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import type { LayerOptions } from './layer.js';
+
+export type CzmlOptions = LayerOptions & {
+  sourceUri?: string;
+};
+
+/**
+ * @group Layer
+ */
+class CzmlLayer extends DataSourceLayer {
+  static get className(): string {
+    return 'CzmlLayer';
+  }
+
+  static getDefaultOptions(): CzmlOptions {
+    return {
+      ...DataSourceLayer.getDefaultOptions(),
+      sourceUri: undefined,
+    };
+  }
+
+  private _dataSource: CzmlDataSource | null = new CzmlDataSource();
+
+  sourceUri: string | undefined;
+
+  // eslint-disable-next-line class-methods-use-this
+  private _loadedResolve: () => void = () => {};
+
+  // eslint-disable-next-line class-methods-use-this
+  private _loadedReject: (err: Error) => void = () => {};
+
+  /**
+   * A Promise resolving with the DataSourceLayer on load
+   */
+  loaded: Promise<void> = new Promise((resolve, reject) => {
+    this._loadedResolve = resolve;
+    this._loadedReject = reject;
+  });
+
+  private _initializedPromise: Promise<void> | undefined;
+
+  /**
+   * @param  options
+   */
+  constructor(options: CzmlOptions) {
+    super(options);
+    this.entities = this.dataSource.entities;
+
+    const defaultOptions = CzmlLayer.getDefaultOptions();
+    this.sourceUri = options.sourceUri || defaultOptions.sourceUri;
+  }
+
+  get dataSource(): CzmlDataSource {
+    if (!this._dataSource) {
+      throw new Error('Accessing destroyed czml layer');
+    }
+    return this._dataSource;
+  }
+
+  set dataSource(dataSource: CzmlDataSource) {
+    this._dataSource = dataSource;
+  }
+
+  initialize(): Promise<void> {
+    if (!this._initializedPromise) {
+      this._initializedPromise = this._loadData()
+        .then(() => super.initialize())
+        .then(() => {
+          this._loadedResolve();
+        })
+        .catch((err) => {
+          this._loadedReject(err as Error);
+        });
+    }
+    return this._initializedPromise;
+  }
+
+  private async _loadData(): Promise<void> {
+    await this.dataSource.load(
+      this.url,
+      this.sourceUri ? { sourceUri: this.sourceUri } : undefined,
+    );
+
+    this.entities.values.forEach((entity) => {
+      entity[vcsLayerName] = this.name;
+    });
+    this.clock = this.dataSource.clock;
+  }
+
+  async reload(): Promise<void> {
+    this.entities.removeAll();
+    await this._loadData();
+    await this.forceRedraw();
+  }
+
+  toJSON(): CzmlOptions {
+    const config: CzmlOptions = super.toJSON();
+    if (this.sourceUri) {
+      config.sourceUri = this.sourceUri;
+    }
+    return config;
+  }
+
+  destroy(): void {
+    super.destroy();
+
+    if (this._dataSource) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-underscore-dangle,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+      this._dataSource._entityCluster.destroy();
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-underscore-dangle
+      this._dataSource._entityCluster = null;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-underscore-dangle
+      this._dataSource._entityCollection = null;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-underscore-dangle
+      this._dataSource._changed = null;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-underscore-dangle
+      this._dataSource._error = null;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-underscore-dangle
+      this._dataSource._loading = null;
+    }
+
+    this._dataSource = null;
+  }
+}
+
+layerClassRegistry.registerClass(CzmlLayer.className, CzmlLayer);
+export default CzmlLayer;

package/src/layer/dataSourceLayer.ts

@@ -0,0 +1,167 @@
+import {
+  DataSourceClock,
+  Entity,
+  EntityCollection,
+} from '@vcmap-cesium/engine';
+import Layer, { LayerImplementationOptions } from './layer.js';
+import CesiumMap from '../map/cesiumMap.js';
+import DataSourceCesiumImpl from './cesium/dataSourceCesiumImpl.js';
+import { vcsLayerName } from './layerSymbols.js';
+import FeatureVisibility, {
+  FeatureVisibilityAction,
+} from './featureVisibility.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import type GlobalHider from './globalHider.js';
+
+export type DataSourceImplementationOptions = LayerImplementationOptions & {
+  entities: EntityCollection;
+  clock?: DataSourceClock;
+};
+
+/**
+ * Represents a layer of Cesium.Entity
+ * @group Layer
+ */
+class DataSourceLayer extends Layer<DataSourceCesiumImpl> {
+  static get className(): string {
+    return 'DataSourceLayer';
+  }
+
+  /**
+   * The entities of this layer. Use the `addEntity` API to add Enitities to ensure interoperability with vcm interfaces
+   */
+  entities: EntityCollection = new EntityCollection();
+
+  clock: DataSourceClock | undefined = undefined;
+
+  /**
+   * The feature visibility of this layer. NOTE: Entities cannot be highlighted at this moment.
+   */
+  featureVisibility: FeatureVisibility = new FeatureVisibility();
+
+  protected _supportedMaps = [CesiumMap.className];
+
+  private _featureVisibilityListeners: (() => void)[] = [];
+
+  setGlobalHider(globalHider: GlobalHider): void {
+    super.setGlobalHider(globalHider);
+    this._setUpFeatureVisibility();
+  }
+
+  /**
+   * Sets up listeners for featureVisibility and global hider
+   */
+  private _setUpFeatureVisibility(): void {
+    this._featureVisibilityListeners.forEach((cb) => {
+      cb();
+    });
+
+    this._featureVisibilityListeners = [
+      this.featureVisibility.changed.addEventListener(({ action, ids }) => {
+        if (action === FeatureVisibilityAction.HIDE) {
+          ids.forEach((id) => {
+            const entity = this.entities.getById(id as string);
+            if (entity) {
+              this.featureVisibility.addHiddenFeature(id, entity);
+            }
+          });
+        } // highlight is _possible_ but very tricky with all the possible entity values with potential materials
+      }),
+      this.entities.collectionChanged.addEventListener((_c, added) => {
+        added.forEach((entity) => {
+          if (this.featureVisibility.hiddenObjects[entity.id]) {
+            this.featureVisibility.addHiddenFeature(entity.id, entity);
+          }
+          if (this.globalHider && this.globalHider.hiddenObjects[entity.id]) {
+            this.globalHider.addFeature(entity.id, entity);
+          }
+        });
+      }),
+    ];
+
+    if (this.globalHider) {
+      this._featureVisibilityListeners.push(
+        this.globalHider.changed.addEventListener(({ action, ids }) => {
+          if (action === FeatureVisibilityAction.HIDE) {
+            ids.forEach((id) => {
+              const entity = this.entities.getById(id as string);
+              if (entity) {
+                this.globalHider!.addFeature(id, entity);
+              }
+            });
+          }
+        }),
+      );
+    }
+  }
+
+  initialize(): Promise<void> {
+    if (!this.initialized) {
+      this._setUpFeatureVisibility();
+    }
+    return super.initialize();
+  }
+
+  getImplementationOptions(): DataSourceImplementationOptions {
+    return {
+      ...super.getImplementationOptions(),
+      entities: this.entities,
+      clock: this.clock,
+    };
+  }
+
+  createImplementationsForMap(map: CesiumMap): DataSourceCesiumImpl[] {
+    if (map instanceof CesiumMap) {
+      return [new DataSourceCesiumImpl(map, this.getImplementationOptions())];
+    }
+    return [];
+  }
+
+  /**
+   * adds an entity
+   * @param  options - Cesium Entity options or the entity
+   * @param  attributes - a set of properties, typically used for rendering a balloon
+   * @param  allowPicking - whether to override the layers allowPicking setting for this entity
+   * @returns  the entities id
+   */
+  addEntity(
+    options: Entity.ConstructorOptions | Entity,
+    attributes?: Record<string, unknown>,
+    allowPicking?: boolean,
+  ): null | string {
+    const entity = this.entities.add(options);
+    entity[vcsLayerName] = this.name;
+    entity.attributes = attributes;
+    entity.allowPicking = allowPicking;
+    return entity.id;
+  }
+
+  /**
+   * Zooms to an entity with the given id
+   */
+  flyToEntity(id: string): void {
+    this.getImplementations().forEach((impl) => {
+      impl.flyToEntity(id);
+    });
+  }
+
+  /**
+   * Removes an entity from this layer by id
+   */
+  removeEntityById(id: string): void {
+    this.entities.removeById(id);
+  }
+
+  destroy(): void {
+    this.entities.removeAll();
+    this._featureVisibilityListeners.forEach((cb) => {
+      cb();
+    });
+    this._featureVisibilityListeners = [];
+    this.featureVisibility.destroy();
+    super.destroy();
+  }
+}
+
+layerClassRegistry.registerClass(DataSourceLayer.className, DataSourceLayer);
+export default DataSourceLayer;