@masterportal/masterportalapi 2.20.0 → 2.22.0

package/CHANGELOG.md

@@ -3,7 +3,39 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
-## ## 2.20.0 - 2023-06-30
+## Unreleased - in development
+### Added
+
+### Changed
+
+### Deprecated
+
+### Removed
+
+### Fixed
+
+
+---
+## 2.22.0 - 2023-07-25
+### Added
+- VectorStyle: Add Styling rules for Geoemtries of type `Circle`.
+- Add Styling and zIndex to draw interactions and improve the draw behavior.
+
+### Changed
+- Changed peerDependency from cesium 1.106.0 to @cesium/engine 2.4.1.
+- WFS: 
+    - Migrated writeTransaction and sendTransaction from masterportal the masterportalAPI.
+    - Exports in src/layer/wfs.js changed to export default {} to provide  ES-Syntax.
+### Deprecated
+
+### Removed
+
+### Fixed
+- WFS: fixed a bug that prevented parsing GeoServer responses.
+
+---
+
+## 2.20.0 - 2023-06-30
 ### Added
 - Add draw interaction for interactive and static geometry types.
 - WFS: Added function to load wfs features manually.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.20.0",
+  "version": "2.22.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -38,6 +38,7 @@
     "jest": "^29.5.0",
     "jest-canvas-mock": "^2.5.0",
     "jest-environment-jsdom": "^29.5.0",
+    "jest-fetch-mock": "^3.0.3",
     "jsdoc": "^4.0.2",
     "parcel": "^2.8.3",
     "process": "^0.11.10",
@@ -47,7 +48,7 @@
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
-    "cesium": "^1.106.0"
+    "@cesium/engine": "^2.4.1"
   },
   "engines": {
     "node": "^16.13.2 || ^18.12.0",

package/src/index.js

@@ -4,7 +4,7 @@ import drawInteractions from "./maps/interactions/drawInteractions";
 import rawLayerList from "./rawLayerList";
 import * as wms from "./layer/wms";
 import wmts from "./layer/wmts";
-import * as wfs from "./layer/wfs";
+import wfs from "./layer/wfs";
 import * as geojson from "./layer/geojson";
 import * as vectorBase from "./layer/vectorBase";
 import * as vectorTile from "./layer/vectorTile";

package/src/layer/wfs.js

@@ -154,7 +154,7 @@ function createUrl (rawLayer, version, projection, bboxParam) {
  * {@link https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html failure/success see}
  * @returns {(ol.source.VectorSource|ol.source.Cluster)} VectorSource or Cluster, depending on whether clusterDistance is set.
  */
-export function createLayerSource (rawLayer, options = {}) {
+function createLayerSource (rawLayer, options = {}) {
     if (!options.loadingStrategy) {
         options.loadingStrategy = bbox;
     }
@@ -175,10 +175,15 @@ export function createLayerSource (rawLayer, options = {}) {
         }
         else {
             const bboxParam = options.loadingStrategy === bbox ? `&bbox=${extent.join(",")},${projection.getCode()}` : "";
-            let url = createUrl(rawLayer, version, projection, bboxParam);
+            let url = createUrl(rawLayer, version, projection, bboxParam),
+                params = {};
 
             if (options.loadingParams) {
                 for (const key in options.loadingParams) {
+                    if (key === "xhrParameters") {
+                        params = options.loadingParams.xhrParameters;
+                        continue;
+                    }
                     const option = Array.isArray(options.loadingParams[key]) ? options.loadingParams[key].join(",") : options.loadingParams[key];
 
                     if (option !== undefined && key === "bbox") {
@@ -189,7 +194,7 @@ export function createLayerSource (rawLayer, options = {}) {
                     }
                 }
             }
-            loadWFS(url, {}, source, {onErrorFn: onError, success, failure}, options);
+            loadWFS(url, params, source, {onErrorFn: onError, success, failure}, options);
         }
     }
     format.featureType = rawLayer.featureType;
@@ -202,9 +207,16 @@ export function createLayerSource (rawLayer, options = {}) {
         return createClusterVectorSource(source, rawLayer.clusterDistance, options.clusterGeometryFunction);
     }
     if (rawLayer.renderer === "webgl") {
-        source.once("featuresloadend", event => {
-            webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
-        });
+        if (options.loadingStrategy === bbox) {
+            source.on("featuresloadend", event => {
+                webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
+            });
+        }
+        else {
+            source.once("featuresloadend", event => {
+                webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
+            });
+        }
     }
     return source;
 }
@@ -217,7 +229,7 @@ export function createLayerSource (rawLayer, options = {}) {
  * @param {options} [optionalParams.options] - additional options
  * @returns {ol.Layer} Layer that can be added to map.
  */
-export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {}) {
+function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {}) {
     let layer, source;
 
     // use WebGL render pipeline, if specified
@@ -253,13 +265,227 @@ export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {
     return layer;
 }
 
+/**
+ * Writes a wfs transaction including the given feature for given layer
+ * inserting, updated or deleting the feature depending on the given selectedInteraction.
+ *
+ * @param {ol/Feature} feature Feature to be inserted, updated or deleted.
+ * @param {Object} transactionOptions Information about the layer to be manipulated.
+ * @param {string} transactionMethod Which transaction to perform. Possible values are: "insert"|"delete"|"selectedUpdate"
+ * @param {string} srsName EPSG code currently used by the map.
+ * @returns {string} WFS Transaction as an XML Node as String.
+ */
+
+function writeTransactionBody (feature, transactionOptions, transactionMethod, version = "1.1.0") {
+    const transactionPosition = {
+            insert: 0,
+            selectedUpdate: 1,
+            delete: 2
+        },
+        transaction = [[], [], []];
+
+    if (transactionMethod !== "insert" && transactionMethod !== "delete" && transactionMethod !== "selectedUpdate") {
+        throw new Error("transactionMethod has to be \"insert\", \"selectedUpdate\" or \"delete\".");
+    }
+
+    transaction[transactionPosition[transactionMethod]].push(feature);
+    return new XMLSerializer()
+        .serializeToString(new WFS({version})
+            .writeTransaction(...transaction, transactionOptions));
+}
+
+/**
+ * Checks if it is an unknown or special error and returns the code and the error message
+ *
+ * @param {Object} xmlDocument with the error
+ * @returns {Object} the code and the specific or unknown error looking like this {code, message}
+ */
+function getExceptionFromTransactionResponse (xmlDocument) {
+    const response = {code: null, message: "genericFailedTransaction"},
+        exception = xmlDocument.getElementsByTagName(`${xmlDocument.getElementsByTagName("Exception").length === 0 ? "ows:" : ""}Exception`)[0],
+        exceptionText = exception.getElementsByTagName(`${xmlDocument.getElementsByTagName("ExceptionText").length === 0 ? "ows:" : ""}ExceptionText`)[0];
+
+    if (exceptionText !== undefined) {
+        response.message = exceptionText.textContent;
+        console.error("WfsTransaction: An error occurred when sending the transaction to the service.", exceptionText.textContent);
+    }
+    else {
+        response.message = "WfsTransaction: An unkown error occurred when sending the transaction to the service.";
+        console.error(response.message);
+    }
+    if (exception?.attributes.getNamedItem("code") || exception?.attributes.getNamedItem("exceptionCode")) {
+        response.code = exception.attributes.getNamedItem(`${exception?.attributes.getNamedItem("code") ? "c" : "exceptionC"}ode`).textContent;
+    }
+
+    return response;
+}
+
+
+/**
+ * Sends a transaction to the service and returns the feature.
+ *
+ * @param {string} srsName of the coordinate reference system
+ * @param {ol/Feature} feature Feature to by inserted / updated / deleted.
+ * @param {string} url of the wfs-t service
+ * @param {Object} layer the configured representation of the layer in the Masterportal
+ * @param {string} transactionMethod which transaction to perform. Possible values are: "insert"|"delete"|"selectedUpdate"
+ * @returns {ol/Feature} the given feature
+ * @throws {Error} error if occurs
+ */
+async function sendTransaction (srsName, feature, url, layer, transactionMethod) {
+    let exception,
+        response,
+        xmlDocument = null,
+        transactionSummary = null,
+        data = null;
+
+    const {featureNS, featurePrefix, featureType, version} = layer;
+
+    try {
+        response = await fetch(url, {
+            method: "POST",
+            headers: {"Content-Type": "text/xml"},
+            credentials: layer.isSecured ? "include" : "omit",
+            body: writeTransactionBody(feature,
+                {featureNS, featurePrefix, featureType, version, srsName},
+                transactionMethod,
+                version),
+            responseType: "text"
+        });
+
+        data = await response.text();
+
+        xmlDocument = new DOMParser().parseFromString(data, "text/xml");
+        transactionSummary = xmlDocument.getElementsByTagName("wfs:TransactionSummary");
+
+        // NOTE: WFS-T services respond errors with the transaction as an XML response, even though it's the http code indicates different...
+        if (transactionSummary.length === 0) {
+            exception = getExceptionFromTransactionResponse(xmlDocument);
+            throw new Error(exception.code ? exception.code + ": " + exception.message : exception.message);
+        }
+    }
+    catch (e) {
+        console.error(e);
+        throw e;
+    }
+
+    return feature;
+}
+
+/**
+ * Parses the response of a DescribeFeatureType request
+ * and prepares its values for later use as an input value for the user.
+ *
+ * @param {string} responseData XML response data
+ * @param {string} featureType Name of the feature type of the service.
+ * @returns {Array} If an <element> with a name of the featureType is present, an array of prepared feature properties; else an empty Array.
+ */
+function parseDescribeFeatureTypeResponse (responseData, featureType) {
+
+    const parsedResponse = new DOMParser().parseFromString(responseData, "application/xml");
+
+    let prefix = "",
+        foundElement = null;
+
+    if (parsedResponse.getElementsByTagName("xsd:element").length > 0) {
+        prefix = "xsd:";
+    }
+    else if (parsedResponse.getElementsByTagName("xs:element").length > 0) {
+        prefix = "xs";
+    }
+
+    // Check if featureType applies to the response
+    foundElement = Object.values(parsedResponse.getElementsByTagName(prefix + "element")).find(element => element.getAttribute("name") === featureType);
+
+    if (foundElement) {
+        let sequenceElements;
+
+        if (foundElement.hasChildNodes()) {
+            sequenceElements = Object.values(foundElement.getElementsByTagName(prefix + "sequence"));
+        }
+        else {
+            sequenceElements = Object.values(parsedResponse.getElementsByTagName(prefix + "sequence"));
+        }
+
+        const elements = [];
+
+        sequenceElements.forEach(sequenceElement => {
+            elements.push(...Object.values(sequenceElement.getElementsByTagName(prefix + "element")));
+        });
+
+        return elements.map(el => Object.values(el.attributes).reduce((obj, att) => {
+            if (att.localName === "minOccurs") {
+                obj.required = att.value === "1";
+            }
+            else if (att.localName === "type") {
+                if (att.value.trim().startsWith("gml")) {
+                    obj.type = "geometry";
+                }
+                else {
+                    let value = att.value;
+
+                    if (prefix.length > 0) {
+                        value = value.replace(prefix, "");
+                    }
+
+                    switch (value) {
+                        case "long":
+                            obj.type = "integer";
+                            break;
+                        default:
+                            obj.type = value;
+                    }
+                }
+            }
+            else if (att.localName === "name") {
+                obj.label = obj.key = att.value;
+            }
+            return obj;
+        }, {
+            label: "",
+            key: "",
+            value: null,
+            type: "string",
+            required: false
+        }));
+    }
+    return [];
+}
+
+/**
+ * Requests the possible properties of a feature and further values;
+ * for more {@see FeatureProperty}.
+ *
+ * @param {string} url from the WFS-T
+ * @param {string} version of the WFS-T
+ * @param {string} featureType Name of the FeatureType according to the capabilities document
+ * @param {boolean} isSecured Whether the layer is secured by BasicAuth and should include or omit the credentials prompt
+ * @returns {Promise<Array>} If the request is successful, an array of prepared feature properties.
+ */
+async function receivePossibleProperties (url, version, featureType, isSecured) {
+    const baseUrl = `${url}?SERVICE=WFS&REQUEST=DescribeFeatureType&VERSION=${version}&TYPENAME=${featureType}`;
+    let response;
+
+    try {
+        response = await fetch(baseUrl, {
+            responseType: "text/xml",
+            credentials: isSecured ? "include" : "omit"
+        });
+        return parseDescribeFeatureTypeResponse(await response.text(), featureType);
+    }
+    catch (e) {
+        console.error(e);
+        throw e;
+    }
+}
+
 /**
  * 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) {
+function loadFeaturesManually (layerAttributes, layerSource) {
     const getUrl = createUrl(layerAttributes, layerAttributes.version, {getCode: () => layerAttributes.crs}, "");
 
     fetch(getUrl, layerSource)
@@ -271,3 +497,5 @@ export function loadFeaturesManually (layerAttributes, layerSource) {
             console.error(error);
         });
 }
+
+export default {createLayerSource, createLayer, sendTransaction, receivePossibleProperties, parseDescribeFeatureTypeResponse, writeTransactionBody, loadFeaturesManually};

package/src/maps/interactions/drawInteractions.js

@@ -1,6 +1,8 @@
 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 = {
@@ -32,6 +34,9 @@ const earthRadius = 6378137,
             type: "Polygon"
         }
     };
+let styleObject = null,
+    styleObjectOuterCircle = null,
+    zIndex = 0;
 
 /**
  * Transform the radius to map projection unit.
@@ -55,21 +60,44 @@ function transformMapUnitRadius (radius, mapProjection) {
 
 /**
  * Create a feature for the outer circle of draw type: double circle.
- * @param {ol/interaction/Draw} drawInteraction The draw interaction.
+ * @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.circleOuterRadius] The radius for the outer circle.
+ * @param {Number} [options.innerRadius] The radius for the inner circle.
+ * @param {Number} [options.outerRadius] 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);
+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);
 
-        outerCircleFeature.getGeometry().setRadius(mapUnitOuterRadius);
-        source.addFeature(outerCircleFeature);
-    });
+    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);
 }
 
 /**
@@ -79,26 +107,74 @@ function drawOuterCircle (drawInteraction, mapProjection, source, options = {})
  * @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.
+ * @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 (options.interactiveCircle === false && options.circleInnerRadius > 0) {
+    if ((drawType === "doubleCircle" || options.interactive === false) && options.innerRadius > 0) {
         drawInteraction.on("drawstart", event => {
-            const mapUnitInnerRadius = transformMapUnitRadius(options.circleInnerRadius, mapProjection);
-
-            event.feature.getGeometry().setRadius(mapUnitInnerRadius);
+            if (drawType === "circle") {
+                drawInnerCircle(event.feature, mapProjection, options);
+            }
+            else if (drawType === "doubleCircle" && options.outerRadius > 0) {
+                drawOuterCircle(event.feature, mapProjection, source, options);
+            }
             drawInteraction.finishDrawing();
         });
+    }
+}
 
-        if (drawType === "doubleCircle" && options.circleOuterRadius > 0) {
-            drawOuterCircle(drawInteraction, mapProjection, source, options);
-        }
+/**
+ * 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.
@@ -112,19 +188,27 @@ function createDrawInteraction (drawType, source) {
         const options = mappingDrawTypes[drawType].options || {};
 
         drawInteraction = new Draw({
-            source: source,
-            type: mappingDrawTypes[drawType].type,
             freehand: options.freehand,
-            geometryFunction: options.geometryFunction
+            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

@@ -6,7 +6,7 @@ import defaults from "../../defaults";
 import * as wms from "../../layer/wms";
 import wmts from "../../layer/wmts";
 import * as geojson from "../../layer/geojson";
-import * as wfs from "../../layer/wfs";
+import wfs from "../../layer/wfs";
 import * as vectorBase from "../../layer/vectorBase";
 import * as vectortile from "../../layer/vectorTile";
 import * as oaf from "../../layer/oaf";

package/src/renderer/webgl.js

@@ -21,15 +21,13 @@ const defaultStyle = {
         }
     },
 
-    /** @type {import('../src/ol/style/literal.js').LiteralStyle} */
+    /** @type {import('ol/style/literal.js').LiteralStyle} */
     style = {
         "stroke-color": ["get", "STROKECOLOR"],
-        // NOTICE: does not work with ol 7.4.0, throws errors -> use 1 pixel width
-        // "stroke-width": ["get", "STROKEWIDTH"],
-        "stroke-width": 1,
+        "stroke-width": ["get", "STROKEWIDTH", "number"],
         "fill-color": ["get", "FILLCOLOR"],
-        "opacity": ["get", "OPACITY"],
-        "size": ["get", "CIRCLESIZE"]
+        "opacity": ["get", "OPACITY", "number"],
+        "size": ["get", "CIRCLESIZE", "number"]
     };
 
 /**
@@ -82,18 +80,17 @@ export function formatFeatureStyles (feature, styleObject) {
     feature.styleRule = rule;
 
     if (rule && rule.style) {
-        // TODO set style on properties will be visible in GFI
         const polygonFillColor = returnColor(rule.style.polygonFillColor, "hex"),
             circleFillColor = returnColor(rule.style.circleFillColor, "hex"),
             fillColor = polygonFillColor ? polygonFillColor : circleFillColor,
-            polygonStrokeColor = returnColor(rule.style.polygonStrokeColor, "hex"),
-            polygonStrokeWidth = rule.style.polygonStrokeWidth,
+            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", polygonStrokeColor ? polygonStrokeColor : "#006688");
-        feature.set("STROKEWIDTH", polygonStrokeWidth ? polygonStrokeWidth : 1);
-        feature.set("OPACITY", polygonFillColor ? polygonFillColor[3] : 1);
+        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,6 +3,7 @@ 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";
 
@@ -60,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();
     }