@masterportal/masterportalapi 2.19.2 → 2.21.0

package/src/maps/interactions/drawInteractions.js

@@ -0,0 +1,214 @@
+import {createBox} from "ol/interaction/Draw.js";
+import {Draw} from "ol/interaction.js";
+
+import createStyle from "../../vectorStyle/createStyle";
+
+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"
+        }
+    };
+let styleObject = null,
+    styleObjectOuterCircle = null,
+    zIndex = 0;
+
+/**
+ * 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/feature} feature The ol feature.
+ * @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.innerRadius] The radius for the inner circle.
+ * @param {Number} [options.outerRadius] The radius for the outer circle.
+ * @returns {void}
+ */
+function drawOuterCircle (feature, mapProjection, source, options = {}) {
+    const innerCircleFeature = feature.clone(),
+        mapUnitInnerRadius = transformMapUnitRadius(options.innerRadius, mapProjection),
+        mapUnitOuterRadius = transformMapUnitRadius(options.outerRadius, mapProjection),
+        innerStyle = createStyle.createStyle(styleObject, innerCircleFeature, false),
+        outerStyle = createStyle.createStyle(styleObjectOuterCircle, feature, false);
+
+    outerStyle.setZIndex(zIndex++);
+    feature.setStyle(outerStyle);
+    feature.getGeometry().setRadius(mapUnitOuterRadius);
+
+    innerStyle.setZIndex(zIndex++);
+    innerCircleFeature.setStyle(innerStyle);
+    innerCircleFeature.getGeometry().setRadius(mapUnitInnerRadius);
+
+    source.addFeature(innerCircleFeature);
+}
+
+/**
+ * Create a feature for the (inner) circle of draw type: circle or double circle.
+ * @param {ol/feature} feature The ol feature.vb
+ * @param {Object} mapProjection The map projection.
+ * @param {Object} [options={}] The options for drawing features.
+ * @param {Number} [options.innerRadius] The radius for the (inner) circle.
+ * @returns {void}
+ */
+function drawInnerCircle (feature, mapProjection, options = {}) {
+    const mapUnitInnerRadius = transformMapUnitRadius(options.innerRadius, mapProjection);
+
+    feature.getGeometry().setRadius(mapUnitInnerRadius);
+}
+
+/**
+ * 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.innerRadius] The radius for the inner circle.
+ * @param {Boolean} [options.interactive] Circle is drawn interactively or not.
+ * @param {Number} [options.outerRadius] The radius for the outer circle.
+ * @returns {void}
+ */
+function drawCircle (drawInteraction, drawType, mapProjection, source, options = {}) {
+    if ((drawType === "doubleCircle" || options.interactive === false) && options.innerRadius > 0) {
+        drawInteraction.on("drawstart", event => {
+            if (drawType === "circle") {
+                drawInnerCircle(event.feature, mapProjection, options);
+            }
+            else if (drawType === "doubleCircle" && options.outerRadius > 0) {
+                drawOuterCircle(event.feature, mapProjection, source, options);
+            }
+            drawInteraction.finishDrawing();
+        });
+    }
+}
+
+/**
+ * Creates a styleObject from vectorStyling from layout.
+ * @param {Object} currentLayout The current layout.
+ * @param {Boolean} [outerCircle=false] Indicates if the styling is for the outer circle.
+ * @returns {void}
+ */
+function setStyleObject (currentLayout, outerCircle = false) {
+    const fillOpacity = 1 - (currentLayout.fillTransparency / 100),
+        fillColorRgba = [...currentLayout.fillColor, fillOpacity],
+        style = {
+            rules: [
+                {
+                    style: {
+                        circleFillColor: fillColorRgba,
+                        circleStrokeColor: currentLayout.strokeColor,
+                        circleStrokeWidth: currentLayout.strokeWidth,
+                        lineStrokeColor: currentLayout.strokeColor,
+                        lineStrokeWidth: currentLayout.strokeWidth,
+                        polygonFillColor: fillColorRgba,
+                        polygonStrokeColor: currentLayout.strokeColor,
+                        polygonStrokeWidth: currentLayout.strokeWidth
+                    }
+                }
+            ]
+        };
+
+    if (outerCircle === true) {
+        styleObjectOuterCircle = style;
+    }
+    else {
+        styleObject = style;
+    }
+}
+
+/**
+ * Sets the style to overlay and feature.
+ * @param {ol/interaction/Draw} drawInteraction The draw interaction.
+ * @returns {void}
+ */
+function setStyleToDrawInteraction (drawInteraction) {
+    drawInteraction.on("drawstart", event => {
+        const style = createStyle.createStyle(styleObject, event.feature, false);
+
+        style.setZIndex(zIndex++);
+        drawInteraction.getOverlay().setStyle(style);
+        event.feature.setStyle(style);
+    });
+}
+
+/**
+ * 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({
+            freehand: options.freehand,
+            geometryFunction: options.geometryFunction,
+            source: source,
+            type: mappingDrawTypes[drawType].type
+        });
+
+        if (styleObject !== null && drawType !== "doubleCircle") {
+            setStyleToDrawInteraction(drawInteraction);
+        }
+    }
+
+    return drawInteraction;
+}
+
+export {styleObject};
+
+export default {
+    createDrawInteraction,
+    drawCircle,
+    drawInnerCircle,
+    drawOuterCircle,
+    setStyleObject,
+    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,

package/src/renderer/webgl.js

@@ -1,9 +1,9 @@
 import WebGLPointsLayer from "ol/layer/WebGLPoints";
 import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer";
 import VectorLayer from "ol/layer/Layer";
-import {packColor} from "ol/renderer/webgl/shaders";
 import styleList from "../vectorStyle/styleList";
 import {getRulesForFeature} from "../vectorStyle/lib/getRuleForIndex";
+import {returnColor} from "../vectorStyle/lib/colorConvertions";
 
 /**
  * The default style for OpenLayers WebGLPoints class
@@ -11,82 +11,24 @@ import {getRulesForFeature} from "../vectorStyle/lib/getRuleForIndex";
  * @private
  */
 const defaultStyle = {
-    symbol: {
-        symbolType: "circle",
-        size: 20,
-        color: "#006688",
-        rotateWithView: false,
-        offset: [0, 0],
-        opacity: 0.6
-    }
-};
-
-/**
- * parses the styling rules for the renderer
- * @static
- * @private
- * @returns {Object} the style options object with conditional functions
- */
-export function getRenderFunctions () {
-    return {
-        /**
-         * Used for polygon fills
-         * Reads the relevant properties from the Masterportal style object
-         * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
-         */
-        fill: {
-            attributes: {
-                color: (feature) => {
-                    return packColor(feature.styleRule?.style.polygonFillColor || "#006688");
-                },
-                opacity: (feature) => {
-                    return typeof feature.styleRule?.style.polygonFillColor?.[3] === "number" ?
-                        feature.styleRule.style.polygonFillColor[3] : 1;
-                }
-            }
-        },
-        stroke: {
-            /**
-             * Used for polygon edges and lineStrings
-             * Reads the relevant properties from the Masterportal style object
-             * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
-             */
-            attributes: {
-                color: (feature) => {
-                    return packColor(feature.styleRule?.style.polygonStrokeColor || "#006688");
-                },
-                width: (feature) => {
-                    return feature.styleRule?.style.polygonStrokeWidth || 1;
-                },
-                opacity: (feature) => {
-                    return typeof feature.styleRule?.style.polygonStrokeColor?.[3] === "number" ?
-                        feature.styleRule.style.polygonStrokeColor[3] : 1;
-                }
-            }
-        },
-        point: {
-            /**
-             * As of now, the generic VectorLayerRenderer only supports points rendered as quads
-             * available attributes: color, size, opacity
-             * Due to that, we use WebGLPoints Layer Class for point geom types
-             * Reads the relevant properties from the Masterportal style object
-             * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
-             */
-            attributes: {
-                color: (feature) => {
-                    return packColor(feature.styleRule?.style.circleFillColor || "#006688");
-                },
-                size: (feature) => {
-                    return feature.styleRule?.style.circleRadius || 20;
-                },
-                opacity: (feature) => {
-                    return typeof feature.styleRule?.style.circleFillColor?.[3] === "number" ?
-                        feature.styleRule.style.circleFillColor[3] : 1;
-                }
-            }
+        symbol: {
+            symbolType: "circle",
+            size: 20,
+            color: "#006688",
+            rotateWithView: false,
+            offset: [0, 0],
+            opacity: 0.6
         }
+    },
+
+    /** @type {import('ol/style/literal.js').LiteralStyle} */
+    style = {
+        "stroke-color": ["get", "STROKECOLOR"],
+        "stroke-width": ["get", "STROKEWIDTH", "number"],
+        "fill-color": ["get", "FILLCOLOR"],
+        "opacity": ["get", "OPACITY", "number"],
+        "size": ["get", "CIRCLESIZE", "number"]
     };
-}
 
 /**
  * Creates a layer object to extend from.
@@ -109,7 +51,9 @@ export function createVectorLayerRenderer () {
          * @experimental
          */
         createRenderer () {
-            return new WebGLVectorLayerRenderer(this, getRenderFunctions());
+            return new WebGLVectorLayerRenderer(this, {
+                style
+            });
         }
     }
 
@@ -132,9 +76,23 @@ export function formatFeatureStyles (feature, styleObject) {
     // extract first matching rule only
     const rule = getRulesForFeature(styleObject, feature)[0];
 
-    // don't set on properties to avoid GFI issues
     // undefined if no match
     feature.styleRule = rule;
+
+    if (rule && rule.style) {
+        const polygonFillColor = returnColor(rule.style.polygonFillColor, "hex"),
+            circleFillColor = returnColor(rule.style.circleFillColor, "hex"),
+            fillColor = polygonFillColor ? polygonFillColor : circleFillColor,
+            strokeColor = returnColor(rule.style.polygonStrokeColor || rule.style.lineStrokeColor, "hex"),
+            strokeWidth = rule.style.polygonStrokeWidth || rule.style.lineStrokeWidth,
+            size = rule.style.circleRadius;
+
+        feature.set("FILLCOLOR", fillColor ? fillColor : "#006688");
+        feature.set("STROKECOLOR", strokeColor ? strokeColor : "#006688");
+        feature.set("STROKEWIDTH", strokeWidth ? strokeWidth : 1);
+        feature.set("OPACITY", fillColor ? (rule.style.polygonFillColor || rule.style.circleFillColor)[3] : 1);
+        feature.set("CIRCLESIZE", size ? size : 20);
+    }
 }
 
 /**

package/src/vectorStyle/createStyle.js

@@ -3,11 +3,11 @@ import PointStyle from "./styles/point/stylePoint";
 import TextStyle from "./styles/styleText";
 import PolygonStyle from "./styles/polygon/stylePolygon";
 import LineStringStyle from "./styles/styleLine";
+import CircleStyle from "./styles/styleCircle";
 import CesiumStyle from "./styles/styleCesium";
 import {getRuleForIndex, getRulesForFeature} from "./lib/getRuleForIndex";
 
-const legendsOfAllStyles = [],
-    uniqueStyles = [];
+const legendsOfAllStyles = [];
 let legendInformationLength = 0;
 
 /**
@@ -30,17 +30,13 @@ function isMultiGeometry (geometryType) {
  */
 function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsImgPathFromConfig) {
     const style = rule?.style,
-        legendValue = style ? style.legendValue : null,
-        alreadyExisitingStyle = uniqueStyles.find(element => element.featureStyle === style && element.geometryType === geometryType);
+        legendValue = style ? style.legendValue : null;
     let styleObject,
         styleObjectForLegend = null;
 
     feature.legendValue = legendValue ? legendValue : null;
 
-    if (alreadyExisitingStyle) {
-        styleObject = alreadyExisitingStyle.featureStyleObject;
-    }
-    else if (geometryType === "Point") {
+    if (geometryType === "Point") {
         styleObject = new PointStyle(feature, style, isClustered);
         if (isClustered) {
             styleObjectForLegend = new PointStyle(feature, style, false);
@@ -65,7 +61,13 @@ function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsIm
         styleObject.legendValue = legendValue;
         return styleObject;
     }
-    else if (geometryType === "LinearRing" || geometryType === "Circle") {
+    else if (geometryType === "Circle") {
+        styleObject = new CircleStyle(feature, style, isClustered);
+        if (isClustered) {
+            styleObjectForLegend = new CircleStyle(feature, style, false);
+        }
+    }
+    else if (geometryType === "LinearRing") {
         console.warn("Geometry type not implemented: " + geometryType + " default style ist used for feature " + feature);
         return new Style();
     }
@@ -78,7 +80,6 @@ function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsIm
         styleObjectForLegend.initialize(feature, style, false, wfsImgPathFromConfig);
         styleObjectForLegend.legendValue = legendValue;
     }
-    uniqueStyles.push({featureStyle: style, featureStyleObject: styleObject, geometryType});
     styleObject.initialize(feature, style, isClustered, wfsImgPathFromConfig);
     styleObject.addLegendInfo(geometryType, styleObjectForLegend === null ? styleObject : styleObjectForLegend, rule);
     styleObject.legendValue = legendValue;
@@ -122,6 +123,7 @@ function getMultiGeometryStyle (geometryType, feature, rules, isClustered, wfsIm
                 console.warn("Multi encapsulated multiGeometries are not supported.");
             }
             else if (!simpleStyle.styleMultiGeomOnlyWithRule || rule) {
+                simpleStyle.getStyle()?.setGeometry(geometry);
                 olStyle.push(simpleStyle);
             }
         });
@@ -136,7 +138,7 @@ function getMultiGeometryStyle (geometryType, feature, rules, isClustered, wfsIm
     else {
         const simpleStyle = getSimpleGeometryStyle(geometryType, feature, rules, isClustered, wfsImgPathFromConfig);
 
-        simpleStyle.getStyle().setGeometry(geometryType);
+        simpleStyle.getStyle()?.setGeometry(geometryType);
         olStyle.push(simpleStyle);
     }
     return olStyle;
@@ -251,7 +253,7 @@ function createStyle (styleObject, feature, isClustered, wfsImgPathFromConfig) {
         captureLegendFromFeature(styleObject.styleId, legendInformation);
     }
     // label style is optional and depends on some fields
-    if (isClustered || hasLabelField) {
+    if (styleObjectGeometry !== null && (isClustered || hasLabelField)) {
         if (Array.isArray(styleObjectGeometry)) {
             styleObjectGeometry[0].setText(getLabelStyle(feature, style, isClustered));
         }

package/src/vectorStyle/styles/point/stylePoint.js

@@ -38,14 +38,14 @@ class PointStyle extends StyleClass {
         this.setFeature(feature);
         this.setIsClustered(isClustered);
         this.overwriteStyling(styles);
-        this.setStyle(this.getStyle());
+        this.setStyle(this.createStyle());
     }
 
     /**
      * This function returns a style for each feature.
      * @returns {ol/style} - The created style.
      */
-    getStyle () {
+    createStyle () {
         if (this.nullStyle) {
             return null;
         }

package/src/vectorStyle/styles/polygon/stylePolygon.js

@@ -28,14 +28,14 @@ class PolygonStyle extends StyleClass {
         this.setFeature(feature);
         this.setIsClustered(isClustered);
         this.overwriteStyling(styles);
-        this.setStyle(this.getStyle());
+        this.setStyle(this.createStyle());
     }
 
     /**
      * This function returns a style for each feature.
      * @returns {ol/style} - The created style.
      */
-    getStyle () {
+    createStyle () {
         if (this.nullStyle) {
             return null;
         }

package/src/vectorStyle/styles/style.js

@@ -35,6 +35,14 @@ class StyleClass {
         this.style = value;
     }
 
+    /**
+     * Getter for style.
+     * @returns {ol/style} - The style.
+     */
+    getStyle () {
+        return this.style;
+    }
+
     /*
      * setter for styles
      * @param {object} styles styles

package/src/vectorStyle/styles/styleCesium.js

@@ -22,14 +22,14 @@ class CesiumStyle extends StyleClass {
     initialize (rule) {
         this.overwriteStyling(rule.style);
         this.setConditions(rule.conditions);
-        this.setStyle(this.getStyle());
+        this.setStyle(this.createStyle());
     }
 
     /**
      * This function returns a style for each feature.
      * @returns {ol/style} - The created style.
      */
-    getStyle () {
+    createStyle () {
         return this.createCondition(this.get("conditions"), this.get("style"));
     }
 

package/src/vectorStyle/styles/styleCircle.js

@@ -0,0 +1,61 @@
+import StyleClass from "./style";
+import {Circle, Fill, Stroke, Style} from "ol/style.js";
+import defaultStyle from "./defaultStyles";
+
+class CircleStyle extends StyleClass {
+    /**
+     * @description Class to create ol.style.Style
+     * @constructor
+     * @class CircleStyle
+     * @extends StyleClass
+     * @memberof VectorStyle.Style
+     */
+    constructor () {
+        super();
+        this.attributes = {...defaultStyle.circle};
+    }
+
+    /**
+     * This function initializes the Linestring Object by setting or overwriting some attributes.
+     * @param {ol/feature} feature Feature to be styled.
+     * @param {object} styles styling properties to overwrite defaults
+     * @param {Boolean} isClustered Flag to show if feature is clustered.
+     * @returns {void}
+     */
+    initialize (feature, styles, isClustered) {
+        this.setFeature(feature);
+        this.setIsClustered(isClustered);
+        this.overwriteStyling(styles);
+        this.setStyle(this.createStyle());
+    }
+
+    /**
+     * This function returns a style for each feature.
+     * @returns {ol/style/Style} - The created style.
+     */
+    createStyle () {
+        if (this.nullStyle) {
+            return null;
+        }
+
+        const fill = new Fill({
+                color: this.attributes.circleFillColor
+            }),
+            stroke = new Stroke({
+                color: this.attributes.circleStrokeColor,
+                width: this.attributes.circleStrokeWidth
+            });
+
+        return new Style({
+            image: new Circle({
+                fill: fill,
+                stroke: stroke,
+                radius: 0
+            }),
+            fill: fill,
+            stroke: stroke
+        });
+    }
+}
+
+export default CircleStyle;

package/src/vectorStyle/styles/styleLine.js

@@ -26,14 +26,14 @@ class LineStringStyle extends StyleClass {
         this.setFeature(feature);
         this.setIsClustered(isClustered);
         this.overwriteStyling(styles);
-        this.setStyle(this.getStyle());
+        this.setStyle(this.createStyle());
     }
 
     /**
      * This function returns a style for each feature.
      * @returns {ol/style/Style} - The created style.
      */
-    getStyle () {
+    createStyle () {
         if (this.nullStyle) {
             return null;
         }

package/src/vectorStyle/styles/styleText.js

@@ -28,14 +28,14 @@ class TextStyle extends StyleClass {
         this.setFeature(feature);
         this.setIsClustered(isClustered);
         this.overwriteStyling(styles);
-        this.setStyle(this.getStyle());
+        this.setStyle(this.createStyle());
     }
 
     /**
     * This function returns a style for each feature.
     * @returns {ol/style} - The created style.
     */
-    getStyle () {
+    createStyle () {
         if (this.nullStyle) {
             return null;
         }

package/test/layer/wfs.test.js

@@ -414,5 +414,57 @@ describe("wfs.js", function () {
             expect(webgl.afterLoading).toHaveBeenCalled();
         });
     });
+    describe("loadFeaturesManually", function () {
+        const consoleError = console.error;
+        let tick;
+
+        beforeEach(() => {
+            tick = () => {
+                return new Promise(resolve => {
+                    setTimeout(resolve, 0);
+                });
+            };
+
+            if (global.fetch) {
+                global.fetch.mockClear();
+            }
+        });
+        // to reset show error on load in console
+        afterEach(() => {
+            console.error = consoleError;
+        });
+
+        it("load features manually", async function () {
+            global.fetch = jest.fn().mockImplementationOnce(() => {
+                return new Promise((resolve) => {
+                    resolve({
+                        ok: true,
+                        status: 200,
+                        text: () => {
+                            return featureCollection;
+                        }
+                    });
+                });
+            });
+
+            const format = new WFS(),
+                source = new VectorSource({
+                    format: format,
+                    url: "https://url.de",
+                    version: "1.1.0",
+                    featureType: "krankenhaeuser_hh",
+                    featureNS: "http://www.deegree.org/app"
+                }),
+                layerAttributes = {
+                    crs: "EPSG:25832",
+                    version: "1.1.0",
+                    url: "https://url.de"
+                };
+
+            wfs.loadFeaturesManually(layerAttributes, source);
+            await tick();
+            expect(source.getFeatures()).toHaveLength(1);
+        });
+    });
 });