@vcmap/core 5.0.0-rc.0

package/src/vcs/vcm/layer/openlayers/wmsOpenlayers.js

@@ -0,0 +1,55 @@
+import Tile from 'ol/layer/Tile.js';
+import RasterLayerOpenlayers from './rasterLayerOpenlayers.js';
+import { getWMSSource } from '../wmsHelpers.js';
+
+/**
+ * represents a specific Cesium WMSOpenlayers Layer class.
+ * @class
+ * @export
+ * @extends {RasterLayerOpenlayers}
+ */
+class WMSOpenlayers extends RasterLayerOpenlayers {
+  static get className() { return 'vcs.vcm.layer.openlayers.WMSOpenlayers'; }
+
+  /**
+   * @param {import("@vcmap/core").Openlayers} map
+   * @param {WMSImplementationOptions} options
+   */
+  constructor(map, options) {
+    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() {
+    return new Tile({
+      visible: false,
+      source: getWMSSource({
+        url: this.url,
+        parameters: this.parameters,
+        version: this.version,
+        extent: this.extent,
+        tileSize: this.tileSize,
+        minLevel: this.minLevel,
+        maxLevel: this.maxLevel,
+        tilingSchema: this.tilingSchema,
+      }),
+      opacity: this.opacity,
+    });
+  }
+}
+
+export default WMSOpenlayers;

package/src/vcs/vcm/layer/openlayers/wmtsOpenlayers.js

@@ -0,0 +1,141 @@
+import { getTopLeft, getWidth } from 'ol/extent.js';
+import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
+import Tile from 'ol/layer/Tile.js';
+import WMTSSource from 'ol/source/WMTS.js';
+import { wgs84Projection, mercatorProjection } from '../../util/projection.js';
+import RasterLayerOpenlayers from './rasterLayerOpenlayers.js';
+import { TilingScheme } from '../rasterLayer.js';
+import { isSameOrigin } from '../../util/urlHelpers.js';
+
+/**
+ * WMTS implementation for {@link Openlayers}.
+ * @class
+ * @export
+ * @extends {RasterLayerOpenlayers}
+ */
+class WMTSOpenlayers extends RasterLayerOpenlayers {
+  static get className() { return 'vcs.vcm.layer.openlayers.WMTSOpenlayers'; }
+
+  /**
+   * @param {import("@vcmap/core").Openlayers} map
+   * @param {WMTSImplementationOptions} options
+   */
+  constructor(map, options) {
+    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;
+    const projectionExtent = projection.proj.getExtent();
+    let size = getWidth(projectionExtent) / this.tileSize[0];
+    if (this.numberOfLevelZeroTilesX > 1) {
+      size /= this.numberOfLevelZeroTilesX;
+    }
+    if (this.tilingSchema === TilingScheme.GEOGRAPHIC) {
+      size = getWidth(projectionExtent) / (this.tileSize[0] * 2);
+    }
+
+    const maxZoom = this.maxLevel + 1;
+    const resolutions = new Array(maxZoom).fill(undefined).map((value, index) => {
+      return size / (2 ** index);
+    });
+
+    const extent = this.extent.getCoordinatesInProjection(projection);
+    const tileGridOptions = {
+      origin: getTopLeft(projectionExtent),
+      extent,
+      resolutions,
+      matrixIds: this.matrixIds,
+      minZoom: this.minLevel,
+      tileSize: this.tileSize,
+    };
+
+    if (this.numberOfLevelZeroTilesX > 1 || this.numberOfLevelZeroTilesY > 1) {
+      const sizes = [];
+      let sizeX = this.numberOfLevelZeroTilesX;
+      let sizeY = this.numberOfLevelZeroTilesY;
+      for (let i = 0; i <= maxZoom; i++) {
+        sizes.push([sizeX, sizeY]);
+        sizeX *= 2;
+        sizeY *= 2;
+      }
+      tileGridOptions.sizes = sizes;
+    }
+    const tileGrid = new WMTSTileGrid(tileGridOptions);
+
+    const requestEncoding = this.url.indexOf('{') >= 0 ? 'REST' : 'KVP';
+    const wmtsOptions = {
+      tileGrid,
+      requestEncoding,
+      layer: this.layer,
+      style: this.style,
+      format: this.format,
+      matrixSet: this.tileMatrixSetID,
+      url: this.url,
+    };
+
+    if (!isSameOrigin(this.url)) {
+      wmtsOptions.crossOrigin = 'anonymous';
+    }
+
+    if (this.tilingSchema === TilingScheme.GEOGRAPHIC) {
+      wmtsOptions.projection = 'EPSG:4326';
+    }
+
+    Object.assign(wmtsOptions, this.openlayersOptions);
+    return new Tile({
+      opacity: this.opacity,
+      source: new WMTSSource(wmtsOptions),
+    });
+  }
+}
+
+export default WMTSOpenlayers;

package/src/vcs/vcm/layer/pointCloud.js

@@ -0,0 +1,162 @@
+import { checkMaybe } from '@vcsuite/check';
+import CesiumTileset from './cesiumTileset.js';
+import DeclarativeStyleItem from '../util/style/declarativeStyleItem.js';
+import VectorStyleItem from '../util/style/vectorStyleItem.js';
+import CesiumMap from '../maps/cesium.js';
+import PointCloudCesium from './cesium/pointCloudCesium.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * @typedef {CesiumTilesetOptions} PointCloudOptions
+ * @property {number|string|undefined} pointSize - Pointsize of the pointcloud in pixel default is 1
+ * @api
+ */
+
+/**
+ * @typedef {CesiumTilesetImplementationOptions} PointCloudImplementationOptions
+ * @property {string|number|undefined} pointSize
+ * @api
+ */
+
+/**
+ * @type {DeclarativeStyleItem}
+ */
+export const defaultPointCloudStyle = new DeclarativeStyleItem({});
+
+/**
+ * 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 {CesiumTileset}
+ * @api stable
+ */
+class PointCloud extends CesiumTileset {
+  static get className() { return 'vcs.vcm.layer.PointCloud'; }
+
+  /**
+   * @returns {PointCloudOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...CesiumTileset.getDefaultOptions(),
+      pointSize: null,
+    };
+  }
+
+  /**
+   * @param {PointCloudOptions} options
+   */
+  constructor(options) {
+    super(options);
+
+    const defaultOptions = PointCloud.getDefaultOptions();
+    /**
+     * The default point size to fall back on, if no point size is given. Uses Cesium default of 1 if null.
+     * @api
+     * @type {number|string|null}
+     */
+    this.defaultPointSize = options.pointSize != null ? options.pointSize : defaultOptions.pointSize;
+    /** @type {number|string|null} */
+    this._pointSize = this.defaultPointSize;
+
+    this._supportedMaps = [
+      CesiumMap.className,
+    ];
+  }
+
+  /**
+   * @inheritDoc
+   * @param {(Reference|DeclarativeStyleItemOptions|VectorStyleItemOptions|import("@vcmap/core").StyleItem|string)=} styleOptions
+   * @param {(VectorStyleItem|DeclarativeStyleItem)=} defaultStyle
+   * @returns {import("@vcmap/core").StyleItem}
+   */
+  getStyleOrDefaultStyle(styleOptions, defaultStyle) {
+    return super.getStyleOrDefaultStyle(styleOptions, defaultStyle || defaultPointCloudStyle);
+  }
+
+  /**
+   * @type {number|string|null}
+   * @api
+   */
+  get pointSize() { return this._pointSize; }
+
+  /**
+   * @param {string|number|undefined} size
+   */
+  set pointSize(size) {
+    checkMaybe(size, [Number, String]);
+    this._pointSize = size;
+    this.getImplementations().forEach((impl) => {
+      /** @type {PointCloudCesium} */ (impl).updatePointSize(size);
+    });
+  }
+
+  /**
+   * @returns {PointCloudImplementationOptions}
+   */
+  getImplementationOptions() {
+    return {
+      ...super.getImplementationOptions(),
+      pointSize: this.pointSize,
+    };
+  }
+
+  /**
+   * @param {import("@vcmap/core").VcsMap} map
+   * @returns {Array<PointCloudCesium>}
+   */
+  createImplementationsForMap(map) {
+    if (map instanceof CesiumMap) {
+      return [new PointCloudCesium(map, this.getImplementationOptions())];
+    }
+
+    return [];
+  }
+
+  /**
+   * Clears the style of this layer resets the point size to the defaultPointSize
+   * @api stable
+   */
+  clearStyle() {
+    super.clearStyle();
+    this.pointSize = this.defaultPointSize;
+  }
+
+  /**
+   * Sets a new declarative style. Cannot set a Vector style on PointCloud layers.
+   * @param {string|import("ol/style/Style").default|import("ol/style/Style").StyleFunction|import("@vcmap/core").StyleItem} style
+   * @param {boolean=} silent
+   * @api
+   */
+  setStyle(style, silent) {
+    if (style instanceof VectorStyleItem) {
+      this.getLogger().warning('trying to apply vector style to point cloud layer.');
+    } else {
+      super.setStyle(style, silent);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {PointCloudOptions}
+   */
+  getConfigObject() {
+    const config = /** @type {PointCloudOptions} */ (super.getConfigObject());
+    const defaultOptions = PointCloud.getDefaultOptions();
+
+    if (this.defaultPointSize !== defaultOptions.pointSize) {
+      config.pointSize = this.defaultPointSize;
+    }
+
+    return config;
+  }
+}
+
+VcsClassRegistry.registerClass(PointCloud.className, PointCloud);
+export default PointCloud;

package/src/vcs/vcm/layer/rasterLayer.js

@@ -0,0 +1,294 @@
+import { ImagerySplitDirection, WebMercatorTilingScheme, GeographicTilingScheme, Cartographic } from '@vcmap/cesium';
+import { getBottomLeft, getBottomRight, getTopLeft, getTopRight } from 'ol/extent.js';
+
+import { parseInteger, parseNumberRange, parseEnumValue } from '@vcsuite/parsers';
+import { wgs84Projection } from '../util/projection.js';
+import Layer from './layer.js';
+import VcsEvent from '../event/vcsEvent.js';
+import Extent from '../util/extent.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * @typedef {LayerOptions} RasterLayerOptions
+ * @property {number|undefined} [minLevel=0] -  minLevel to show (if not specified, calculated from extent)
+ * @property {number} [maxLevel=18] -  maxLevel to show
+ * @property {string} [tilingSchema='geographic'] -  either "geographic" or "mercator"
+ * @property {number} [opacity=1.0] - opacity between 0 and 1
+ * @property {string|undefined} splitDirection - either 'left' or 'right', none if omitted
+ * @api
+ */
+
+/**
+ * @typedef {LayerImplementationOptions} RasterLayerImplementationOptions
+ * @property {number} minLevel
+ * @property {number} maxLevel
+ * @property {string} tilingSchema
+ * @property {number} opacity
+ * @property {import("@vcmap/cesium").ImagerySplitDirection} splitDirection
+ * @property {Extent|undefined} extent
+ */
+
+/**
+ * @typedef {import("@vcmap/core").LayerImplementation<import("@vcmap/core").VcsMap>} RasterLayerImplementation
+ * @property {function(number):void} updateOpacity
+ * @property {function(import("@vcmap/cesium").ImagerySplitDirection):void} updateSplitDirection
+ * @api
+ */
+
+/**
+ * Enumeration of tiling schemes.
+ * @enum {string}
+ * @api
+ * @property {string} GEOGRAPHIC
+ * @property {string} MERCATOR
+ * @export
+ */
+export const TilingScheme = {
+  GEOGRAPHIC: 'geographic',
+  MERCATOR: 'mercator',
+};
+
+/**
+ * Gets the tiling scheme associated with this layerConfig
+ * @param {Object} layerOptions
+ * @returns {import("@vcmap/cesium").WebMercatorTilingScheme|import("@vcmap/cesium").GeographicTilingScheme}
+ */
+export function getTilingScheme(layerOptions) {
+  const 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);
+}
+
+/**
+ * @param {Extent} extent
+ * @param {import("@vcmap/cesium").GeographicTilingScheme|import("@vcmap/cesium").WebMercatorTilingScheme} tilingScheme
+ * @param {number} maxLevel
+ * @param {number} [minLevel=0]
+ * @returns {number}
+ */
+export function calculateMinLevel(extent, tilingScheme, maxLevel, minLevel = 0) {
+  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 = minLevel;
+  while (usedMinLevel < maxLevel) {
+    // eslint-disable-next-line 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
+ * @class
+ * @export
+ * @extends {Layer}
+ * @implements {SplitLayer}
+ * @abstract
+ */
+class RasterLayer extends Layer {
+  static get className() { return 'vcs.vcm.layer.RasterLayer'; }
+
+  /**
+   * @returns {RasterLayerOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...Layer.getDefaultOptions(),
+      minLevel: 0,
+      maxLevel: 18,
+      tilingSchema: TilingScheme.GEOGRAPHIC,
+      opacity: 1,
+      splitDirection: undefined,
+    };
+  }
+
+  /**
+   * @param {RasterLayerOptions} options
+   */
+  constructor(options) {
+    options.url = options.url || '';
+    super(options);
+    const defaultOptions = RasterLayer.getDefaultOptions();
+    this.extent = this.extent || new Extent();
+    /**
+     * The {@link RasterLayer.TilingScheme} of this layer
+     * @type {string}
+     * @api
+     */
+    this.tilingSchema = parseEnumValue(options.tilingSchema, TilingScheme, defaultOptions.tilingSchema);
+    /** @type {number} */
+    this.maxLevel = parseInteger(options.maxLevel, defaultOptions.maxLevel);
+    /**
+     * @type {number}
+     * @private
+     */
+    this._minLevel = parseInteger(options.minLevel, defaultOptions.minLevel);
+
+    const cesiumTilingScheme = getTilingScheme(options);
+    /** @type {number} */
+    this.minLevel = calculateMinLevel(this.extent, cesiumTilingScheme, this.maxLevel, this._minLevel);
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this._opacity = parseNumberRange(options.opacity, defaultOptions.opacity, 0.0, 1.0);
+
+    /** @type {import("@vcmap/cesium").ImagerySplitDirection} */
+    this._splitDirection = ImagerySplitDirection.NONE;
+
+    if (options.splitDirection) {
+      this._splitDirection = options.splitDirection === 'left' ?
+        ImagerySplitDirection.LEFT :
+        ImagerySplitDirection.RIGHT;
+    }
+
+    /**
+     * raised if the split direction changes, is passed the split direction as its only argument
+     * @type {VcsEvent<import("@vcmap/cesium").ImagerySplitDirection>}
+     * @api
+     */
+    this.splitDirectionChanged = new VcsEvent();
+  }
+
+  /**
+   * The split directions of this layer
+   * @api
+   * @type {import("@vcmap/cesium").ImagerySplitDirection}
+   */
+  get splitDirection() { return this._splitDirection; }
+
+  /**
+   * @param {import("@vcmap/cesium").ImagerySplitDirection} direction
+   */
+  set splitDirection(direction) {
+    if (direction !== this._splitDirection) {
+      this._splitDirection = direction;
+      this.getImplementations().forEach((impl) => {
+        /** @type {RasterLayerImplementation} */
+        (impl).updateSplitDirection(direction);
+      });
+      this.splitDirectionChanged.raiseEvent(this._splitDirection);
+    }
+  }
+
+  /**
+   * The opacity between 0 (fully transparent) and 1 (fully opaque)
+   * @api
+   * @type {number}
+   */
+  get opacity() { return this._opacity; }
+
+  /**
+   * @param {number} opacity
+   */
+  set opacity(opacity) {
+    const parsedValue = parseNumberRange(opacity, this._opacity, 0, 1);
+    if (this._opacity !== parsedValue) {
+      this._opacity = parsedValue;
+      this.getImplementations().forEach((impl) => {
+        /** @type {RasterLayerImplementation} */
+        (impl).updateOpacity(parsedValue);
+      });
+    }
+  }
+
+  /**
+   * @returns {RasterLayerImplementationOptions}
+   */
+  getImplementationOptions() {
+    const options = /** @type {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;
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {RasterLayerOptions}
+   */
+  getConfigObject() {
+    const config = /** @type {RasterLayerOptions} */ (super.getConfigObject());
+    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 !== ImagerySplitDirection.NONE) {
+      config.splitDirection = this._splitDirection === ImagerySplitDirection.RIGHT ?
+        'right' :
+        'left';
+    }
+
+    return config;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this.splitDirectionChanged.destroy();
+    super.destroy();
+  }
+}
+
+VcsClassRegistry.registerClass(RasterLayer.className, RasterLayer);
+export default RasterLayer;