@masterportal/masterportalapi 2.1.1 → 2.4.0

package/src/defaults.js

@@ -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,11 +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";
@@ -15,12 +18,15 @@ import setBackgroundImage from "./lib/setBackgroundImage";
 export {
     createMapView,
     wms,
+    wmts,
     wfs,
     geojson,
     layerLib,
     vectorBase,
+    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

@@ -0,0 +1,174 @@
+import MVT from "ol/format/MVT";
+import VectorTileLayer from "ol/layer/VectorTile";
+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 defaults from "../defaults";
+
+const OL_DEFAULT_VECTOR_TILE_GRID_CRS = "EPSG:3857";
+
+/**
+ * Used properites of layer specification as in services.json.
+ *
+ * @typedef {Object} rawLayer
+ * @property {string} id - Layer id
+ * @property {string} name - Layer name
+ * @property {string} url - source url
+ * @property {string} [epsg=defaults.epsg] - vector tiles crs
+ * @property {number[]} [extent] - extent
+ * @property {number} [maxZoom=22] - min zoom level
+ * @property {number} [minZoom] - max zoom level
+ * @property {function} [olAttribution] - optional function that takes a module:ol/PluggableMap~FrameState and returns a string or an array of strings representing source attributions
+ * @property {number[]} [origin] - The tile grid origin, i.e. where the x and y axes meet ([z, 0, 0]). Tile coordinates increase left to right and downwards
+ * @property {number[][]} [origins] - Tile grid origins, i.e. where the x and y axes meet ([z, 0, 0]), for each zoom level. If given, the array length should match the length of the resolutions array, i.e. each resolution can have a different origin. Tile coordinates increase left to right and downwards. If not specified, extent or origin must be provided.
+ * @property {number[]} [resolutions] - Resolutions. The array index of each resolution needs to match the zoom level. This means that even if a minZoom is configured, the resolutions array will have a length of maxZoom + 1.
+ * @property {number} [tileSize=512] - size of a tile in px
+ * @property {number} [zDirection=1] - zoom level offset for requested tiles
+ */
+
+/**
+ * Used properites of layer specification as in services.json.
+ *
+ * @typedef {Object} tileGridProperties
+ * @property {string} [epsg] - vector tiles crs
+ * @property {number} [tileSize=512] - size of a tile in px
+ * @property {number} [zDirection=1] - zoom level offset for requested tiles
+ * @property {number} [minZoom] - min zoom level
+ * @property {number} [maxZoom=22] - may zoom level
+ * @property {number[]} [extent] - extent
+ * @property {number[]} [resolutions] - Resolutions. The array index of each resolution needs to match the zoom level. This means that even if a minZoom is configured, the resolutions array will have a length of maxZoom + 1.
+ * @property {number[]} [origin] - The tile grid origin, i.e. where the x and y axes meet ([z, 0, 0]). Tile coordinates increase left to right and downwards
+ * @property {number[][]} [origins] - Tile grid origins, i.e. where the x and y axes meet ([z, 0, 0]), for each zoom level. If given, the array length should match the length of the resolutions array, i.e. each resolution can have a different origin. Tile coordinates increase left to right and downwards. If not specified, extent or origin must be provided.
+ */
+
+/**
+ * Additional properties for style specification
+ * @typedef {Object} styleParams
+ * @property {string} [sourceId] - key from the Mapbox Style object. When a source key is provided, all layers for the specified source will be included in the style function.
+ * @property {number[]} [resolutions] - Resolutions for mapping resolution to zoom level.
+ * @property {object} [spriteData] - Sprite data from the url specified in the Mapbox Style object's sprite property. Only required if a sprite property is specified in the Mapbox Style object.
+ * @property {string} [spriteImageUrl] - Url to sprite image
+ * @property {function} [getFonts] - Function that receives a font stack as arguments, and returns a (modified) font stack that is available. Font names are the names used in the Mapbox Style object. If not provided, the font stack will be used as-is. This function can also be used for loading web fonts.
+ */
+
+/**
+ * Create a TileGrid.
+ *
+ * @param {tileGridProperties} [options] - options
+ * @returns {ol.tilegrid.TileGrid} TileGrid
+ */
+export function createTileGrid (options = {}) {
+
+    const epsg = options.epsg ? options.epsg : defaults.epsg,
+        extent = options.extent ? options.extent : extentFromProjection(epsg),
+        tileSize = options.tileSize ? options.tileSize : 512,
+        resolutions = options.resolutions ? options.resolutions : defaults.options.map(x => x.resolution),
+        tileGridParams = {
+            extent: extent,
+            resolutions: resolutions,
+            minZoom: options.minZoom,
+            tileSize: new Array(2).fill(tileSize)
+        };
+
+    if (options.origins) {
+        tileGridParams.origins = options.origins;
+    }
+    else {
+        tileGridParams.origin = options.origin ? options.origin : [tileGridParams.extent[0], tileGridParams.extent[3]];
+    }
+
+    return new OpenLayersTileGrid(tileGridParams);
+}
+
+/**
+ * Check if TileGrid must be created.
+ *
+ * @param {tileGridProperties} options - tile grid parameters
+ * @returns {boolean} must create tileGrid
+ */
+function mustCreateTileGrid (options = {}) {
+    const createOptions = [options.extent, options.tileSize, options.resolutions, options.origin, options.origins, options.minZoom],
+        epsgTest = options.epsg ? options.epsg.toUpperCase() : options.epsg;
+
+    if (!createOptions.every((x) => typeof x === "undefined")) {
+        return true;
+    }
+
+    if (epsgTest !== OL_DEFAULT_VECTOR_TILE_GRID_CRS) {
+        return true;
+    }
+    return false;
+}
+
+/**
+ * Creates a Vector Tiles source.
+ *
+ * @param {string} url - url to vector tile service
+ * @param {tileGridProperties} [options] - properties for tileGrid
+ * @returns {ol.source.VectorTile} Source
+ */
+export function createLayerSource (url, options = {}) {
+    options.epsg = options.epsg ? options.epsg : defaults.epsg;
+
+    const sourceParams = {
+        projection: options.epsg,
+        format: new MVT(),
+        url: url,
+        tileSize: options.tileSize,
+        zDirection: options.zDirection,
+        minZoom: options.minZoom,
+        maxZoom: options.maxZoom
+    };
+
+    if (mustCreateTileGrid(options)) {
+        sourceParams.tileGrid = createTileGrid(options);
+    }
+
+    return new VectorTileSource(sourceParams);
+}
+
+/**
+ * Creates a Vector Tiles layer.
+ *
+ * @param {rawLayer} rawLayer - rawLayer as specified in services.json
+ * @param {object} [layerParams={}] - extra params of the layer. Can overwrite or extend all ol layer parameters.
+ * @param {object} [options={}] - parameter object. Not used atm.
+ * @returns {ol.layer.VectorTile} Layer with id and source specified in rawLayer
+ */
+export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {}) {
+    if ([rawLayer.id, rawLayer.name, rawLayer.url].some((x) => typeof x === "undefined")) {
+        console.error(`Cancelled creation of layer "${rawLayer.id}"(${rawLayer.name}) because of missing required parameters`);
+        return undefined;
+    }
+    const source = createLayerSource(rawLayer.url, rawLayer),
+        layer = new VectorTileLayer(Object.assign({
+            id: rawLayer.id, name: rawLayer.name, attribution: rawLayer.olAttribution, extent: source.getTileGrid().getExtent(),
+            minZoom: rawLayer.minZoom, maxZoom: rawLayer.maxZoom, source: source,
+            declutter: true}, layerParams));
+
+    if (options.style) {
+        layer.setStyle(options.style);
+    }
+
+    return layer;
+}
+
+/**
+ * Set a mapbox style
+ * @param {ol.layer.VectorTile} layer - layer to style
+ * @param {object} glStyle - MapBox style definition
+ * @param {options} [styleParams={}] - Additional options for style specification
+ * @returns {void}
+ */
+export function setStyle (layer, glStyle, {options = {}} = {}) {
+    stylefunction(layer, glStyle,
+        options.sourceId ? options.sourceId : Object.keys(glStyle.sources)[0],
+        options.resolutions ? options.resolutions : defaultResolutions,
+        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,