@masterportal/masterportalapi 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
+## 2.4.0 - 2022-07-06
+### Added
+- Issue 776: Add 3D mode for WMTS layers.
+
+### Fixed
+- 3D: Handling of camera parameters at olcsmap are adapted.
+
+---
+
 ## 2.3.0 - 2022-05-27
 ### Added
 - Add a new layer type WMTS.

package/example/config/services.json

@@ -106,15 +106,71 @@
     "zDirection": -1
   },
   {
-    "id": "7001",
-    "name": "BKG TopPlus Open WMTS optionsFromCapabilities",
-    "capabilitiesUrl": "https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
+    "id":"7001",
+    "name":"TopPlusOpen",
+    "capabilitiesUrl":"https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
+    "optionsFromCapabilities":true,
+    "typ":"WMTS",
+    "layers":"web"
+  },
+  {
+    "id": "7002",
+    "name": "EOC Basemap",
+    "capabilitiesUrl": "https://tiles.geoservice.dlr.de/service/wmts?SERVICE=WMTS&REQUEST=GetCapabilities",
     "typ": "WMTS",
     "optionsFromCapabilities": true,
-    "layers": "web",
-    "visibility": true,
-    "maxScale": "5000000",
-    "tileMatrixSet": "EU_EPSG_25832_TOPPLUS"
+    "layers": "eoc:basemap"
+  },
+  {
+    "id": "7003",
+    "name": "Geoland Basemap",
+    "urls": [
+      "https://maps1.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
+      "https://maps2.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
+      "https://maps3.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
+      "https://maps4.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
+      "https://maps.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png"
+    ],
+    "typ": "WMTS",
+    "layer": "geolandbasemap",
+    "version": "1.0.0",
+    "format": "image/png",
+    "style": "normal",
+    "transparent": false,
+    "tileSize": "256",
+    "minScale": "0",
+    "maxScale": "2500000",
+    "tileMatrixSet": "google3857",
+    "matrixSizes": [
+      [1, 1], [2, 2],
+      [4, 4], [8, 8],
+      [16, 16], [32, 32],
+      [64, 64], [128, 128],
+      [256, 256], [512, 512],
+      [1024, 1024], [2048, 2048],
+      [4096, 4096], [8192, 8192],
+      [16384, 16384], [32768, 32768],
+      [65536, 65536], [131072, 131072],
+      [262144, 262144], [524288, 524288]
+    ],
+    "coordinateSystem": "EPSG:3857",
+    "layerAttribution": "nicht vorhanden",
+    "legend": false,
+    "cache": true,
+    "wrapX": true,
+    "origin": [
+      -20037508.3428,
+      20037508.3428
+    ],
+    "scales": [
+      559082264.029, 279541132.015, 139770566.007, 69885283.0036,
+      34942641.5018, 17471320.7509, 8735660.37545, 4367830.18773,
+      2183915.09386, 1091957.54693, 45978.773466, 272989.386733,
+      136494.693366, 68247.3466832, 34123.6733416, 17061.8366708,
+      8530.91833540, 4265.45916770, 2132.72958385, 1066.36479193
+    ],
+    "resLength": "20",
+    "requestEncoding": "REST"
   },
   {
     "id": "4003",

package/example/index.js

@@ -220,4 +220,6 @@ map2D.getLayers().forEach(layer => {
     map2D.removeLayer(layer);
 });
 window.mpapi.map.addLayer("7001");
+window.mpapi.map.addLayer("7002");
+window.mpapi.map.addLayer("7003");
 // */

package/package.json

@@ -1,62 +1,62 @@
-{
-  "name": "@masterportal/masterportalapi",
-  "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.3.0",
-  "license": "MIT",
-  "description": "Basic functions of the Masterportal as api",
-  "repository": {
-    "type": "git",
-    "url": "git+https://bitbucket.org/geowerkstatt-hamburg/masterportalapi.git"
-  },
-  "main": "src/index.js",
-  "scripts": {
-    "test": "jest .test.js --config ./jest.config.js --collectCoverage",
-    "test:trace": "node --trace-warnings node_modules/jest/bin/jest.js ./test/layer/wfs.test.js --config ./jest.config.js",
-    "test:watch": "jest .test.js --config ./jest.config.js --watch",
-    "example": "parcel example/index.html",
-    "generate-jsdoc": "jsdoc ./src -r -d ./docs/ -R ./README.md -c jsdoc.json",
-    "prePushHook": "eslint --max-warnings 0 \"./**/*.js\" && npm run test",
-    "prepare": "husky install"
-  },
-  "dependencies": {
-    "core-js": "^3.16.1",
-    "ol": "6.14.1",
-    "olcs": "^2.13.0",
-    "proj4": "^2.7.5",
-    "xml2js": "^0.4.23"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/plugin-transform-modules-commonjs": "^7.16.8",
-    "@parcel/transformer-sass": "^2.2.0",
-    "buffer": "^6.0.3",
-    "canvas": "^2.8.0",
-    "eslint": "^7.32.0",
-    "events": "^3.3.0",
-    "husky": "^7.0.1",
-    "jest": "^27.4.0",
-    "jest-canvas-mock": "^2.3.1",
-    "jsdoc": "^3.6.7",
-    "parcel": "^2.2.0",
-    "process": "^0.11.10",
-    "regenerator-runtime": "0.13.9",
-    "sass": "^1.37.5",
-    "stream-browserify": "^3.0.0",
-    "timers-browserify": "^2.0.12"
-  },
-  "peerDependencies": {
-    "cesium": "^1.88.0"
-  },
-  "engines": {
-    "node": "^16.13.2",
-    "npm": "^8.1.2"
-  },
-  "homepage": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi#readme",
-  "directories": {
-    "example": "example",
-    "test": "test"
-  },
-  "bugs": {
-    "url": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/issues"
-  }
-}
+{
+  "name": "@masterportal/masterportalapi",
+  "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
+  "version": "2.4.0",
+  "license": "MIT",
+  "description": "Basic functions of the Masterportal as api",
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/geowerkstatt-hamburg/masterportalapi.git"
+  },
+  "main": "src/index.js",
+  "scripts": {
+    "test": "jest .test.js --config ./jest.config.js --collectCoverage",
+    "test:trace": "node --trace-warnings node_modules/jest/bin/jest.js ./test/layer/wfs.test.js --config ./jest.config.js",
+    "test:watch": "jest .test.js --config ./jest.config.js --watch",
+    "example": "parcel example/index.html",
+    "generate-jsdoc": "jsdoc ./src -r -d ./docs/ -R ./README.md -c jsdoc.json",
+    "prePushHook": "eslint --max-warnings 0 \"./**/*.js\" && npm run test",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "core-js": "^3.16.1",
+    "ol": "6.14.1",
+    "olcs": "^2.13.0",
+    "proj4": "^2.7.5",
+    "xml2js": "^0.4.23"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.7",
+    "@babel/plugin-transform-modules-commonjs": "^7.16.8",
+    "@parcel/transformer-sass": "^2.2.0",
+    "buffer": "^6.0.3",
+    "canvas": "^2.8.0",
+    "eslint": "^7.32.0",
+    "events": "^3.3.0",
+    "husky": "^7.0.1",
+    "jest": "^27.4.0",
+    "jest-canvas-mock": "^2.3.1",
+    "jsdoc": "^3.6.7",
+    "parcel": "^2.2.0",
+    "process": "^0.11.10",
+    "regenerator-runtime": "0.13.9",
+    "sass": "^1.37.5",
+    "stream-browserify": "^3.0.0",
+    "timers-browserify": "^2.0.12"
+  },
+  "peerDependencies": {
+    "cesium": "^1.88.0"
+  },
+  "engines": {
+    "node": "^16.13.2",
+    "npm": "^8.1.2"
+  },
+  "homepage": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi#readme",
+  "directories": {
+    "example": "example",
+    "test": "test"
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/issues"
+  }
+}

package/src/layer/entities.js

@@ -114,9 +114,10 @@ function addEntities (rawLayer, dataSource) {
  * @param {string} [rawLayer.id] the id of the layer
  * @param {string} [rawLayer.entities] array of entities to add
  * @param {OLCesium} map ol cesium map
- * @returns {void}
+ * @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) {
+export function createDataSource (rawLayer, map, callback) {
     if (!rawLayer) {
         console.warn("Cannot add entities to rawLayer which is null!");
     }
@@ -128,12 +129,20 @@ export function createDataSource (rawLayer, map) {
             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;
 }
 
 

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

@@ -5,6 +5,7 @@ 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";
@@ -116,6 +117,17 @@ class WMSRasterSynchronizer extends olcsAbstractSynchronizer {
         else if (source instanceof StaticImageSource) {
             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;

package/src/maps/olcs/olcsMap.js

@@ -20,7 +20,9 @@ export function setCesiumSceneParams (scene, params) {
 
         if (typeof paramValue === "object") {
             Object.keys(paramValue).forEach(paramSubKey => {
-                scene[paramKey][paramSubKey] = paramValue[paramSubKey];
+                if (paramSubKey !== "heading" && paramSubKey !== "tilt" && paramSubKey !== "altitude") {
+                    scene[paramKey][paramSubKey] = paramValue[paramSubKey];
+                }
             });
         }
         else {
@@ -28,6 +30,71 @@ export function setCesiumSceneParams (scene, params) {
         }
     });
 }
+/**
+ * Sets the camera parameters either from config or from an trigger.
+ * @param {Object} params Params.
+ * @param {Object} map3D olcs map.
+ * @param {Cesium} cesium cesium.
+ * @returns {void}
+ */
+export function setCameraParameter (params, map3D, cesium) {
+    let camera,
+        destination,
+        orientation,
+        heading;
+
+    if (params && map3D) {
+        if (typeof params.heading !== "undefined") {
+            heading = parseFloat(params.heading);
+        }
+        else if (typeof params.camera?.heading !== "undefined") {
+            heading = parseFloat(params.camera?.heading);
+        }
+        // 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.
@@ -52,52 +119,12 @@ export function createMap (settings) {
     setCesiumSceneParams(map3D.getCesiumScene(), defaults.sceneOptions);
     if (settings?.cesiumParameter) {
         setCesiumSceneParams(map3D.getCesiumScene(), settings.cesiumParameter);
+        setCameraParameter(settings.cesiumParameter, map3D, Cesium);
     }
 
     return map3D;
 }
 
-/**
- * Sets the camera parameters either from config or from an trigger.
- * @param {Object} params Params.
- * @param {Object} map3D olcs map.
- * @param {Cesium} cesium cesium.
- * @returns {void}
- */
-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))
-        };
-
-        camera.setView({
-            destination,
-            orientation
-        });
-    }
-    else if (map3D !== undefined && params !== null) {
-        camera = map3D.getCamera();
-        if (params?.tilt) {
-            camera.setTilt(parseFloat(params.tilt));
-        }
-        if (params?.heading) {
-            camera.setHeading(parseFloat(params.heading));
-        }
-        if (params?.altitude) {
-            camera.setAltitude(parseFloat(params.altitude));
-        }
-    }
-}
-
 /**
  * Reacts to 3D click event in cesium scene.
  * @param {Event} event The cesium event.

package/test/map.test.js

@@ -167,8 +167,41 @@ describe("map.js", function () {
                 const map3D = map.createMap(config, "3D");
 
                 expect(map3D.mapMode).toBe("3D");
-                map.setCameraParameter(config.cameraParameter, map3D, config.cesiumLib);
+                expect(map3D.getCesiumScene().camera.getAltitude()).toBe(config.cameraParameter.altitude);
+                expect(map3D.getCesiumScene().camera.getHeading()).toBe(config.cameraParameter.heading);
+                expect(map3D.getCesiumScene().camera.getTilt()).toBe(config.cameraParameter.tilt);
+            });
+        });
+        it("set the camera parameter from config under camera", function () {
+            const config = {
+                map2D: {
+                    getView: () => {
+                        return {
+                            getProjection: () => {
+                                return {getCode: () => "code"};
+                            }
+                        };
+                    },
+                    getViewport: () => {
+                        return {
+                            appendChild: jest.fn()
+                        };
+                    }
+                },
+                cameraParameter: {
+                    camera: {
+                        altitude: 272.3469798217454,
+                        heading: -0.30858728378862876,
+                        tilt: 0.9321791580603296
+                    }
+                },
+                cesiumLib: "https://lib.virtualcitymap.de/v3.6.x/lib/Cesium/Cesium.js"
+            };
 
+            load3DScript(config.cesiumLib, function Loaded3DCallback () {
+                const map3D = map.createMap(config, "3D");
+
+                expect(map3D.mapMode).toBe("3D");
                 expect(map3D.getCesiumScene().camera.getAltitude()).toBe(config.cameraParameter.altitude);
                 expect(map3D.getCesiumScene().camera.getHeading()).toBe(config.cameraParameter.heading);
                 expect(map3D.getCesiumScene().camera.getTilt()).toBe(config.cameraParameter.tilt);