@masterportal/masterportalapi 2.1.1 → 2.4.0

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,9 +4,11 @@ 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";
+import * as vectortile from "../../layer/vectorTile";
 import * as oaf from "../../layer/oaf";
 import {createMapView} from "../../maps/mapView";
 import {initializeLayerList, getLayerWhere} from "../../rawLayerList";
@@ -21,9 +23,11 @@ let mapIdCounter = 0;
  */
 const layerBuilderMap = {
         wms,
+        wmts,
         wfs,
         geojson,
         vectorBase,
+        vectortile,
         oaf
     },
     originalAddLayer = PluggableMap.prototype.addLayer;

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

@@ -4,6 +4,8 @@
 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 WMTS from "ol/source/WMTS.js";
 import olcsAbstractSynchronizer from "olcs/AbstractSynchronizer.js";
 import olcsCore from "olcs/core.js";
 import {Tile, Image as ImageLayer} from "ol/layer.js";
@@ -40,7 +42,6 @@ class WMSRasterSynchronizer extends olcsAbstractSynchronizer {
          * @type {!Cesium.ImageryLayerCollection}
          * @private
          */
-        /* eslint-disable no-undef */
         this.ourLayers = new Cesium.ImageryLayerCollection();
     }
 
@@ -87,17 +88,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 +109,98 @@ 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 if (source instanceof WMTS) {
+            provider = new Cesium.WebMapTileServiceImageryProvider({
+                url: source.getUrls()[0],
+                format: source.getFormat(),
+                layer: source.getLayer(),
+                style: source.getStyle(),
+                tileMatrixSetID: source.getMatrixSet(),
+                tileMatrixLabels: source.getTileGrid().getMatrixIds(),
+                credit: source.getAttributions()
+            });
         }
         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 +217,6 @@ class WMSRasterSynchronizer extends olcsAbstractSynchronizer {
                 getTopLeft(wgs84Extent)
             ];
 
-        /* eslint-disable no-undef */
         return olCoords.map(coord => Cesium.Cartographic.fromDegrees(coord[0], coord[1]));
     }
     /**
@@ -201,7 +238,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;