@masterportal/masterportalapi 2.13.0 → 2.14.0

package/src/vectorStyle/lib/valueOperations.js

@@ -0,0 +1,172 @@
+import {mapAttributes, isObjectPath} from "../../lib/attributeMapper";
+
+/**
+ * get value without comma and into number format
+ * @param   {string|number} value the parameter
+ * @returns {number} the parsed value
+ */
+export function getValueWithoutComma (value) {
+    if (typeof value === "string" && value.indexOf(",") > -1) {
+        return parseFloat(value.replace(",", "."));
+    }
+    return value;
+}
+
+/**
+ * Returns the reference value. If necessary it loops through the feature properties object structure.
+ * @param   {object} featureProperties properties of the feature
+ * @param   {string} value attribute value or object path to check
+ * @returns {void} attribute property can be of any type
+ */
+export function getReferenceValue (featureProperties, value) {
+    const valueIsObjectPath = isObjectPath(value);
+    let referenceValue = value;
+
+    // sets the real feature property value in case referenceValue is an object path
+    if (valueIsObjectPath) {
+        referenceValue = mapAttributes(featureProperties, referenceValue, false);
+    }
+
+    // sets the real feature property values also for min-max-arrays in case its values are object pathes.
+    if (Array.isArray(referenceValue)) {
+        referenceValue.forEach((element, index, arr) => {
+            if (isObjectPath(element)) {
+                arr[index] = mapAttributes(featureProperties, element, false);
+            }
+        });
+    }
+    return referenceValue;
+}
+
+/**
+ * Compares values according to its type.
+ * @param   {string|number} featureValue value to compare
+ * @param   {string|number|array} referenceValue value to compare
+ * @returns {Boolean} true if values equal or in range
+ */
+export function compareValues (featureValue, referenceValue) {
+    let value = featureValue;
+
+    // plain value compare for strings
+    if (typeof featureValue === "string" && typeof referenceValue === "string") {
+        if (featureValue === referenceValue) {
+            return true;
+        }
+    }
+
+    // plain value compare for boolean
+    if (typeof featureValue === "boolean" && typeof referenceValue === "boolean") {
+        if (featureValue === referenceValue) {
+            return true;
+        }
+    }
+
+    // plain value compare trying to parse featureValue to float
+    else if (typeof referenceValue === "number") {
+        value = parseFloat(value);
+
+        if (!isNaN(featureValue) && value === parseFloat(referenceValue)) {
+            return true;
+        }
+    }
+    // compare value in range
+    else if (Array.isArray(referenceValue) && referenceValue.every(element => typeof element === "number" || element === null) && (referenceValue.length === 2 || referenceValue.length === 4)) {
+        value = parseFloat(getValueWithoutComma(value));
+        if (!isNaN(getValueWithoutComma(featureValue))) {
+            // value in absolute range of numbers [minValue, maxValue]
+            if (referenceValue.length === 2) {
+                // do nothing
+            }
+            // value in relative range of numbers [minValue, maxValue, relMin, relMax]
+            else if (referenceValue.length === 4) {
+                value = 1 / (parseFloat(referenceValue[3], 10) - parseFloat(referenceValue[2], 10)) * (value - parseFloat(referenceValue[2], 10));
+            }
+            if (referenceValue[0] === null && referenceValue[1] === null) {
+                // everything is in a range of [null, null]
+                return true;
+            }
+            else if (referenceValue[0] === null) {
+                // if a range [null, x] is given, x should not be included
+                return value < parseFloat(referenceValue[1]);
+            }
+            else if (referenceValue[1] === null) {
+                // if a range [x, null] is given, x should be included
+                return value >= parseFloat(referenceValue[0]);
+            }
+
+            // if a range [x, y] is given, x should be included but y should not be included
+            return value >= parseFloat(referenceValue[0]) && value < parseFloat(referenceValue[1]);
+        }
+    }
+    return false;
+}
+
+/**
+ * Checks one feature against one property returning true if property satisfies condition.
+ * if clustering is activated, the parameter featureProperties has an array of feautures. only the first feature
+ * from the array is relevant at point, because only individual features are styled here.
+ * The styling of clustered features happens in another function.
+ * @param   {object} featureProperties properties of the feature that has to be checked
+ * @param   {string} key attribute name or object path to check
+ * @param   {string|number|array} value attribute value or object path to check
+ * @returns {Boolean} true if property is satisfied. Otherwhile returns false.
+ */
+export function checkProperty (featureProperties, key, value) {
+    let featureProperty = featureProperties;
+
+    // if they are clustered features, then the first one is taken from the array
+    if (typeof featureProperties === "object" && Object.prototype.hasOwnProperty.call(featureProperties, "features")) {
+        if (Array.isArray(featureProperties.features) && featureProperties.features.length > 0) {
+            featureProperty = featureProperties.features[0].getProperties();
+        }
+    }
+
+    const featureValue = mapAttributes(featureProperty, key, false),
+        referenceValue = getReferenceValue(featureProperty, value);
+
+    if ((typeof featureValue === "boolean" || typeof featureValue === "string" || typeof featureValue === "number") && (typeof referenceValue === "boolean" || typeof referenceValue === "string" || typeof referenceValue === "number" ||
+        (Array.isArray(referenceValue) && referenceValue.every(element => typeof element === "number" || element === null) &&
+            (referenceValue.length === 2 || referenceValue.length === 4)))) {
+        return compareValues(featureValue, referenceValue);
+    }
+    return false;
+}
+
+/**
+ * Loops one feature through all properties returning true if all properties are satisfied.
+ * Returns also true if rule has no "conditions" to check.
+ * @param   {ol/feature} feature to check
+ * @param {object} rule the rule to check
+ * @returns {Boolean} true if all properties are satisfied
+ */
+export function checkProperties (feature, rule) {
+    if (rule?.conditions?.properties) {
+        const featureProperties = feature.getProperties(),
+            properties = rule.conditions.properties;
+        let key,
+            i;
+
+        if (Array.isArray(properties)) {
+            for (i in properties) {
+                const value = properties[i].value;
+
+                key = properties[i].attrName;
+
+                if (checkProperty(featureProperties, key, value)) {
+                    return false;
+                }
+            }
+        }
+        else {
+            for (key in properties) {
+                const value = properties[key];
+
+                if (!checkProperty(featureProperties, key, value)) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    return true;
+}

package/src/vectorStyle/styleList.js

@@ -0,0 +1,281 @@
+import defaultStyle from "./styles/defaultStyles";
+
+/**
+* styleList that stores all the vector styles contained in style.json.
+* Only the styles of the configured layers are kept.
+* If a tool has an attribute "styleId", then also this style is kept.
+* The styleId can be a string or an array of strings or an array of objects that need to have the attribute "id".
+* example "myStyleId", ["myStyleId2", "myStyleId3"], [{"id": "myStyleId4", "name": "I am not relevant for the style"}]
+ * @type{Array}
+ * @ignore
+ */
+let styleList,
+    configuredLayers,
+    configuredTools,
+    mapMarkerPointStyleId,
+    mapMarkerPolygonStyleId,
+    highlightFeaturesPointStyleId,
+    highlightFeaturesPolygonStyleId,
+    highlightFeaturesLineStyleId,
+    styleConf,
+    featureViaUrlLayers;
+
+/**
+ * Gathers the styleIds of the layers.
+ * @returns {Sting[]} - StyleIds from layers.
+ */
+function getStyleIdsFromLayers () {
+    const styleIds = [];
+
+    if (configuredLayers) {
+        configuredLayers.forEach(layer => {
+            if (layer.typ === "WFS" || layer.typ === "GeoJSON" || layer.typ === "SensorThings" || layer.typ === "TileSet3D") {
+                if (layer?.styleId) {
+                    styleIds.push(layer.styleId);
+                }
+            }
+            else if (layer.typ === "GROUP") {
+                layer.children.forEach(child => {
+                    if (child?.styleId) {
+                        styleIds.push(child.styleId);
+                    }
+                });
+            }
+        });
+    }
+    return styleIds;
+}
+
+/**
+ * Gathers the styleIds of the configured tools.
+ * @returns {String[]} - StyleIds of Tools
+ */
+function getStyleIdsFromTools () {
+    const styleIds = [];
+
+    if (configuredTools) {
+        configuredTools.forEach(tool => {
+            if (tool?.styleId) {
+                if (Array.isArray(tool.styleId)) {
+                    tool.styleId.forEach(styleIdInArray => {
+                        if (styleIdInArray instanceof Object) {
+                            styleIds.push(styleIdInArray.id);
+                        }
+                        else {
+                            styleIds.push(styleIdInArray);
+                        }
+                    });
+                }
+                else {
+                    styleIds.push(tool.styleId);
+                }
+            }
+        });
+    }
+    return styleIds;
+}
+
+/**
+ * gets style id from MapMarker
+ * @returns {String} - Style id of mapMarker.
+ */
+function getStyleIdForMapMarkerPoint () {
+    let styleId;
+
+    if (mapMarkerPointStyleId) {
+        styleId = mapMarkerPointStyleId;
+    }
+    else {
+        styleId = "defaultMapMarkerPoint";
+    }
+    return styleId;
+}
+
+/**
+ * gets style id from HighlightFeatures
+ * @returns {String} - Style id of highlightFeatures.
+ */
+function getStyleIdForHighlightFeaturesPoint () {
+    let styleId;
+
+    if (highlightFeaturesPointStyleId) {
+        styleId = highlightFeaturesPointStyleId;
+    }
+    else {
+        styleId = "defaultHighlightFeaturesPoint";
+    }
+    return styleId;
+}
+
+/**
+ * gets style id from HighlightFeatures
+ * @returns {String} - Style id of highlightFeatures.
+ */
+function getStyleIdForHighlightFeaturesLine () {
+    let styleId;
+
+    if (highlightFeaturesLineStyleId) {
+        styleId = highlightFeaturesLineStyleId;
+    }
+    else {
+        styleId = "defaultHighlightFeaturesLine";
+    }
+    return styleId;
+}
+
+/**
+ * gets style id from MapMarker
+ * @returns {String} - Style id of mapMarker.
+ */
+function getStyleIdForMapMarkerPolygon () {
+    let styleId;
+
+    if (mapMarkerPolygonStyleId) {
+        styleId = mapMarkerPolygonStyleId;
+    }
+    else {
+        styleId = "defaultMapMarkerPolygon";
+    }
+    return styleId;
+}
+
+/**
+ * gets style id from HighlightFeatures
+ * @returns {String} - Style id of highlightFeatures.
+ */
+function getStyleIdForHighlightFeaturesPolygon () {
+    let styleId;
+
+    if (highlightFeaturesPolygonStyleId) {
+        styleId = highlightFeaturesPolygonStyleId;
+    }
+    else {
+        styleId = "defaultHighlightFeaturesPolygon";
+    }
+    return styleId;
+}
+
+/**
+ * Checks whether the module featureViaURL is activated and retrieves the styleIds.
+ * @returns {String[]} Array of styleIds for the layers for the features given via the URL.
+ */
+function getFeatureViaURLStyles () {
+    const styleIds = [];
+
+    if (featureViaUrlLayers !== undefined) {
+        featureViaUrlLayers.forEach(layer => {
+            styleIds.push(layer.styleId);
+        });
+    }
+    return styleIds;
+}
+
+/**
+ * overwrite parse function so that only the style objects are saved
+ * whose layers are configured in the config.json
+ * After that these objects are automatically added to the collection
+ * @param  {object[]} data parsed style.json
+ * @return {object[]} filtered style.json objects
+ */
+function parseStyles (data) {
+    const dataWithDefaultValue = [...data];
+    let styleIds = [],
+        filteredData = [];
+
+    dataWithDefaultValue.push({styleId: "default", rules: [{style: {}}]},
+        defaultStyle.defaultMapMarkerPoint,
+        defaultStyle.defaultMapMarkerPolygon,
+        defaultStyle.defaultHighlightFeaturesPoint,
+        defaultStyle.defaultHighlightFeaturesPolygon,
+        defaultStyle.defaultHighlightFeaturesLine);
+
+    styleIds.push(getStyleIdsFromLayers(),
+        getStyleIdForMapMarkerPoint(),
+        getStyleIdForMapMarkerPolygon(),
+        getStyleIdForHighlightFeaturesPoint(),
+        getStyleIdForHighlightFeaturesPolygon(),
+        getStyleIdForHighlightFeaturesLine(),
+        getStyleIdsFromTools(),
+        getFeatureViaURLStyles());
+
+    styleIds = styleIds.reduce((acc, val) => acc.concat(val), []);
+    filteredData = dataWithDefaultValue.filter(styleObject => styleIds.includes(styleObject.styleId));
+
+    return filteredData;
+}
+
+/**
+ * Initializes the style list with fetching the services.json.
+ * [styleConf="https://geoportal-hamburg.de/lgv-config/style_v3.json"] - the URL to fetch the services from.
+ * @param {object} [styleGetters] - object with the needed getters from vue store
+ * @param {object} [Config] - the Config.js object
+ * @param {array} [layers] - an array with the configured layers
+ * @param {array} [tools] - an array with the configured tools
+ * @param {function} [callback] - called with services after loaded; called with false and error on error
+ * @returns {undefined} nothing, add callback to receive styleList
+ */
+function initializeStyleList (styleGetters, Config, layers, tools, callback) {
+    configuredLayers = layers;
+    configuredTools = tools;
+
+    mapMarkerPointStyleId = styleGetters.mapMarkerPointStyleId;
+    mapMarkerPolygonStyleId = styleGetters.mapMarkerPolygonStyleId;
+    highlightFeaturesPointStyleId = styleGetters.highlightFeaturesPointStyleId;
+    highlightFeaturesPolygonStyleId = styleGetters.highlightFeaturesPolygonStyleId;
+    highlightFeaturesLineStyleId = styleGetters.highlightFeaturesLineStyleId;
+
+    styleConf = Config.styleConf;
+    featureViaUrlLayers = Config.featureViaURL?.layers;
+
+    const xhr = new XMLHttpRequest();
+
+    xhr.open("GET", styleConf, false);
+    xhr.onreadystatechange = function (event) {
+        const target = event.target,
+            status = target.status;
+        let data;
+
+        if (status === 200) {
+            try {
+                data = JSON.parse(target.response);
+            }
+            catch (error) {
+                console.error("An error occured when parsing the response after loading '" + styleConf + "':", error);
+                return callback(false, error);
+            }
+            styleList = parseStyles(data);
+        }
+        else if (status === 404) {
+            console.error("An error occured when trying to fetch services from '" + styleConf + "':", 404);
+            return callback(false, true);
+        }
+        return callback(styleList);
+    };
+    xhr.send();
+}
+
+/**
+ * adds a style to the style list
+ * @param {Array} jsonStyles Array of styles
+ * @returns  {void}
+ */
+function addToStyleList (jsonStyles) {
+    jsonStyles.forEach(style => {
+        styleList.push(style);
+    });
+}
+
+/**
+ * Returns style object by styleId or by layerId
+ * @param {string} layerId layerId
+ * @returns {object} style object
+ */
+function returnStyleObject (layerId) {
+    return styleList?.find(styleObject => styleObject.styleId === layerId);
+}
+
+export default {
+    initializeStyleList,
+    addToStyleList,
+    returnStyleObject
+};

package/src/vectorStyle/styles/defaultStyles.js

@@ -0,0 +1,177 @@
+const defaultColors = {
+        background: [255, 255, 255, 0],
+        fill: [10, 200, 100, 0.5],
+        stroke: [0, 0, 0, 1],
+        textFill: [255, 255, 255, 1],
+        textStroke: [0, 0, 0, 0]
+    },
+    defaultStyle = {
+        point: {
+            feature: null,
+            isClustered: false,
+            type: "circle",
+            imagePath: "",
+            // für type icon
+            imageName: "blank.png",
+            imageWidth: 1,
+            imageHeight: 1,
+            imageScale: 1,
+            imageOffsetX: 0.5,
+            imageOffsetY: 0.5,
+            imageOffsetXUnit: "fraction",
+            imageOffsetYUnit: "fraction",
+            // for type circle
+            circleRadius: 10,
+            circleFillColor: defaultColors.fill,
+            circleStrokeColor: defaultColors.stroke,
+            circleStrokeWidth: 2,
+            clusterType: "circle",
+            // for type circle
+            clusterCircleRadius: 15,
+            clusterCircleFillColor: defaultColors.fill,
+            clusterCircleStrokeColor: defaultColors.stroke,
+            clusterCircleStrokeWidth: 2,
+            // for type icon
+            clusterImageName: "blank.png",
+            clusterImageWidth: 1,
+            clusterImageHeight: 1,
+            clusterImageScale: 1,
+            clusterImageOffsetX: 0.5,
+            clusterImageOffsetY: 0.5,
+            // Für scalingShape CIRCLESEGMENTS
+            circleSegmentsRadius: 10,
+            circleSegmentsStrokeWidth: 4,
+            circleSegmentsBackgroundColor: defaultColors.background,
+            scalingValueDefaultColor: defaultColors.stroke,
+            circleSegmentsGap: 10,
+            // Für scalingShape CIRCLE_BAR
+            circleBarScalingFactor: 1,
+            circleBarRadius: 6,
+            circleBarLineStroke: 5,
+            circleBarCircleFillColor: defaultColors.fill,
+            circleBarCircleStrokeColor: defaultColors.stroke,
+            circleBarCircleStrokeWidth: 1,
+            circleBarLineStrokeColor: defaultColors.stroke,
+            scalingAttribute: "",
+            rotation: 0,
+            // for type regularShape
+            rsRadius: 10,
+            rsRadius2: undefined,
+            rsPoints: 3,
+            rsFillColor: [0, 153, 255, 1],
+            rsStrokeColor: [0, 0, 0, 1],
+            rsStrokeWidth: 5,
+            rsAngle: 0,
+            rsScale: undefined
+        },
+        line: {
+            lineStrokeColor: defaultColors.stroke,
+            lineStrokeWidth: 5,
+            lineStrokeCap: "round",
+            lineStrokeJoin: "round",
+            lineStrokeDash: undefined,
+            lineStrokeDashOffset: 0,
+            lineStrokeMiterLimit: 10
+        },
+        polygon: {
+            // for stroke
+            polygonStrokeColor: defaultColors.stroke,
+            polygonStrokeWidth: 1,
+            polygonStrokeCap: "round",
+            polygonStrokeJoin: "round",
+            polygonStrokeDash: undefined,
+            polygonStrokeDashOffset: 0,
+            polygonStrokeMiterLimit: 10,
+            // for fill
+            polygonFillColor: defaultColors.fill,
+            polygonFillHatch: undefined
+        },
+        text: {
+            textAlign: "center",
+            textFont: "Comic Sans MS",
+            textScale: 2,
+            textOffsetX: 10,
+            textOffsetY: -8,
+            textFillColor: defaultColors.textFill,
+            textStrokeColor: defaultColors.textStroke,
+            textStrokeWidth: 3,
+            labelField: "",
+            textSuffix: "",
+            rotation: 0,
+            clusterTextType: "counter",
+            clusterText: "",
+            clusterTextAlign: "center",
+            clusterTextFont: "Comic Sans MS",
+            clusterTextScale: 2,
+            clusterTextOffsetX: 0,
+            clusterTextOffsetY: 2,
+            clusterTextFillColor: defaultColors.textFill,
+            clusterTextStrokeColor: defaultColors.textStroke,
+            clusterTextStrokeWidth: 0
+        },
+        defaultMapMarkerPoint: {
+            styleId: "defaultMapMarkerPoint",
+            rules: [{
+                style:
+                {
+                    type: "icon",
+                    imageName: `<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#E10019' class='bi bi-geo-alt-fill' viewBox='0 0 16 16'>
+                    <path d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/>
+                    </svg>`,
+                    imagePath: "",
+                    imageScale: 2,
+                    imageOffsetY: 16,
+                    imageOffsetYUnit: "pixels"
+                }
+            }]
+        },
+        defaultMapMarkerPolygon: {
+            styleId: "defaultMapMarkerPolygon",
+            rules: [{
+                style:
+                {
+                    polygonStrokeColor: [8, 119, 95, 1],
+                    polygonStrokeWidth: 4,
+                    polygonFillColor: [8, 119, 95, 0.3],
+                    polygonStrokeDash: [8]
+                }
+            }]
+        },
+        defaultHighlightFeaturesPoint: {
+            styleId: "defaultHighlightFeaturesPoint",
+            rules: [{
+                style:
+                {
+                    type: "circle",
+                    circleFillColor: [255, 255, 0, 0.9],
+                    circleRadius: 8
+                }
+            }]
+        },
+        defaultHighlightFeaturesPolygon: {
+            styleId: "defaultHighlightFeaturesPolygon",
+            rules: [{
+                style:
+                {
+                    polygonStrokeColor: [8, 119, 95, 1],
+                    polygonStrokeWidth: 4,
+                    polygonFillColor: [8, 119, 95, 0.3],
+                    polygonStrokeDash: [8]
+                }
+            }]
+        },
+        defaultHighlightFeaturesLine: {
+            styleId: "defaultHighlightFeaturesLine",
+            rules: [{
+                style:
+            {
+                polygonStrokeColor: [8, 119, 95, 1],
+                polygonStrokeWidth: 4,
+                polygonFillColor: [8, 119, 95, 0.3],
+                polygonStrokeDash: [8]
+            }
+            }]
+        }
+    };
+
+export default defaultStyle;