@masterportal/masterportalapi 2.12.0 → 2.14.0

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

@@ -0,0 +1,108 @@
+import StyleClass from "../style";
+import {createIconStyle} from "./stylePointIcon";
+import {createCircleStyle} from "./stylePointCircle";
+import {createRegularShapeStyle} from "./stylePointRegularShape";
+import {createIntervalPointStyle} from "./stylePointInterval";
+import {createNominalPointStyle} from "./stylePointNominal";
+import {Style} from "ol/style.js";
+import defaultStyle from "../defaultStyles";
+
+class PointStyle extends StyleClass {
+    /**
+     * @description Class to create ol.style.Style
+     * @constructor
+     * @class PointStyle
+     * @extends StyleClass
+     * @memberof VectorStyle.Style
+     */
+    constructor () {
+        super();
+        this.attributes = {...defaultStyle.point};
+    }
+
+    /**
+     * 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.
+     * @param {Boolean} wfsImgPathFromConfig image Path of the wfs.
+     * @returns {void}
+     */
+    initialize (feature, styles, isClustered, wfsImgPathFromConfig) {
+        if (wfsImgPathFromConfig !== undefined) {
+            this.setImagePath(wfsImgPathFromConfig);
+        }
+        else {
+            console.warn("wfsImgPath at Config.js is not defined");
+        }
+        this.setFeature(feature);
+        this.setIsClustered(isClustered);
+        this.overwriteStyling(styles);
+        this.setStyle(this.getStyle());
+    }
+
+    /**
+     * This function returns a style for each feature.
+     * @returns {ol/style} - The created style.
+     */
+    getStyle () {
+        const type = this.attributes.type.toLowerCase(),
+            isClustered = this.isClustered;
+
+        if (type === "icon") {
+            return createIconStyle(this.attributes, this.feature, isClustered);
+        }
+        else if (type === "circle") {
+            return createCircleStyle(this.attributes, isClustered);
+        }
+        else if (type === "nominal") {
+            return isClustered ? createIconStyle(this.attributes, this.feature, isClustered) : createNominalPointStyle(this.attributes, this.feature, defaultStyle.point.imageName);
+        }
+        else if (type === "interval") {
+            return createIntervalPointStyle(this.feature, this.attributes);
+        }
+        else if (type === "regularshape") {
+            return createRegularShapeStyle(this.attributes);
+        }
+
+        return new Style();
+    }
+
+    /**
+     * Setter for circleSegmentsBackgroundColor
+     * @param {Number[]} value Color
+     * @returns {void}
+     */
+    setCircleSegmentsBackgroundColor (value) {
+        this.attributes.circleSegmentsBackgroundColor = value;
+    }
+
+    /**
+     * Setter for size.
+     * @param {*} value Size
+     * @returns {void}
+     */
+    setSize (value) {
+        this.size = value;
+    }
+
+    /**
+     * Getter for size.
+     * @param {*} size Size
+     * @returns {void}
+     */
+    getSize () {
+        return this.size;
+    }
+
+    /**
+     * Setter for imagePath.
+     * @param {String} value Image path.
+     * @returns {void}
+     */
+    setImagePath (value) {
+        this.attributes.imagePath = value;
+    }
+}
+
+export default PointStyle;

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

@@ -0,0 +1,29 @@
+import {Circle as CircleStyle, Fill, Stroke, Style} from "ol/style.js";
+import {returnColor} from "../../lib/colorConvertions";
+
+/**
+* Creates pointStyle as circle.
+* all features get same circle.
+* @param {Object} attributes - The attributes from the circle
+* @param {Boolean} isClustered - true if features are clustered
+* @returns {ol/style} - The created style.
+*/
+export function createCircleStyle (attributes, isClustered) {
+    const radius = isClustered ? parseFloat(attributes.clusterCircleRadius, 10) : parseFloat(attributes.circleRadius, 10),
+        fillcolor = isClustered ? returnColor(attributes.clusterCircleFillColor, "rgb") : returnColor(attributes.circleFillColor, "rgb"),
+        strokecolor = isClustered ? returnColor(attributes.clusterCircleStrokeColor, "rgb") : returnColor(attributes.circleStrokeColor, "rgb"),
+        strokewidth = isClustered ? parseFloat(attributes.clusterCircleStrokeWidth, 10) : parseFloat(attributes.circleStrokeWidth, 10);
+
+    return new Style({
+        image: new CircleStyle({
+            radius: radius,
+            fill: new Fill({
+                color: fillcolor
+            }),
+            stroke: new Stroke({
+                color: strokecolor,
+                width: strokewidth
+            })
+        })
+    });
+}

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

@@ -0,0 +1,79 @@
+import {Style, Icon} from "ol/style.js";
+import {prepareValue, isObjectPath} from "../../../lib/attributeMapper";
+import PointStyle from "./stylePoint";
+
+/**
+* Returns the rotation value and its corresponding value according to style.json.
+* @param {Object} rotation - The rotation object from the style.json
+* @param {Object} featureValues - The values object from the feature
+* @returns {number} - The rotation value in degrees or radiants.
+*/
+export function getRotationValue (rotation, featureValues) {
+    if (typeof rotation === "object") {
+        const {value, isDegree} = rotation;
+
+        if (isObjectPath(value) && featureValues !== undefined) {
+            const rotationValueFromService = parseInt(prepareValue(featureValues, value), 10);
+
+            return isDegree ? rotationValueFromService * Math.PI / 180 : rotationValueFromService;
+        }
+        return isDegree ? parseInt(value, 10) * Math.PI / 180 : parseInt(value, 10);
+    }
+    return 0;
+}
+
+/**
+* Creates pointStyle as icon.
+* All features get same image.
+* @see {@link https://community.cesium.com/t/cors-and-billboard-image/3920/2} crossOrigin: "anonymous", is necessary for the 3D mode.
+* @param {Object} attributes - The attributes from the icon
+* @param {Object} feature - The feature
+* @param {Boolean} isClustered - true if features are clustered
+* @returns {ol/style} - The created style.
+*/
+export function createIconStyle (attributes, feature, isClustered) {
+    const showCluster = isClustered && feature.get("features")?.length > 1,
+
+        height = showCluster ? attributes.clusterImageHeight : attributes.imageHeight,
+        imageName = showCluster ? attributes.clusterImageName : attributes.imageName,
+        imageOffsetX = showCluster ? attributes.clusterImageOffsetY : attributes.imageOffsetX,
+        imageOffsetY = showCluster ? attributes.clusterImageOffsetX : attributes.imageOffsetY,
+        scale = showCluster ? attributes.clusterImageScale : attributes.imageScale,
+        src = imageName.indexOf("/") === -1 ? attributes.imagePath + imageName : imageName,
+        width = showCluster ? attributes.clusterImageWidth : attributes.imageWidth,
+        iconOptions = {
+            crossOrigin: "anonymous",
+            src: src.startsWith("<svg") ? "data:image/svg+xml;charset=utf-8," + encodeURIComponent(src) : src,
+            scale,
+            anchor: [parseFloat(imageOffsetX), parseFloat(imageOffsetY)],
+            imgSize: src.indexOf(".svg") > -1 ? [width, height] : ""
+        };
+
+    if (!showCluster) {
+        iconOptions.anchorXUnits = attributes.imageOffsetXUnit;
+        iconOptions.anchorYUnits = attributes.imageOffsetYUnit;
+        iconOptions.rotation = getRotationValue(attributes.rotation, feature.getProperties());
+    }
+
+    return new Style({
+        image: new Icon(iconOptions)
+    });
+}
+
+/**
+ * create Style for SVG
+ * @param  {String} svgPath - contains the params to be draw
+ * @see {@link https://community.cesium.com/t/cors-and-billboard-image/3920/2} crossOrigin: "anonymous", is necessary for the 3D mode.
+ * @return {ol.Style} style
+ */
+export function createSVGStyle (svgPath) {
+    const size = PointStyle.prototype.getSize();
+
+    return new Style({
+        image: new Icon({
+            crossOrigin: "anonymous",
+            src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgPath),
+            imgSize: [size, size]
+        })
+    });
+}

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

@@ -0,0 +1,124 @@
+import {createSVGStyle} from "./stylePointIcon";
+import PointStyle from "./stylePoint";
+import {returnColor} from "../../lib/colorConvertions";
+
+/**
+ * Calculate size for intervalscaled circle bar
+ * @param  {number} stateValue - value from feature
+ * @param  {number} circleBarScalingFactor - factor is multiplied by the stateValue
+ * @param  {number} circleBarLineStroke - stroke from bar
+ * @param  {number} circleBarRadius - radius from point
+ * @return {number} size - size of the section to be drawn
+ */
+export function calculateSizeIntervalCircleBar (stateValue, circleBarScalingFactor, circleBarLineStroke, circleBarRadius) {
+    let size = circleBarRadius * 2;
+
+    if (((stateValue * circleBarScalingFactor) + circleBarLineStroke) >= size) {
+        size = size + (stateValue * circleBarScalingFactor) + circleBarLineStroke;
+    }
+
+    return size;
+}
+
+/**
+ * Calculate the length for the bar
+ * @param  {number} size - size of the section to be drawn
+ * @param  {number} circleBarRadius - radius from point
+ * @param  {number} stateValue - value from feature
+ * @param  {number} circleBarScalingFactor - factor is multiplied by the stateValue
+ * @return {number} barLength
+ */
+export function calculateLengthIntervalCircleBar (size, circleBarRadius, stateValue, circleBarScalingFactor) {
+    let barLength;
+
+    if (stateValue >= 0) {
+        barLength = (size / 2) - circleBarRadius - (stateValue * circleBarScalingFactor);
+    }
+    else if (stateValue < 0) {
+        barLength = (size / 2) + circleBarRadius - (stateValue * circleBarScalingFactor);
+    }
+    else {
+        barLength = 0;
+    }
+
+    return barLength;
+}
+
+/**
+ * Create SVG for intervalscaled circle bars
+ * @param  {number} size - size of the section to be drawn
+ * @param  {number} barLength - length from bar
+ * @param  {String} circleBarCircleFillColor - fill color from circle
+ * @param  {String} circleBarCircleStrokeColor - stroke color from circle
+ * @param  {number} circleBarCircleStrokeWidth - stroke width from circle
+ * @param  {String} circleBarLineStrokeColor - stroke color from bar
+ * @param  {number} circleBarLineStroke - stroke from bar
+ * @param  {number} circleBarRadius - radius from point
+ * @return {String} svg
+ */
+// eslint-disable-next-line max-params
+export function createSvgIntervalCircleBar (size, barLength, circleBarCircleFillColor, circleBarCircleStrokeColor, circleBarCircleStrokeWidth, circleBarLineStrokeColor, circleBarLineStroke, circleBarRadius) {
+    let svg = "<svg width='" + size + "'" +
+                " height='" + size + "'" +
+                " xmlns='http://www.w3.org/2000/svg'" +
+                " xmlns:xlink='http://www.w3.org/1999/xlink'>";
+
+    // draw bar
+    svg = svg + "<line x1='" + (size / 2) + "'" +
+            " y1='" + (size / 2) + "'" +
+            " x2='" + (size / 2) + "'" +
+            " y2='" + barLength + "'" +
+            " stroke='" + circleBarLineStrokeColor + "'" +
+            " stroke-width='" + circleBarLineStroke + "' />";
+
+    // draw circle
+    svg = svg + "<circle cx='" + (size / 2) + "'" +
+            " cy='" + (size / 2) + "'" +
+            " r='" + circleBarRadius + "'" +
+            " stroke='" + circleBarCircleStrokeColor + "'" +
+            " stroke-width='" + circleBarCircleStrokeWidth + "'" +
+            " fill='" + circleBarCircleFillColor + "' />";
+    svg = svg + "</svg>";
+
+    return svg;
+}
+
+/**
+ * Create interval circle bar
+ * @param  {ol.Feature} feature - contains features to draw
+ * @param  {ol.Feature} attributes - The attributes of the feature
+ * @return {String} svg
+ */
+export function createIntervalCircleBar (feature, attributes) {
+    const circleBarScalingFactor = parseFloat(attributes.circleBarScalingFactor),
+        circleBarRadius = parseFloat(attributes.circleBarRadius, 10),
+        circleBarLineStroke = parseFloat(attributes.circleBarLineStroke, 10),
+        circleBarCircleFillColor = returnColor(attributes.circleBarCircleFillColor, "hex"),
+        circleBarCircleStrokeColor = returnColor(attributes.circleBarCircleStrokeColor, "hex"),
+        circleBarCircleStrokeWidth = attributes.circleBarCircleStrokeWidth,
+        circleBarLineStrokeColor = returnColor(attributes.circleBarLineStrokeColor, "hex"),
+        featureProperties = feature.getProperties(),
+        preparedField = PointStyle.prototype.prepareField(featureProperties, attributes.scalingAttribute),
+        scalingAttribute = preparedField === "undefined" ? undefined : preparedField,
+        stateValue = scalingAttribute !== undefined && scalingAttribute.indexOf(" ") !== -1 ? scalingAttribute.split(" ")[0] : scalingAttribute,
+        size = calculateSizeIntervalCircleBar(stateValue, circleBarScalingFactor, circleBarLineStroke, circleBarRadius),
+        barLength = calculateLengthIntervalCircleBar(size, circleBarRadius, stateValue, circleBarScalingFactor);
+
+    PointStyle.prototype.setSize(size);
+
+    // create svg
+    return createSvgIntervalCircleBar(size, barLength, circleBarCircleFillColor, circleBarCircleStrokeColor, circleBarCircleStrokeWidth, circleBarLineStrokeColor, circleBarLineStroke, circleBarRadius);
+}
+
+/**
+ * create interval scaled advanced style for pointFeatures
+ * @param  {ol.Feature} feature - The feature
+ * @param  {ol.Feature} attributes - The attributes of the feature
+ * @return {ol.Style} style
+ */
+export function createIntervalPointStyle (feature, attributes) {
+    const styleScalingShape = attributes.scalingShape.toUpperCase(),
+        svgPath = styleScalingShape === "CIRCLE_BAR" ? createIntervalCircleBar(feature, attributes) : "";
+
+    return createSVGStyle(svgPath);
+}

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

@@ -0,0 +1,232 @@
+import {createIconStyle, createSVGStyle} from "./stylePointIcon";
+import PointStyle from "./stylePoint";
+import {returnColor} from "../../lib/colorConvertions";
+
+/**
+ * Create SVG for nominalscaled circle segments
+ * @param  {number} size - size of the section to be drawn
+ * @param  {number} circleSegmentsRadius - radius from circlesegment
+ * @param  {String} circleSegmentsBackgroundColor - backgroundcolor from circlesegment
+ * @param  {number} circleSegmentsStrokeWidth - strokewidth from circlesegment
+ * @param  {String} circleSegmentsFillOpacity - opacity from circlesegment
+ * @return {String} svg
+ */
+export function createSvgNominalCircleSegments (size, circleSegmentsRadius, circleSegmentsBackgroundColor, circleSegmentsStrokeWidth, circleSegmentsFillOpacity) {
+    const halfSize = size / 2;
+    let svg = "<svg width='" + size + "'" +
+            " height='" + size + "'" +
+            " xmlns='http://www.w3.org/2000/svg'" +
+            " xmlns:xlink='http://www.w3.org/1999/xlink'>";
+
+    svg = svg + "<circle cx='" + halfSize + "'" +
+        " cy='" + halfSize + "'" +
+        " r='" + circleSegmentsRadius + "'" +
+        " stroke='" + circleSegmentsBackgroundColor + "'" +
+        " stroke-width='" + circleSegmentsStrokeWidth + "'" +
+        " fill='" + circleSegmentsBackgroundColor + "'" +
+        " fill-opacity='" + circleSegmentsFillOpacity + "'/>";
+
+    return svg;
+}
+
+/**
+ * Fills the object with values
+ * @param {object} scalingAttributesAsObject - object with possible attributes as keys and values = 0
+ * @param {string} scalingAttribute - actual states from feature
+ * @return {Object} scalingObject - contains the states
+ */
+export function fillScalingAttributes (scalingAttributesAsObject, scalingAttribute) {
+    const scalingObject = scalingAttributesAsObject === undefined || Object.keys(scalingAttributesAsObject).length === 0
+        ? {empty: 0} : scalingAttributesAsObject;
+    let states = scalingAttribute;
+
+    if (states === undefined) {
+        return scalingObject;
+    }
+
+    states = states.split(" | ");
+
+    states.forEach(function (state) {
+        if (Object.prototype.hasOwnProperty.call(scalingObject, state)) {
+            scalingObject[state] = scalingObject[state] + 1;
+        }
+        else {
+            scalingObject.empty = scalingObject.empty + 1;
+        }
+    });
+
+    return scalingObject;
+}
+
+/**
+ * Convert scalingAttributes to object
+ * @param {object} scalingValues - contains attribute with color
+ * @return {object} scalingAttribute with value 0
+ */
+export function getScalingAttributesAsObject (scalingValues) {
+    const obj = {};
+    let key;
+
+    if (scalingValues !== undefined) {
+        for (key in scalingValues) {
+            obj[key] = 0;
+        }
+    }
+
+    obj.empty = 0;
+
+    return obj;
+}
+
+/**
+ * Create circle segments
+ * @param  {number} startAngelDegree - start with circle segment
+ * @param  {number} endAngelDegree - finish with circle segment
+ * @param  {number} circleRadius - radius from circle
+ * @param  {number} size - size of the window to be draw
+ * @param  {number} gap - gap between segments
+ * @return {String} all circle segments
+ */
+export function calculateCircleSegment (startAngelDegree, endAngelDegree, circleRadius, size, gap) {
+    const rad = Math.PI / 180,
+        xy = size / 2,
+        isCircle = startAngelDegree === 0 && endAngelDegree === 360,
+        endAngelDegreeActual = isCircle ? endAngelDegree / 2 : endAngelDegree,
+        gapActual = isCircle ? 0 : gap,
+        // convert angle from degree to radiant
+        startAngleRad = (startAngelDegree + (gapActual / 2)) * rad,
+        endAngleRad = (endAngelDegreeActual - (gapActual / 2)) * rad,
+        xStart = xy + (Math.cos(startAngleRad) * circleRadius),
+        yStart = xy - (Math.sin(startAngleRad) * circleRadius),
+        xEnd = xy + (Math.cos(endAngleRad) * circleRadius),
+        yEnd = xy - (Math.sin(endAngleRad) * circleRadius);
+
+    if (isCircle) {
+        return [
+            "M", xStart, yStart,
+            "A", circleRadius, circleRadius, 0, 0, 0, xEnd, yEnd,
+            "A", circleRadius, circleRadius, 0, 0, 0, xStart, yStart
+        ].join(" ");
+    }
+
+    return [
+        "M", xStart, yStart,
+        "A", circleRadius, circleRadius, 0, 0, 0, xEnd, yEnd
+    ].join(" ");
+}
+
+/**
+ * Extends the SVG with given tags
+ * @param  {String} svg - String with svg tags
+ * @param  {number} circleSegmentsStrokeWidth strokewidth from circlesegment
+ * @param  {String} strokeColor - strokecolor from circlesegment
+ * @param  {String} d - circle segment
+ * @return {String} extended svg
+ */
+export function extendsSvgNominalCircleSegments (svg, circleSegmentsStrokeWidth, strokeColor, d) {
+    return svg + "<path" +
+            " fill='none'" +
+            " stroke-width='" + circleSegmentsStrokeWidth + "'" +
+            " stroke='" + strokeColor + "'" +
+            " d='" + d + "'/>";
+}
+
+/**
+ * Create a svg with colored circle segments by nominal scaling
+ * @param  {ol.Feature} feature - feature to be drawn
+ * @param {Object} attributes - The attributes from the nominal circle segment
+ * @return {String} svg with colored circle segments
+ */
+export function createNominalCircleSegments (feature, attributes) {
+    const circleSegmentsRadius = parseFloat(attributes.circleSegmentsRadius, 10),
+        circleSegmentsStrokeWidth = parseFloat(attributes.circleSegmentsStrokeWidth, 10),
+        circleSegBCArray = attributes.circleSegmentsBackgroundColor,
+        circleSegmentsFillOpacity = Array.isArray(circleSegBCArray) && circleSegBCArray[circleSegBCArray.length - 1],
+        circleSegmentsBackgroundColor = returnColor(attributes.circleSegmentsBackgroundColor, "hex"),
+        scalingValueDefaultColor = returnColor(attributes.scalingValueDefaultColor, "hex"),
+        scalingValues = attributes.scalingValues,
+        scalingAttributesAsObject = getScalingAttributesAsObject(scalingValues),
+        scalingAttribute = feature.get(attributes.scalingAttribute),
+        scalingObject = fillScalingAttributes(scalingAttributesAsObject, scalingAttribute),
+        totalSegments = Object.values(scalingObject).reduce(function (memo, num) {
+            return memo + num;
+        }, 0),
+        degreeSegment = totalSegments >= 0 ? 360 / totalSegments : 360,
+        gap = parseFloat(attributes.circleSegmentsGap, 10);
+    let size = 10,
+        startAngelDegree = 0,
+        endAngelDegree = degreeSegment,
+        svg,
+        d,
+        strokeColor,
+        i,
+        key,
+        value;
+
+    // calculate size
+    if (((circleSegmentsRadius + circleSegmentsStrokeWidth) * 2) >= size) {
+        size = size + ((circleSegmentsRadius + circleSegmentsStrokeWidth) * 2);
+    }
+
+    // is required for the display in the Internet Explorer,
+    // because in addition to the SVG and the size must be specified
+    PointStyle.prototype.setSize(size);
+
+    svg = createSvgNominalCircleSegments(size, circleSegmentsRadius, circleSegmentsBackgroundColor, circleSegmentsStrokeWidth, circleSegmentsFillOpacity);
+
+    for (key in scalingObject) {
+        value = scalingObject[key];
+        if (scalingValues !== undefined && (key !== "empty")) {
+            strokeColor = returnColor(scalingValues[key], "hex");
+        }
+        else {
+            strokeColor = scalingValueDefaultColor;
+        }
+
+        // create segments
+        for (i = 0; i < value; i++) {
+
+            d = calculateCircleSegment(startAngelDegree, endAngelDegree, circleSegmentsRadius, size, gap);
+
+            svg = extendsSvgNominalCircleSegments(svg, circleSegmentsStrokeWidth, strokeColor, d);
+
+            // set degree for next circular segment
+            startAngelDegree = startAngelDegree + degreeSegment;
+            endAngelDegree = endAngelDegree + degreeSegment;
+        }
+    }
+
+    svg = svg + "</svg>";
+
+    return svg;
+}
+
+/**
+ * create nominal scaled advanced style for pointFeatures
+ * @param {Object} attributes - The attributes from the nominal point
+ * @param {Object} feature - the feature to be drawn
+ * @param {Object} defaultImageName - The image name from the default style
+ * @return {ol.Style} style
+ */
+export function createNominalPointStyle (attributes, feature, defaultImageName) {
+    const workingFeature = Array.isArray(feature.get("features")) ? feature.get("features")[0] : feature,
+        styleScalingShape = attributes.scalingShape.toUpperCase(),
+        imageName = attributes.imageName;
+
+    let svgPath,
+        style,
+        imageStyle;
+
+    if (styleScalingShape === "CIRCLESEGMENTS") {
+        svgPath = createNominalCircleSegments(workingFeature, attributes);
+        style = createSVGStyle(svgPath, 5);
+    }
+
+    // create style from svg and image
+    if (imageName !== defaultImageName) {
+        imageStyle = createIconStyle(attributes, feature);
+        style = [style, imageStyle];
+    }
+
+    return style;
+}

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

@@ -0,0 +1,39 @@
+import {RegularShape, Fill, Stroke, Style} from "ol/style.js";
+import {returnColor} from "../../lib/colorConvertions";
+import {getRotationValue} from "../point/stylePointIcon";
+
+/**
+     * Creates RegularShape Style.
+     * all features get same shape styöe.
+     * @param {Object} attributes - The attributes from the circle
+     * @returns {ol/style} - The created RegularShape style.
+     */
+export function createRegularShapeStyle (attributes) {
+    const radius = parseFloat(attributes.rsRadius, 10),
+        radius2 = parseFloat(attributes.rsRadius2, 10),
+        points = parseFloat(attributes.rsPoints, 10),
+        angle = parseFloat(attributes.rsAngle, 10),
+        rotation = getRotationValue(attributes.rotation),
+        scale = attributes.rsScale,
+        fillcolor = returnColor(attributes.rsFillColor, "rgb"),
+        strokecolor = returnColor(attributes.rsStrokeColor, "rgb"),
+        strokewidth = parseFloat(attributes.rsStrokeWidth, 10);
+
+    return new Style({
+        image: new RegularShape({
+            radius: radius,
+            radius2: radius2,
+            points: points,
+            scale: scale,
+            rotation: rotation,
+            angle: angle,
+            fill: new Fill({
+                color: fillcolor
+            }),
+            stroke: new Stroke({
+                color: strokecolor,
+                width: strokewidth
+            })
+        })
+    });
+}