@masterportal/masterportalapi 2.24.0 → 2.25.0

package/CHANGELOG.md

@@ -3,11 +3,30 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
+### Unreleased - in development
+## Added
+
+### Changed
+- WebGL: method "afterLoading" catches MultiPoint geometries and parses them to a single point feature for proper rendering
+- WebGL Render-Pipeline for VectorLayer of type VectorTile can be called using {"renderer": "webgl"} in config.json.
+
+## Changed
+- The styleList is now loading asynchronus
+
+## Deprecated
+
+## Removed
+
+## Fixed
+
+---
+
 ## 2.24.0 - 2023-08-03
 ### Added
 - The following packages have been installed:
     - @swc/jest: 0.2.27
 - Add a function to convertUnits in drawInteractions.
+- Remove VectorBase layer and add it to masterportal.
 
 ### Changed
 - The following packages have been updated:

package/example/config/portal.json

@@ -45,6 +45,12 @@
       "styleId": "1534",
       "typ": "WFS"
     },
+    {
+      "id": "5097",
+      "renderer": "webgl",
+      "isPointLayer": true,
+      "typ": "WFS"
+    },
     {
       "id": "2003",
       "renderer": "webgl",

package/example/config/services.json

@@ -133,6 +133,16 @@
     "version" : "1.1.0",
     "featureNS" : "https://registry.gdi-de.org/id/de.hh.up"
   },
+  {
+    "id" : "5097",
+    "name" : "de.hh.up:strassenbaumkataster hpa",
+    "url" : "https://geodienste.hamburg.de/HH_WFS_Strassenbaumkataster",
+    "typ" : "WFS",
+    "featureType" : "strassenbaumkataster_hpa",
+    "outputFormat" : "XML",
+    "version" : "1.1.0",
+    "featureNS" : "https://registry.gdi-de.org/id/de.hh.up"
+  },
   {
     "id": "6001",
     "name": "ArcGIS VectorTile",

package/package.json

@@ -1,66 +1,66 @@
-{
-  "name": "@masterportal/masterportalapi",
-  "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.24.0",
-  "license": "MIT",
-  "description": "Basic functions of the Masterportal as api",
-  "repository": {
-    "type": "git",
-    "url": "git+https://bitbucket.org/geowerkstatt-hamburg/masterportalapi.git"
-  },
-  "main": "src/index.js",
-  "scripts": {
-    "test": "jest .test.js --config ./jest.config.js --collectCoverage",
-    "test:trace": "node --trace-warnings node_modules/jest/bin/jest.js .test.js --config ./jest.config.js",
-    "test:watch": "jest .test.js --config ./jest.config.js --watch",
-    "example": "parcel example/index.html",
-    "generate-jsdoc": "jsdoc ./src -r -d ./docs/ -R ./README.md -c jsdoc.json",
-    "prePushHook": "eslint --max-warnings 0 \"./**/*.js\" && npm run test",
-    "prepare": "husky install"
-  },
-  "dependencies": {
-    "core-js": "^3.32.0",
-    "dayjs": "^1.11.9",
-    "ol": "7.4.0",
-    "olcs": "^2.15.0",
-    "proj4": "^2.9.0",
-    "xml2js": "^0.6.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
-    "@parcel/transformer-sass": "^2.9.3",
-    "@swc/jest": "^0.2.27",
-    "buffer": "^6.0.3",
-    "canvas": "^2.11.2",
-    "eslint": "^8.46.0",
-    "events": "^3.3.0",
-    "husky": "^8.0.3",
-    "jest": "^29.6.2",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.6.2",
-    "jest-fetch-mock": "^3.0.3",
-    "jsdoc": "^4.0.2",
-    "parcel": "^2.9.3",
-    "process": "^0.11.10",
-    "sass": "^1.64.2",
-    "stream-browserify": "^3.0.0",
-    "timers-browserify": "^2.0.12",
-    "use-resize-observer": "^9.1.0"
-  },
-  "peerDependencies": {
-    "@cesium/engine": "^2.4.1"
-  },
-  "engines": {
-    "node": "^16.13.2 || ^18.12.0",
-    "npm": "^8.1.2 || ^9.3.1"
-  },
-  "homepage": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi#readme",
-  "directories": {
-    "example": "example",
-    "test": "test"
-  },
-  "bugs": {
-    "url": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/issues"
-  }
-}
+{
+  "name": "@masterportal/masterportalapi",
+  "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
+  "version": "2.25.0",
+  "license": "MIT",
+  "description": "Basic functions of the Masterportal as api",
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/geowerkstatt-hamburg/masterportalapi.git"
+  },
+  "main": "src/index.js",
+  "scripts": {
+    "test": "jest .test.js --config ./jest.config.js --collectCoverage",
+    "test:trace": "node --trace-warnings node_modules/jest/bin/jest.js .test.js --config ./jest.config.js",
+    "test:watch": "jest .test.js --config ./jest.config.js --watch",
+    "example": "parcel example/index.html",
+    "generate-jsdoc": "jsdoc ./src -r -d ./docs/ -R ./README.md -c jsdoc.json",
+    "prePushHook": "eslint --max-warnings 0 \"./**/*.js\" && npm run test",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "core-js": "^3.32.0",
+    "dayjs": "^1.11.9",
+    "ol": "7.4.0",
+    "olcs": "^2.15.0",
+    "proj4": "^2.9.0",
+    "xml2js": "^0.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+    "@parcel/transformer-sass": "^2.9.3",
+    "@swc/jest": "^0.2.27",
+    "buffer": "^6.0.3",
+    "canvas": "^2.11.2",
+    "eslint": "^8.46.0",
+    "events": "^3.3.0",
+    "husky": "^8.0.3",
+    "jest": "^29.6.2",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.6.2",
+    "jest-fetch-mock": "^3.0.3",
+    "jsdoc": "^4.0.2",
+    "parcel": "^2.9.3",
+    "process": "^0.11.10",
+    "sass": "^1.64.2",
+    "stream-browserify": "^3.0.0",
+    "timers-browserify": "^2.0.12",
+    "use-resize-observer": "^9.1.0"
+  },
+  "peerDependencies": {
+    "@cesium/engine": "^2.4.1"
+  },
+  "engines": {
+    "node": "^16.13.2 || ^18.12.0",
+    "npm": "^8.1.2 || ^9.3.1"
+  },
+  "homepage": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi#readme",
+  "directories": {
+    "example": "example",
+    "test": "test"
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/issues"
+  }
+}

package/src/index.js

@@ -5,7 +5,6 @@ import * as wms from "./layer/wms";
 import wmts from "./layer/wmts";
 import wfs from "./layer/wfs";
 import * as geojson from "./layer/geojson";
-import * as vectorBase from "./layer/vectorBase";
 import * as vectorTile from "./layer/vectorTile";
 import * as oaf from "./layer/oaf";
 import * as terrain from "./layer/terrain";
@@ -24,7 +23,6 @@ export {
     wfs,
     geojson,
     layerLib,
-    vectorBase,
     vectorTile,
     oaf,
     terrain,

package/src/layer/geojson/index.js

@@ -23,10 +23,11 @@ export {setCustomStyles};
  * @param {"default" | "webgl" | undefined} [rawLayer.renderer] - use default canvas or webgl renderer
  * @param {string} [rawLayer.styleId] - the styleId of the layer, only necessary for webgl style pipeline
  * @param {string[]} [rawLayer.excludeTypesFromParsing] - types that should not be parsed from strings, only necessary for webgl
+ * @param {string[]} [rawLayer.isPointLayer] - whether the layer consists merely of points (or multi points)
  * @param {object} options - options of the geojson layer
  * @returns {ol.source.Vector} created VectorSource
  */
-export function createLayerSource ({url, features, clusterDistance, renderer, styleId, excludeTypesFromParsing}, options) {
+export function createLayerSource ({url, features, clusterDistance, renderer, styleId, excludeTypesFromParsing, isPointLayer}, options) {
     const format = new GeoJSON();
     let source = null;
 
@@ -46,11 +47,11 @@ export function createLayerSource ({url, features, clusterDistance, renderer, st
     if (renderer === "webgl") {
         // if features were provided before source creation
         if (features?.length > 0) {
-            webgl.afterLoading(source.getFeatures(), styleId, excludeTypesFromParsing);
+            webgl.afterLoading(source.getFeatures(), styleId, excludeTypesFromParsing, isPointLayer);
         }
         // wait for loading
         source.once("featuresloadend", event => {
-            webgl.afterLoading(event?.features, styleId, excludeTypesFromParsing);
+            webgl.afterLoading(event?.features, styleId, excludeTypesFromParsing, isPointLayer);
         });
     }
 
@@ -75,7 +76,8 @@ export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {
             ...rawLayer,
             renderer: layerParams.renderer,
             styleId: layerParams.styleId,
-            excludeTypesFromParsing: layerParams.excludeTypesFromParsing
+            excludeTypesFromParsing: layerParams.excludeTypesFromParsing,
+            isPointLayer: layerParams.isPointLayer
         }, options);
         layer = webgl.createLayer({
             ...rawLayer,
@@ -118,7 +120,7 @@ export function updateSource (layer) {
     // perform necessary feature operations if renderer is webgl
     if (layer.get("renderer") === "webgl") {
         layer.getSource().once("featuresloadend", event => {
-            webgl.afterLoading(event?.features, layer.get("styleId"), layer.get("excludeTypesFromParsing"));
+            webgl.afterLoading(event?.features, layer.get("styleId"), layer.get("excludeTypesFromParsing"), layer.get("isPointLayer"));
         });
     }
 }

package/src/layer/oaf.js

@@ -188,7 +188,7 @@ export function createLayerSource (rawLayer, options = {}) {
 
     if (rawLayer.renderer === "webgl") {
         source.once("featuresloadend", event => {
-            webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
+            webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing, rawLayer.isPointLayer);
         });
     }
 
@@ -212,7 +212,8 @@ export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {
             ...rawLayer,
             renderer: layerParams.renderer,
             styleId: layerParams.styleId,
-            excludeTypesFromParsing: layerParams.excludeTypesFromParsing
+            excludeTypesFromParsing: layerParams.excludeTypesFromParsing,
+            isPointLayer: layerParams.isPointLayer
         }, options);
         layer = webgl.createLayer({
             ...rawLayer,

package/src/layer/tileset.js

@@ -14,7 +14,7 @@ function createTileSet (rawLayer) {
         Object.assign(options, rawLayer.cesium3DTilesetOptions);
     }
 
-    return Promise.resolve(Cesium.Cesium3DTileset.fromUrl(url, options));
+    return Promise.resolve(Cesium.Cesium3DTileset.fromUrl(url, options)); 
 }
 
 /**

package/src/layer/vectorBase.js

@@ -15,7 +15,7 @@ export function createLayerSource (attrs) {
 
     // perform necessary feature operations if renderer is webgl
     if (attrs.renderer === "webgl") {
-        webgl.afterLoading(source.getFeatures(), attrs.styleId, attrs.excludeTypesFromParsing);
+        webgl.afterLoading(source.getFeatures(), attrs.styleId, attrs.excludeTypesFromParsing, attrs.isPointLayer);
     }
 
     return source;
@@ -30,7 +30,7 @@ export function createLayerSource (attrs) {
 export function updateSource (layer, features) {
     // perform necessary feature operations if renderer is webgl
     if (layer.get("renderer") === "webgl") {
-        webgl.afterLoading(features, layer.get("styleId"), layer.get("excludeTypesFromParsing"));
+        webgl.afterLoading(features, layer.get("styleId"), layer.get("excludeTypesFromParsing"), layer.get("isPointLayer"));
     }
 
     layer.getSource().clear(true);

package/src/layer/vectorTile.js

@@ -3,6 +3,7 @@ import VectorTileLayer from "ol/layer/VectorTile";
 import VectorTileSource from "ol/source/VectorTile";
 import OpenLayersTileGrid from "ol/tilegrid/TileGrid";
 import {extentFromProjection} from "ol/tilegrid";
+import * as webgl from "../renderer/webgl";
 
 import {stylefunction, apply} from "ol-mapbox-style";
 
@@ -108,11 +109,13 @@ function mustCreateTileGrid (options = {}) {
  *
  * @param {string} url - url to vector tile service
  * @param {tileGridProperties} [options] - properties for tileGrid
+ * @param {"default" | "webgl" | undefined} [options.renderer] - use default canvas or webgl renderer
+ * @param {string} [options.styleId] - the styleId of the layer, only necessary for webgl style pipeline
+ * @param {string[]} [options.excludeTypesFromParsing] - types that should not be parsed from strings, only necessary for webgl
  * @returns {ol.source.VectorTile} Source
  */
 export function createLayerSource (url, options = {}) {
     options.epsg = options.epsg ? options.epsg : defaults.epsg;
-
     const sourceParams = {
         projection: options.epsg,
         format: new MVT(),
@@ -126,7 +129,6 @@ export function createLayerSource (url, options = {}) {
     if (mustCreateTileGrid(options)) {
         sourceParams.tileGrid = createTileGrid(options);
     }
-
     return new VectorTileSource(sourceParams);
 }
 
@@ -143,13 +145,35 @@ export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {
         console.error(`Cancelled creation of layer "${rawLayer.id}"(${rawLayer.name}) because of missing required parameters`);
         return undefined;
     }
-    const source = createLayerSource(rawLayer.url, rawLayer),
-        layer = new VectorTileLayer(Object.assign({
-            id: rawLayer.id, name: rawLayer.name, attribution: rawLayer.olAttribution, extent: source.getTileGrid().getExtent(),
-            minZoom: rawLayer.minZoom, maxZoom: rawLayer.maxZoom, source: source,
-            declutter: true}, layerParams));
+    let layer, source;
+
+    // use WebGL render pipeline, if specified
+    if (layerParams.renderer === "webgl") {
+        source = createLayerSource(rawLayer.url, {
+            ...rawLayer,
+            renderer: layerParams.renderer,
+            styleId: layerParams.styleId,
+            excludeTypesFromParsing: layerParams.excludeTypesFromParsing
+        });
+
+        layer = webgl.createLayer({
+            extent: source.getTileGrid().getExtent(),
+            ...rawLayer,
+            ...layerParams,
+            source
+        });
+
+        return layer;
+    }
+
+    // use default canvas renderer
+    source = createLayerSource(rawLayer.url, rawLayer);
+    layer = new VectorTileLayer(Object.assign({
+        id: rawLayer.id, name: rawLayer.name, attribution: rawLayer.olAttribution, extent: source.getTileGrid().getExtent(),
+        minZoom: rawLayer.minZoom, maxZoom: rawLayer.maxZoom, source: source,
+        declutter: true}, layerParams));
 
-    if (options.style) {
+    if (options.style && rawLayer.renderer !== "webgl") {
         layer.setStyle(options.style);
     }
 

package/src/layer/wfs.js

@@ -209,12 +209,12 @@ function createLayerSource (rawLayer, options = {}) {
     if (rawLayer.renderer === "webgl") {
         if (options.loadingStrategy === bbox) {
             source.on("featuresloadend", event => {
-                webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
+                webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing, rawLayer.isPointLayer);
             });
         }
         else {
             source.once("featuresloadend", event => {
-                webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
+                webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing, rawLayer.isPointLayer);
             });
         }
     }
@@ -238,7 +238,8 @@ function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {}) {
             ...rawLayer,
             renderer: layerParams.renderer,
             styleId: layerParams.styleId,
-            excludeTypesFromParsing: layerParams.excludeTypesFromParsing
+            excludeTypesFromParsing: layerParams.excludeTypesFromParsing,
+            isPointLayer: layerParams.isPointLayer
         }, options);
         layer = webgl.createLayer({
             ...rawLayer,

package/src/layer/wmts.js

@@ -112,8 +112,10 @@ function createLayerSourceByCapabilities (attrs, tileLayer) {
     const layerIdentifier = attrs.layers,
         url = attrs.capabilitiesUrl,
         matrixSet = attrs.tileMatrixSet,
+        format = attrs.format,
         capabilitiesOptions = {
-            layer: layerIdentifier
+            layer: layerIdentifier,
+            format
         };
 
     // use the matrixSet (if defined) for optionsFromCapabilities
@@ -201,4 +203,4 @@ export default {
     getWMTSCapabilities,
     generateArrays,
     showErrorMessage
-};
+};

package/src/maps/ol/olMap.js

@@ -7,7 +7,6 @@ import * as wms from "../../layer/wms";
 import wmts from "../../layer/wmts";
 import * as geojson from "../../layer/geojson";
 import wfs from "../../layer/wfs";
-import * as vectorBase from "../../layer/vectorBase";
 import * as vectortile from "../../layer/vectorTile";
 import * as oaf from "../../layer/oaf";
 import {createMapView} from "../../maps/mapView";
@@ -26,7 +25,6 @@ const layerBuilderMap = {
         "wmts": wmts,
         wfs,
         geojson,
-        vectorBase,
         vectortile,
         oaf
     },

package/src/renderer/webgl.js

@@ -1,9 +1,13 @@
 import WebGLPointsLayer from "ol/layer/WebGLPoints";
 import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer";
+import WebGLVectorTileLayerRenderer from "ol/renderer/webgl/VectorTileLayer.js";
+import VectorTile from "ol/layer/VectorTile.js";
 import VectorLayer from "ol/layer/Layer";
 import styleList from "../vectorStyle/styleList";
 import {getRulesForFeature} from "../vectorStyle/lib/getRuleForIndex";
 import {returnColor} from "../vectorStyle/lib/colorConvertions";
+import {asArray} from "ol/color.js";
+import {packColor, parseLiteralStyle} from "ol/webgl/styleparser.js";
 
 /**
  * The default style for OpenLayers WebGLPoints class
@@ -23,20 +27,20 @@ const defaultStyle = {
 
     /** @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"]
+        "stroke-color": ["get", "strokeColor"],
+        "stroke-width": ["get", "strokeWidth", "number"],
+        "fill-color": ["get", "fillColor"],
+        "opacity": ["get", "opacity", "number"],
+        "size": ["get", "circleSize", "number"],
+        symbol: defaultStyle.symbol
     };
 
 /**
- * Creates a layer object to extend from.
+ *  Creates a vector layer with custom renderer.
  * @augments VectorLayer
  * @private
  * @implements {WebGLVectorLayerRenderer}
- * @param {Object} attrs attributes of the layer
- * @returns {module:ol/layer/Layer} the LocalWebGLLayer with a custom renderer for WebGL styling
+ * @returns {module:ol/layer/VectorLayer} the LocalWebGLLayer with a custom renderer for WebGL styling
  */
 export function createVectorLayerRenderer () {
     /**
@@ -46,7 +50,7 @@ export function createVectorLayerRenderer () {
      */
     class LocalWebGLLayer extends VectorLayer {
         /**
-         * Creates a new renderer that takes the defined style of the new layer as an input
+         * Creates a new renderer that takes the defined style of the new layer as an input.
          * @returns {module:ol/renderer/webgl/WebGLVectorLayerRenderer} the custom renderer
          * @experimental
          */
@@ -60,9 +64,101 @@ export function createVectorLayerRenderer () {
     return LocalWebGLLayer;
 }
 
+/**
+ * Creates a vector tile layer with custom renderer.
+ * @augments VectorTile
+ * @private
+ * @implements {WebGLVectorTileLayerRenderer}
+ * @returns {module:ol/layer/VectorTile} the LocalWebGLLayer with a custom renderer for WebGL styling of vectorTile layers.
+ */
+export function createVectorTileLayerRenderer () {
+    /**
+     * @class LocalWebGLLayer
+     * @see https://openlayers.org/en/latest/examples/webgl-vector-tiles.html
+     * @description the temporary class with a custom renderer to render the vectortiles with WebGL
+     */
+    class LocalWebGLLayer extends VectorTile {
+
+        /**
+         * Creates a new renderer that takes the defined style of the new layer as an input.
+         * @returns {module:ol/renderer/webgl/WebGLVectorTileLayerRenderer} the custom renderer
+         * @experimental
+         */
+        createRenderer () {
+            const result = parseLiteralStyle(style),
+                invisible = [255, 255, 255, 0],
+                grey = [119, 119, 119, 1];
+
+
+            return new WebGLVectorTileLayerRenderer(this, {
+                style: {
+                    fill: {
+                        fragment: result.builder.getFillFragmentShader(),
+                        vertex: result.builder.getFillVertexShader()
+                    },
+                    stroke: {
+                        fragment: result.builder.getStrokeFragmentShader(),
+                        vertex: result.builder.getStrokeVertexShader()
+                    },
+                    symbol: {
+                        fragment: result.builder.getSymbolFragmentShader(),
+                        vertex: result.builder.getSymbolVertexShader()
+                    },
+                    attributes: {
+                        fillColor: {
+                            size: 2,
+                            callback: (feature) => {
+                                const featureStyle = this.getStyle()(feature, 1);
+
+                                if (featureStyle && featureStyle[0]) {
+                                    const color = featureStyle[0]?.getFill()?.getColor();
+
+                                    return packColor(color && typeof color === "string" ? asArray(color) : invisible);
+                                }
+                                return packColor(grey);
+                            }
+                        },
+                        strokeColor: {
+                            size: 2,
+                            callback: (feature) => {
+                                const featureStyle = this.getStyle()(feature, 1);
+
+                                if (featureStyle && featureStyle[0]) {
+                                    const color = featureStyle[0]?.getStroke()?.getColor();
+
+                                    return packColor(color ? asArray(color) : invisible);
+                                }
+                                return packColor(grey);
+                            }
+                        },
+                        strokeWidth: {
+                            size: 1,
+                            callback: (feature) => {
+                                const featureStyle = this.getStyle()(feature, 1);
+
+                                if (featureStyle && featureStyle[0]) {
+                                    const width = featureStyle[0]?.getStroke()?.getWidth();
+
+                                    if (width !== undefined) {
+                                        return width > 10 ? width / 10 : 1;/** @todo needs refactoring in later versions  */
+                                    }
+                                }
+                                return 1;
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    }
+
+    return LocalWebGLLayer;
+}
+
 /**
  * Parses the vectorStyle from style.json to the feature
- * to reduce processing on runtime
+ * to reduce processing on runtime.
+ * Sets properties with style at feature to use by literalSytle of renderer of VectorLayer.
  * @private
  * @param {module:ol/Feature} feature - the feature to check
  * @param {module:Backbone/Model} [styleObject] - (optional) the style model from StyleList
@@ -87,11 +183,11 @@ export function formatFeatureStyles (feature, styleObject) {
             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);
+        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);
     }
 }
 
@@ -134,19 +230,28 @@ export function formatFeatureData (feature, excludeTypes = ["boolean"]) {
 }
 
 /**
- * feature transformations called after loading
+ * feature transformations called after loading - but not for layer of typ VectortTile
  * called by the layer source loader, binds the instance of the layer model
  * should be called on each source refresh
  * @param {module:ol/Feature[]} features - the features loaded by the layer
  * @param {String} styleId - The layer's styleId
  * @param {String[]} excludeTypesFromParsing - types that should not be parsed from strings, only necessary for webgl
+ * @param {Boolean} isPointLayer - whether the layer source should consist only of points (or multi points)
  * @returns {void}
  */
-export function afterLoading (features, styleId, excludeTypesFromParsing) {
+export function afterLoading (features, styleId, excludeTypesFromParsing, isPointLayer) {
     const styleObject = styleList.returnStyleObject(styleId); // load styleModel to extract rules per feature
 
     if (Array.isArray(features)) {
         features.forEach(feature => {
+            /**
+             * extract first point from Multipoint
+             * @deprecated will probably not be necessary anymore in release version
+             * @example An example for that behavior can be found when rendering "Strassenbaumkataster"
+             */
+            if (isPointLayer && feature.getGeometry().getType() === "MultiPoint") {
+                feature.setGeometry(feature.getGeometry().getPoint(0)); // other points in the multi point will be ignored for now
+            }
             formatFeatureGeometry(feature); /** @deprecated will propbably not be necessary anymore in release version */
             formatFeatureStyles(feature, styleObject); /** @todo needs refactoring in release version  */
             formatFeatureData(feature, excludeTypesFromParsing); /** Necessary since the WebGLPoints Style Syntax depends on data types (i.e. numbers not as strings) */
@@ -175,7 +280,8 @@ export function createLayer (attrs) {
         opacity: attrs.transparency ? (100 - attrs.transparency) / 100 : attrs.opacity,
         renderer: "webgl",
         styleId: attrs.styleId,
-        excludeTypesFromParsing: attrs.excludeTypesFromParsing
+        excludeTypesFromParsing: attrs.excludeTypesFromParsing,
+        extent: attrs.extent
     };
 
     /**
@@ -196,11 +302,22 @@ export function createLayer (attrs) {
         });
     }
 
-    /**
-     * use ol/renderer/webgl/WebGLVectorLayerRenderer if not point layer
-     * Point styling as quads only
-     */
-    LayerConstructor = createVectorLayerRenderer(attrs);
+    if (attrs.typ === "VectorTile") {
+
+        /**
+         * use ol/renderer/webgl/WebGLVectorLayerRenderer if not point layer
+         * Point styling as quads only
+         */
+        LayerConstructor = createVectorTileLayerRenderer(attrs);
+    }
+    else {
+
+        /**
+         * use ol/renderer/webgl/WebGLVectorLayerRenderer if not point layer
+         * Point styling as quads only
+         */
+        LayerConstructor = createVectorLayerRenderer(attrs);
+    }
     return new LayerConstructor({
         ...options,
         isPointLayer: false

package/src/vectorStyle/styleList.js

@@ -230,31 +230,15 @@ function initializeStyleList (styleGetters, Config, layers, tools, callback) {
     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);
-            }
+    fetch(styleConf)
+        .then(response => response.json())
+        .then(data => {
             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();
+        })
+        .catch(error => {
+            console.error(error);
+            callback(false, true);
+        });
 }
 
 /**

package/test/layer/geojson/index.test.js

@@ -98,11 +98,23 @@ describe("geojson/index", function () {
         it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
             const
                 rawLayer = {url: "example.com/geo.json"},
-                source = geojson.createLayerSource({...rawLayer, renderer: "webgl"}, {});
+                layerParams = {
+                    renderer: "webgl",
+                    styleId: "id",
+                    excludeTypesFromParsing: null,
+                    isPointLayer: true
+                },
+                source = geojson.createLayerSource({
+                    ...rawLayer,
+                    renderer: layerParams.renderer,
+                    styleId: layerParams.styleId,
+                    excludeTypesFromParsing: layerParams.excludeTypesFromParsing,
+                    isPointLayer: layerParams.isPointLayer
+                }, {});
 
             expect(source.getListeners("featuresloadend")).toHaveLength(2);
-            source.getListeners("featuresloadend")[1]({features: []});
-            expect(webgl.afterLoading).toHaveBeenCalled();
+            source.getListeners("featuresloadend")[1]({features});
+            expect(webgl.afterLoading).toHaveBeenCalledWith(features, layerParams.styleId, layerParams.excludeTypesFromParsing, layerParams.isPointLayer);
         });
 
     });

package/test/layer/oaf.test.js

@@ -267,11 +267,24 @@ describe("oaf.js", function () {
                     featureType: "krankenhaeuser_hh",
                     version: "1.0.0"
                 },
-                source = oaf.createLayerSource({...rawLayer, renderer: "webgl"});
+                layerParams = {
+                    renderer: "webgl",
+                    styleId: "id",
+                    excludeTypesFromParsing: null,
+                    isPointLayer: true
+                },
+                source = oaf.createLayerSource({
+                    ...rawLayer,
+                    renderer: layerParams.renderer,
+                    styleId: layerParams.styleId,
+                    excludeTypesFromParsing: layerParams.excludeTypesFromParsing,
+                    isPointLayer: layerParams.isPointLayer
+                }),
+                features = [];
 
             expect(source.getListeners("featuresloadend")).toHaveLength(1);
-            source.getListeners("featuresloadend")[0]({features: []});
-            expect(webgl.afterLoading).toHaveBeenCalled();
+            source.getListeners("featuresloadend")[0]({features});
+            expect(webgl.afterLoading).toHaveBeenCalledWith(features, layerParams.styleId, layerParams.excludeTypesFromParsing, layerParams.isPointLayer);
         });
     });
 });

package/test/layer/vectorTile.test.js

@@ -2,6 +2,7 @@ import OpenLayersVectorTileLayer from "ol/layer/VectorTile";
 import OpenLayersVectorTileSource from "ol/source/VectorTile";
 import OpenLayersTileGrid from "ol/tilegrid/TileGrid";
 
+
 import {Feature} from "ol";
 import Polygon from "ol/geom/Polygon";
 
@@ -16,11 +17,21 @@ jest.mock("../../src/rawLayerList.js", () => {
     return original;
 });
 
+jest.mock("../../src/renderer/webgl.js", () => {
+    const original = jest.requireActual("../../src/renderer/webgl.js");
+
+    return {
+        ...original,
+        afterLoading: jest.fn()
+    };
+});
+
+
 describe("vectorTile.js", function () {
 
     beforeAll(() => crs.registerProjections());
 
-    const layerParams = {
+    const rawLayer = {
             name: "VT Test",
             id: "VT_01",
             url: "https://example.org"
@@ -79,12 +90,13 @@ describe("vectorTile.js", function () {
                 source = vectorTile.createLayerSource("https://foo.example.org", sourceParams);
 
             expect(source).toBeInstanceOf(OpenLayersVectorTileSource);
+            expect(typeof source.getTileLoadFunction()).toEqual("function");
         });
     });
 
     describe("createLayer", function () {
         it("creates a vector Tile Layer", function () {
-            const layer = vectorTile.createLayer(layerParams);
+            const layer = vectorTile.createLayer(rawLayer);
 
             expect(layer).toBeInstanceOf(OpenLayersVectorTileLayer);
             expect(layer.getSource()).toBeInstanceOf(OpenLayersVectorTileSource);
@@ -92,6 +104,13 @@ describe("vectorTile.js", function () {
             expect(layer.get("id")).toEqual("VT_01");
         });
 
+        it("creates a vector Tile Layer with webgl renderer", function () {
+            const layer = vectorTile.createLayer(rawLayer, {layerParams: {renderer: "webgl"}});
+
+            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
+            expect(layer.getSource()).toBeInstanceOf(OpenLayersVectorTileSource);
+        });
+
         it("should log an error when required param is missing", function () {
             const spyConsole = jest.spyOn(console, "error").mockImplementation(() => ""),
                 layer = vectorTile.createLayer({
@@ -139,7 +158,7 @@ describe("vectorTile.js", function () {
                     ],
                     tileSize: 512
                 },
-                layer = vectorTile.createLayer(layerParams),
+                layer = vectorTile.createLayer(rawLayer),
                 source = layer.getSource(),
                 tileGrid = source.getTileGrid();
 
@@ -156,7 +175,7 @@ describe("vectorTile.js", function () {
 
     describe("setStyle", function () {
         it("should apply a given style", function () {
-            const layer = vectorTile.createLayer(layerParams);
+            const layer = vectorTile.createLayer(rawLayer);
 
             let featureStyle = null;
 

package/test/layer/wfs.test.js

@@ -422,11 +422,24 @@ describe("wfs.js", function () {
                     featureType: "krankenhaeuser_hh",
                     version: "1.0.0"
                 },
-                source = wfs.createLayerSource({...rawLayer, renderer: "webgl"});
+                layerParams = {
+                    renderer: "webgl",
+                    styleId: "id",
+                    excludeTypesFromParsing: null,
+                    isPointLayer: true
+                },
+                source = wfs.createLayerSource({
+                    ...rawLayer,
+                    renderer: layerParams.renderer,
+                    styleId: layerParams.styleId,
+                    excludeTypesFromParsing: layerParams.excludeTypesFromParsing,
+                    isPointLayer: layerParams.isPointLayer
+                }),
+                features = [];
 
             expect(source.getListeners("featuresloadend")).toHaveLength(1);
-            source.getListeners("featuresloadend")[0]({features: []});
-            expect(webgl.afterLoading).toHaveBeenCalled();
+            source.getListeners("featuresloadend")[0]({features});
+            expect(webgl.afterLoading).toHaveBeenCalledWith(features, layerParams.styleId, layerParams.excludeTypesFromParsing, layerParams.isPointLayer);
         });
         it("creates a vectorSource with credentials: include as params", () => {
             global.fetch = jest.fn().mockImplementationOnce(() => {

package/test/renderer/webgl.test.js

@@ -1,13 +1,24 @@
 import VectorSource from "ol/source/Vector.js";
+import VectorTileSource from "ol/source/VectorTile";
+import VectorTile from "ol/layer/VectorTile.js";
 import Feature from "ol/Feature";
 import Polygon from "ol/geom/Polygon";
+import MultiPoint from "ol/geom/MultiPoint";
 import * as webgl from "../../src/renderer/webgl";
 import WebGLPointsLayer from "ol/layer/WebGLPoints";
 import Layer from "ol/layer/Layer";
-import styleList from "../../src/vectorStyle/styleList";
+import {returnColor} from "../../src/vectorStyle/lib/colorConvertions";
+
+jest.mock("../../src/vectorStyle/styleList.js", () => {
+    const
+        original = jest.requireActual("../../src/vectorStyle/styleList.js");
+
+    original.returnStyleObject = jest.fn(() => "xyz");
+    return original;
+});
 
 describe("webgl.js", () => {
-    let layerParams, rawLayer, styleRule, styleObject;
+    let layerParams, layerParamsVectorTile, rawLayer, rawLayerVectorTile, styleRule, styleObject;
 
     beforeEach(() => {
         layerParams = {
@@ -27,6 +38,26 @@ describe("webgl.js", () => {
             featureType: "krankenhaeuser_hh",
             outputFormat: "XML"
         };
+        rawLayerVectorTile = {
+            id: "4000",
+            name: "XPLAN",
+            url: "https://xplanung.ldproxy.devops.diplanung.de/rest/services/xplansyn/tiles/WebMercatorQuad/{z}/{y}/{x}?f=mvt",
+            typ: "VectorTile",
+            epsg: "EPSG:3857",
+            tileSize: 512,
+            extent: [
+                902186.674876469653,
+                7054472.60470921732,
+                1161598.35425907862,
+                7175683.41171819717
+            ]
+        };
+        layerParamsVectorTile = {
+            id: "4000",
+            renderer: "webgl",
+            styleId: "4000",
+            visibility: true
+        };
         styleRule = {style: {
             polygonFillColor: [255, 0, 0, 0.5],
             polygonStrokeColor: [0, 255, 0, 0.5],
@@ -37,16 +68,10 @@ describe("webgl.js", () => {
         styleObject = {
             rules: [styleRule]
         };
-
-        jest.spyOn(styleList, "returnStyleObject").mockImplementation(() => styleObject);
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
     });
 
     describe("createLayer", () => {
-        const source = new VectorSource();
+        let source = new VectorSource();
 
         it("should return a WebGLPointsLayer", () => {
             layerParams.isPointLayer = true;
@@ -63,6 +88,28 @@ describe("webgl.js", () => {
             expect(webglLayer).not.toBeInstanceOf(WebGLPointsLayer);
             expect(webglLayer.get("isPointLayer")).toBeFalsy();
         });
+        it("vectorTile: should return a VectorTile layer", () => {
+            source = new VectorTileSource({...rawLayerVectorTile, ...layerParamsVectorTile});
+            layerParams.isPointLayer = false;
+            const webglLayer = webgl.createLayer({...rawLayerVectorTile, ...layerParamsVectorTile, source});
+
+            expect(webglLayer).toBeInstanceOf(Layer);
+            expect(webglLayer).toBeInstanceOf(VectorTile);
+            expect(webglLayer).not.toBeInstanceOf(WebGLPointsLayer);
+            expect(webglLayer.get("isPointLayer")).toBeFalsy();
+        });
+    });
+    describe("afterLoading", () => {
+        const feature = new Feature({
+            geometry: new MultiPoint([
+                [[0, 0, 0], [1, 0, 0], [1, 1, 0]]
+            ], "XYZ")
+        });
+
+        it("should extract single points from MultiPoint geometries, if isPointLayer", () => {
+            webgl.afterLoading([feature], layerParams.styleId, null, true);
+            expect(feature.getGeometry().getType()).toEqual("Point");
+        });
     });
     describe("private format and style functions", () => {
         const
@@ -106,6 +153,26 @@ describe("webgl.js", () => {
                 webgl.formatFeatureStyles($feature, styleObject);
                 expect($feature.styleRule).toEqual(styleRule);
             });
+            it("set the necessary style attributes on the feature for literal style syntax", () => {
+                $feature = feature.clone();
+                webgl.formatFeatureStyles($feature, styleObject);
+                expect($feature.get("fillColor")).toEqual(returnColor(styleRule.style.polygonFillColor, "hex"));
+                expect($feature.get("strokeColor")).toEqual(returnColor(styleRule.style.polygonStrokeColor, "hex"));
+                expect($feature.get("strokeWidth")).toEqual(styleRule.style.polygonStrokeWidth);
+                expect($feature.get("opacity")).toEqual(styleRule.style.polygonFillColor[3]);
+                expect($feature.get("circleSize")).toEqual(styleRule.style.circleRadius);
+            });
+            it("circle: bind the styling rule from the styleObject to each feature", () => {
+                styleRule.style.polygonFillColor = undefined;
+                styleRule.style.polygonStrokeColor = undefined;
+                styleRule.style.polygonStrokeWidth = undefined;
+                $feature = feature.clone();
+                webgl.formatFeatureStyles($feature, styleObject);
+                expect($feature.styleRule).toEqual(styleRule);
+                expect($feature.get("fillColor")).toEqual(returnColor(styleRule.style.circleFillColor, "hex"));
+                expect($feature.get("opacity")).toEqual(styleRule.style.circleFillColor[3]);
+                expect($feature.get("circleSize")).toEqual(styleRule.style.circleRadius);
+            });
         });
     });
 });

package/test/layer/vectorBase.test.js

@@ -1,85 +0,0 @@
-import Feature from "ol/Feature";
-import Point from "ol/geom/Point";
-import Polygon from "ol/geom/Polygon";
-import VectorLayer from "ol/layer/Vector";
-import VectorSource from "ol/source/Vector.js";
-import * as vectorBase from "../../src/layer/vectorBase";
-import * as webgl from "../../src/renderer/webgl.js";
-
-jest.mock("../../src/renderer/webgl.js", () => {
-    const original = jest.requireActual("../../src/renderer/webgl.js");
-
-    return {
-        ...original,
-        afterLoading: jest.fn()
-    };
-});
-
-describe("vectorBase.js", function () {
-
-    describe("createLayerSource", function () {
-        it("creates a layerSource with features", function () {
-            const attr = {
-                    features: [
-                        new Feature({geometry: new Polygon([[[565086.1948534324, 5934664.461947621], [565657.6945448224, 5934738.54524095], [565625.9445619675, 5934357.545446689], [565234.3614400891, 5934346.962119071], [565086.1948534324, 5934664.461947621]]])}),
-                        new Feature({geometry: new Point([565826.38, 5934174.40])})
-                    ]
-                },
-                source = vectorBase.createLayerSource(attr);
-
-            expect(source).toBeInstanceOf(VectorSource);
-        });
-
-        it("creates a layerSource without features", function () {
-            const source = vectorBase.createLayerSource({});
-
-            expect(source).toBeInstanceOf(VectorSource);
-        });
-        it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
-            vectorBase.createLayerSource({renderer: "webgl"});
-
-            expect(webgl.afterLoading).toHaveBeenCalled();
-        });
-    });
-
-    describe("createLayer", function () {
-        const attr = {
-            name: "Albus Percival Wulfric Brian Dumbledore",
-            typ: "VectorBase",
-            gfiAttributes: "ignore",
-            id: "Rawenclaw_01"
-        };
-
-        it("creates a vector Base Layer", function () {
-            const layer = vectorBase.createLayer(attr);
-
-            expect(layer).toBeInstanceOf(VectorLayer);
-            expect(layer.get("name")).toEqual("Albus Percival Wulfric Brian Dumbledore");
-            expect(layer.get("typ")).toEqual("VectorBase");
-            expect(layer.get("id")).toEqual("Rawenclaw_01");
-        });
-        it("creates a WebGLLayer, with param renderer \"webgl\"", function () {
-            const layer = vectorBase.createLayer({...attr, renderer: "webgl"});
-
-            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
-            expect(layer.getSource()).toBeInstanceOf(VectorSource);
-        });
-    });
-
-    describe("updateSource", function () {
-        it("updateSource will fetch layer again", function () {
-            const layer = vectorBase.createLayer({id: "id"}),
-                layerGetSourceMock = jest.fn(() => {
-                    return {
-                        clear: () => this,
-                        addFeatures: () => this
-                    };
-                });
-
-            layer.getSource = layerGetSourceMock;
-            vectorBase.updateSource(layer);
-            expect(layerGetSourceMock.mock.calls.length).toBe(2);
-        });
-    });
-
-});