@vcmap/core 5.0.0-rc.0

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

@@ -0,0 +1,270 @@
+import { check } from '@vcsuite/check';
+import { parseBoolean } from '@vcsuite/parsers';
+import RasterLayer from './rasterLayer.js';
+import WMSFeatureProvider from '../util/featureProvider/wmsFeatureProvider.js';
+import CesiumMap from '../maps/cesium.js';
+import WMSCesium from './cesium/wmsCesium.js';
+import Openlayers from '../maps/openlayers.js';
+import WMSOpenlayers from './openlayers/wmsOpenlayers.js';
+import Extent from '../util/extent.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * @typedef {RasterLayerImplementationOptions} WMSImplementationOptions
+ * @property {Object<string, *>} parameters
+ * @property {boolean} highResolution
+ * @property {import("ol/size").Size} tileSize
+ * @property {string} version
+ * @api
+ */
+
+/**
+ * @typedef {RasterLayerOptions} WMSOptions
+ * @property {string|undefined} layers -  string with comma separated names of the layers to display
+ * @property {string} [version='1.1.1'] - WMS version (either 1.1.1 (default) or 1.3.0)
+ * @property {Object<string, *>|string|undefined} parameters - key value pair of additional WMS parameters, url query notation possible
+ * @property {WMSFeatureProviderOptions|undefined} featureInfo -  whether this layer should send getFeatureInfo requests to the service when objects are clicked.
+ * @property {import("ol/size").Size} [tileSize=[256,256]]
+ * @property {boolean} [highResolution=false] - use higher resolution images (sofar only in 3D)
+ * @api
+ */
+
+/**
+ * WMS layer for Cesium and Openlayers
+ * @class
+ * @export
+ * @extends {RasterLayer}
+ * @api stable
+ */
+class WMS extends RasterLayer {
+  static get className() { return 'vcs.vcm.layer.WMS'; }
+
+  /**
+   * @returns {WMSOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...RasterLayer.getDefaultOptions(),
+      version: '1.1.1',
+      parameters: undefined,
+      featureInfo: undefined,
+      tileSize: /** @type {import("ol/size").Size} */ ([256, 256]),
+      highResolution: false,
+      layers: '',
+    };
+  }
+
+  /**
+   * @param {WMSOptions} options
+   */
+  constructor(options) {
+    super(options);
+    const defaultOptions = WMS.getDefaultOptions();
+
+    /** @type {string} */
+    this.version = options.version || defaultOptions.version;
+
+    /** @type {Object<string, *>} */
+    this.parameters = {};
+    if (options.parameters) {
+      let parsedParameters;
+      if (typeof options.parameters === 'string') {
+        parsedParameters = Object.fromEntries(new URLSearchParams(options.parameters));
+      } else if (options.parameters instanceof Object) {
+        parsedParameters = options.parameters;
+      }
+      Object.keys(parsedParameters).forEach((key) => {
+        this.parameters[key.toUpperCase()] = parsedParameters[key];
+      });
+    }
+
+    if (this.parameters.TRANSPARENT == null) {
+      this.parameters.TRANSPARENT = false;
+    }
+    if (this.version) {
+      this.parameters.VERSION = this.version;
+    }
+    this.parameters.LAYERS = options.layers || defaultOptions.layers;
+
+    /** @type {import("ol/size").Size} */
+    this.tileSize = options.tileSize || defaultOptions.tileSize;
+    /** @type {boolean} */
+    this.highResolution = parseBoolean(options.highResolution, defaultOptions.highResolution);
+    /**
+     * @type {WMSFeatureProviderOptions}
+     * @private
+     */
+    this._featureInfoOptions = options.featureInfo || defaultOptions.featureInfo;
+    this._supportedMaps = [
+      CesiumMap.className,
+      Openlayers.className,
+    ];
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  initialize() {
+    if (!this.initialized) {
+      this._setFeatureProvider();
+    }
+    return super.initialize();
+  }
+
+  /**
+   * Sets a FeatureProvider if provided with featureInfo options
+   * @private
+   */
+  _setFeatureProvider() {
+    if (this._featureInfoOptions) {
+      const options = {
+        url: this.url,
+        tilingSchema: this.tilingSchema,
+        maxLevel: this.maxLevel,
+        minLevel: this.minLevel,
+        tileSize: this.tileSize,
+        extent: this.extent,
+        parameters: this.parameters,
+        version: this.version,
+        ...this._featureInfoOptions,
+      };
+      this.featureProvider = new WMSFeatureProvider(this.name, options);
+    }
+  }
+
+  async reload() {
+    if (this.featureProvider && this._featureInfoOptions) {
+      this.featureProvider.destroy();
+      this._setFeatureProvider();
+    }
+    return super.reload();
+  }
+
+  /**
+   * @returns {WMSImplementationOptions}
+   */
+  getImplementationOptions() {
+    return {
+      ...super.getImplementationOptions(),
+      version: this.version,
+      parameters: this.parameters,
+      highResolution: this.highResolution,
+      tileSize: this.tileSize,
+    };
+  }
+
+  /**
+   * @param {import("@vcmap/core").VcsMap} map
+   * @returns {Array<WMSCesium|WMSOpenlayers>}
+   */
+  createImplementationsForMap(map) {
+    if (map instanceof CesiumMap) {
+      return [new WMSCesium(map, this.getImplementationOptions())];
+    } else if (map instanceof Openlayers) {
+      return [new WMSOpenlayers(map, this.getImplementationOptions())];
+    }
+    return [];
+  }
+
+  /**
+   * Sets the layers to request from the WMS
+   * @param {string|Array<string>} layers - a layer name or an array of layer names
+   * @returns {Promise<void>}
+   * @api stable
+   */
+  async setLayers(layers) {
+    check(layers, [String, [String]]);
+    const layersArray = Array.isArray(layers) ? layers : [layers];
+    this.parameters.LAYERS = layersArray.join(',');
+    await this.forceRedraw();
+  }
+
+  /**
+   * Returns the currently active layers
+   * @returns {Array<string>}
+   * @api
+   */
+  getLayers() {
+    return this.parameters.LAYERS ? this.parameters.LAYERS.split(',') : [];
+  }
+
+  /**
+   * @returns {WMSOptions}
+   */
+  getConfigObject() {
+    const config = /** @type {WMSOptions} */ (super.getConfigObject());
+    const defaultOptions = WMS.getDefaultOptions();
+
+    if (this.parameters.LAYERS) {
+      config.layers = this.parameters.LAYERS;
+    }
+
+    if (this.version !== defaultOptions.version) {
+      config.version = this.version;
+    }
+
+    const parameters = { ...this.parameters };
+    delete parameters.VERSION;
+    delete parameters.LAYERS;
+
+    if (parameters.TRANSPARENT === false) {
+      delete parameters.TRANSPARENT;
+    }
+
+    if (Object.keys(parameters).length > 0) {
+      config.parameters = parameters;
+    }
+
+    if (this.version !== defaultOptions.version) {
+      config.version = this.version;
+    }
+
+    if (this.highResolution !== defaultOptions.highResolution) {
+      config.highResolution = this.highResolution;
+    }
+
+    if (this.tileSize[0] !== defaultOptions.tileSize[0] || this.tileSize[1] !== defaultOptions.tileSize[1]) {
+      config.tileSize = /** @type {import("ol/size").Size} */ (this.tileSize.slice());
+    }
+
+    if (this.featureProvider && this.featureProvider instanceof WMSFeatureProvider) {
+      const featureInfoConfig = this.featureProvider.getConfigObject();
+      if (this.tileSize[0] === featureInfoConfig.tileSize[0] || this.tileSize[1] === featureInfoConfig.tileSize[1]) {
+        delete featureInfoConfig.tileSize;
+      }
+      if (Object.entries(this.parameters).every(([key, value]) => featureInfoConfig.parameters[key] === value)) {
+        delete featureInfoConfig.parameters;
+      }
+      if (
+        featureInfoConfig.extent &&
+        new Extent(/** @type {ExtentOptions} */ (featureInfoConfig.extent)).equals(this.extent)
+      ) {
+        delete featureInfoConfig.extent;
+      }
+      if (this.url === featureInfoConfig.url) {
+        delete featureInfoConfig.url;
+      }
+      if (this.tilingSchema === featureInfoConfig.tilingSchema) {
+        delete featureInfoConfig.tilingSchema;
+      }
+      if (this.version === featureInfoConfig.version) {
+        delete featureInfoConfig.version;
+      }
+      if (this.minLevel === featureInfoConfig.minLevel) {
+        delete featureInfoConfig.minLevel;
+      }
+      if (this.maxLevel === featureInfoConfig.maxLevel) {
+        delete featureInfoConfig.maxLevel;
+      }
+      config.featureInfo = featureInfoConfig;
+    } else if (this._featureInfoOptions) {
+      config.featureInfo = this._featureInfoOptions;
+    }
+
+    return config;
+  }
+}
+
+VcsClassRegistry.registerClass(WMS.className, WMS);
+export default WMS;

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

@@ -0,0 +1,65 @@
+import TileWMS from 'ol/source/TileWMS.js';
+import { getTopLeft, getWidth } from 'ol/extent.js';
+import TileGrid from 'ol/tilegrid/TileGrid.js';
+import { mercatorProjection, wgs84Projection } from '../util/projection.js';
+import { isSameOrigin } from '../util/urlHelpers.js';
+
+/**
+ * @typedef {Object} WMSSourceOptions
+ * @property {string} url
+ * @property {string} tilingSchema -  either "geographic" or "mercator"
+ * @property {number} maxLevel
+ * @property {number} minLevel
+ * @property {import("ol/size").Size} tileSize
+ * @property {import("@vcmap/core").Extent|undefined} extent
+ * @property {Object<string, string>} parameters
+ * @property {string} version
+ */
+
+/**
+ * @param {WMSSourceOptions} options
+ * @returns {import("ol/source/TileWMS").default}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function getWMSSource(options) {
+  const projection = options.tilingSchema === 'geographic' ?
+    wgs84Projection :
+    mercatorProjection;
+
+  const projectionExtent = projection.proj.getExtent();
+
+  const width = getWidth(projectionExtent);
+  const size = options.tilingSchema === 'geographic' ? width / (options.tileSize[0] * 2) : width / options.tileSize[0];
+  const maxZoom = options.maxLevel + 1;
+  const resolutions = [];
+  for (let z = 0; z < maxZoom; ++z) {
+    // generate resolutions and matrixIds arrays for options WMTS
+    resolutions.push(size / (2 ** z));
+  }
+  const tilingOptions = {
+    origin: getTopLeft(projectionExtent),
+    resolutions,
+    tileSize: options.tileSize,
+    minZoom: options.minLevel,
+  };
+  if (options.extent && options.extent.isValid()) {
+    tilingOptions.extent = options.extent.getCoordinatesInProjection(projection);
+  }
+
+  const sourceOptions = {
+    url: options.url,
+    tileGrid: new TileGrid(tilingOptions),
+    params: options.parameters,
+  };
+  if (!isSameOrigin(options.url)) {
+    sourceOptions.crossOrigin = 'anonymous';
+  }
+  if (options.tilingSchema === 'geographic') {
+    if (options.version === '1.3.0') {
+      sourceOptions.projection = 'CRS:84';
+    } else {
+      sourceOptions.projection = 'EPSG:4326';
+    }
+  }
+  return new TileWMS(sourceOptions);
+}

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

@@ -0,0 +1,235 @@
+import { parseInteger } from '@vcsuite/parsers';
+import { getLogger } from '@vcsuite/logger';
+import RasterLayer from './rasterLayer.js';
+import Openlayers from '../maps/openlayers.js';
+import CesiumMap from '../maps/cesium.js';
+import WMTSOpenlayers from './openlayers/wmtsOpenlayers.js';
+import WMTSCesium from './cesium/wmtsCesium.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * @typedef {RasterLayerOptions} WMTSOptions
+ * @property {string} layer
+ * @property {string|undefined} style
+ * @property {string|undefined} format
+ * @property {string|undefined} tileMatrixSetID
+ * @property {string|undefined} tileMatrixPrefix
+ * @property {Array<string>} matrixIds
+ * @property {number} [numberOfLevelZeroTilesX=1]
+ * @property {number} [numberOfLevelZeroTilesY=1]
+ * @property {Object|undefined} openlayersOptions
+ * @property {import("ol/size").Size} [tileSize=[256,256]]
+ * @api
+ */
+
+/**
+ * @typedef {RasterLayerImplementationOptions} WMTSImplementationOptions
+ * @property {string} layer
+ * @property {string} style
+ * @property {string} format
+ * @property {string} tileMatrixSetID
+ * @property {import("ol/size").Size} tileSize
+ * @property {number} numberOfLevelZeroTilesX
+ * @property {number} numberOfLevelZeroTilesY
+ * @property {Array<string>} matrixIds
+ * @property {Object} openlayersOptions
+ */
+
+
+/**
+ * @param {Array<string>} matrixIds
+ * @param {number} maxLevel
+ * @param {string} prefix
+ * @returns {Array<string>}
+ */
+function getMatrixIds(matrixIds, maxLevel, prefix) {
+  if (matrixIds.length > 0) {
+    if (matrixIds.length === (maxLevel + 1)) {
+      return matrixIds;
+    } else {
+      getLogger('vcs.vcm.layer.cesium.WMTSCesium')
+        .log('matrixIds must have the same length as maxLevel');
+    }
+  }
+  return new Array(maxLevel + 1).fill(undefined).map((value, index) => {
+    return `${prefix}${index}`;
+  });
+}
+
+
+/**
+ * WMTS layer
+ * @class
+ * @export
+ * @extends {RasterLayer}
+ * @api stable
+ */
+class WMTS extends RasterLayer {
+  static get className() { return 'vcs.vcm.layer.WMTS'; }
+
+  /**
+   * @returns {WMTSOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...RasterLayer.getDefaultOptions(),
+      tilingSchema: 'mercator',
+      numberOfLevelZeroTilesX: 1,
+      numberOfLevelZeroTilesY: 1,
+      layer: '',
+      style: '',
+      format: '',
+      tileMatrixPrefix: '',
+      tileMatrixSetID: '',
+      openlayersOptions: {},
+      matrixIds: [],
+      tileSize: /** @type {import("ol/size").Size} */ ([256, 256]),
+    };
+  }
+
+  /**
+   * @param {WMTSOptions} options
+   */
+  constructor(options) {
+    const defaultOptions = WMTS.getDefaultOptions();
+    options.tilingSchema = options.tilingSchema || defaultOptions.tilingSchema;
+    super(options);
+
+    this._supportedMaps = [
+      Openlayers.className,
+      CesiumMap.className,
+    ];
+
+    /** @type {number} */
+    this.numberOfLevelZeroTilesX = parseInteger(
+      options.numberOfLevelZeroTilesX,
+      defaultOptions.numberOfLevelZeroTilesX,
+    );
+
+    /** @type {number} */
+    this.numberOfLevelZeroTilesY = parseInteger(
+      options.numberOfLevelZeroTilesY,
+      defaultOptions.numberOfLevelZeroTilesY,
+    );
+
+    /** @type {string} */
+    this.layer = options.layer || defaultOptions.layer;
+
+    /** @type {string} */
+    this.style = options.style || defaultOptions.style;
+
+    /** @type {string} */
+    this.format = options.format || defaultOptions.format;
+
+    /** @type {string} */
+    this.tileMatrixPrefix = options.tileMatrixPrefix || defaultOptions.tileMatrixPrefix;
+
+    /** @type {string} */
+    this.tileMatrixSetID = options.tileMatrixSetID || defaultOptions.tileMatrixSetID;
+
+    /** @type {Object} */
+    this.openlayersOptions = options.openlayersOptions || defaultOptions.openlayersOptions;
+
+    /** @type {Array.<string> | null} */
+    this.matrixIds = Array.isArray(options.matrixIds) ? options.matrixIds : defaultOptions.matrixIds;
+
+    /** @type {import("ol/size").Size} */
+    this.tileSize = options.tileSize || defaultOptions.tileSize;
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {WMTSImplementationOptions}
+   */
+  getImplementationOptions() {
+    return {
+      ...super.getImplementationOptions(),
+      layer: this.layer,
+      style: this.style,
+      format: this.format,
+      tileMatrixSetID: this.tileMatrixSetID,
+      tileSize: this.tileSize,
+      numberOfLevelZeroTilesX: this.numberOfLevelZeroTilesX,
+      numberOfLevelZeroTilesY: this.numberOfLevelZeroTilesY,
+      matrixIds: getMatrixIds(this.matrixIds, this.maxLevel, this.tileMatrixPrefix),
+      openlayersOptions: this.openlayersOptions,
+    };
+  }
+
+  /**
+   * @inheritDoc
+   * @param {import("@vcmap/core").VcsMap} map
+   * @returns {Array<WMTSOpenlayers|WMTSCesium>}
+   */
+  createImplementationsForMap(map) {
+    if (map instanceof Openlayers) {
+      return [new WMTSOpenlayers(map, this.getImplementationOptions())];
+    }
+
+    if (map instanceof CesiumMap) {
+      return [new WMTSCesium(map, this.getImplementationOptions())];
+    }
+    return [];
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {WMTSOptions}
+   */
+  getConfigObject() {
+    const config = /** @type {WMTSOptions} */ (super.getConfigObject());
+    const defaultOptions = WMTS.getDefaultOptions();
+
+    if (this.tilingSchema !== defaultOptions.tilingSchema) {
+      config.tilingSchema = this.tilingSchema;
+    } else {
+      delete config.tilingSchema;
+    }
+
+    if (this.numberOfLevelZeroTilesX !== defaultOptions.numberOfLevelZeroTilesX) {
+      config.numberOfLevelZeroTilesX = this.numberOfLevelZeroTilesX;
+    }
+
+    if (this.numberOfLevelZeroTilesY !== defaultOptions.numberOfLevelZeroTilesY) {
+      config.numberOfLevelZeroTilesY = this.numberOfLevelZeroTilesY;
+    }
+
+    if (this.layer !== defaultOptions.layer) {
+      config.layer = this.layer;
+    }
+
+    if (this.style !== defaultOptions.style) {
+      config.style = this.style;
+    }
+
+    if (this.format !== defaultOptions.format) {
+      config.format = this.format;
+    }
+
+    if (this.tileMatrixPrefix !== defaultOptions.tileMatrixPrefix) {
+      config.tileMatrixPrefix = this.tileMatrixPrefix;
+    }
+
+    if (this.tileMatrixSetID !== defaultOptions.tileMatrixSetID) {
+      config.tileMatrixSetID = this.tileMatrixSetID;
+    }
+
+    if (Object.keys(this.openlayersOptions).length > 0) {
+      config.openlayersOptions = { ...this.openlayersOptions };
+    }
+
+    if (this.matrixIds.length > 0) {
+      config.matrixIds = this.matrixIds.slice();
+    }
+
+    if (this.tileSize[0] !== defaultOptions.tileSize[0] || this.tileSize[1] !== defaultOptions.tileSize[1]) {
+      config.tileSize = /** @type {import("ol/size").Size} */ (this.tileSize.slice());
+    }
+
+    return config;
+  }
+}
+
+VcsClassRegistry.registerClass(WMTS.className, WMTS);
+export default WMTS;
+