@masterportal/masterportalapi 2.19.1 → 2.20.0

package/CHANGELOG.md

@@ -3,21 +3,32 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
-## Unreleased - in development
+## ## 2.20.0 - 2023-06-30
 ### Added
+- Add draw interaction for interactive and static geometry types.
+- WFS: Added function to load wfs features manually.
+
 ### Changed
-### Deprecated
-### Removed
+- The following packages have been updated:
+    - dependencies:
+        - ol: 7.3.0 to 7.4.0
+        - cesium: 1.95.0 to 1.106.0
+- The examples in example/index.js are updated.
+
 ### Fixed
+- VectorStyle: fixed several bugs of multiple geometries with styling rules.
 
 ---
+
+## 2.19.2 - 2023-06-12
+### Fixed
+- VectorStyle of multiple geometries with styling rules does not fail on not existing style.
+
+---
+
 ## 2.19.1 - 2023-06-02
-### Added
 ### Changed
 - Exports in src/layer/wmts.js changed to export default {} to provide  ES-Syntax.
-### Deprecated
-### Removed
-### Fixed
 
 ---
 

package/example/config/services.json

@@ -135,32 +135,53 @@
   },
   {
     "id": "6001",
-    "name": "ADV (EPSG:25832)",
-    "url": "https://dev.adv-smart.de/tiles/smarttiles_de_UTM32_dev/{z}/{x}/{y}.pbf",
-    "epsg": "EPSG:25832",
+    "name": "ArcGIS VectorTile",
+    "shortname": "VectorTile",
     "typ": "VectorTile",
+    "visibility": false,
+    "preview": {
+      "src": "./resources/vectorTile.png"
+    },
+    "gfiAttributes": "showAll",
+    "url": "https://test.geoportal-hamburg.de/vt/esri/tile/{z}/{y}/{x}.pbf",
+    "epsg": "EPSG:25832",
     "extent": [
-      -46133.17,
-      5048875.26857567,
-      1206211.10142433,
-      6301219.54000000
+      441336.2209999999,
+      5915995,
+      594002,
+      5986767.56699999981
+    ],
+    "origin": [
+      -9497963.94293634221,
+      9997963.94293634221
     ],
     "resolutions": [
-      4891.96981025128,
-      2445.98490512564,
-      1222.99245256282,
-      611.496226281410,
-      305.748113140705,
-      152.874056570353,
-      76.4370282851763,
-      38.2185141425881,
-      19.1092570712941,
-      9.55462853564703,
-      4.77731426782352,
-      2.38865713391176
+      39054.5466520950868,
+      19527.2733260475434,
+      9763.63666302377169,
+      4881.81833151188584,
+      2440.90916575594292,
+      1220.45458287797146,
+      610.227291438985731,
+      305.113645719492865,
+      152.556822859746433,
+      76.2784114298732163,
+      38.1392057149366082,
+      19.0696028574683041,
+      9.534801428734152,
+      4.767400714367076,
+      2.383700357183538,
+      1.191850178591769
     ],
-    "tileSize": 256,
-    "zDirection": -1
+    "tileSize": 512,
+    "vtStyles": [
+      {
+        "id": "VectorTile_STYLE",
+        "name": "Test",
+        "url": "https://test.geoportal-hamburg.de/vt/esri/resources/styles/root.json",
+        "defaultStyle": true
+      }
+    ]
   },
   {
     "id": "7001",

package/example/index.js

@@ -18,6 +18,7 @@ function errorCallback (errorEvent) {
     console.error("This is an error event:", errorEvent);
 }
 
+// Definitions:
 //* Add elements to window to play with API in console
 window.mpapi = {
     ...mpapi,
@@ -45,12 +46,12 @@ const hamburgServicesUrl = "https://geodienste.hamburg.de/services-internet.json
     // eslint-disable-next-line func-style
     getWfsStyleFunction = function () {
         const styleId = "8712",
-            olLayer = window.mpapi.map.getLayers().getArray().find((element) => element.get("id") === "8712"),
-            source = olLayer.getSource(),
+            olLayer = window.mpapi.map?.getLayers().getArray().find((element) => element.get("id") === "8712"),
+            source = olLayer?.getSource(),
             styleObject = styleList.returnStyleObject(styleId);
         let isClusterFeature = false;
 
-        if (styleObject !== undefined) {
+        if (styleObject !== undefined && source !== undefined) {
             source.on("featuresloadend", event => {
                 event.features.forEach(element => {
                     isClusterFeature = false;
@@ -61,6 +62,9 @@ const hamburgServicesUrl = "https://geodienste.hamburg.de/services-internet.json
     };
 let map2D = null;
 
+
+// Examples:
+
 /* VectorStyle example */
 // Example for using the vectorStyle that is now implemented in the masterportalAPI.
 // Hardcoded to show the school layer "8712" as a wfs and "1534" as wfs with webgl renderer.
@@ -74,70 +78,8 @@ styleList.initializeStyleList({}, config, config.layers, undefined, (currentStyl
     return currentStyleList;
 });
 
-// */
 //* Cleans up map before it is re-rendered (happens on every save during dev mode)
 document.getElementById(portalConfig.target).innerHTML = "";
-// add a click-listener to button, that creates a 3D-map on click
-document.getElementById("enable").addEventListener("click", function () {
-    if (window.mpapi.map2D === null) {
-        window.mpapi.map2D = window.mpapi.map;
-    }
-
-    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";
-    }
-    else {
-        const lib = portalConfig.cesiumLib ? portalConfig.cesiumLib : "https://geoportal-hamburg.de/mastercode/cesium/1_99/index.js";
-
-        document.getElementById("layer-visibility").style.display = "block";
-
-        load3DScriptModule.load3DScript(lib, function Loaded3DCallback () {
-            let tilesetLayer = null;
-
-            const settings3D = {
-                    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 = rawLayerList.getLayerWhere({id: "4001"}),
-                rawLayerTileset = rawLayerList.getLayerWhere({id: "4002"}),
-                rawLayerEntities = rawLayerList.getLayerWhere({id: "4003"});
-
-            window.mpapi.map = map3D;
-            tilesetLayer = new mpapi.Tileset(rawLayerTileset, window.mpapi.map);
-            tilesetLayer.setVisible(true, window.mpapi.map);
-
-            // 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);
-
-            mpapi.terrain.createLayer(rawLayerTerrain, window.mpapi.map);
-            mpapi.terrain.setVisible(true, rawLayerTerrain, window.mpapi.map);
-
-            window.mpapi.map.setEnabled(true);
-        });
-    }
-});
-
-// add a click-listener to button, that hides background layer in 3d
-document.getElementById("layer-visibility").addEventListener("click", function () {
-    map2D.getLayers().forEach(layer => {
-        map2D.removeLayer(layer);
-    });
-});
-
-map2D = mapsAPI.map.createMap(config, "2D", {errorCallback});
 
 //* geojson styling function call to override default styling and special wfs styling
 mpapi.geojson.setCustomStyles({
@@ -167,7 +109,6 @@ const styleWfs = function (feature, resolution) {
 };
 
 services.find(({id}) => id === "3001").style = styleWfs;
-// */
 
 
 // eslint-disable-next-line
@@ -187,6 +128,8 @@ const styleOaf = function (feature, resolution) {
 services.find(({id}) => id === "5001").style = styleOaf;
 
 //* SYNCHRONOUS EXAMPLE: layerConf is known
+// /*
+map2D = mapsAPI.map.createMap(config, "2D", {errorCallback});
 window.mpapi.map = map2D;
 
 ["2001", "2002", "1002", "3001", "5001"].forEach(id => window.mpapi.map.addLayer(id, {errorCallback}));
@@ -204,7 +147,8 @@ services
 
 // */
 
-/* ASYNCHRONOUS EXAMPLE 1: work with layerConf callback
+//* ASYNCHRONOUS EXAMPLE 1: work with layerConf callback (for testing comment out SYNCHRONOUS EXAMPLE)
+/*
 document.getElementById("enable").style.display = "none";
 mpapi.rawLayerList.initializeLayerList(hamburgServicesUrl,
     conf => {
@@ -213,49 +157,34 @@ mpapi.rawLayerList.initializeLayerList(hamburgServicesUrl,
             layerConf: conf,
             layers: null
         }, "2D");
-        ["6357", "6074"].forEach(id => window.mpapi.map.addLayer(id));
+        ["23420", "6074"].forEach(id => window.mpapi.map.addLayer(id));
     });
-//*/
+*/
 
-/* ASYNCHRONOUS EXAMPLE 2: work with createMap callback
+//* ASYNCHRONOUS EXAMPLE 2: work with createMap callback (for testing comment out SYNCHRONOUS EXAMPLE)
+/*
 document.getElementById("enable").style.display = "none";
 window.mpapi.map = mapsAPI.map.createMap({
     ...portalConfig, layerConf: hamburgServicesUrl, layers: [
-        {id: "6357"},
+        {id: "23420"},
         {id: "453", transparency: 50}
     ]}, "2D",
 {
     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", {
-    map: window.mpapi.map,
-    zoom: true,
-    zoomToParams: {duration: 1000, maxZoom: 8},
-    searchStreets: true
-}).then(x => console.log(x)).catch(e => console.error(e));
-
-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));
+*/
 
-//*/
 
 /* VECTOR TILE EXAMPLE */
 /*
 document.getElementById("enable").style.display = "none";
-map2D.getLayers().forEach(layer => {
-    map2D.removeLayer(layer);
+window.mpapi.map = mapsAPI.map.createMap(config, "2D", {errorCallback});
+
+window.mpapi.map.getLayers().forEach(layer => {
+    window.mpapi.map.removeLayer(layer);
 });
 
-const vtStyleUrl = "https://dev.adv-smart.de/styles/playground/masterportal_test1.json";
+const vtStyleUrl = "https://test.geoportal-hamburg.de/vt/esri/resources/styles/root.json";
 
 fetch(vtStyleUrl)
     .then(response => response.json())
@@ -264,20 +193,105 @@ fetch(vtStyleUrl)
 
         mpapi.vectorTile.setStyle(vtLayer, style, vtStyleUrl);
     });
-//*/
+*/
 
 /* WMTS example */
 /*
-map2D.getLayers().forEach(layer => {
-    map2D.removeLayer(layer);
+window.mpapi.map = mapsAPI.map.createMap(config, "2D", {errorCallback});
+
+window.mpapi.map.getLayers().forEach(layer => {
+    window.mpapi.map.removeLayer(layer);
 });
 window.mpapi.map.addLayer("7001");
 window.mpapi.map.addLayer("7002");
 window.mpapi.map.addLayer("7003");
-*/
+//*/
 
 /* VectorStyle example */
 // Example for using the vectorStyle that is now implemented in the masterportalAPI.
 // Apply style to layer "8172"
 // mirrors behavior of Masterportal styling
 getWfsStyleFunction();
+
+
+/* SEARCH FUNCTION EXAMPLE
+// You may e.g. copy this code to the browser's console to run a search.
+
+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));
+
+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));
+
+//*/
+
+
+// Add 3D functionality to the example:
+
+// add a click-listener to button, that creates a 3D-map on click
+document.getElementById("enable").addEventListener("click", function () {
+    if (window.mpapi.map2D === null) {
+        window.mpapi.map2D = window.mpapi.map;
+    }
+
+    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";
+    }
+    else {
+        const lib = portalConfig.cesiumLib ? portalConfig.cesiumLib : "https://geoportal-hamburg.de/mastercode/cesium/1_99/index.js";
+
+        document.getElementById("layer-visibility").style.display = "block";
+
+        load3DScriptModule.load3DScript(lib, function Loaded3DCallback () {
+            let tilesetLayer = null;
+
+            const settings3D = {
+                    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 = rawLayerList.getLayerWhere({id: "4001"}),
+                rawLayerTileset = rawLayerList.getLayerWhere({id: "4002"}),
+                rawLayerEntities = rawLayerList.getLayerWhere({id: "4003"});
+
+            window.mpapi.map = map3D;
+            tilesetLayer = new mpapi.Tileset(rawLayerTileset, window.mpapi.map);
+            tilesetLayer.setVisible(true, window.mpapi.map);
+
+            // 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);
+
+            mpapi.terrain.createLayer(rawLayerTerrain, window.mpapi.map);
+            mpapi.terrain.setVisible(true, rawLayerTerrain, window.mpapi.map);
+
+            window.mpapi.map.setEnabled(true);
+        });
+    }
+});
+
+// add a click-listener to button, that hides background layer in 3d
+document.getElementById("layer-visibility").addEventListener("click", function () {
+    map2D.getLayers().forEach(layer => {
+        map2D.removeLayer(layer);
+    });
+});

package/jest.setup.js

@@ -1,5 +1,20 @@
 import "regenerator-runtime/runtime";
 
+class Worker {
+    constructor (stringUrl) {
+        this.url = stringUrl;
+        this.onmessage = () => {
+            // empty
+        };
+    }
+
+    postMessage (msg) {
+        this.onmessage(msg);
+    }
+}
+// a mock for web worker
+window.Worker = Worker;
+
 window.URL.createObjectURL = function () {
     // empty
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.19.1",
+  "version": "2.20.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -11,7 +11,7 @@
   "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:trace": "node --trace-warnings node_modules/jest/bin/jest.js .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",
@@ -21,7 +21,7 @@
   "dependencies": {
     "core-js": "^3.30.2",
     "dayjs": "^1.11.7",
-    "ol": "7.3.0",
+    "ol": "7.4.0",
     "olcs": "^2.14.0",
     "proj4": "^2.9.0",
     "xml2js": "^0.5.0"
@@ -47,7 +47,7 @@
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
-    "cesium": "^1.95.0"
+    "cesium": "^1.106.0"
   },
   "engines": {
     "node": "^16.13.2 || ^18.12.0",

package/src/index.js

@@ -1,5 +1,6 @@
 import {createMapView} from "./maps/mapView";
 import crs from "./crs";
+import drawInteractions from "./maps/interactions/drawInteractions";
 import rawLayerList from "./rawLayerList";
 import * as wms from "./layer/wms";
 import wmts from "./layer/wmts";
@@ -36,5 +37,6 @@ export {
     ping,
     search,
     crs,
+    drawInteractions,
     webgl
 };

package/src/layer/wfs.js

@@ -252,3 +252,22 @@ export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {
     }
     return layer;
 }
+
+/**
+ * Load the features manually.
+ * @param {Object} layerAttributes raw layer attributes.
+ * @param {module:ol/vector/Source} layerSource - the source of the layer
+ * @returns {void}
+ */
+export function loadFeaturesManually (layerAttributes, layerSource) {
+    const getUrl = createUrl(layerAttributes, layerAttributes.version, {getCode: () => layerAttributes.crs}, "");
+
+    fetch(getUrl, layerSource)
+        .then(response => response.text())
+        .then(responseString => {
+            layerSource.addFeatures(layerSource.getFormat().readFeatures(responseString));
+        })
+        .catch(error => {
+            console.error(error);
+        });
+}

package/src/maps/interactions/drawInteractions.js

@@ -0,0 +1,130 @@
+import {createBox} from "ol/interaction/Draw.js";
+import {Draw} from "ol/interaction.js";
+
+const earthRadius = 6378137,
+    roh = 180 / Math.PI,
+    mappingDrawTypes = {
+        box: {
+            type: "Circle",
+            options: {
+                geometryFunction: createBox()
+            }
+        },
+        circle: {
+            type: "Circle"
+        },
+        doubleCircle: {
+            type: "Circle"
+        },
+        line: {
+            type: "LineString"
+        },
+        pen: {
+            type: "LineString",
+            options: {
+                freehand: true
+            }
+        },
+        point: {
+            type: "Point"
+        },
+        polygon: {
+            type: "Polygon"
+        }
+    };
+
+/**
+ * Transform the radius to map projection unit.
+ * @param {Number} radius The radius.
+ * @param {Object} mapProjection The map projection.
+ * @returns {Number} The transformed radius.
+ */
+function transformMapUnitRadius (radius, mapProjection) {
+    const unit = mapProjection.getUnits();
+    let mapUnitRadius;
+
+    if (unit === "m") {
+        mapUnitRadius = radius;
+    }
+    else if (unit === "degrees") {
+        mapUnitRadius = radius * roh / earthRadius;
+    }
+
+    return mapUnitRadius;
+}
+
+/**
+ * Create a feature for the outer circle of draw type: double circle.
+ * @param {ol/interaction/Draw} drawInteraction The draw interaction.
+ * @param {Object} mapProjection The map projection.
+ * @param {ol/source} source The vector layer source for draw features.
+ * @param {Object} [options={}] The options for drawing features.
+ * @param {Number} [options.circleOuterRadius] The radius for the outer circle.
+ * @returns {void}
+ */
+function drawOuterCircle (drawInteraction, mapProjection, source, options = {}) {
+    drawInteraction.on("drawend", event => {
+        const outerCircleFeature = event.feature.clone(),
+            mapUnitOuterRadius = transformMapUnitRadius(options.circleOuterRadius, mapProjection);
+
+        outerCircleFeature.getGeometry().setRadius(mapUnitOuterRadius);
+        source.addFeature(outerCircleFeature);
+    });
+}
+
+/**
+ * Create features for non-interactive circle or double circle.
+ * @param {ol/interaction/Draw} drawInteraction The draw interaction.
+ * @param {String} drawType The current draw type.
+ * @param {Object} mapProjection The map projection.
+ * @param {ol/source} source The vector layer source for draw features.
+ * @param {Object} [options={}] The options for drawing features.
+ * @param {Number} [options.circleInnerRadius] The radius for the inner circle.
+ * @param {Number} [options.circleOuterRadius] The radius for the outer circle.
+ * @param {Boolean} [options.interactiveCircle] Circle is drawn interactively or not.
+ * @returns {void}
+ */
+function drawCircle (drawInteraction, drawType, mapProjection, source, options = {}) {
+    if (options.interactiveCircle === false && options.circleInnerRadius > 0) {
+        drawInteraction.on("drawstart", event => {
+            const mapUnitInnerRadius = transformMapUnitRadius(options.circleInnerRadius, mapProjection);
+
+            event.feature.getGeometry().setRadius(mapUnitInnerRadius);
+            drawInteraction.finishDrawing();
+        });
+
+        if (drawType === "doubleCircle" && options.circleOuterRadius > 0) {
+            drawOuterCircle(drawInteraction, mapProjection, source, options);
+        }
+    }
+}
+
+/**
+ * Create the draw interaction.
+ * @param {String} drawType The current draw type.
+ * @param {ol/source} source The vector layer source for draw features.
+ * @returns {ol/interaction/Draw|null} The draw interaction.
+ */
+function createDrawInteraction (drawType, source) {
+    let drawInteraction = null;
+
+    if (typeof mappingDrawTypes[drawType] === "object") {
+        const options = mappingDrawTypes[drawType].options || {};
+
+        drawInteraction = new Draw({
+            source: source,
+            type: mappingDrawTypes[drawType].type,
+            freehand: options.freehand,
+            geometryFunction: options.geometryFunction
+        });
+    }
+
+    return drawInteraction;
+}
+
+export default {
+    createDrawInteraction,
+    drawCircle,
+    drawOuterCircle,
+    transformMapUnitRadius
+};

package/src/maps/ol/olMap.js

@@ -4,7 +4,7 @@ import setBackgroundImage from "../../lib/setBackgroundImage";
 import getInitialLayers from "../../lib/getInitialLayers";
 import defaults from "../../defaults";
 import * as wms from "../../layer/wms";
-import * as wmts from "../../layer/wmts";
+import wmts from "../../layer/wmts";
 import * as geojson from "../../layer/geojson";
 import * as wfs from "../../layer/wfs";
 import * as vectorBase from "../../layer/vectorBase";
@@ -23,7 +23,7 @@ let mapIdCounter = 0;
  */
 const layerBuilderMap = {
         wms,
-        wmts,
+        "wmts": wmts,
         wfs,
         geojson,
         vectorBase,