@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/layer/openlayers/{wmsOpenlayersImpl.js → wmsOpenlayersImpl.ts}

@@ -1,44 +1,37 @@
 import Tile from 'ol/layer/Tile.js';
+import type { Size } from 'ol/size.js';
+import type TileWMS from 'ol/source/TileWMS.js';
 import RasterLayerOpenlayersImpl from './rasterLayerOpenlayersImpl.js';
 import { getWMSSource } from '../wmsHelpers.js';
+import type { WMSImplementationOptions } from '../wmsLayer.js';
+import type OpenlayersMap from '../../map/openlayersMap.js';
 
 /**
  * represents a specific Cesium WmsOpenlayersImpl Layer class.
- * @class
- * @export
- * @extends {RasterLayerOpenlayersImpl}
  */
 class WmsOpenlayersImpl extends RasterLayerOpenlayersImpl {
-  static get className() { return 'WmsOpenlayersImpl'; }
+  static get className(): string {
+    return 'WmsOpenlayersImpl';
+  }
+
+  parameters: Record<string, string>;
+
+  version: string;
+
+  tileSize: Size;
 
-  /**
-   * @param {import("@vcmap/core").OpenlayersMap} map
-   * @param {WMSImplementationOptions} options
-   */
-  constructor(map, options) {
+  constructor(map: OpenlayersMap, options: WMSImplementationOptions) {
     super(map, options);
-    /**
-     * @type {Object<string, *>}
-     */
     this.parameters = options.parameters;
-    /**
-     * @type {string}
-     */
     this.version = options.version;
-    /**
-     * @type {import("ol/size").Size}
-     */
     this.tileSize = options.tileSize;
   }
 
-  /**
-   * @returns {import("ol/layer/Tile").default}
-   */
-  getOLLayer() {
+  getOLLayer(): Tile<TileWMS> {
     return new Tile({
       visible: false,
       source: getWMSSource({
-        url: this.url,
+        url: this.url as string,
         parameters: this.parameters,
         version: this.version,
         extent: this.extent,

package/src/layer/openlayers/{wmtsOpenlayersImpl.js → wmtsOpenlayersImpl.ts}

@@ -1,79 +1,62 @@
 import { getTopLeft, getWidth } from 'ol/extent.js';
-import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
+import WMTSTileGrid, {
+  type Options as WMTSTileGridOptions,
+} from 'ol/tilegrid/WMTS.js';
 import Tile from 'ol/layer/Tile.js';
-import WMTSSource from 'ol/source/WMTS.js';
+import WMTSSource, { type Options as OLWMTSOptions } from 'ol/source/WMTS.js';
+import type { Size } from 'ol/size.js';
 import { wgs84Projection, mercatorProjection } from '../../util/projection.js';
 import RasterLayerOpenlayersImpl from './rasterLayerOpenlayersImpl.js';
 import { TilingScheme } from '../rasterLayer.js';
 import { isSameOrigin } from '../../util/urlHelpers.js';
+import type { WMTSImplementationOptions } from '../wmtsLayer.js';
+import type OpenlayersMap from '../../map/openlayersMap.js';
 
 /**
- * WmtsLayer implementation for {@link Openlayers}.
- * @class
- * @export
- * @extends {RasterLayerOpenlayersImpl}
+ * WmtsLayer implementation for {@link OpenlayersMap}.
  */
 class WmtsOpenlayersImpl extends RasterLayerOpenlayersImpl {
-  static get className() { return 'WmtsOpenlayersImpl'; }
+  static get className(): string {
+    return 'WmtsOpenlayersImpl';
+  }
+
+  layer: string;
+
+  style: string;
+
+  format: string;
+
+  tileMatrixSetID: string;
+
+  tileSize: Size;
+
+  numberOfLevelZeroTilesX: number;
+
+  numberOfLevelZeroTilesY: number;
+
+  matrixIds: Array<string>;
+
+  openlayersOptions: Partial<OLWMTSOptions>;
 
-  /**
-   * @param {import("@vcmap/core").OpenlayersMap} map
-   * @param {WMTSImplementationOptions} options
-   */
-  constructor(map, options) {
+  constructor(map: OpenlayersMap, options: WMTSImplementationOptions) {
     super(map, options);
 
-    /**
-     * @type {string}
-     */
     this.layer = options.layer;
-
-    /**
-     * @type {string}
-     */
     this.style = options.style;
-
-    /**
-     * @type {string}
-     */
     this.format = options.format;
-
-    /**
-     * @type {string}
-     */
     this.tileMatrixSetID = options.tileMatrixSetID;
-
-    /**
-     * @type {import("ol/size").Size}
-     */
     this.tileSize = options.tileSize;
-
-    /**
-     * @type {number}
-     */
     this.numberOfLevelZeroTilesX = options.numberOfLevelZeroTilesX;
-
-    /**
-     * @type {number}
-     */
     this.numberOfLevelZeroTilesY = options.numberOfLevelZeroTilesY;
-
-    /**
-     * @type {Array<string>}
-     */
     this.matrixIds = options.matrixIds;
-
-    /**
-     * @type {Object}
-     */
     this.openlayersOptions = options.openlayersOptions;
   }
 
-  /**
-   * @returns {import("ol/layer/Tile").default}
-   */
-  getOLLayer() {
-    const projection = this.tilingSchema === TilingScheme.GEOGRAPHIC ? wgs84Projection : mercatorProjection;
+  getOLLayer(): Tile<WMTSSource> {
+    const projection =
+      this.tilingSchema === TilingScheme.GEOGRAPHIC
+        ? wgs84Projection
+        : mercatorProjection;
     const projectionExtent = projection.proj.getExtent();
     let size = getWidth(projectionExtent) / this.tileSize[0];
     if (this.numberOfLevelZeroTilesX > 1) {
@@ -84,17 +67,18 @@ class WmtsOpenlayersImpl extends RasterLayerOpenlayersImpl {
     }
 
     const maxZoom = this.maxLevel + 1;
-    const resolutions = new Array(maxZoom).fill(undefined).map((value, index) => {
-      return size / (2 ** index);
-    });
+    const resolutions = new Array(maxZoom)
+      .fill(undefined)
+      .map((_value, index) => {
+        return size / 2 ** index;
+      });
 
     const extent = this.extent.getCoordinatesInProjection(projection);
-    const tileGridOptions = {
+    const tileGridOptions: WMTSTileGridOptions = {
       origin: getTopLeft(projectionExtent),
       extent,
       resolutions,
       matrixIds: this.matrixIds,
-      minZoom: this.minLevel,
       tileSize: this.tileSize,
     };
 
@@ -111,8 +95,8 @@ class WmtsOpenlayersImpl extends RasterLayerOpenlayersImpl {
     }
     const tileGrid = new WMTSTileGrid(tileGridOptions);
 
-    const requestEncoding = this.url.indexOf('{') >= 0 ? 'REST' : 'KVP';
-    const wmtsOptions = {
+    const requestEncoding = this.url!.indexOf('{') >= 0 ? 'REST' : 'KVP';
+    const wmtsOptions: OLWMTSOptions = {
       tileGrid,
       requestEncoding,
       layer: this.layer,
@@ -122,7 +106,7 @@ class WmtsOpenlayersImpl extends RasterLayerOpenlayersImpl {
       url: this.url,
     };
 
-    if (!isSameOrigin(this.url)) {
+    if (!isSameOrigin(this.url as string)) {
       wmtsOptions.crossOrigin = 'anonymous';
     }
 

package/src/layer/pointCloudLayer.ts

@@ -0,0 +1,137 @@
+import { checkMaybe } from '@vcsuite/check';
+// eslint-disable-next-line import/no-named-default
+import type { default as OLStyle, StyleFunction } from 'ol/style/Style.js';
+import CesiumTilesetLayer, {
+  CesiumTilesetOptions,
+} from './cesiumTilesetLayer.js';
+import DeclarativeStyleItem, {
+  DeclarativeStyleItemOptions,
+} from '../style/declarativeStyleItem.js';
+import VectorStyleItem, {
+  VectorStyleItemOptions,
+} from '../style/vectorStyleItem.js';
+import CesiumMap from '../map/cesiumMap.js';
+import CesiumTilesetCesiumImpl from './cesium/cesiumTilesetCesiumImpl.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import StyleItem from '../style/styleItem.js';
+import VcsMap from '../map/vcsMap.js';
+
+export type PointCloudOptions = CesiumTilesetOptions & {
+  pointSize?: number | string;
+};
+
+export const defaultPointCloudStyle = new DeclarativeStyleItem({});
+
+/**
+ * represents a specific PointCloudLayer 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>
+ * @group Layer
+ */
+class PointCloudLayer extends CesiumTilesetLayer {
+  static get className(): string {
+    return 'PointCloudLayer';
+  }
+
+  static getDefaultOptions(): PointCloudOptions {
+    return {
+      ...CesiumTilesetLayer.getDefaultOptions(),
+      pointSize: undefined,
+    };
+  }
+
+  /**
+   * The default point size to fall back on, if no point size is given. Uses Cesium default of 1 if null.
+   */
+  defaultPointSize: number | string | undefined;
+
+  private _pointSize: number | string | undefined;
+
+  protected _supportedMaps = [CesiumMap.className];
+
+  constructor(options: PointCloudOptions) {
+    super(options);
+
+    const defaultOptions = PointCloudLayer.getDefaultOptions();
+
+    this.defaultPointSize =
+      options.pointSize != null ? options.pointSize : defaultOptions.pointSize;
+    this._pointSize = this.defaultPointSize;
+  }
+
+  getStyleOrDefaultStyle(
+    styleOptions?:
+      | DeclarativeStyleItemOptions
+      | VectorStyleItemOptions
+      | StyleItem,
+    defaultStyle?: VectorStyleItem | DeclarativeStyleItem,
+  ): StyleItem {
+    return super.getStyleOrDefaultStyle(
+      styleOptions,
+      defaultStyle || defaultPointCloudStyle,
+    );
+  }
+
+  get pointSize(): number | string | undefined {
+    return this._pointSize;
+  }
+
+  set pointSize(size: string | number | undefined) {
+    checkMaybe(size, [Number, String]);
+    this._pointSize = size;
+    (this.style as DeclarativeStyleItem).pointSize = size?.toString();
+  }
+
+  async initialize(): Promise<void> {
+    await super.initialize();
+    this.pointSize = this._pointSize;
+  }
+
+  createImplementationsForMap(map: VcsMap): CesiumTilesetCesiumImpl[] {
+    if (map instanceof CesiumMap) {
+      return [
+        new CesiumTilesetCesiumImpl(map, this.getImplementationOptions()),
+      ];
+    }
+
+    return [];
+  }
+
+  /**
+   * Clears the style of this layer resets the point size to the defaultPointSize
+   */
+  clearStyle(): void {
+    super.clearStyle();
+    this.pointSize = this.defaultPointSize;
+  }
+
+  /**
+   * Sets a new declarative style. Cannot set a VectorLayer style on PointCloudLayer layers.
+   */
+  setStyle(style: OLStyle | StyleFunction | StyleItem, silent?: boolean): void {
+    if (style instanceof VectorStyleItem) {
+      this.getLogger().warning(
+        'trying to apply vector style to point cloud layer.',
+      );
+    } else {
+      super.setStyle(style, silent);
+    }
+  }
+
+  toJSON(): PointCloudOptions {
+    const config: PointCloudOptions = super.toJSON();
+    const defaultOptions = PointCloudLayer.getDefaultOptions();
+
+    if (this.defaultPointSize !== defaultOptions.pointSize) {
+      config.pointSize = this.defaultPointSize;
+    }
+
+    return config;
+  }
+}
+
+layerClassRegistry.registerClass(PointCloudLayer.className, PointCloudLayer);
+export default PointCloudLayer;

package/src/layer/rasterLayer.ts

@@ -0,0 +1,324 @@
+import {
+  SplitDirection,
+  WebMercatorTilingScheme,
+  GeographicTilingScheme,
+  Cartographic,
+} from '@vcmap-cesium/engine';
+import {
+  getBottomLeft,
+  getBottomRight,
+  getTopLeft,
+  getTopRight,
+} from 'ol/extent.js';
+
+import {
+  parseInteger,
+  parseNumberRange,
+  parseEnumValue,
+} from '@vcsuite/parsers';
+import { wgs84Projection } from '../util/projection.js';
+import Layer, {
+  LayerImplementationOptions,
+  LayerOptions,
+  SplitLayer,
+} from './layer.js';
+import VcsEvent from '../vcsEvent.js';
+import Extent from '../util/extent.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import LayerImplementation from './layerImplementation.js';
+import VcsMap from '../map/vcsMap.js';
+
+export type RasterLayerOptions = LayerOptions & {
+  /**
+   * minLevel to show (if not specified, calculated from extent)
+   * @default 0
+   */
+  minLevel?: number;
+  /**
+   * maxLevel to show
+   * @default 18
+   */
+  maxLevel?: number;
+  tilingSchema?: TilingScheme;
+  /**
+   * opacity between 0 and 1
+   * @default 1
+   */
+  opacity?: number;
+  /**
+   * either 'left' or 'right', none if omitted
+   */
+  splitDirection?: string;
+};
+
+export type RasterLayerImplementationOptions = LayerImplementationOptions & {
+  minLevel: number;
+  maxLevel: number;
+  tilingSchema: TilingScheme;
+  opacity: number;
+  extent?: Extent;
+  splitDirection: SplitDirection;
+};
+
+export interface RasterLayerImplementation {
+  updateOpacity(opacity: number): void;
+  updateSplitDirection(splitDirection: SplitDirection): void;
+}
+
+export enum TilingScheme {
+  GEOGRAPHIC = 'geographic',
+  MERCATOR = 'mercator',
+}
+
+export type TilingSchemeOptions = {
+  numberOfLevelZeroTilesX?: number;
+  numberOfLevelZeroTilesY?: number;
+};
+
+/**
+ * Gets the tiling scheme associated with this layerConfig
+ * @param  layerOptions
+ */
+export function getTilingScheme(
+  layerOptions: RasterLayerOptions & TilingSchemeOptions,
+): WebMercatorTilingScheme | GeographicTilingScheme {
+  const tilingSchemeOptions: TilingSchemeOptions = {};
+  if (
+    layerOptions.numberOfLevelZeroTilesX &&
+    layerOptions.numberOfLevelZeroTilesX > 1
+  ) {
+    tilingSchemeOptions.numberOfLevelZeroTilesX =
+      layerOptions.numberOfLevelZeroTilesX;
+  }
+  if (
+    layerOptions.numberOfLevelZeroTilesY &&
+    layerOptions.numberOfLevelZeroTilesY > 1
+  ) {
+    tilingSchemeOptions.numberOfLevelZeroTilesY =
+      layerOptions.numberOfLevelZeroTilesY;
+  }
+  if (layerOptions.tilingSchema === TilingScheme.MERCATOR) {
+    return new WebMercatorTilingScheme(tilingSchemeOptions);
+  }
+  return new GeographicTilingScheme(tilingSchemeOptions);
+}
+
+export function calculateMinLevel(
+  extent: Extent,
+  tilingScheme: GeographicTilingScheme | WebMercatorTilingScheme,
+  maxLevel: number,
+  minLevel = 0,
+): number {
+  if (!extent.isValid()) {
+    return minLevel;
+  }
+  const wgs84Extent = extent.getCoordinatesInProjection(wgs84Projection);
+  if (wgs84Extent[1] < -85) {
+    wgs84Extent[1] = -85;
+  }
+  if (wgs84Extent[3] > 85) {
+    wgs84Extent[3] = 85;
+  }
+  const olCoords = [
+    getBottomLeft(wgs84Extent),
+    getBottomRight(wgs84Extent),
+    getTopRight(wgs84Extent),
+    getTopLeft(wgs84Extent),
+  ];
+  const extentCoords = olCoords.map((coord) =>
+    Cartographic.fromDegrees(coord[0], coord[1]),
+  );
+  let usedMinLevel: number = minLevel;
+  while (usedMinLevel < maxLevel) {
+    // eslint-disable-next-line @typescript-eslint/no-loop-func
+    const tileCoords = extentCoords.map((position) =>
+      tilingScheme.positionToTileXY(position, usedMinLevel),
+    );
+    const distances = [];
+    distances.push(Math.abs(tileCoords[0].x - tileCoords[1].x));
+    distances.push(Math.abs(tileCoords[0].y - tileCoords[3].y));
+    if (distances[0] > 1 || distances[1] > 1) {
+      usedMinLevel -= 1;
+      break;
+    }
+    usedMinLevel += 1;
+  }
+  return usedMinLevel;
+}
+
+/**
+ * This abstract class allows for automatic loading scheme determination
+ * for raster layers
+ * @group Layer
+ */
+class RasterLayer<
+    I extends LayerImplementation<VcsMap> & RasterLayerImplementation,
+  >
+  extends Layer<I>
+  implements SplitLayer
+{
+  static get className(): string {
+    return 'RasterLayer';
+  }
+
+  static getDefaultOptions(): RasterLayerOptions {
+    return {
+      ...Layer.getDefaultOptions(),
+      minLevel: 0,
+      maxLevel: 18,
+      tilingSchema: TilingScheme.GEOGRAPHIC,
+      opacity: 1,
+      splitDirection: undefined,
+    };
+  }
+
+  extent: Extent;
+
+  /**
+   * The {@link TilingScheme} of this layer
+   */
+  tilingSchema: TilingScheme;
+
+  maxLevel: number;
+
+  private _minLevel: number;
+
+  minLevel: number;
+
+  private _opacity: number;
+
+  private _splitDirection: SplitDirection = SplitDirection.NONE;
+
+  /**
+   * raised if the split direction changes, is passed the split direction as its only argument
+   */
+  splitDirectionChanged: VcsEvent<SplitDirection> = new VcsEvent();
+
+  /**
+   * @param  options
+   */
+  constructor(options: RasterLayerOptions) {
+    options.url = options.url || '';
+    super(options);
+    const defaultOptions = RasterLayer.getDefaultOptions();
+    this.extent = options.extent ? new Extent(options.extent) : new Extent();
+    this.tilingSchema = parseEnumValue(
+      options.tilingSchema,
+      TilingScheme,
+      defaultOptions.tilingSchema as TilingScheme,
+    );
+    this.maxLevel = parseInteger(options.maxLevel, defaultOptions.maxLevel);
+    this._minLevel = parseInteger(options.minLevel, defaultOptions.minLevel);
+
+    const cesiumTilingScheme = getTilingScheme(options);
+    this.minLevel = calculateMinLevel(
+      this.extent,
+      cesiumTilingScheme,
+      this.maxLevel,
+      this._minLevel,
+    );
+    this._opacity = parseNumberRange(
+      options.opacity,
+      defaultOptions.opacity as number,
+      0.0,
+      1.0,
+    );
+
+    if (options.splitDirection) {
+      this._splitDirection =
+        options.splitDirection === 'left'
+          ? SplitDirection.LEFT
+          : SplitDirection.RIGHT;
+    }
+  }
+
+  /**
+   * The split directions of this layer
+   */
+  get splitDirection(): SplitDirection {
+    return this._splitDirection;
+  }
+
+  set splitDirection(direction: SplitDirection) {
+    if (direction !== this._splitDirection) {
+      this._splitDirection = direction;
+      this.getImplementations().forEach((impl) => {
+        impl.updateSplitDirection(direction);
+      });
+      this.splitDirectionChanged.raiseEvent(this._splitDirection);
+    }
+  }
+
+  /**
+   * The opacity between 0 (fully transparent) and 1 (fully opaque)
+   */
+  get opacity(): number {
+    return this._opacity;
+  }
+
+  set opacity(opacity: number) {
+    const parsedValue = parseNumberRange(opacity, this._opacity, 0, 1);
+    if (this._opacity !== parsedValue) {
+      this._opacity = parsedValue;
+      this.getImplementations().forEach((impl) => {
+        impl.updateOpacity(parsedValue);
+      });
+    }
+  }
+
+  getImplementationOptions(): RasterLayerImplementationOptions {
+    const options: RasterLayerImplementationOptions = {
+      ...super.getImplementationOptions(),
+      minLevel: this.minLevel,
+      maxLevel: this.maxLevel,
+      tilingSchema: this.tilingSchema,
+      opacity: this.opacity,
+      splitDirection: this._splitDirection,
+    };
+
+    if (this.extent?.isValid()) {
+      options.extent = this.extent;
+    }
+    return options;
+  }
+
+  toJSON(): RasterLayerOptions {
+    const config: RasterLayerOptions = super.toJSON();
+    const defaultOptions = RasterLayer.getDefaultOptions();
+
+    if (this.extent?.equals(new Extent())) {
+      delete config.extent;
+    }
+
+    if (this._minLevel !== defaultOptions.minLevel) {
+      config.minLevel = this._minLevel;
+    }
+
+    if (this.maxLevel !== defaultOptions.maxLevel) {
+      config.maxLevel = this.maxLevel;
+    }
+
+    if (this.tilingSchema !== defaultOptions.tilingSchema) {
+      config.tilingSchema = this.tilingSchema;
+    }
+
+    if (this.opacity !== defaultOptions.opacity) {
+      config.opacity = this.opacity;
+    }
+
+    if (this._splitDirection !== SplitDirection.NONE) {
+      config.splitDirection =
+        this._splitDirection === SplitDirection.RIGHT ? 'right' : 'left';
+    }
+
+    return config;
+  }
+
+  destroy(): void {
+    this.splitDirectionChanged.destroy();
+    super.destroy();
+  }
+}
+
+layerClassRegistry.registerClass(RasterLayer.className, RasterLayer);
+export default RasterLayer;