@masterportal/masterportalapi 2.2.0 → 2.3.0

package/src/layer/entities.js

@@ -0,0 +1,170 @@
+/**
+ * Sets the layers visibility by setting the show attribute at the datasource.
+ * @param {boolean} value  if true, the entity will be shown
+ * @param {Object} rawLayer  attributes of the layer
+ * @param {string} [rawLayer.id] the id of the layer
+ * @param {OLCesium} map ol cesium map
+ * @returns {void}
+ */
+export function setVisible (value, rawLayer, map) {
+    if (map && typeof map.getDataSources === "function") {
+        const dataSources = map.getDataSources(),
+            dataSource = dataSources.getByName(rawLayer?.id);
+
+        if (dataSource.length === 0) {
+            console.warn("Cannot change visibility of 3D entity for layer with id ", rawLayer.id, ". Datasource is not available.");
+        }
+        else {
+            dataSource[0].show = typeof value === "boolean" ? value : false;
+        }
+    }
+}
+
+/**
+ * Adapts the rawEntity and adds it to the dataSource's entities.
+ * The created entity has the attribute 'layerReferenceId' which contains the rawLayer's id.
+ * @param {Object} rawEntity to add to the dataSource
+ * @param {string} [rawEntity.url] specifying the URI of the glTF asset
+ * @param {number} [rawEntity.longitude] longitude of the position
+ * @param {number} [rawEntity.latitude] latitude of the position
+ * @param {number} [rawEntity.height] height  of the position
+ * @param {boolean} [rawEntity.allowPicking] if true, each geometry instance will only be pickable with Scene#pick. When false, GPU memory is saved
+ * @param {Array} [rawEntity.attributes] attributes of the glTF asset
+ * @param {number} [rawEntity.heading] the rotation about the negative z axis
+ * @param {number} [rawEntity.pitch] the rotation about the negative y axis
+ * @param {number} [rawEntity.roll] the rotation about the positive x axis
+ * @param {boolean} [rawEntity.show] optional- if true, entity is shown.
+ * @param {Cesium.CustomDataSource} dataSource a Cesium.DataSource implementation to manage a group of entities
+ * @param {Object} rawLayer layer specification as in services.json
+ * @param {string} [rawLayer.id] optional id of the layer, passed to help identification in services.json
+ * @returns {Object} the created entity
+ */
+function addEntity (rawEntity, dataSource, rawLayer) {
+    if (typeof rawEntity.url !== "string") {
+        console.warn("Url of entity must be a string, but is:", rawEntity.url);
+        return null;
+    }
+    if (![rawEntity.longitude, rawEntity.latitude, rawEntity.height].every(num => typeof num === "number")) {
+        console.warn("longitude, latitude and height of entity must be a number.");
+        return null;
+    }
+    const position = Cesium.Cartesian3.fromDegrees(rawEntity.longitude, rawEntity.latitude, rawEntity.height),
+        allowPicking = typeof rawEntity.allowPicking === "boolean" ? rawEntity.allowPicking : true,
+        attributes = rawEntity.attributes ? rawEntity.attributes : {};
+    let headingPitchRoll = "",
+        orientation = "",
+        modelOptions = "",
+        entityOptions = null,
+        entity = "",
+        heading = 0,
+        pitch = 0,
+        roll = 0;
+
+    if (typeof rawEntity.heading === "number") {
+        heading = rawEntity.heading / 180 * Math.PI;
+    }
+    if (typeof rawEntity.pitch === "number") {
+        pitch = rawEntity.pitch / 180 * Math.PI;
+    }
+    if (typeof rawEntity.roll === "number") {
+        roll = rawEntity.roll / 180 * Math.PI;
+    }
+    headingPitchRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll);
+    orientation = Cesium.Transforms.headingPitchRollQuaternion(position, headingPitchRoll);
+    modelOptions = Object.assign(rawEntity.modelOptions || {}, {
+        uri: rawEntity.url,
+        scale: typeof rawEntity.scale === "number" ? rawEntity.scale : 1,
+        show: typeof rawEntity.show === "boolean" ? rawEntity.show : false
+    });
+    entityOptions = {
+        name: rawEntity.url,
+        position,
+        orientation,
+        show: typeof rawEntity.show === "boolean" ? rawEntity.show : false,
+        model: modelOptions
+    };
+    entity = dataSource.entities.add(entityOptions);
+    entity.attributes = attributes;
+    entity.allowPicking = allowPicking;
+    entity.layerReferenceId = rawLayer.id;
+    return entity;
+}
+
+/**
+ * Iterates over the entities of the raw layer and adds them to dataSource.
+ * @param {Object} rawLayer  attributes of the layer
+ * @param {string} [rawLayer.id] the id of the layer
+ * @param {string} [rawLayer.entities] array of entities to add
+ * @param {Cesium.CustomDataSource} dataSource a Cesium.DataSource implementation to manage a group of entities
+ * @returns {void}
+ */
+function addEntities (rawLayer, dataSource) {
+    if (rawLayer.entities) {
+        rawLayer.entities.forEach(entity => {
+            // just created dataSource is an object, but if it is got by name it is contained in an array
+            addEntity(entity, Array.isArray(dataSource) ? dataSource[0] : dataSource, rawLayer);
+        });
+    }
+}
+
+/**
+ * Creates a Cesium.CustomDataSource and adds it to map's dataSources.
+ * Iterates over the entities of the raw layer and adds them to dataSource.
+ * @param {Object} rawLayer  attributes of the layer
+ * @param {string} [rawLayer.id] the id of the layer
+ * @param {string} [rawLayer.entities] array of entities to add
+ * @param {OLCesium} map ol cesium map
+ * @returns {void}
+ */
+export function createDataSource (rawLayer, map) {
+    if (!rawLayer) {
+        console.warn("Cannot add entities to rawLayer which is null!");
+    }
+    else if (map && typeof map.getDataSources === "function") {
+        const dataSources = map.getDataSources();
+        let dataSource = dataSources.getByName(rawLayer.id);
+
+        if (dataSource.length === 0) {
+            dataSource = new Cesium.CustomDataSource(rawLayer.id);
+            dataSources.add(dataSource).then(function (addedDataSource) {
+                addEntities(rawLayer, addedDataSource, map);
+            });
+        }
+        else {
+            addEntities(rawLayer, dataSource, map);
+        }
+    }
+}
+
+
+/**
+ * Creates an entities layer to use in ol-Cesium map.
+ * @param {Object} rawLayer layer specification as in services.json
+ * @param {string} [rawLayer.id] optional id of the layer, passed to help identification in services.json
+ * @param {string} [rawLayer.name] optional name of the layer, passed to help identification in services.json
+ * @param {string} [rawLayer.typ] typ of the layer, passed to help identification in services.json
+ * @param {Array} [rawLayer.entities] array of entities to add
+ * @param {OLCesium} map ol cesium map
+ * @returns {Object} layer
+ */
+export function createLayer (rawLayer, map) {
+    createDataSource(rawLayer, map);
+    this.values = {
+        name: rawLayer.name,
+        id: rawLayer.id,
+        typ: rawLayer.typ
+    };
+    return this;
+}
+
+/**
+ * Returns the value for the given key of the rawlayer.
+ * @param {String} key to get the value for
+ * @returns {*} the value to the key
+ */
+export function get (key) {
+    if (!this.values) {
+        return undefined;
+    }
+    return this.values[key];
+}

package/src/layer/geojson/index.js

@@ -25,6 +25,13 @@ export function createLayerSource ({url, features, clusterDistance}, options) {
     if (clusterDistance) {
         return createClusterVectorSource(source, clusterDistance, options.clusterGeometryFunction);
     }
+
+    source.once("featuresloadend", event => {
+        if (typeof options.afterLoading === "function") {
+            options.afterLoading(event?.features);
+        }
+    });
+
     return source;
 }
 

package/src/layer/geojson/style.js

@@ -14,6 +14,7 @@ export function setCustomStyles (styles) {
 
 // // // STYLE PARTS
 const marker = new Icon({
+        crossOrigin: "anonymous",
         src: markerSvg,
         // center bottom of marker 📍 is intended to show the spot
         anchor: [0.5, 1]

package/src/layer/terrain.js

@@ -12,7 +12,6 @@ function createTerrainProvider (rawLayer) {
         Object.assign(options, rawLayer.cesiumTerrainProviderOptions);
     }
     options.url = rawLayer.url;
-    /* eslint-disable no-undef */
     return new Cesium.CesiumTerrainProvider(options);
 }
 
@@ -31,7 +30,6 @@ export function setVisible (value, rawLayer, map) {
             map.getCesiumScene().terrainProvider = createTerrainProvider(rawLayer);
         }
         else {
-            /* eslint-disable no-undef */
             map.getCesiumScene().terrainProvider = new Cesium.EllipsoidTerrainProvider({});
         }
     }
@@ -42,20 +40,15 @@ export function setVisible (value, rawLayer, map) {
  * @param {Object} rawLayer - layer specification as in services.json
  * @param {string} [rawLayer.id] - optional id of the layer, passed to help identification in services.json
  * @param {string} [rawLayer.url] - the URL of the Cesium terrain server
- * @param {string} [rawLayer.isSelected] - if true, terrain is created and shown
  * @param {string} [rawLayer.cesiumTerrainProviderOptions] - see https://cesiumjs.org/Cesium/Build/Documentation/CesiumTerrainProvider.html
- * @param {OLCesium} map ol cesium map
  * @returns {Object} layer
  */
-export function createLayer (rawLayer, map) {
+export function createLayer (rawLayer) {
     this.values = {
         name: rawLayer.name,
         id: rawLayer.id,
         typ: rawLayer.typ
     };
-    if (rawLayer.isSelected && map && typeof map.getCesiumScene === "function") {
-        setVisible(true, rawLayer, map);
-    }
     return this;
 }
 /**

package/src/layer/tileset.js

@@ -13,7 +13,6 @@ function createTileSet (rawLayer) {
         Object.assign(options, rawLayer.cesium3DTilesetOptions);
     }
     options.url = url;
-    /* eslint-disable no-undef */
     return new Cesium.Cesium3DTileset(options);
 }
 /**
@@ -21,12 +20,10 @@ function createTileSet (rawLayer) {
  * @param {Object} rawLayer - layer specification as in services.json
  * @param {string} [rawLayer.id] - optional id of the layer, passed to help identification in services.json
  * @param {string} [rawLayer.url] - the URL of the Cesium terrain server
- * @param {string} [rawLayer.isSelected] - if true, terrain is created and shown
  * @param {string} [rawLayer.cesiumTerrainProviderOptions] - see https://cesiumjs.org/Cesium/Build/Documentation/CesiumTerrainProvider.html
- * @param {OLCesium} map ol cesium map
  * @returns {void}
  */
-export default function Tileset (rawLayer, map) {
+export default function Tileset (rawLayer) {
     this.values = {
         name: rawLayer.name,
         id: rawLayer.id,
@@ -34,10 +31,6 @@ export default function Tileset (rawLayer, map) {
     };
     this.tileset = createTileSet(rawLayer);
     this.tileset.layerReferenceId = rawLayer.id;
-
-    if (rawLayer.isSelected && map && typeof map.getCesiumScene === "function") {
-        this.setVisible(true, map);
-    }
 }
 /**
  *

package/src/layer/wms.js

@@ -7,6 +7,8 @@ import {get as getProjection} from "ol/proj";
 
 import {getLayerWhere} from "../rawLayerList";
 
+const OLCS_DEFAULT_OLCS_PROJECTION_CRS = "EPSG:3857";
+
 /** @returns {number} random session id in range (0, 9999999) */
 export function generateSessionId () {
     return Math.floor(Math.random() * 9999999);
@@ -138,6 +140,8 @@ export function createLayer (rawLayer, layerParams = {}, options) {
     const source = createLayerSource(rawLayer, options),
         Layer = rawLayer.singleTile ? ImageLayer : TileLayer;
 
+    source.set("olcs.projection", getProjection(OLCS_DEFAULT_OLCS_PROJECTION_CRS));
+
     return new Layer(Object.assign({
         source,
         minResolution: rawLayer.minScale,

package/src/layer/wmts.js

@@ -0,0 +1,194 @@
+import WMTS, {optionsFromCapabilities} from "ol/source/WMTS";
+import WMTSTileGrid from "ol/tilegrid/WMTS";
+import TileLayer from "ol/layer/Tile";
+import {DEVICE_PIXEL_RATIO} from "ol/has";
+import {getWidth} from "ol/extent";
+import WMTSCapabilities from "ol/format/WMTSCapabilities";
+import {get as getProjection} from "ol/proj";
+
+/**
+ * Shows error message in console for various WMTS errors.
+ * @param {String} errorMessage error message
+ * @param {String} layerName layerName
+ * @returns {void}
+ */
+export function showErrorMessage (errorMessage, layerName) {
+    console.error("content: Layer " + layerName + ": " + errorMessage);
+}
+
+/**
+ * Generates resolutions and matrixIds arrays for the WMTS LayerSource.
+ * @param {Array} resolutions The resolutions array for the LayerSource.
+ * @param {Array} matrixIds The matrixIds array for the LayerSource.
+ * @param {Number} length The length of the given arrays.
+ * @param {Number} size The tileSize depending on the extent.
+ * @returns {void}
+ */
+export function generateArrays (resolutions, matrixIds, length, size) {
+    for (let i = 0; i < length; ++i) {
+        resolutions[i] = size / Math.pow(2, i);
+        matrixIds[i] = i;
+    }
+}
+
+/**
+ * Gets the WMTS-GetCapabilities document and parse it
+ * @param {String} url url for getting capabilities
+ * @throws {Error} on unexpected return
+ * @returns {promise} promise resolves to parsed WMTS-GetCapabilities object
+ */
+export function getWMTSCapabilities (url) {
+    return fetch(url)
+        .then(response => {
+            if (response && response.status === 200) {
+                return response.text();
+            }
+            console.error(response);
+            throw new Error(`Failing WMTS request to ${url}. Status: ${response?.status}`);
+        })
+        .then((text) => new WMTSCapabilities().read(text));
+}
+
+/**
+* Creates the LayerSource from definitions in the service.json for this WMTSLayer.
+* @param {Object} attrs attributes of the layer
+* @param {WMTS} tileLayer layer object
+* @returns {void}
+*/
+export function createLayerSourceByDefinitions (attrs, tileLayer) {
+    const projection = getProjection(attrs.coordinateSystem),
+        extent = projection.getExtent(),
+        style = attrs.style,
+        format = attrs.format,
+        wrapX = attrs.wrapX ? attrs.wrapX : false,
+        urls = attrs.urls,
+        size = extent ? getWidth(extent) / parseInt(attrs.tileSize, 10) : null,
+        resLength = parseInt(attrs.resLength, 10),
+        resolutions = new Array(resLength),
+        matrixIds = new Array(resLength),
+        source = new WMTS({
+            projection: projection,
+            attributions: attrs.olAttribution,
+            tileGrid: new WMTSTileGrid({
+                origin: attrs.origin,
+                resolutions: resolutions,
+                matrixIds: matrixIds,
+                tileSize: attrs.tileSize
+            }),
+            tilePixelRatio: DEVICE_PIXEL_RATIO,
+            urls: urls,
+            matrixSet: attrs.tileMatrixSet,
+            matrixSizes: attrs.matrixSizes,
+            layer: attrs.layers,
+            format: format,
+            style: style,
+            version: attrs.version,
+            transparent: attrs.transparent.toString(),
+            wrapX: wrapX,
+            requestEncoding: attrs.requestEncoding,
+            scales: attrs.scales
+        });
+
+    if (size) {
+        generateArrays(resolutions, matrixIds, resLength, size);
+    }
+    else {
+        showErrorMessage(attrs.name, `${projection.getCode()} has been given as projection to wmts.js for layer with id ${attrs.id}, but only "EPSG:4326" and "EPSG:3857" are supported. Please use the "capabilitiesUrl" and "optionsFromCapabilities" configuration parameters on this layer.`);
+    }
+
+    source.matrixSizes = attrs.matrixSizes;
+    source.scales = attrs.scales;
+    tileLayer.setSource(source);
+    tileLayer.getSource().refresh();
+}
+
+/**
+* Creates the LayerSource for this WMTSLayer from the WMTS capabilities.
+* @param {Object} attrs  attributes of the layer
+* @param {WMTS} tileLayer layer object
+* @returns {void}
+*/
+export function createLayerSourceByCapabilities (attrs, tileLayer) {
+    const layerIdentifier = attrs.layers,
+        url = attrs.capabilitiesUrl,
+        matrixSet = attrs.tileMatrixSet,
+        capabilitiesOptions = {
+            layer: layerIdentifier
+        };
+
+    // use the matrixSet (if defined) for optionsFromCapabilities
+    // else look for a tilematrixset in epsg:3857
+    if (matrixSet && matrixSet.length > 0) {
+        capabilitiesOptions.matrixSet = matrixSet;
+    }
+    else {
+        capabilitiesOptions.projection = "EPSG:3857";
+    }
+
+    getWMTSCapabilities(url)
+        .then((result) => {
+            const options = optionsFromCapabilities(result, capabilitiesOptions),
+                tileMatrixSet = result.Contents.TileMatrixSet.filter(set => set.Identifier === options.matrixSet)[0],
+                matrixSizes = [],
+                scales = [];
+
+            // Add the parameters "ScaleDenominator" and "MatrixHeight" / "MatrixWidth" to the source to be able to print WMTS layers
+            tileMatrixSet.TileMatrix.forEach(({MatrixHeight, MatrixWidth, ScaleDenominator}) => {
+                matrixSizes.push([MatrixWidth, MatrixHeight]);
+                scales.push(ScaleDenominator);
+            });
+
+            if (options !== null) {
+                const source = new WMTS(options);
+
+                source.matrixSizes = matrixSizes;
+                source.scales = scales;
+                tileLayer.set("options", options);
+                tileLayer.setSource(source);
+                tileLayer.getSource().refresh();
+            }
+            else {
+                const errorMessage = "Cannot get options from WMTS-Capabilities";
+
+                showErrorMessage(errorMessage, attrs.name || attrs.id);
+                throw new Error(errorMessage);
+            }
+        })
+        .catch((error) => {
+            if (error === "Fetch error") {
+                // error message has already been printed earlier
+                return;
+            }
+            showErrorMessage(error, attrs.name || attrs.id);
+        });
+}
+
+/**
+ * Creates the WMTSLayer.
+ * @param {Object} attrs  attributes of the layer
+ * @returns {void}
+ */
+export function createLayer (attrs) {
+    const tileLayer = new TileLayer({
+        id: attrs.id,
+        source: new WMTS({}),
+        name: attrs.name,
+        minResolution: attrs.minScale,
+        maxResolution: attrs.maxScale,
+        supported: ["2D", "3D"],
+        showSettings: true,
+        extent: null,
+        typ: attrs.typ,
+        legendURL: attrs.legendURL,
+        infoFormat: attrs.infoFormat
+    });
+
+    if (attrs.optionsFromCapabilities === undefined) {
+        createLayerSourceByDefinitions(attrs, tileLayer);
+    }
+    else {
+        createLayerSourceByCapabilities(attrs, tileLayer);
+    }
+
+    return tileLayer;
+}

package/src/maps/ol/olMap.js

@@ -4,6 +4,7 @@ import setBackgroundImage from "../../lib/setBackgroundImage";
 import getInitialLayers from "../../lib/getInitialLayers";
 import defaults from "../../defaults";
 import * as wms from "../../layer/wms";
+import * as wmts from "../../layer/wmts";
 import * as geojson from "../../layer/geojson";
 import * as wfs from "../../layer/wfs";
 import * as vectorBase from "../../layer/vectorBase";
@@ -22,6 +23,7 @@ let mapIdCounter = 0;
  */
 const layerBuilderMap = {
         wms,
+        wmts,
         wfs,
         geojson,
         vectorBase,

package/src/maps/olcs/3dUtils/wmsRasterSynchronizer.js

@@ -4,6 +4,7 @@
 import olLayerGroup from "ol/layer/Group.js";
 import {getUid} from "olcs/util.js";
 import TileWMS from "ol/source/TileWMS.js";
+import ImageWMS from "ol/source/ImageWMS.js";
 import olcsAbstractSynchronizer from "olcs/AbstractSynchronizer.js";
 import olcsCore from "olcs/core.js";
 import {Tile, Image as ImageLayer} from "ol/layer.js";
@@ -40,7 +41,6 @@ class WMSRasterSynchronizer extends olcsAbstractSynchronizer {
          * @type {!Cesium.ImageryLayerCollection}
          * @private
          */
-        /* eslint-disable no-undef */
         this.ourLayers = new Cesium.ImageryLayerCollection();
     }
 
@@ -87,17 +87,17 @@ class WMSRasterSynchronizer extends olcsAbstractSynchronizer {
      * May be overriden by child classes to implement custom behavior.
      * The default implementation handles tiled imageries in EPSG:4326 or
      * EPSG:3859.
-     * @param {!ol.layer.Base} olLayer -
-     * @param {?ol.proj.Projection} viewProj Projection of the view.
-     * @return {?Array.<!Cesium.ImageryLayer>} array or null if not possible
+     * @param {module:ol/layer/Base~BaseLayer } olLayer The raster layer.
+     * @param {module:ol/proj} viewProj Projection of the view.
+     * @return {?Array.<!Cesium.ImageryLayer>} Array or null if not possible.
      * (or supported)
      * @protected
      */
     convertLayerToCesiumImageries (olLayer, viewProj) {
-        let layerOptions = {
-                "show": false
-            },
-            source = {},
+        const layerOptions = {
+            "show": false
+        };
+        let source = {},
             cesiumLayer = {},
             provider = null;
 
@@ -108,61 +108,87 @@ class WMSRasterSynchronizer extends olcsAbstractSynchronizer {
         source = olLayer.getSource();
 
         if (source instanceof TileWMS) {
-            const params = source.getParams(),
-                options = {
-                    "url": source.getUrls()[0],
-                    "parameters": params,
-                    "layers": params.LAYERS,
-                    "show": false
-                },
-                tileGrid = source.getTileGrid();
-
-            if (tileGrid) {
-                const ext = olLayer.getExtent();
-
-                if (ext && viewProj) {
-                    options.rectangle = olcsCore.extentToRectangle(ext, viewProj);
-                    const minMax = this.getMinMaxLevelFromTileGrid(tileGrid, ext, viewProj);
-
-                    options.tileWidth = tileGrid.getTileSize(0)[0];
-                    options.tileHeight = tileGrid.getTileSize(0)[1];
-                    options.minimumLevel = minMax[0];
-                    options.maximumLevel = minMax[1];
-                }
-            }
-            /* eslint-disable no-undef */
-            provider = new Cesium.WebMapServiceImageryProvider(options);
+            provider = this.createProviderForTileWMS(source, viewProj, olLayer);
+        }
+        else if (source instanceof ImageWMS) {
+            return [this.createImageryLayerForImageWMS(olLayer, viewProj)];
         }
         else if (source instanceof StaticImageSource) {
-            const extent = source.getImageExtent(),
-                options = {
-                    "url": source.getUrl(),
-                    "show": false
-                },
-                bottomLeftCorner = proj4("EPSG:25832", "EPSG:4326", getBottomLeft(extent)),
-                topRightCorner = proj4("EPSG:25832", "EPSG:4326", getTopRight(extent));
-
-            /* eslint-disable no-undef */
-            options.rectangle = Cesium.Rectangle.fromDegrees(bottomLeftCorner[0], bottomLeftCorner[1], topRightCorner[0], topRightCorner[1]);
-            /* eslint-disable no-undef */
-            provider = new Cesium.SingleTileImageryProvider(options);
-
+            provider = this.createProviderForStaticImageSource(source);
         }
         else {
             console.warn("Sources other than TileImage are currently not supported.");
             return null;
         }
 
-        // the provider is always non-null if we got this far
-        layerOptions = {
-            "show": false
-        };
-        /* eslint-disable no-undef */
         cesiumLayer = new Cesium.ImageryLayer(provider, layerOptions);
 
         return cesiumLayer ? [cesiumLayer] : null;
     }
 
+    /**
+     * Creates an Cesium.WebMapServiceImageryProvider for RasterLayer of the type TileWMS.
+     * @param {module:ol/source/TileWMS} source The raster layer source.
+     * @param {module:ol/proj} viewProj Projection of the view.
+     * @param {module:ol/layer/Base~BaseLayer } olLayer The raster layer.
+     * @returns {WebMapServiceImageryProvider} The imagery provider.
+     */
+    createProviderForTileWMS (source, viewProj, olLayer) {
+        const params = source.getParams(),
+            options = {
+                "url": source.getUrls()[0],
+                "parameters": params,
+                "layers": params.LAYERS,
+                "show": false
+            },
+            tileGrid = source.getTileGrid();
+
+        if (tileGrid) {
+            const ext = olLayer.getExtent();
+
+            if (ext && viewProj) {
+                options.rectangle = olcsCore.extentToRectangle(ext, viewProj);
+                const minMax = this.getMinMaxLevelFromTileGrid(tileGrid, ext, viewProj);
+
+                options.tileWidth = tileGrid.getTileSize(0)[0];
+                options.tileHeight = tileGrid.getTileSize(0)[1];
+                options.minimumLevel = minMax[0];
+                options.maximumLevel = minMax[1];
+            }
+        }
+
+        return new Cesium.WebMapServiceImageryProvider(options);
+    }
+
+    /**
+     * Creates an Cesium.ImageryLayer for RasterLayer of the type ImageWMS.
+     * @param {module:ol/layer/Base~BaseLayer } olLayer The raster layer.
+     * @param {module:ol/proj} viewProj Projection of the view.
+     * @returns {Cesium.ImageryLayer} The imagery layer.
+     */
+    createImageryLayerForImageWMS (olLayer, viewProj) {
+        return olcsCore.tileLayerToImageryLayer(this.map, olLayer, viewProj);
+    }
+
+    /**
+     * Creates an Cesium.SingleTileImageryProvider for RasterLayer of the type StaticImageSource.
+     * @param {module:ol/source/ImageStatic} source The raster layer source.
+     * @returns {SingleTileImageryProvider} The imagery provider.
+     */
+    createProviderForStaticImageSource (source) {
+        const extent = source.getImageExtent(),
+            options = {
+                "url": source.getUrl(),
+                "show": false
+            },
+            bottomLeftCorner = proj4(source.getProjection().getCode(), "EPSG:4326", getBottomLeft(extent)),
+            topRightCorner = proj4(source.getProjection().getCode(), "EPSG:4326", getTopRight(extent));
+
+        options.rectangle = Cesium.Rectangle.fromDegrees(bottomLeftCorner[0], bottomLeftCorner[1], topRightCorner[0], topRightCorner[1]);
+
+        return new Cesium.SingleTileImageryProvider(options);
+    }
+
     /**
      *
      * @param {ol.Extent} extent -
@@ -179,7 +205,6 @@ class WMSRasterSynchronizer extends olcsAbstractSynchronizer {
                 getTopLeft(wgs84Extent)
             ];
 
-        /* eslint-disable no-undef */
         return olCoords.map(coord => Cesium.Cartographic.fromDegrees(coord[0], coord[1]));
     }
     /**
@@ -201,7 +226,6 @@ class WMSRasterSynchronizer extends olcsAbstractSynchronizer {
             distanceLocalX = Math.abs(tileCoordsLocal[0][1] - tileCoordsLocal[1][1]),
             distanceLocalY = Math.abs(tileCoordsLocal[0][2] - tileCoordsLocal[3][2]),
             extentCoords = this.getExtentPoints(extent, projection),
-            /* eslint-disable no-undef */
             tilingScheme = new Cesium.GeographicTilingScheme({});
         let minLevel = 0,
             maxLevel = 20;