@vcmap/core 5.0.0-rc.0

package/src/vcs/vcm/layer/cesium/vectorContext.js

@@ -0,0 +1,167 @@
+import { PrimitiveCollection, BillboardCollection, LabelCollection } from '@vcmap/cesium';
+
+/**
+ * @typedef {Object} VectorContextFeatureCache
+ * @property {Array<import("@vcmap/cesium").Primitive|import("@vcmap/cesium").GroundPrimitive|import("@vcmap/cesium").GroundPolylinePrimitive|import("@vcmap/cesium").ClassificationPrimitive|import("@vcmap/cesium").Model>|undefined} primitives
+ * @property {Array<import("@vcmap/cesium").Billboard|import("@vcmap/cesium").Entity>|undefined} billboards
+ * @property {Array<import("@vcmap/cesium").Label|import("@vcmap/cesium").Entity>|undefined} labels
+ */
+
+/**
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @param {import("@vcmap/cesium").Primitive|import("@vcmap/cesium").GroundPrimitive|import("@vcmap/cesium").GroundPolylinePrimitive|import("@vcmap/cesium").ClassificationPrimitive|import("@vcmap/cesium").Label|import("@vcmap/cesium").Billboard|import("@vcmap/cesium").Entity|import("@vcmap/cesium").Model} primitive
+ */
+export function setReferenceForPicking(feature, primitive) {
+  primitive.olFeature = feature;
+}
+
+/**
+ * @param {import("@vcmap/cesium").PrimitiveCollection|import("@vcmap/cesium").BillboardCollection|import("@vcmap/cesium").LabelCollection|import("@vcmap/cesium").EntityCollection=} collection
+ * @param {Array<import("@vcmap/cesium").Primitive|import("@vcmap/cesium").GroundPrimitive|import("@vcmap/cesium").GroundPolylinePrimitive|import("@vcmap/cesium").ClassificationPrimitive|import("@vcmap/cesium").Billboard|import("@vcmap/cesium").Label|import("@vcmap/cesium").Entity|import("@vcmap/cesium").Model>=} array
+ */
+export function removeArrayFromCollection(collection, array) {
+  if (array) {
+    array.forEach((primitive) => {
+      collection.remove(primitive);
+    });
+  }
+}
+
+/**
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @param {Map<import("ol").Feature<import("ol/geom/Geometry").default>, Array<import("@vcmap/cesium").Primitive|import("@vcmap/cesium").GroundPrimitive|import("@vcmap/cesium").GroundPolylinePrimitive|import("@vcmap/cesium").ClassificationPrimitive|import("@vcmap/cesium").Billboard|import("@vcmap/cesium").Label|import("@vcmap/cesium").Entity|import("@vcmap/cesium").Model>>} featuresMap
+ * @param {import("@vcmap/cesium").PrimitiveCollection|import("@vcmap/cesium").BillboardCollection|import("@vcmap/cesium").LabelCollection|import("@vcmap/cesium").EntityCollection} primitiveCollection
+ */
+export function removeFeatureFromMap(feature, featuresMap, primitiveCollection) {
+  removeArrayFromCollection(primitiveCollection, featuresMap.get(feature));
+  featuresMap.delete(feature);
+}
+
+/**
+ * @param {Array<import("@vcmap/cesium").Primitive|import("@vcmap/cesium").GroundPrimitive|import("@vcmap/cesium").GroundPolylinePrimitive|import("@vcmap/cesium").ClassificationPrimitive|import("@vcmap/cesium").Entity.ConstructorOptions|import("@vcmap/cesium").Model|Object>} primitives
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @param {boolean} allowPicking
+ * @param {import("@vcmap/cesium").BillboardCollection|import("@vcmap/cesium").LabelCollection|import("@vcmap/cesium").PrimitiveCollection|import("@vcmap/cesium").EntityCollection} primitiveCollection
+ * @param {Map<import("ol").Feature<import("ol/geom/Geometry").default>, Array<import("@vcmap/cesium").Billboard|import("@vcmap/cesium").Label|import("@vcmap/cesium").Primitive|import("@vcmap/cesium").GroundPrimitive|import("@vcmap/cesium").GroundPolylinePrimitive|import("@vcmap/cesium").ClassificationPrimitive|import("@vcmap/cesium").Entity|import("@vcmap/cesium").Model>>} featureMap
+ */
+export function addPrimitiveToContext(primitives, feature, allowPicking, primitiveCollection, featureMap) {
+  if (primitives.length) {
+    const cesiumPrimitives = primitives.map((primitiveOptions) => {
+      const primitive = primitiveCollection.add(primitiveOptions);
+      if (allowPicking) {
+        setReferenceForPicking(feature, primitive);
+      }
+      return primitive;
+    });
+    if (!featureMap.has(feature)) {
+      featureMap.set(feature, cesiumPrimitives);
+    } else {
+      featureMap.get(feature).push(...cesiumPrimitives);
+    }
+  }
+}
+
+/**
+ * @class
+ */
+class VectorContext {
+  /**
+   * @param {import("@vcmap/cesium").Scene} scene
+   * @param {import("@vcmap/cesium").PrimitiveCollection} rootCollection
+   */
+  constructor(scene, rootCollection) {
+    /** @type {import("@vcmap/cesium").PrimitiveCollection} */
+    this.primitives = new PrimitiveCollection();
+    /** @type {import("@vcmap/cesium").BillboardCollection} */
+    this.billboards = new BillboardCollection({ scene });
+    /** @type {import("@vcmap/cesium").LabelCollection} */
+    this.labels = new LabelCollection({ scene });
+    /** @type {Map<import("ol").Feature<import("ol/geom/Geometry").default>, Array<import("@vcmap/cesium").Primitive|import("@vcmap/cesium").GroundPrimitive|import("@vcmap/cesium").GroundPolylinePrimitive|import("@vcmap/cesium").ClassificationPrimitive|import("@vcmap/cesium").Model>>} */
+    this.featureToPrimitiveMap = new Map();
+    /** @type {Map<import("ol").Feature<import("ol/geom/Geometry").default>, Array<import("@vcmap/cesium").Billboard>>} */
+    this.featureToBillboardMap = new Map();
+    /** @type {Map<import("ol").Feature<import("ol/geom/Geometry").default>, Array<import("@vcmap/cesium").Label>>} */
+    this.featureToLabelMap = new Map();
+
+    rootCollection.add(this.primitives);
+    rootCollection.add(this.billboards);
+    rootCollection.add(this.labels);
+  }
+
+  /**
+   * @param {Array<import("@vcmap/cesium").Primitive|import("@vcmap/cesium").GroundPrimitive|import("@vcmap/cesium").GroundPolylinePrimitive|import("@vcmap/cesium").ClassificationPrimitive|import("@vcmap/cesium").Model>} primitives
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @param {boolean=} allowPicking
+   */
+  addPrimitives(primitives, feature, allowPicking) {
+    addPrimitiveToContext(primitives, feature, allowPicking, this.primitives, this.featureToPrimitiveMap);
+  }
+
+  /**
+   * @param {Array<Object>} billboardOptions
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @param {boolean=} allowPicking
+   */
+  addBillboards(billboardOptions, feature, allowPicking) {
+    addPrimitiveToContext(billboardOptions, feature, allowPicking, this.billboards, this.featureToBillboardMap);
+  }
+
+  /**
+   * @param {Array<Object>} labelOptions
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @param {boolean=} allowPicking
+   */
+  addLabels(labelOptions, feature, allowPicking) {
+    addPrimitiveToContext(labelOptions, feature, allowPicking, this.labels, this.featureToLabelMap);
+  }
+
+  /**
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   */
+  removeFeature(feature) {
+    removeFeatureFromMap(feature, this.featureToPrimitiveMap, this.primitives);
+    removeFeatureFromMap(feature, this.featureToBillboardMap, this.billboards);
+    removeFeatureFromMap(feature, this.featureToLabelMap, this.labels);
+  }
+
+  /**
+   * Caches the current cesium resources for a feature, removing them from the feature map
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>}feature
+   * @returns {VectorContextFeatureCache}
+   */
+  createFeatureCache(feature) {
+    /** @type {VectorContextFeatureCache} */
+    const cache = {};
+    cache.primitives = this.featureToPrimitiveMap.get(feature);
+    this.featureToPrimitiveMap.delete(feature);
+    cache.billboards = this.featureToBillboardMap.get(feature);
+    this.featureToBillboardMap.delete(feature);
+    cache.labels = this.featureToLabelMap.get(feature);
+    this.featureToLabelMap.delete(feature);
+    return cache;
+  }
+
+  /**
+   * @param {VectorContextFeatureCache} cache
+   */
+  clearFeatureCache(cache) {
+    removeArrayFromCollection(this.primitives, cache.primitives);
+    removeArrayFromCollection(this.billboards, cache.billboards);
+    removeArrayFromCollection(this.labels, cache.labels);
+  }
+
+  /**
+   * Clears all collections and maps
+   * @api
+   */
+  clear() {
+    this.primitives.removeAll();
+    this.billboards.removeAll();
+    this.labels.removeAll();
+    this.featureToBillboardMap.clear();
+    this.featureToLabelMap.clear();
+    this.featureToPrimitiveMap.clear();
+  }
+}
+
+export default VectorContext;

package/src/vcs/vcm/layer/cesium/vectorRasterTileCesium.js

@@ -0,0 +1,116 @@
+import { ImageryLayer as CesiumImageryLayer, Rectangle } from '@vcmap/cesium';
+import VectorTileImageryProvider from './vectorTileImageryProvider.js';
+import RasterLayerCesium from './rasterLayerCesium.js';
+import { wgs84Projection } from '../../util/projection.js';
+
+/**
+ * represents a rasterized tiled vector layer implementation for cesium.
+ * @class
+ * @export
+ * @extends {RasterLayerCesium}
+ * @implements {VectorTileImplementation}
+ */
+class VectorRasterTileCesium extends RasterLayerCesium {
+  static get className() {
+    return 'vcs.vcm.layer.cesium.VectorRasterTileCesium';
+  }
+
+  /**
+   * @param {import("@vcmap/core").CesiumMap} map
+   * @param {VectorTileImplementationOptions} options
+   */
+  constructor(map, options) {
+    /** @type {RasterLayerImplementationOptions} */
+    const rasterLayerOptions = {
+      ...options,
+      tilingSchema: 'mercator',
+      splitDirection: undefined,
+      opacity: undefined,
+    };
+    super(map, rasterLayerOptions);
+    /** @type {import("@vcmap/core").TileProvider} */
+    this.tileProvider = options.tileProvider;
+
+    /**
+     * @type {import("ol/size").Size}
+     */
+    this.tileSize = options.tileSize;
+
+    /**
+     * @type {number|null}
+     * @private
+     */
+    this._reloadTimeout = null;
+
+    /**
+     * @type {VectorTileImageryProvider}
+     */
+    this.imageryProvider = null;
+  }
+
+  /**
+   * @returns {import("@vcmap/cesium").ImageryLayer}
+   */
+  getCesiumLayer() {
+    this.imageryProvider = new VectorTileImageryProvider({
+      tileProvider: this.tileProvider,
+      tileSize: this.tileSize,
+    });
+
+    const layerOptions = {
+      alpha: this.opacity,
+      splitDirection: this.splitDirection,
+      minimumTerrainLevel: this.minLevel,
+      maximumTerrainLevel: this.maxLevel,
+    };
+    if (this.extent && this.extent.isValid()) {
+      const extent = this.extent.getCoordinatesInProjection(wgs84Projection);
+      layerOptions.rectangle = Rectangle.fromDegrees(extent[0], extent[1], extent[2], extent[3]);
+    }
+    // @ts-ignore
+    const imageryLayer = new CesiumImageryLayer(this.imageryProvider, layerOptions);
+    return imageryLayer;
+  }
+
+
+  /**
+   * reloads the tiles
+   * @private
+   */
+  _reloadTiles() {
+    window.clearTimeout(this._reloadTimeout);
+    // eslint-disable-next-line no-underscore-dangle
+    if (this.imageryProvider && this.imageryProvider._reload) {
+      this._reloadTimeout = window.setTimeout(() => {
+        // todo find a way to reload specific tiles
+        // eslint-disable-next-line no-underscore-dangle
+        this.imageryProvider._reload();
+        this._reloadTimeout = null;
+      });
+    }
+  }
+
+  /**
+   * rerenders the specified tiles
+   * rendering happens async
+   * @param {Array<string>} tileIds
+   * @api
+   */
+  updateTiles(tileIds) {
+    if (tileIds.length > 0) {
+      this._reloadTiles();
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/core").StyleItem} style
+   * @param {boolean=} silent
+   * @api
+   */
+  // eslint-disable-next-line no-unused-vars
+  updateStyle(style, silent) {
+    this._reloadTiles();
+  }
+}
+
+export default VectorRasterTileCesium;

package/src/vcs/vcm/layer/cesium/vectorTileImageryProvider.js

@@ -0,0 +1,246 @@
+import { Event as CesiumEvent, Rectangle, Math as CesiumMath } from '@vcmap/cesium';
+import { compose, create as createTransform, scale as scaleTransform } from 'ol/transform.js';
+import { rectangleToExtent } from '../tileProvider/tileProvider.js';
+import { wgs84ToMercatorTransformer } from '../../util/projection.js';
+import CanvasTileRenderer from '../../../../ol/render/canvas/canvasTileRenderer.js';
+
+/**
+ * @param {import("ol/extent").Extent} extent
+ * @param {import("ol/coordinate").Coordinate} center
+ * @param {Object} context
+ * @param {import("ol/size").Size} tileSize
+ * @returns {import("ol").CanvasTileRenderer}
+ */
+export function toContext(extent, center, context, tileSize) {
+  const { canvas } = context;
+  canvas.width = tileSize[0];
+  canvas.height = tileSize[1];
+  canvas.style.width = `${tileSize[0] }px`;
+  canvas.style.height = `${tileSize[1] }px`;
+  const scaleY = (extent[2] - extent[0]) / (extent[3] - extent[1]);
+  const sx = 1 / ((extent[2] - extent[0]) / 256);
+  const sy = -1 / ((extent[3] - extent[1]) / 256);
+  const transform = scaleTransform(createTransform(), 1, 1);
+  const newTransform = compose(transform, 128, 128, sx, sy, 0, -center[0], -center[1]);
+  // @ts-ignore
+  return new CanvasTileRenderer(context, 1, extent, newTransform, 0, null, null, scaleY);
+}
+
+
+/**
+ * creates a canvas and draws the features on the canvas;
+ * @param {Array<import("ol").Feature<import("ol/geom/Geometry").default>>} features
+ * @param {import("ol/extent").Extent} extent
+ * @param {import("@vcmap/cesium").Cartographic} center
+ * @param {import("ol/size").Size} tileSize
+ * @returns {HTMLCanvasElement}
+ */
+export function getCanvasFromFeatures(features, extent, center, tileSize) {
+  const canvas = document.createElement('canvas');
+  canvas.width = tileSize[0];
+  canvas.height = tileSize[0];
+  const centerMercator =
+    wgs84ToMercatorTransformer([CesiumMath.toDegrees(center.longitude), CesiumMath.toDegrees(center.latitude)]);
+  const vectorContext = toContext(extent, centerMercator, canvas.getContext('2d'), tileSize);
+
+  features.forEach((feature) => {
+    const styleFunction = feature.getStyleFunction();
+    const featureStyles = /** @type {Array<import("ol/style/Style").default>} */(styleFunction(feature, 1));
+    featureStyles.forEach((styleToUse) => {
+      // @ts-ignore
+      vectorContext.drawFeature(feature, styleToUse);
+    });
+  });
+  return canvas;
+}
+
+/**
+ * @typedef {Object} VectorTileImageryProviderOptions
+ * @property {import("@vcmap/core").TileProvider} tileProvider
+ * @property {import("ol/size").Size} tileSize
+ * @api
+ */
+
+/**
+ * implementation of Cesium ImageryProvider Interface
+ * @class
+ * @export
+ */
+class VectorTileImageryProvider {
+  /**
+   * @param {VectorTileImageryProviderOptions} options
+   */
+  constructor(options) {
+    /**
+     * @type {import("@vcmap/core").TileProvider}
+     */
+    this.tileProvider = options.tileProvider;
+
+    /**
+     * @type {import("@vcmap/cesium").WebMercatorTilingScheme}
+     * @private
+     */
+    this._tilingScheme = this.tileProvider.tilingScheme;
+
+    /**
+     * @type {import("ol/size").Size}
+     * @private
+     */
+    this._tileSize = options.tileSize;
+
+    /**
+     * @type {import("@vcmap/cesium").Event}
+     * @private
+     */
+    this._errorEvent = new CesiumEvent();
+
+    /**
+     * @type {Promise<boolean>}
+     * @private
+     */
+    this._readyPromise = Promise.resolve(true);
+
+    /**
+     * @type {HTMLCanvasElement}
+     */
+    this.emptyCanvas = document.createElement('canvas');
+    this.emptyCanvas.width = this.tileWidth;
+    this.emptyCanvas.height = this.tileHeight;
+
+
+    /**
+     * @type {number}
+     */
+    this.minLevel = 0;
+    /**
+     * @type {number}
+     */
+    this.maxLevel = 26;
+
+    /**
+     * @type {Function}
+     */
+    this._reload = undefined;
+
+    // Necessary to satisfy Cesium ImageryProvider Interface
+    this.defaultAlpha = undefined;
+    this.defaultNightAlpha = undefined;
+    this.defaultDayAlpha = undefined;
+    this.defaultBrightness = undefined;
+    this.defaultContrast = undefined;
+    this.defaultHue = undefined;
+    this.defaultSaturation = undefined;
+    this.defaultGamma = undefined;
+    this.defaultMinificationFilter = undefined;
+    this.defaultMagnificationFilter = undefined;
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  get ready() {
+    return true;
+  }
+
+  /**
+   * @returns {Promise<boolean>}
+   */
+  get readyPromise() {
+    return this._readyPromise;
+  }
+
+  /**
+   * @returns {import("@vcmap/cesium").Rectangle}
+   */
+  get rectangle() {
+    return this._tilingScheme.rectangle;
+  }
+
+  /**
+   * @returns {number}
+   */
+  get tileWidth() {
+    return this._tileSize[0];
+  }
+
+  /**
+   * @returns {number}
+   */
+  get tileHeight() {
+    return this._tileSize[1];
+  }
+
+  /**
+   * @returns {number}
+   */
+  get maximumLevel() {
+    return this.maxLevel;
+  }
+
+  /**
+   * @returns {number}
+   */
+  get minimumLevel() {
+    return this.minLevel;
+  }
+
+  /**
+   * @returns {import("@vcmap/cesium").TilingScheme}
+   */
+  get tilingScheme() {
+    return this._tilingScheme;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get tileDiscardPolicy() {
+    return undefined;
+  }
+
+  /**
+   * @returns {import("@vcmap/cesium").Event}
+   */
+  get errorEvent() {
+    return this._errorEvent;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get credit() {
+    return undefined;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get proxy() {
+    return undefined;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get hasAlphaChannel() {
+    return true;
+  }
+
+  /**
+   * Requests the image for a given tile.  This function should
+   * not be called before {@link TileCoordinatesImageryProvider#ready} returns true.
+   *
+   * @param {number} x The tile X coordinate.
+   * @param {number} y The tile Y coordinate.
+   * @param {number} level The tile level.
+   * @returns {Promise<HTMLImageElement|HTMLCanvasElement>} A promise for the image that will resolve when the image is available, or
+   *          undefined if there are too many active requests to the server, and the request
+   *          should be retried later.  The resolved image may be either an
+   *          Image or a Canvas DOM object.
+   */
+  async requestImage(x, y, level) {
+    const features = await this.tileProvider.getFeaturesForTile(x, y, level);
+    if (features.length === 0) {
+      return this.emptyCanvas;
+    }
+    const rectangle = this.tileProvider.tilingScheme.tileXYToRectangle(x, y, level);
+    const extent = rectangleToExtent(rectangle);
+    const center = Rectangle.center(rectangle);
+    return getCanvasFromFeatures(features, extent, center, this._tileSize);
+  }
+}
+
+export default VectorTileImageryProvider;

package/src/vcs/vcm/layer/cesium/wmsCesium.js

@@ -0,0 +1,71 @@
+import { ImageryLayer as CesiumImageryLayer, Rectangle, WebMercatorTilingScheme, WebMapServiceImageryProvider } from '@vcmap/cesium';
+
+import RasterLayerCesium from './rasterLayerCesium.js';
+import { wgs84Projection } from '../../util/projection.js';
+
+/**
+ * represents a specific Cesium WMSCesium Layer class.
+ * @class
+ * @export
+ * @extends {RasterLayerCesium}
+ */
+class WMSCesium extends RasterLayerCesium {
+  static get className() { return 'vcs.vcm.layer.cesium.WMSCesium'; }
+
+  /**
+   * @param {import("@vcmap/core").CesiumMap} map
+   * @param {WMSImplementationOptions} options
+   */
+  constructor(map, options) {
+    super(map, options);
+    /**
+     * @type {Object<string, *>}
+     */
+    this.parameters = options.parameters;
+    /**
+     * @type {boolean}
+     */
+    this.highResolution = options.highResolution;
+    /**
+     * @type {import("ol/size").Size}
+     */
+    this.tileSize = options.tileSize;
+  }
+
+  getCesiumLayer() {
+    const parameters = { ...this.parameters };
+    if (this.highResolution) {
+      parameters.width = this.tileSize[0] * 2;
+      parameters.height = this.tileSize[1] * 2;
+    }
+    const options = {
+      url: this.url,
+      layers: parameters.LAYERS,
+      minimumLevel: this.minLevel,
+      maximumLevel: this.maxLevel,
+      show: false,
+      parameters,
+      tileWidth: this.tileSize[0],
+      tileHeight: this.tileSize[1],
+    };
+
+    if (this.extent && this.extent.isValid()) {
+      const extent = this.extent.getCoordinatesInProjection(wgs84Projection);
+      if (extent) {
+        options.rectangle = Rectangle.fromDegrees(extent[0], extent[1], extent[2], extent[3]);
+      }
+    }
+    if (this.tilingSchema === 'mercator') {
+      options.tilingScheme = new WebMercatorTilingScheme();
+    }
+
+    const imageryProvider = new WebMapServiceImageryProvider(options);
+    const layerOptions = {
+      alpha: this.opacity,
+      splitDirection: this.splitDirection,
+    };
+    return new CesiumImageryLayer(imageryProvider, layerOptions);
+  }
+}
+
+export default WMSCesium;

package/src/vcs/vcm/layer/cesium/wmtsCesium.js

@@ -0,0 +1,101 @@
+import { Rectangle, WebMapTileServiceImageryProvider, ImageryLayer as CesiumImageryLayer } from '@vcmap/cesium';
+import RasterLayerCesium from './rasterLayerCesium.js';
+import { wgs84Projection } from '../../util/projection.js';
+import { getTilingScheme } from '../rasterLayer.js';
+
+/**
+ * represents a specific WMTS Implementation for {@link CesiumMap}.
+ * @class
+ * @export
+ * @extends {RasterLayerCesium}
+ */
+class WMTSCesium extends RasterLayerCesium {
+  static get className() { return 'vcs.vcm.layer.cesium.WMTSCesium'; }
+
+  /**
+   * @param {import("@vcmap/core").CesiumMap} 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;
+  }
+
+
+  /**
+   * @returns {import("@vcmap/cesium").ImageryLayer}
+   */
+  getCesiumLayer() {
+    // This is a bug in Cesium, they cant cope with {Layer} placeholder..
+    const url = this.url.indexOf('{Layer}') !== -1 ? this.url.replace('{Layer}', this.layer) : this.url;
+    const extent = this.extent.getCoordinatesInProjection(wgs84Projection);
+    const options = {
+      url,
+      layer: this.layer,
+      style: this.style,
+      format: this.format,
+      tileMatrixSetID: this.tileMatrixSetID,
+      maximumLevel: this.maxLevel,
+      rectangle: Rectangle.fromDegrees(extent[0], extent[1], extent[2], extent[3]),
+      tileWidth: this.tileSize[0],
+      tileHeight: this.tileSize[1],
+    };
+
+
+    options.tilingScheme = getTilingScheme({
+      tilingSchema: this.tilingSchema,
+      numberOfLevelZeroTilesX: this.numberOfLevelZeroTilesX,
+      numberOfLevelZeroTilesY: this.numberOfLevelZeroTilesY,
+    });
+
+    options.tileMatrixLabels = this.matrixIds;
+
+    const imageryProvider = new WebMapTileServiceImageryProvider(options);
+    const layerOptions = {
+      alpha: this.opacity,
+      splitDirection: this.splitDirection,
+    };
+    return new CesiumImageryLayer(imageryProvider, layerOptions);
+  }
+}
+
+export default WMTSCesium;