@masterportal/masterportalapi 2.2.0 → 2.5.0

package/.eslintignore

@@ -1,5 +1,4 @@
 /node_modules
-/example
 /dist
 /docs
 /.cache

package/.eslintrc

@@ -5,8 +5,11 @@
         "node": true,
         "es6": true
     },
+    "globals": {
+        "Cesium": true
+    },
     "parserOptions": {
-        "ecmaVersion": 2020,
+        "ecmaVersion": 2022,
         "sourceType": "module"
     },
     "extends": [

package/CHANGELOG.md

@@ -3,16 +3,61 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
-## Unreleased - in development
+## 2.5.0 - 2022-08-05
 ### Added
+- The following packages have been installed:
+    - jest-environment-jsdom: 28.1.3
 
 ### Changed
+- The following packages have been updated:
+    - dependencies:
+        - core-js: 3.16.1 to 3.24.0
+        - ol: 6.14.1 to 6.15.1 (This also raised ol-mapbox-style from 7 to version 8)
+        - proj4: 2.7.5 to 2.8.0
+    - devDependencies:
+        - @babel/core: 7.16.7 to 7.18.9
+        - @babel/plugin-transform-modules-commonjs: 7.16.8 to 7.18.6
+        - @parcel/transformer-sass: 2.2.0 to 2.6.2
+        - canvas: 2.8.0 to 2.9.3
+        - eslint: 7.32.0 to 8.20.0
+        - husky: 7.0.1 to 8.0.1
+        - jest: 27.4.0 to 28.1.3
+        - jest-canvas-mock: 2.3.1 to 2.4.0
+        - jsdoc: 3.6.7 to 3.6.11
+        - parcel: 2.2.0 to 2.6.2
+        - sass: 1.37.5 to 1.54.0
+    - peerDependencies:
+        - cesium: 1.88.0 to 1.95.0
 
-### Deprecated
+---
 
-### Removed
+## 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.
+- A new layer typ Entities3D (e.g. layer with glb-files) is implemented and integrated into MaterportalAPI.
+
+### Changed
+- The following packages have been updated
+    - ol: from 6.13.0 to version 6.14.1
+- 3D Mode:
+    - Default values are now set for the 3D Scene when creating the 3D Map.
+    - Default values for the 3D Scene can be overwritten with the attribute `sceneOptions` any.
+    - Default values of the 3D Scene are always set first. After that, attributes configured by the user are set.
 
 ### Fixed
+- 3D Mode:
+    - Vector layers like WFS, GeoJSON or OAF (OGC API - Features) are now displayed in 3D mode.
+    - WMS layers of type `TileWMS` are now also displayed in 3D.
+    - In 3D mode a pick position is now provided for clicked billboards.
 
 ---
 
@@ -50,7 +95,7 @@
 - Gazetteer search:
     - Previous gazetteer searches can now be aborted by means of an `AbortController`.
     - Added the possibility to use the `geographicIdentifier` to display the search result.
-- A new layer typ OAF (OGC API features) is implemented and integrated into MaterportalAPI
+- A new layer typ OAF (OGC API - Features) is implemented and integrated into MaterportalAPI
     - Features as parameter can be parsed as filter
 - A new parameter "doNotLoadInitially" for WFS layer so that for the external filter, the filtering of feature will be first loaded
 

package/example/config/localGeoJSON.js

@@ -4,29 +4,29 @@
  * @type {object} GeoJSON Feature Collection
  */
 export default {
-    "type":"FeatureCollection",
-    "features":[
+    "type": "FeatureCollection",
+    "features": [
         {
             "type": "Feature",
-            "properties":{
+            "properties": {
                 "name": "Testmarker"
             },
-            "geometry":{
-                "type":"Point",
-                "coordinates":[9.8436, 53.4800]
+            "geometry": {
+                "type": "Point",
+                "coordinates": [9.8436, 53.4800]
             }
         },
         {
-            "type":"Feature",
-            "properties":{
-                "name":"Wilhelmsburg",
-                "cartodb_id":23,
-                "created_at":"2013-02-18T21:04:33.987Z",
-                "updated_at":"2013-02-18T21:04:34.218Z"
+            "type": "Feature",
+            "properties": {
+                "name": "Wilhelmsburg",
+                "cartodb_id": 23,
+                "created_at": "2013-02-18T21:04:33.987Z",
+                "updated_at": "2013-02-18T21:04:34.218Z"
             },
-            "geometry":{
-                "type":"MultiPolygon",
-                "coordinates":[
+            "geometry": {
+                "type": "MultiPolygon",
+                "coordinates": [
                     [
                         [
                             [
@@ -583,16 +583,16 @@ export default {
             }
         },
         {
-            "type":"Feature",
-            "properties":{
-                "name":"Blankenese",
-                "cartodb_id":30,
-                "created_at":"2013-02-18T21:04:33.987Z",
-                "updated_at":"2013-02-18T21:04:34.218Z"
+            "type": "Feature",
+            "properties": {
+                "name": "Blankenese",
+                "cartodb_id": 30,
+                "created_at": "2013-02-18T21:04:33.987Z",
+                "updated_at": "2013-02-18T21:04:34.218Z"
             },
-            "geometry":{
-                "type":"MultiPolygon",
-                "coordinates":[
+            "geometry": {
+                "type": "MultiPolygon",
+                "coordinates": [
                     [
                         [
                             [

package/example/config/portal.json

@@ -31,5 +31,5 @@
       "id": "1001"
     }
   ],
-  "cesiumLib":"https://geoportal-hamburg.de/mastercode/cesium/1_88/Cesium.js"
+  "cesiumLib":"https://geoportal-hamburg.de/mastercode/cesium/1_95/Cesium.js"
 }

package/example/config/services.json

@@ -22,7 +22,7 @@
     "layers": "krankenhaeuser",
     "format": "image/png",
     "version": "1.3.0",
-    "singleTile": false,
+    "singleTile": true,
     "transparent": true,
     "transparency": 0,
     "urlIsVisible": true,
@@ -62,6 +62,43 @@
       "maximumScreenSpaceError": 6
     }
   },
+  {
+    "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
+      },
+      {
+        "url": "https://daten-hamburg.de/gdi3d/datasource-data/Simple_Building.glb",
+        "attributes": {
+          "name": "einfaches Haus im See"
+        },
+        "latitude": 53.5622,
+        "longitude": 9.9808,
+        "height": 16,
+        "heading": 0,
+        "pitch": 0,
+        "roll": 0,
+        "scale": 2,
+        "allowPicking": true,
+        "show": true
+      }
+    ]
+  },
   {
     "id": "5001",
     "name": "Schulen",
@@ -104,5 +141,157 @@
     ],
     "tileSize": 256,
     "zDirection": -1
+  },
+  {
+    "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": "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"
   }
 ]

package/example/index.js

@@ -17,6 +17,20 @@ window.mpapi = {
     map2D: null,
     map: null
 };
+//* Fake service that holds client-side prepared geojson; also nice to test automatic transformation since data is in WGS 84
+// eslint-disable-next-line no-unused-vars
+const hamburgServicesUrl = "https://geodienste.hamburg.de/services-internet.json",
+    localService = {
+        id: "2002",
+        typ: "GeoJSON",
+        features: localGeoJSON
+    },
+    config = {
+        ...portalConfig,
+        layerConf: services
+    };
+let map2D = null;
+
 // */
 //* Cleans up map before it is re-rendered (happens on every save during dev mode)
 document.getElementById(portalConfig.target).innerHTML = "";
@@ -29,50 +43,46 @@ document.getElementById("enable").addEventListener("click", function () {
     if (window.mpapi.map.mapMode === "3D") {
         window.mpapi.map.setEnabled(false);
         window.mpapi.map = window.mpapi.map2D;
+        window.mpapi.map.getView().setRotation(0);
         document.getElementById("layer-visibility").style.display = "none";
-        ["1001", "2001", "2002", "1002", "3001", "5001"].forEach(id => window.mpapi.map.addLayer(id));
     }
     else {
-        const lib = portalConfig.cesiumLib ? portalConfig.cesiumLib : "https://geoportal-hamburg.de/mastercode/cesium/1_88/Cesium.js";
+        const lib = portalConfig.cesiumLib ? portalConfig.cesiumLib : "https://geoportal-hamburg.de/mastercode/cesium/1_95/index.js";
 
         document.getElementById("layer-visibility").style.display = "block";
 
         load3DScript(lib, function Loaded3DCallback () {
-            let terrainLayer = null, tilesetLayer = null;
-            const toRemove = ["2001", "2002", "1002", "3001", "5001"];
-
-            layers2D.forEach(layer => {
-                const layerId = layer?.id || layer?.values_?.id;
-                if(toRemove.find(id => id === layerId)){
-                    map2D.removeLayer(layer);
-                }
-            });
+            let tilesetLayer = null;
 
             const settings3D = {
-                    "map2D": window.mpapi.map2D
+                    map2D: window.mpapi.map2D,
+                    // set some options to Cesium scene
+                    cesiumParameter: {
+                        fxaa: true,
+                        globe: {
+                            enableLighting: true,
+                            maximumScreenSpaceError: 2,
+                            tileCacheSize: 20
+                        }
+                    }
                 },
                 map3D = mapsAPI.map.createMap(settings3D, "3D"),
                 rawLayerTerrain = getLayerWhere({id: "4001"}),
                 rawLayerTileset = getLayerWhere({id: "4002"}),
-                scene = map3D.getCesiumScene();
-
-             //set some options to Cesium scene
-             scene.globe.enableLighting = true;
-             scene.globe.tileCacheSize = 20;
-             scene.globe.maximumScreenSpaceError =2;
-             scene.fxaa = true;
-             scene.highDynamicRange = false;
-             scene.pickTranslucentDepth = true;
+                rawLayerEntities = getLayerWhere({id: "4003"});
 
             window.mpapi.map = map3D;
             tilesetLayer = new mpapi.Tileset(rawLayerTileset, window.mpapi.map);
             tilesetLayer.setVisible(true, window.mpapi.map);
 
-            window.mpapi.map.setEnabled(true);
+            // entities are 2 simple buildings in the park 'planten und blomen' near Tiergartenstraße
+            mpapi.entities.createLayer(rawLayerEntities, window.mpapi.map);
+            // mpapi.entities.setVisible(true, rawLayerEntities, window.mpapi.map);
 
-            terrainLayer = mpapi.terrain.createLayer(rawLayerTerrain, window.mpapi.map);
-            terrainLayer.setVisible(true, rawLayerTerrain, window.mpapi.map);
+            mpapi.terrain.createLayer(rawLayerTerrain, window.mpapi.map);
+            mpapi.terrain.setVisible(true, rawLayerTerrain, window.mpapi.map);
 
+            window.mpapi.map.setEnabled(true);
         });
     }
 });
@@ -84,21 +94,7 @@ document.getElementById("layer-visibility").addEventListener("click", function (
     });
 });
 
-//* Fake service that holds client-side prepared geojson; also nice to test automatic transformation since data is in WGS 84
-// eslint-disable-next-line no-unused-vars
-const hamburgServicesUrl = "http://geoportal-hamburg.de/lgv-config/services-internet.json",
-    localService = {
-        id: "2002",
-        typ: "GeoJSON",
-        features: localGeoJSON
-    },
-    config = {
-        ...portalConfig,
-        layerConf: services
-    },
-    map2D = mapsAPI.map.createMap(config, "2D"),
-    layers2D = [];
-
+map2D = mapsAPI.map.createMap(config, "2D");
 services.push(localService);
 // */
 
@@ -119,6 +115,7 @@ mpapi.geojson.setCustomStyles({
 const styleWfs = function (feature, resolution) {
     const icon = new Style({
         image: new Icon({
+            crossOrigin: "anonymous",
             src: "https://img.icons8.com/windows/50/000000/building.png",
             scale: 0.5,
             opacity: 1
@@ -136,6 +133,7 @@ services.find(({id}) => id === "3001").style = styleWfs;
 const styleOaf = function (feature, resolution) {
     const icon = new Style({
         image: new Icon({
+            crossOrigin: "anonymous",
             src: "https://geodienste.hamburg.de/lgv-config/img/gymnasien.svg",
             scale: 0.5,
             opacity: 1
@@ -151,61 +149,50 @@ services.find(({id}) => id === "5001").style = styleOaf;
 window.mpapi.map = map2D;
 
 ["2001", "2002", "1002", "3001", "5001"].forEach(id => window.mpapi.map.addLayer(id));
-map2D.getLayers().forEach(layer => {
-    layers2D.push(layer);
-});
 
 // */
 
 /* ASYNCHRONOUS EXAMPLE 1: work with layerConf callback
 document.getElementById("enable").style.display = "none";
-mpapi.rawLayerList.initializeLayerList(
-    hamburgServicesUrl,
+mpapi.rawLayerList.initializeLayerList(hamburgServicesUrl,
     conf => {
         window.mpapi.map = mapsAPI.map.createMap({
             ...portalConfig,
             layerConf: conf,
             layers: null
         }, "2D");
-        ["6357", "6074"].forEach(
-            id => window.mpapi.map.addLayer(id)
-        );
-    }
-);
+        ["6357", "6074"].forEach(id => window.mpapi.map.addLayer(id));
+    });
 //*/
 
 /* ASYNCHRONOUS EXAMPLE 2: work with createMap callback
 document.getElementById("enable").style.display = "none";
-window.mpapi.map = mapsAPI.map.createMap(
-    {...portalConfig, layerConf: hamburgServicesUrl, layers: [
-        { id: "6357" },
-        { id: "453", transparency: 50 }
+window.mpapi.map = mapsAPI.map.createMap({
+    ...portalConfig, layerConf: hamburgServicesUrl, layers: [
+        {id: "6357"},
+        {id: "453", transparency: 50}
     ]}, "2D",
-    {
-        callback: () =>
-            ["6074"].forEach(
-                id => window.mpapi.map.addLayer(id)
-            )
-    }
-);
+{
+    callback: () => ["6074"].forEach(id => window.mpapi.map.addLayer(id))
+});
 //*/
 
 /* SEARCH FUNCTION EXAMPLE
 // You may e.g. copy this code to the browser's console to run a search.
 
-window.mpapi.search("Eiffe",  {
+window.mpapi.search("Eiffe", {
     map: window.mpapi.map,
     zoom: true,
     zoomToParams: {duration: 1000, maxZoom: 8},
     searchStreets: true
-}).then(x => console.log(x)).catch(e => console.error(e))
+}).then(x => console.log(x)).catch(e => console.error(e));
 
-window.mpapi.search("Mümmelmannsberg 72",  {
+window.mpapi.search("Mümmelmannsberg 72", {
     map: window.mpapi.map,
     zoom: true,
     zoomToParams: {duration: 1000, maxZoom: 8},
     searchAddress: true
-}).then(x => console.log(x)).catch(e => console.error(e))
+}).then(x => console.log(x)).catch(e => console.error(e));
 
 //*/
 
@@ -216,12 +203,23 @@ map2D.getLayers().forEach(layer => {
     map2D.removeLayer(layer);
 });
 
-let vtStyleUrl = 'https://dev.adv-smart.de/styles/playground/masterportal_test1.json';
+const vtStyleUrl = "https://dev.adv-smart.de/styles/playground/masterportal_test1.json";
 
 fetch(vtStyleUrl)
     .then(response => response.json())
     .then(style => {
-        let vtLayer = window.mpapi.map.addLayer("6001");
+        const vtLayer = window.mpapi.map.addLayer("6001");
+
         mpapi.vectorTile.setStyle(vtLayer, style);
     });
-*/
+//*/
+
+/* WMTS example */
+/*
+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,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.2.0",
+  "version": "2.5.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -19,33 +19,33 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "core-js": "^3.16.1",
-    "ol": "6.13.0",
+    "core-js": "^3.24.0",
+    "ol": "6.15.1",
     "olcs": "^2.13.0",
-    "proj4": "^2.7.5",
+    "proj4": "^2.8.0",
     "xml2js": "^0.4.23"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/plugin-transform-modules-commonjs": "^7.16.8",
-    "@parcel/transformer-sass": "^2.2.0",
+    "@babel/core": "^7.18.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@parcel/transformer-sass": "^2.6.2",
     "buffer": "^6.0.3",
-    "canvas": "^2.8.0",
-    "eslint": "^7.32.0",
+    "canvas": "^2.9.3",
+    "eslint": "^8.20.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",
+    "husky": "^8.0.1",
+    "jest": "^28.1.3",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^28.1.3",
+    "jsdoc": "^3.6.11",
+    "parcel": "^2.6.2",
     "process": "^0.11.10",
-    "regenerator-runtime": "0.13.9",
-    "sass": "^1.37.5",
+    "sass": "^1.54.0",
     "stream-browserify": "^3.0.0",
     "timers-browserify": "^2.0.12"
   },
   "peerDependencies": {
-    "cesium": "^1.88.0"
+    "cesium": "^1.95.0"
   },
   "engines": {
     "node": "^16.13.2",
@@ -53,6 +53,7 @@
   },
   "homepage": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi#readme",
   "directories": {
+    "doc": "docs",
     "example": "example",
     "test": "test"
   },