@masterportal/masterportalapi 2.2.0 → 2.5.0

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;

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;
 }