@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/layer/{wmsHelpers.js → wmsHelpers.ts}

@@ -1,52 +1,57 @@
-import TileWMS from 'ol/source/TileWMS.js';
+import type { Size } from 'ol/size.js';
+import TileWMS, { type Options as TileWMSOptions } from 'ol/source/TileWMS.js';
 import { getTopLeft, getWidth } from 'ol/extent.js';
-import TileGrid from 'ol/tilegrid/TileGrid.js';
+import TileGrid, {
+  type Options as TileGridOptions,
+} from 'ol/tilegrid/TileGrid.js';
 import { mercatorProjection, wgs84Projection } from '../util/projection.js';
 import { isSameOrigin } from '../util/urlHelpers.js';
+import type Extent from '../util/extent.js';
+import { TilingScheme } from './rasterLayer.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
- */
+export type WMSSourceOptions = {
+  url: string;
+  tilingSchema: TilingScheme;
+  maxLevel: number;
+  minLevel: number;
+  tileSize: Size;
+  extent?: Extent;
+  parameters: Record<string, string>;
+  version: string;
+};
 
-/**
- * @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;
+export function getWMSSource(options: WMSSourceOptions): TileWMS {
+  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 size =
+    options.tilingSchema === TilingScheme.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 WmtsLayer
-    resolutions.push(size / (2 ** z));
+    resolutions.push(size / 2 ** z);
   }
-  const tilingOptions = {
+  const tilingOptions: TileGridOptions = {
     origin: getTopLeft(projectionExtent),
     resolutions,
     tileSize: options.tileSize,
     minZoom: options.minLevel,
   };
   if (options.extent && options.extent.isValid()) {
-    tilingOptions.extent = options.extent.getCoordinatesInProjection(projection);
+    tilingOptions.extent =
+      options.extent.getCoordinatesInProjection(projection);
   }
 
-  const sourceOptions = {
+  const sourceOptions: TileWMSOptions = {
     url: options.url,
     tileGrid: new TileGrid(tilingOptions),
     params: options.parameters,
@@ -60,6 +65,8 @@ export function getWMSSource(options) {
     } else {
       sourceOptions.projection = 'EPSG:4326';
     }
+  } else {
+    sourceOptions.projection = 'EPSG:3857';
   }
   return new TileWMS(sourceOptions);
 }

package/src/layer/{wmsLayer.js → wmsLayer.ts}

@@ -1,75 +1,104 @@
 import { check } from '@vcsuite/check';
 import { parseBoolean } from '@vcsuite/parsers';
-import RasterLayer from './rasterLayer.js';
-import WMSFeatureProvider from '../featureProvider/wmsFeatureProvider.js';
+import type { Size } from 'ol/size.js';
+
+import RasterLayer, {
+  RasterLayerImplementationOptions,
+  RasterLayerOptions,
+} from './rasterLayer.js';
+import WMSFeatureProvider, {
+  WMSFeatureProviderOptions,
+} from '../featureProvider/wmsFeatureProvider.js';
 import CesiumMap from '../map/cesiumMap.js';
 import WmsCesiumImpl from './cesium/wmsCesiumImpl.js';
 import OpenlayersMap from '../map/openlayersMap.js';
 import WmsOpenlayersImpl from './openlayers/wmsOpenlayersImpl.js';
 import Extent from '../util/extent.js';
-import { VcsClassRegistry } from '../classRegistry.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import type VcsMap from '../map/vcsMap.js';
 
-/**
- * @typedef {RasterLayerImplementationOptions} WMSImplementationOptions
- * @property {Object<string, *>} parameters
- * @property {boolean} highResolution
- * @property {import("ol/size").Size} tileSize
- * @property {string} version
- * @api
- */
+export type WMSImplementationOptions = RasterLayerImplementationOptions & {
+  parameters: Record<string, string>;
+  highResolution: boolean;
+  tileSize: import('ol/size.js').Size;
+  version: string;
+};
 
-/**
- * @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
- */
+export type WMSOptions = RasterLayerOptions & {
+  /**
+   *  string with comma separated names of the layers to display
+   */
+  layers?: string;
+  /**
+   * WMS version (either 1.1.1 (default) or 1.3.0)
+   * @default '1.1.1'
+   */
+  version?: string;
+  /**
+   * key value pair of additional WMS parameters, url query notation possible
+   */
+  parameters?: Record<string, string> | string;
+  /**
+   * whether this layer should send getFeatureInfo requests to the service when objects are clicked.
+   */
+  featureInfo?: Partial<WMSFeatureProviderOptions>;
+  /**
+   * @default [256, 256]
+   */
+  tileSize?: Size;
+  /**
+   * use higher resolution images (sofar only in 3D)
+   */
+  highResolution?: boolean;
+};
 
 /**
  * WmsLayer layer for Cesium and OpenlayersMap
- * @class
- * @export
- * @extends {RasterLayer}
- * @api stable
+ * @group Layer
  */
-class WMSLayer extends RasterLayer {
-  static get className() { return 'WMSLayer'; }
+class WMSLayer extends RasterLayer<WmsCesiumImpl | WmsOpenlayersImpl> {
+  static get className(): string {
+    return 'WMSLayer';
+  }
 
-  /**
-   * @returns {WMSOptions}
-   */
-  static getDefaultOptions() {
+  static getDefaultOptions(): WMSOptions {
     return {
       ...RasterLayer.getDefaultOptions(),
       version: '1.1.1',
       parameters: undefined,
       featureInfo: undefined,
-      tileSize: /** @type {import("ol/size").Size} */ ([256, 256]),
+      tileSize: [256, 256],
       highResolution: false,
       layers: '',
     };
   }
 
+  version: string;
+
+  parameters: Record<string, string>;
+
+  tileSize: Size;
+
+  highResolution: boolean;
+
+  private _featureInfoOptions: Partial<WMSFeatureProviderOptions> | undefined;
+
   /**
-   * @param {WMSOptions} options
+   * @param  options
    */
-  constructor(options) {
+  constructor(options: WMSOptions) {
     super(options);
     const defaultOptions = WMSLayer.getDefaultOptions();
 
-    /** @type {string} */
-    this.version = options.version || defaultOptions.version;
+    this.version = options.version || (defaultOptions.version as string);
 
-    /** @type {Object<string, *>} */
     this.parameters = {};
     if (options.parameters) {
-      let parsedParameters;
+      let parsedParameters: Record<string, string> = {};
       if (typeof options.parameters === 'string') {
-        parsedParameters = Object.fromEntries(new URLSearchParams(options.parameters));
+        parsedParameters = Object.fromEntries(
+          new URLSearchParams(options.parameters),
+        );
       } else if (options.parameters instanceof Object) {
         parsedParameters = options.parameters;
       }
@@ -79,33 +108,28 @@ class WMSLayer extends RasterLayer {
     }
 
     if (this.parameters.TRANSPARENT == null) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       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,
-      OpenlayersMap.className,
-    ];
+    this.parameters.LAYERS =
+      options.layers || (defaultOptions.layers as string);
+
+    this.tileSize = options.tileSize || (defaultOptions.tileSize as Size);
+    this.highResolution = parseBoolean(
+      options.highResolution,
+      defaultOptions.highResolution,
+    );
+
+    this._featureInfoOptions =
+      options.featureInfo || defaultOptions.featureInfo;
+    this._supportedMaps = [CesiumMap.className, OpenlayersMap.className];
   }
 
-  /**
-   * @inheritDoc
-   * @returns {Promise<void>}
-   */
-  initialize() {
+  initialize(): Promise<void> {
     if (!this.initialized) {
       this._setFeatureProvider();
     }
@@ -114,11 +138,10 @@ class WMSLayer extends RasterLayer {
 
   /**
    * Sets a FeatureProvider if provided with featureInfo options
-   * @private
    */
-  _setFeatureProvider() {
+  private _setFeatureProvider(): void {
     if (this._featureInfoOptions) {
-      const options = {
+      const options: WMSFeatureProviderOptions = {
         url: this.url,
         tilingSchema: this.tilingSchema,
         maxLevel: this.maxLevel,
@@ -133,7 +156,7 @@ class WMSLayer extends RasterLayer {
     }
   }
 
-  async reload() {
+  async reload(): Promise<void> {
     if (this.featureProvider && this._featureInfoOptions) {
       this.featureProvider.destroy();
       this._setFeatureProvider();
@@ -141,10 +164,7 @@ class WMSLayer extends RasterLayer {
     return super.reload();
   }
 
-  /**
-   * @returns {WMSImplementationOptions}
-   */
-  getImplementationOptions() {
+  getImplementationOptions(): WMSImplementationOptions {
     return {
       ...super.getImplementationOptions(),
       version: this.version,
@@ -154,11 +174,9 @@ class WMSLayer extends RasterLayer {
     };
   }
 
-  /**
-   * @param {import("@vcmap/core").VcsMap} map
-   * @returns {Array<WmsCesiumImpl|WmsOpenlayersImpl>}
-   */
-  createImplementationsForMap(map) {
+  createImplementationsForMap(
+    map: VcsMap,
+  ): (WmsCesiumImpl | WmsOpenlayersImpl)[] {
     if (map instanceof CesiumMap) {
       return [new WmsCesiumImpl(map, this.getImplementationOptions())];
     } else if (map instanceof OpenlayersMap) {
@@ -169,11 +187,9 @@ class WMSLayer extends RasterLayer {
 
   /**
    * Sets the layers to request from the WmsLayer
-   * @param {string|Array<string>} layers - a layer name or an array of layer names
-   * @returns {Promise<void>}
-   * @api stable
+   * @param  layers - a layer name or an array of layer names
    */
-  async setLayers(layers) {
+  async setLayers(layers: string | string[]): Promise<void> {
     check(layers, [String, [String]]);
     const layersArray = Array.isArray(layers) ? layers : [layers];
     this.parameters.LAYERS = layersArray.join(',');
@@ -182,18 +198,13 @@ class WMSLayer extends RasterLayer {
 
   /**
    * Returns the currently active layers
-   * @returns {Array<string>}
-   * @api
    */
-  getLayers() {
+  getLayers(): string[] {
     return this.parameters.LAYERS ? this.parameters.LAYERS.split(',') : [];
   }
 
-  /**
-   * @returns {WMSOptions}
-   */
-  toJSON() {
-    const config = /** @type {WMSOptions} */ (super.toJSON());
+  toJSON(): WMSOptions {
+    const config: WMSOptions = super.toJSON();
     const defaultOptions = WMSLayer.getDefaultOptions();
 
     if (this.parameters.LAYERS) {
@@ -207,7 +218,8 @@ class WMSLayer extends RasterLayer {
     const parameters = { ...this.parameters };
     delete parameters.VERSION;
     delete parameters.LAYERS;
-
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     if (parameters.TRANSPARENT === false) {
       delete parameters.TRANSPARENT;
     }
@@ -224,21 +236,35 @@ class WMSLayer extends RasterLayer {
       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.tileSize[0] !== defaultOptions?.tileSize?.[0] ||
+      this.tileSize[1] !== defaultOptions.tileSize[1]
+    ) {
+      config.tileSize = this.tileSize.slice();
     }
 
-    if (this.featureProvider && this.featureProvider instanceof WMSFeatureProvider) {
-      const featureInfoConfig = this.featureProvider.toJSON();
-      if (this.tileSize[0] === featureInfoConfig.tileSize[0] || this.tileSize[1] === featureInfoConfig.tileSize[1]) {
+    if (
+      this.featureProvider &&
+      this.featureProvider instanceof WMSFeatureProvider
+    ) {
+      const featureInfoConfig: Partial<WMSFeatureProviderOptions> =
+        this.featureProvider.toJSON();
+      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)) {
+      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)
+        new Extent(featureInfoConfig.extent).equals(this.extent)
       ) {
         delete featureInfoConfig.extent;
       }
@@ -266,5 +292,5 @@ class WMSLayer extends RasterLayer {
   }
 }
 
-VcsClassRegistry.registerClass(WMSLayer.className, WMSLayer);
+layerClassRegistry.registerClass(WMSLayer.className, WMSLayer);
 export default WMSLayer;

package/src/layer/wmtsLayer.ts

@@ -0,0 +1,240 @@
+import { parseInteger } from '@vcsuite/parsers';
+import { getLogger } from '@vcsuite/logger';
+import type { Size } from 'ol/size.js';
+import type { Options as OLWMTSOptions } from 'ol/source/WMTS.js';
+
+import RasterLayer, {
+  RasterLayerImplementationOptions,
+  RasterLayerOptions,
+  TilingScheme,
+} from './rasterLayer.js';
+import OpenlayersMap from '../map/openlayersMap.js';
+import CesiumMap from '../map/cesiumMap.js';
+import WmtsOpenlayersImpl from './openlayers/wmtsOpenlayersImpl.js';
+import WmtsCesiumImpl from './cesium/wmtsCesiumImpl.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import type VcsMap from '../map/vcsMap.js';
+
+export type WMTSOptions = RasterLayerOptions & {
+  layer: string;
+  wmtsStyle?: string;
+  format?: string;
+  tileMatrixSetID?: string;
+  tileMatrixPrefix?: string;
+  matrixIds: string[];
+  numberOfLevelZeroTilesX?: number;
+  numberOfLevelZeroTilesY?: number;
+  openlayersOptions?: Partial<OLWMTSOptions>;
+  tileSize?: Size;
+};
+
+export type WMTSImplementationOptions = RasterLayerImplementationOptions & {
+  layer: string;
+  style: string;
+  format: string;
+  tileMatrixSetID: string;
+  tileSize: import('ol/size.js').Size;
+  numberOfLevelZeroTilesX: number;
+  numberOfLevelZeroTilesY: number;
+  matrixIds: string[];
+  openlayersOptions: Partial<OLWMTSOptions>;
+};
+
+function getMatrixIds(
+  matrixIds: string[],
+  maxLevel: number,
+  prefix: string,
+): string[] {
+  if (matrixIds.length > 0) {
+    if (matrixIds.length === maxLevel + 1) {
+      return matrixIds;
+    } else {
+      getLogger('WmtsCesiumImpl').log(
+        'matrixIds must have the same length as maxLevel',
+      );
+    }
+  }
+  return new Array(maxLevel + 1).fill(undefined).map((_value, index) => {
+    return `${prefix}${index}`;
+  });
+}
+
+/**
+ * @group Layer
+ */
+class WMTSLayer extends RasterLayer<WmtsCesiumImpl | WmtsOpenlayersImpl> {
+  static get className(): string {
+    return 'WMTSLayer';
+  }
+
+  static getDefaultOptions(): WMTSOptions {
+    return {
+      ...RasterLayer.getDefaultOptions(),
+      tilingSchema: TilingScheme.MERCATOR,
+      numberOfLevelZeroTilesX: 1,
+      numberOfLevelZeroTilesY: 1,
+      layer: '',
+      wmtsStyle: '',
+      format: '',
+      tileMatrixPrefix: '',
+      tileMatrixSetID: '',
+      openlayersOptions: {},
+      matrixIds: [],
+      tileSize: [256, 256],
+    };
+  }
+
+  numberOfLevelZeroTilesX: number;
+
+  numberOfLevelZeroTilesY: number;
+
+  layer: string;
+
+  wmtsStyle: string;
+
+  format: string;
+
+  tileMatrixPrefix: string;
+
+  tileMatrixSetID: string;
+
+  openlayersOptions: Partial<OLWMTSOptions>;
+
+  matrixIds: string[];
+
+  tileSize: Size;
+
+  constructor(options: WMTSOptions) {
+    const defaultOptions = WMTSLayer.getDefaultOptions();
+    options.tilingSchema = options.tilingSchema || defaultOptions.tilingSchema;
+    super(options);
+
+    this._supportedMaps = [OpenlayersMap.className, CesiumMap.className];
+
+    this.numberOfLevelZeroTilesX = parseInteger(
+      options.numberOfLevelZeroTilesX,
+      defaultOptions.numberOfLevelZeroTilesX,
+    );
+
+    this.numberOfLevelZeroTilesY = parseInteger(
+      options.numberOfLevelZeroTilesY,
+      defaultOptions.numberOfLevelZeroTilesY,
+    );
+
+    this.layer = options.layer || defaultOptions.layer;
+
+    this.wmtsStyle = options.wmtsStyle || (defaultOptions.wmtsStyle as string);
+
+    this.format = options.format || (defaultOptions.format as string);
+
+    this.tileMatrixPrefix =
+      options.tileMatrixPrefix || (defaultOptions.tileMatrixPrefix as string);
+
+    this.tileMatrixSetID =
+      options.tileMatrixSetID || (defaultOptions.tileMatrixSetID as string);
+
+    this.openlayersOptions =
+      options.openlayersOptions || defaultOptions.openlayersOptions || {};
+
+    this.matrixIds = Array.isArray(options.matrixIds)
+      ? options.matrixIds
+      : defaultOptions.matrixIds;
+
+    this.tileSize = options.tileSize || (defaultOptions.tileSize as Size);
+  }
+
+  getImplementationOptions(): WMTSImplementationOptions {
+    return {
+      ...super.getImplementationOptions(),
+      layer: this.layer,
+      style: this.wmtsStyle,
+      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,
+    };
+  }
+
+  createImplementationsForMap(
+    map: VcsMap,
+  ): (WmtsOpenlayersImpl | WmtsCesiumImpl)[] {
+    if (map instanceof OpenlayersMap) {
+      return [new WmtsOpenlayersImpl(map, this.getImplementationOptions())];
+    }
+
+    if (map instanceof CesiumMap) {
+      return [new WmtsCesiumImpl(map, this.getImplementationOptions())];
+    }
+    return [];
+  }
+
+  toJSON(): WMTSOptions {
+    const config: Partial<WMTSOptions> = super.toJSON();
+    const defaultOptions = WMTSLayer.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.wmtsStyle !== defaultOptions.wmtsStyle) {
+      config.wmtsStyle = this.wmtsStyle;
+    }
+
+    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 = this.tileSize.slice();
+    }
+
+    return config as WMTSOptions;
+  }
+}
+
+layerClassRegistry.registerClass(WMTSLayer.className, WMTSLayer);
+export default WMTSLayer;