@masterportal/masterportalapi 2.2.0 → 2.5.0

package/src/defaults.js

@@ -19,7 +19,7 @@ export default {
         {resolution: 1.3229159522920524, scale: 5000, zoomLevel: 6},
         {resolution: 0.6614579761460262, scale: 2500, zoomLevel: 7},
         {resolution: 0.2645831904584105, scale: 1000, zoomLevel: 8},
-        {resolution: 0.13229159522920521, scale: 500, zoomLevel: 9}
+        {resolution: 0.1322915952292052, scale: 500, zoomLevel: 9}
     ],
     namedProjections: [
         ["EPSG:25832", "+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"]
@@ -34,5 +34,21 @@ export default {
         }
     ],
     gazetteerUrl: "https://geodienste.hamburg.de/HH_WFS_GAGES?service=WFS&request=GetFeature&version=2.0.0",
-    showGeographicIdentifier: false
+    showGeographicIdentifier: false,
+    sceneOptions: {
+        camera: {
+            enableTerrainAdjustmentWhenLoading: true
+        },
+        globe: {
+            depthTestAgainstTerrain: true // is necessary for scene.pickedPosition and correct height of the terrain. @see {https://github.com/CesiumGS/cesium/issues/5676}
+        },
+        highDynamicRange: false,
+        pickTranslucentDepth: true,
+        shadowMap: {
+            darkness: 0.6,
+            maximumDistance: 5000.0,
+            size: 2048
+        },
+        shadows: false
+    }
 };

package/src/index.js

@@ -2,12 +2,14 @@ import {createMapView} from "./maps/mapView";
 import * as crs from "./crs";
 import * as rawLayerList from "./rawLayerList";
 import * as wms from "./layer/wms";
+import * as wmts from "./layer/wmts";
 import * as wfs from "./layer/wfs";
 import * as geojson from "./layer/geojson";
 import * as vectorBase from "./layer/vectorBase";
 import * as vectorTile from "./layer/vectorTile";
 import * as oaf from "./layer/oaf";
 import * as terrain from "./layer/terrain";
+import * as entities from "./layer/entities";
 import Tileset from "./layer/tileset";
 import * as layerLib from "./layer/lib";
 import {search, setGazetteerUrl} from "./searchAddress";
@@ -16,6 +18,7 @@ import setBackgroundImage from "./lib/setBackgroundImage";
 export {
     createMapView,
     wms,
+    wmts,
     wfs,
     geojson,
     layerLib,
@@ -23,6 +26,7 @@ export {
     vectorTile,
     oaf,
     terrain,
+    entities,
     Tileset,
     setBackgroundImage,
     setGazetteerUrl,

package/src/layer/entities.js

@@ -0,0 +1,179 @@
+/**
+ * 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
+ * @param {function} callback to execute after datasource is added to map and entities are added
+ * @returns {*} null or the return-value of the callback
+ */
+export function createDataSource (rawLayer, map, callback) {
+    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);
+                if (callback) {
+                    return callback();
+                }
+                return null;
+            });
+        }
+        else {
+            addEntities(rawLayer, dataSource, map);
+            if (callback) {
+                return callback();
+            }
+        }
+    }
+    return null;
+}
+
+
+/**
+ * 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/vectorTile.js

@@ -4,8 +4,8 @@ import VectorTileSource from "ol/source/VectorTile";
 import OpenLayersTileGrid from "ol/tilegrid/TileGrid";
 import {extentFromProjection} from "ol/tilegrid";
 
-import stylefunction from "ol-mapbox-style/dist/stylefunction";
-import {defaultResolutions} from "ol-mapbox-style/dist/util";
+import {stylefunction} from "ol-mapbox-style";
+import {defaultResolutions} from "ol-mapbox-style";
 
 import defaults from "../defaults";
 
@@ -171,4 +171,4 @@ export function setStyle (layer, glStyle, {options = {}} = {}) {
         options.spriteData,
         options.spriteImageUrl,
         options.getFonts);
-}
+}

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,