@masterportal/masterportalapi 2.1.1 → 2.4.0

package/src/maps/olcs/olcsMap.js

@@ -1,42 +1,35 @@
 import OLCesium from "olcs/OLCesium.js";
+import {transform, get} from "ol/proj.js";
 import VectorSynchronizer from "olcs/VectorSynchronizer.js";
+
 import FixedOverlaySynchronizer from "./3dUtils/fixedOverlaySynchronizer.js";
 import WMSRasterSynchronizer from "./3dUtils/wmsRasterSynchronizer.js";
-import {transform, get} from "ol/proj.js";
+import defaults from "../../defaults";
 
 let mapIdCounter = 0;
 
 /**
- * Sets the cesium scene defaults from the config.js
- * @param {Cesium.scene} scene Cesium scene.
- * @param {Object} config optional configuration parameters.
+ * Sets the cesium default scene params.
+ * @param {Cesium.scene} scene The cesium scene.
+ * @param {Object} params Optional configuration parameters.
  * @returns {void}
  */
-function setCesiumSceneDefaults (scene, config) {
-    let params;
-
-    if (Object.prototype.hasOwnProperty.call(config, "cesiumParameter")) {
-        params = config.cesiumParameter;
-        if (params?.fog) {
-            scene.fog.enabled = params.fog?.enabled ? params.fog.enabled : scene.fog.enabled;
-            scene.fog.density = params.fog?.density ? parseFloat(params.fog.density) : scene.fog.density;
-            scene.fog.screenSpaceErrorFactor = params.fog?.screenSpaceErrorFactor ? parseFloat(params.fog.screenSpaceErrorFactor) : scene.fog.screenSpaceErrorFactor;
+export function setCesiumSceneParams (scene, params) {
+    Object.keys(params).forEach(paramKey => {
+        const paramValue = params[paramKey];
+
+        if (typeof paramValue === "object") {
+            Object.keys(paramValue).forEach(paramSubKey => {
+                if (paramSubKey !== "heading" && paramSubKey !== "tilt" && paramSubKey !== "altitude") {
+                    scene[paramKey][paramSubKey] = paramValue[paramSubKey];
+                }
+            });
         }
-
-        scene.globe.tileCacheSize = params?.tileCacheSize ? parseInt(params.tileCacheSize, 10) : scene.globe.tileCacheSize;
-        scene.globe.maximumScreenSpaceError = params?.maximumScreenSpaceError ? params.maximumScreenSpaceError : scene.globe.maximumScreenSpaceError;
-        scene.shadowMap.maximumDistance = 5000.0;
-        scene.shadowMap.darkness = 0.6;
-        scene.shadowMap.size = 2048;
-        scene.fxaa = params?.fxaa ? params.fxaa : scene.fxaa;
-        scene.globe.enableLighting = params?.enableLighting ? params.enableLighting : scene.globe.enableLighting;
-        scene.globe.depthTestAgainstTerrain = true;
-        scene.highDynamicRange = false;
-        scene.pickTranslucentDepth = true;
-        scene.camera.enableTerrainAdjustmentWhenLoading = true;
-    }
+        else {
+            scene[paramKey] = paramValue;
+        }
+    });
 }
-
 /**
  * Sets the camera parameters either from config or from an trigger.
  * @param {Object} params Params.
@@ -47,37 +40,91 @@ function setCesiumSceneDefaults (scene, config) {
 export function setCameraParameter (params, map3D, cesium) {
     let camera,
         destination,
-        orientation;
-
-    // if the cameraPosition is given, directly set the cesium camera position, otherwise use olcesium Camera
-    if (map3D && params.cameraPosition) {
-        camera = map3D.getCesiumScene().camera;
-        destination = cesium.Cartesian3.fromDegrees(params.cameraPosition[0], params.cameraPosition[1], params.cameraPosition[2]);
-        orientation = {
-            heading: cesium.Math.toRadians(parseFloat(params.heading)),
-            pitch: cesium.Math.toRadians(parseFloat(params.pitch)),
-            roll: cesium.Math.toRadians(parseFloat(params.roll))
-        };
+        orientation,
+        heading;
 
-        camera.setView({
-            destination,
-            orientation
-        });
-    }
-    else if (map3D !== undefined && params !== null) {
-        camera = map3D.getCamera();
-        if (params?.tilt) {
-            camera.setTilt(parseFloat(params.tilt));
+    if (params && map3D) {
+        if (typeof params.heading !== "undefined") {
+            heading = parseFloat(params.heading);
         }
-        if (params?.heading) {
-            camera.setHeading(parseFloat(params.heading));
+        else if (typeof params.camera?.heading !== "undefined") {
+            heading = parseFloat(params.camera?.heading);
         }
-        if (params?.altitude) {
-            camera.setAltitude(parseFloat(params.altitude));
+        // if the cameraPosition is given, directly set the cesium camera position, otherwise use olcesium Camera
+        if (params.cameraPosition) {
+            camera = map3D.getCesiumScene().camera;
+            destination = cesium.Cartesian3.fromDegrees(params.cameraPosition[0], params.cameraPosition[1], params.cameraPosition[2]);
+            orientation = {
+                heading: cesium.Math.toRadians(heading),
+                pitch: cesium.Math.toRadians(parseFloat(params.pitch)),
+                roll: cesium.Math.toRadians(parseFloat(params.roll))
+            };
+
+            camera.setView({
+                destination,
+                orientation
+            });
+        }
+        else {
+            let tilt,
+                altitude;
+
+            if (typeof params.tilt !== "undefined") {
+                tilt = parseFloat(params.tilt);
+            }
+            else if (typeof params.camera?.tilt !== "undefined") {
+                tilt = parseFloat(params.camera?.tilt);
+            }
+            if (typeof params.altitude !== "undefined") {
+                altitude = parseFloat(params.altitude);
+            }
+            else if (typeof params.camera?.altitude !== "undefined") {
+                altitude = parseFloat(params.camera?.altitude);
+            }
+            camera = map3D.getCamera();
+
+            if (tilt) {
+                camera.setTilt(tilt);
+            }
+            if (heading) {
+                camera.setHeading(heading);
+            }
+            if (altitude) {
+                camera.setAltitude(altitude);
+            }
         }
     }
 }
 
+/**
+ * Creates a 3D-map.
+ * @param {object} [settings] The settings for the 3D-map.
+ * @param {module:ol/PluggableMap~PluggableMap} [settings.map2D] The 2D-Map
+ * @param {Cesium.JulianDate} [settings.shadowTime] The shadow time in julian date format if undefined olcs default is Cesium.JulianDate.now().
+ * @returns {module:OLCesium} the 3d-map
+ */
+export function createMap (settings) {
+    const map3D = new OLCesium({
+        map: settings.map2D,
+        time: settings?.shadowTime,
+        stopOpenLayersEventsPropagation: true,
+        createSynchronizers: (olMap, scene) => {
+            return [new WMSRasterSynchronizer(olMap, scene), new VectorSynchronizer(olMap, scene), new FixedOverlaySynchronizer(olMap, scene)];
+        }
+    });
+
+    map3D.id = `map3D_${mapIdCounter++}`;
+    map3D.mapMode = "3D";
+
+    setCesiumSceneParams(map3D.getCesiumScene(), defaults.sceneOptions);
+    if (settings?.cesiumParameter) {
+        setCesiumSceneParams(map3D.getCesiumScene(), settings.cesiumParameter);
+        setCameraParameter(settings.cesiumParameter, map3D, Cesium);
+    }
+
+    return map3D;
+}
+
 /**
  * Reacts to 3D click event in cesium scene.
  * @param {Event} event The cesium event.
@@ -104,22 +151,29 @@ function reactTo3DClickEvent (event) {
             document.querySelector(".nav li").classList.remove("open");
         }
         cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
-        coords = [window.Cesium.Math.toDegrees(cartographic.longitude), window.Cesium.Math.toDegrees(cartographic.latitude)];
+        coords = [Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)];
         height = scene.globe.getHeight(cartographic);
         if (height) {
             coords = coords.concat([height]);
         }
 
-        distance = window.Cesium.Cartesian3.distance(cartesian, scene.camera.position);
+        distance = Cesium.Cartesian3.distance(cartesian, scene.camera.position);
         resolution = this.map3D.getCamera().calcResolutionForDistance(distance, cartographic.latitude);
         transformedCoords = transform(coords, get("EPSG:4326"), mapProjection);
         transformedPickedPosition = null;
 
         if (scene.pickPositionSupported) {
+            const pickedObject = scene.pick(event.position);
+
             pickedPositionCartesian = scene.pickPosition(event.position);
+
+            if (!pickedPositionCartesian && pickedObject?.primitive instanceof window.Cesium.Billboard) {
+                pickedPositionCartesian = pickedObject.primitive?.position;
+            }
+
             if (pickedPositionCartesian) {
                 cartographicPickedPosition = scene.globe.ellipsoid.cartesianToCartographic(pickedPositionCartesian);
-                transformedPickedPosition = transform([window.Cesium.Math.toDegrees(cartographicPickedPosition.longitude), window.Cesium.Math.toDegrees(cartographicPickedPosition.latitude)], get("EPSG:4326"), mapProjection);
+                transformedPickedPosition = transform([Cesium.Math.toDegrees(cartographicPickedPosition.longitude), Cesium.Math.toDegrees(cartographicPickedPosition.latitude)], get("EPSG:4326"), mapProjection);
                 transformedPickedPosition.push(cartographicPickedPosition.height);
             }
         }
@@ -142,51 +196,23 @@ function reactTo3DClickEvent (event) {
  * @param {Object} map3DObject Contains the scene, 3D map and a callback function.
  * @returns {void}
  */
-function handle3DEvents (map3DObject) {
+export function handle3DEvents (map3DObject) {
     let eventHandler;
 
-    if (window.Cesium) {
-        eventHandler = new window.Cesium.ScreenSpaceEventHandler(map3DObject.scene.canvas);
-        eventHandler.setInputAction(reactTo3DClickEvent.bind(map3DObject), window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    if (Cesium) {
+        eventHandler = new Cesium.ScreenSpaceEventHandler(map3DObject.scene.canvas);
+        eventHandler.setInputAction(reactTo3DClickEvent.bind(map3DObject), Cesium.ScreenSpaceEventType.LEFT_CLICK);
     }
 }
 
-/**
- * Creates a 3D-map.
- * @param {object} [settings] The settings for the 3D-map.
- * @param {module:ol/PluggableMap~PluggableMap} [settings.map2D] The 2D-Map
- * @param {Cesium.JulianDate} [settings.shadowTime] The shadow time in julian date format if undefined olcs default is Cesium.JulianDate.now().
- * @returns {module:OLCesium} the 3d-map
- */
-export function createMap (settings) {
-    const map3D = new OLCesium({
-        map: settings.map2D,
-        time: settings.shadowTime ? settings.shadowTime : undefined,
-        sceneOptions: {
-            shadows: false
-        },
-        stopOpenLayersEventsPropagation: true,
-        createSynchronizers: (olMap, scene) => {
-            return [new WMSRasterSynchronizer(olMap, scene), new VectorSynchronizer(olMap, scene), new FixedOverlaySynchronizer(olMap, scene)];
-        }
-    });
-
-    map3D.id = `map3D_${mapIdCounter++}`;
-    map3D.mapMode = "3D";
-
-    return map3D;
-}
-
 /**
  * Prepares the camera and listens to camera changed events.
  * @param {Cesium.scene} scene Cesium scene.
  * @param {Object} urlParams optional urlParams for camera.
- * @param {Object} map3D olcs map.
  * @param {Object} config optional configuration parameters.
- * @param {Cesium} cesium optional cesium.
  * @returns {Cesium.scene.camera} Cesium camera.
  */
-export function prepareCamera (scene, urlParams, map3D, config, cesium) {
+export function prepareCamera (scene, urlParams, config) {
     const camera = scene.camera;
     let cameraParameter = Object.prototype.hasOwnProperty.call(config, "cameraParameter") ? config.cameraParameter : {};
 
@@ -195,18 +221,8 @@ export function prepareCamera (scene, urlParams, map3D, config, cesium) {
     cameraParameter = urlParams?.tilt ? Object.assign(cameraParameter || {}, {tilt: urlParams?.tilt}) : cameraParameter;
 
     if (Object.keys(cameraParameter).length > 0) {
-        setCameraParameter(cameraParameter, map3D, cesium);
+        setCesiumSceneParams(scene, {camera: cameraParameter});
     }
-    return camera;
-}
 
-/**
- * Prepares the cesium scene.
- * @param {Object} map3DObject Contains the scene, 3D map and a callback function.
- * @param {Object} config optional configuration parameters.
- * @returns {void}
- */
-export function prepareScene (map3DObject, config) {
-    handle3DEvents(map3DObject);
-    setCesiumSceneDefaults(map3DObject.scene, config);
+    return camera;
 }

package/test/layer/entities.test.js

@@ -0,0 +1,277 @@
+import * as entities from "../../src/layer/entities";
+
+describe("entities.js", function () {
+    let attr,
+        map,
+        dataSources = [],
+        dataSourcesContent,
+        dataSourceValues,
+        cesiumCustomDataSourceSpy,
+        cesiumHeadingPitchRollSpy,
+        tick;
+
+    beforeEach(() => {
+        tick = () => {
+            return new Promise(resolve => {
+                setTimeout(resolve, 0);
+            });
+        };
+        dataSourcesContent = {};
+        dataSourceValues = [];
+        global.Cesium = {};
+        global.Cesium.Cartesian3 = {};
+        global.Cesium.Transforms = {};
+        global.Cesium.Cartesian3.fromDegrees = jest.fn();
+        global.Cesium.HeadingPitchRoll = jest.fn();
+        global.Cesium.Transforms.headingPitchRollQuaternion = jest.fn();
+        global.Cesium.CustomDataSource = function CustomDataSource (name) {
+            this.name = name;
+            this.entities = {
+                values: dataSourceValues,
+                add: (toAdd) => {
+                    dataSourceValues.push(toAdd);
+                    this.length++;
+                    return toAdd;
+                },
+                contains: (value) => dataSourceValues.includes(value)
+            };
+            this.length = 0;
+            this.forEach = () => dataSourceValues.forEach;
+        };
+        attr = {
+            id: "4003",
+            name: "EntitiesLayer",
+            typ: "Entities3D",
+            entities: [
+                {
+                    "url": "https://daten-hamburg.de/gdi3d/datasource-data/Simple_Building.glb",
+                    "attributes": {
+                        "name": "einfaches Haus in Planten und Blomen"
+                    },
+                    "latitude": 53.5631,
+                    "longitude": 9.9800,
+                    "height": 16,
+                    "heading": 0,
+                    "pitch": 0,
+                    "roll": 0,
+                    "scale": 5,
+                    "allowPicking": true,
+                    "show": true
+                }
+            ]
+        };
+        dataSources = {
+            getByName: (name) => {
+                return dataSourcesContent[name] ? [dataSourcesContent[name]] : [];
+            },
+            add: async (dataSource) => {
+                dataSourcesContent[dataSource.name] = dataSource;
+                return Promise.resolve(dataSource).then(function (value) {
+                    return value;
+                });
+            }
+        };
+        map = {
+            getDataSources: () => {
+                return dataSources;
+            }
+        };
+        cesiumCustomDataSourceSpy = jest.spyOn(global.Cesium, "CustomDataSource");
+        cesiumHeadingPitchRollSpy = jest.spyOn(global.Cesium.Transforms, "headingPitchRollQuaternion");
+    });
+
+    afterEach(() => {
+        global.Cesium = null;
+        jest.clearAllMocks();
+    });
+
+    function checkAttributes (layer, attrs) {
+        expect(layer.get("name")).toEqual(attrs.name);
+        expect(layer.get("typ")).toEqual(attrs.typ);
+        expect(layer.get("id")).toEqual(attrs.id);
+    }
+
+    describe("createLayer", function () {
+        it("creates a wrapper for terrain layer without map", function () {
+            const layer = entities.createLayer(attr);
+
+            checkAttributes(layer, attr);
+        });
+        it("creates a wrapper for entities layer with map and show is false", async function () {
+            attr.entities[0].show = false;
+            const layer = entities.createLayer(attr, map);
+
+            await tick();
+
+            checkAttributes(layer, attr);
+            expect(dataSourceValues.length).toEqual(1);
+            expect(dataSourceValues[0].show).toEqual(false);
+            expect(Object.keys(dataSourcesContent).length).toEqual(1);
+            expect(cesiumCustomDataSourceSpy).toHaveBeenCalledTimes(1);
+            expect(cesiumHeadingPitchRollSpy).toHaveBeenCalledTimes(1);
+        });
+        it("creates a wrapper for terrain layer with map and show not set", async function () {
+            attr.entities[0].show = undefined;
+            const layer = entities.createLayer(attr, map);
+
+            await tick();
+
+            checkAttributes(layer, attr);
+            expect(dataSourceValues.length).toEqual(1);
+            expect(dataSourceValues[0].show).toEqual(false);
+            expect(Object.keys(dataSourcesContent).length).toEqual(1);
+            expect(cesiumCustomDataSourceSpy).toHaveBeenCalledTimes(1);
+            expect(cesiumHeadingPitchRollSpy).toHaveBeenCalledTimes(1);
+        });
+        it("creates a wrapper for terrain layer with map and show is true", async function () {
+            attr.entities[0].show = true;
+            const layer = entities.createLayer(attr, map);
+
+            await tick();
+
+            checkAttributes(layer, attr);
+            expect(dataSourceValues.length).toEqual(1);
+            expect(dataSourceValues[0].show).toEqual(true);
+            expect(Object.keys(dataSourcesContent).length).toEqual(1);
+            expect(cesiumCustomDataSourceSpy).toHaveBeenCalledTimes(1);
+            expect(cesiumHeadingPitchRollSpy).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe("setVisible", function () {
+        let consoleWarnOrig;
+
+        beforeEach(() => {
+            consoleWarnOrig = console.warn;
+            console.warn = jest.fn();
+        });
+
+        afterEach(() => {
+            console.warn = consoleWarnOrig;
+        });
+
+        it("call setVisible without map shall not fail and shall do nothing", async function () {
+            attr.isSelected = false;
+            attr.entities[0].show = false;
+            const layer = entities.createLayer(attr, map);
+
+            entities.setVisible(true, attr);
+
+            await tick();
+
+            checkAttributes(layer, attr);
+            expect(dataSourceValues.length).toEqual(1);
+            expect(dataSourceValues[0].show).toEqual(false);
+        });
+        it("call setVisible without map and rawLayer shall not fail and shall do nothing", async function () {
+            attr.isSelected = false;
+            attr.entities[0].show = false;
+            const layer = entities.createLayer(attr, map);
+
+            entities.setVisible(true, null);
+
+            await tick();
+
+            checkAttributes(layer, attr);
+            expect(dataSourceValues.length).toEqual(1);
+            expect(dataSourceValues[0].show).toEqual(false);
+        });
+        it("call setVisible shall set show to true", async function () {
+            attr.isSelected = false;
+            attr.entities[0].show = false;
+            const layer = entities.createLayer(attr, map);
+
+            await tick();
+
+            expect(dataSourceValues[0].show).toEqual(false);
+
+            layer.setVisible(true, attr, map);
+
+            checkAttributes(layer, attr);
+            expect(dataSourceValues.length).toEqual(1);
+            expect(dataSourcesContent[attr.id].show).toEqual(true);
+        });
+        it("call setVisible shall only warn, if no dataSource found", async function () {
+            attr.isSelected = false;
+            attr.entities[0].show = false;
+            const layer = entities.createLayer(attr, map);
+
+            await tick();
+
+            checkAttributes(layer, attr);
+
+            attr.id = "notExist";
+            entities.setVisible(true, attr, map);
+
+            expect(dataSourceValues.length).toEqual(1);
+            expect(dataSourcesContent[attr.id]).toEqual(undefined);
+            expect(console.warn).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe("get", function () {
+        it("calls get for attributes", async function () {
+            const layer = entities.createLayer(attr, map);
+
+            checkAttributes(layer, attr);
+            expect(layer.get(null)).toEqual(undefined);
+            expect(layer.get(undefined)).toEqual(undefined);
+            expect(layer.get("")).toEqual(undefined);
+        });
+    });
+    describe("addEntities", function () {
+        let consoleWarnOrig;
+
+        beforeEach(() => {
+            consoleWarnOrig = console.warn;
+            console.warn = jest.fn();
+        });
+
+        afterEach(() => {
+            console.warn = consoleWarnOrig;
+        });
+
+        it("addEntities without map shall not fail", async function () {
+            const layer = entities.createLayer(attr, map);
+
+            await tick();
+            layer.createDataSource(attr);
+        });
+        it("addEntities without rawLayer shall not fail", async function () {
+            const layer = entities.createLayer(attr, map);
+
+            await tick();
+            layer.createDataSource(null, map);
+            expect(console.warn).toHaveBeenCalledTimes(1);
+        });
+
+        it("addEntities shall add entity twice", async function () {
+            attr.entities[0].show = false;
+            const layer = entities.createLayer(attr, map);
+
+            await tick();
+
+            checkAttributes(layer, attr);
+            expect(dataSourceValues.length).toEqual(1);
+
+            layer.createDataSource(attr, map);
+            expect(dataSourceValues.length).toEqual(2);
+            expect(dataSourceValues[0].show).toEqual(false);
+            expect(dataSourceValues[1].show).toEqual(false);
+        });
+        it("addEntities shall add entity and set Visible", async function () {
+            attr.entities[0].show = true;
+            const layer = entities.createLayer(attr, map);
+
+            await tick();
+
+            checkAttributes(layer, attr);
+            expect(dataSourceValues.length).toEqual(1);
+            expect(dataSourceValues[0].show).toEqual(true);
+
+            layer.createDataSource(attr, map);
+            expect(dataSourceValues.length).toEqual(2);
+            expect(dataSourceValues[0].show).toEqual(true);
+            expect(dataSourceValues[1].show).toEqual(true);
+        });
+    });
+});
+

package/test/layer/terrain.test.js

@@ -36,25 +36,12 @@ describe("terrain.js", function () {
     }
 
     describe("createLayer", function () {
-        it("creates a wrapper for terrain layer without map and not selected", function () {
-            const layer = terrain.createLayer(attr);
-
-            checkAttributes(layer, attr);
-        });
-        it("creates a wrapper for terrain layer with map and not selected", function () {
-            attr.isSelected = false;
+        it("creates a wrapper for terrain layer with map", function () {
             const layer = terrain.createLayer(attr, map);
 
             checkAttributes(layer, attr);
             expect(cesiumTerrainProviderSpy).toHaveBeenCalledTimes(0);
         });
-        it("creates a wrapper for terrain layer with map and selected", function () {
-            attr.isSelected = true;
-            const layer = terrain.createLayer(attr, map);
-
-            checkAttributes(layer, attr);
-            expect(cesiumTerrainProviderSpy).toHaveBeenCalledTimes(1);
-        });
     });
     describe("setVisible", function () {
         it("calls setVisible without map shall not fail", function () {

package/test/layer/tileset.test.js

@@ -45,22 +45,15 @@ describe("tileset.js", function () {
     }
 
     describe("createLayer", function () {
-        it("creates tileset layer without map and not selected", function () {
+        it("creates tileset layer without map", function () {
             const layer = new Tileset(attr);
 
             checkAttributes(layer, attr);
             expect(layer.tileSet).toEqual(undefined);
+            expect(layer.tileset.show).toEqual(undefined);
             expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
         });
-        it("creates tileset layer with map and selected", function () {
-            attr.isSelected = true;
-            const layer = new Tileset(attr, map);
-
-            checkAttributes(layer, attr);
-            expect(layer.tileset.show).toEqual(true);
-            expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
-        });
-        it("creates 2 tileset layers  with map and selected and checks attributes", function () {
+        it("creates 2 tileset layers  with map and checks attributes", function () {
             const attr2 = {
                     id: "4003",
                     name: "name",