@masterportal/masterportalapi 2.23.0 → 2.25.0

package/CHANGELOG.md

@@ -3,10 +3,57 @@
 
  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:
+    - dependencies:
+        - core-js: 3.30.2 to 3.32.0
+        - dayjs: 1.11.7 to 1.11.9
+        - olcs: 2.14.0 to 2.15.0
+        - xml2js: 0.5.0 to 0.6.2
+    - devDependencies:
+        - @babel/core: 7.21.8 to 7.22.9
+        - @babel/plugin-transform-modules-commonjs: 7.21.5 to 7.21.5
+        - @parcel/transformer-sass: 2.8.3 to 2.9.3
+        - buffer: 5.7.1 to 6.0.3
+        - eslint: 8.40.0 to 8.46.0
+        - jest: 29.5.0 to 29.6.2
+        - jest-canvas-mock: 2.5.0 to 2.5.2
+        - jest-environment-jsdom: 29.5.0 to 29.6.2
+        - parcel: 2.8.3 to 2.9.3
+        - sass: 1.62.1 to 1.64.2
+
+### Fixed
+- Changed peerDependency from cesium 1.106.0 to @cesium/engine 2.4.1.
+
+---
+
 ## 2.23.0 - 2023-08-02
 ### Added
-- VectorStyle: Add Styling rules for Geoemtries of type `Circle`.
-- Add Styling and zIndex to draw interactions and improve the draw behavior.
 - Add select and modify interactions for editing ol features.
 
 ### Fixed
@@ -15,8 +62,15 @@
 ---
 
 ## 2.22.0 - 2023-07-25
+### Changed
+- Replace derprecated cesium tileset and terrain loading functions.
+- WFST Refactoring
+
+---
+
+## 2.21.0 - 2023-07-21
 ### Added
-- VectorStyle: Add Styling rules for Geoemtries of type `Circle`.
+- VectorStyle: Add Styling rules for Geometries of type `Circle`.
 - Add Styling and zIndex to draw interactions and improve the draw behavior.
 
 ### Changed
@@ -24,9 +78,6 @@
 - 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.

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",
@@ -77,6 +83,6 @@
       }
     }
   ],
-  "cesiumLib":"https://geoportal-hamburg.de/mastercode/cesium/1_99/Cesium.js",
+  "cesiumLib":"https://geoportal-hamburg.de/mastercode/cesium/latest/Cesium.js",
   "wfsImgPath": "https://geodienste.hamburg.de/lgv-config/img/"
 }

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/example/index.js

@@ -249,7 +249,7 @@ document.getElementById("enable").addEventListener("click", function () {
         document.getElementById("layer-visibility").style.display = "none";
     }
     else {
-        const lib = portalConfig.cesiumLib ? portalConfig.cesiumLib : "https://geoportal-hamburg.de/mastercode/cesium/1_99/index.js";
+        const lib = portalConfig.cesiumLib ? portalConfig.cesiumLib : "https://geoportal-hamburg.de/mastercode/cesium/latest/index.js";
 
         document.getElementById("layer-visibility").style.display = "block";
 

package/jest.config.js

@@ -1,5 +1,8 @@
 /* eslint-env node */
 module.exports = {
+    "transform": {
+        "^.+\\.(t|j)sx?$": "@swc/jest"
+    },
     /** ol prints errors without HTMLCanvasElement being available in test environment */
     "setupFiles": ["jest-canvas-mock"],
     /** node_modules are usually ignored by babel-jest, but ol is published in ES6 */

package/package.json

@@ -1,65 +1,66 @@
-{
-  "name": "@masterportal/masterportalapi",
-  "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.23.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.30.2",
-    "dayjs": "^1.11.7",
-    "ol": "7.4.0",
-    "olcs": "^2.14.0",
-    "proj4": "^2.9.0",
-    "xml2js": "^0.5.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/plugin-transform-modules-commonjs": "^7.21.5",
-    "@parcel/transformer-sass": "^2.8.3",
-    "buffer": "^5.7.1",
-    "canvas": "^2.11.2",
-    "eslint": "^8.40.0",
-    "events": "^3.3.0",
-    "husky": "^8.0.3",
-    "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",
-    "sass": "^1.62.1",
-    "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/terrain.js

@@ -5,14 +5,15 @@
  * @param {string} [rawLayer.cesiumTerrainProviderOptions] - see https://cesiumjs.org/Cesium/Build/Documentation/CesiumTerrainProvider.html
  * @returns {void}
  */
-function createTerrainProvider (rawLayer) {
-    const options = {};
+async function createTerrainProvider (rawLayer) {
+    const options = {},
+        terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(rawLayer.url, options);
 
     if (rawLayer.cesiumTerrainProviderOptions) {
         Object.assign(options, rawLayer.cesiumTerrainProviderOptions);
     }
-    options.url = rawLayer.url;
-    return new Cesium.CesiumTerrainProvider(options);
+
+    return terrainProvider;
 }
 
 /**
@@ -24,10 +25,10 @@ function createTerrainProvider (rawLayer) {
  * @param {OLCesium} map ol cesium map
  * @returns {void}
  */
-export function setVisible (value, rawLayer, map) {
+async function setVisible (value, rawLayer, map) {
     if (map && typeof map.getCesiumScene === "function") {
         if (value) {
-            map.getCesiumScene().terrainProvider = createTerrainProvider(rawLayer);
+            map.getCesiumScene().terrainProvider = await createTerrainProvider(rawLayer);
         }
         else {
             map.getCesiumScene().terrainProvider = new Cesium.EllipsoidTerrainProvider({});
@@ -63,3 +64,4 @@ export function get (key) {
     return this.values[key];
 }
 
+module.exports.setVisible = setVisible;

package/src/layer/tileset.js

@@ -9,11 +9,12 @@ function createTileSet (rawLayer) {
     const url = rawLayer.url.split("?")[0] + "/tileset.json",
         options = {};
 
+
     if (rawLayer.cesium3DTilesetOptions) {
         Object.assign(options, rawLayer.cesium3DTilesetOptions);
     }
-    options.url = url;
-    return new Cesium.Cesium3DTileset(options);
+
+    return Promise.resolve(Cesium.Cesium3DTileset.fromUrl(url, options)); 
 }
 
 /**
@@ -24,6 +25,7 @@ function createTileSet (rawLayer) {
  * @param {string} [rawLayer.cesiumTerrainProviderOptions] - see https://cesiumjs.org/Cesium/Build/Documentation/CesiumTerrainProvider.html
  * @returns {void}
  */
+
 export default function Tileset (rawLayer) {
     this.values = {
         name: rawLayer.name,
@@ -31,8 +33,13 @@ export default function Tileset (rawLayer) {
         typ: rawLayer.typ
     };
     if (Cesium) {
-        this.tileset = createTileSet(rawLayer);
-        this.tileset.layerReferenceId = rawLayer.id;
+        this.tileset = Promise.resolve(createTileSet(rawLayer));
+        this.tileset.then(function (tileset) {
+            if (tileset) {
+                tileset.layerReferenceId = rawLayer.id;
+            }
+        });
+
     }
 }
 
@@ -69,7 +76,9 @@ Tileset.prototype.setVisible = function (value, map) {
     if (map && typeof map.getCesiumScene === "function") {
         if (value) {
             if (!map.getCesiumScene().primitives.contains(this.tileset)) {
-                map.getCesiumScene().primitives.add(this.tileset);
+                this.tileset.then(function (tileset) {
+                    map.getCesiumScene().primitives.add(tileset);
+                });
             }
             this.tileset.show = true;
         }

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/interactions/drawInteraction.js

@@ -38,6 +38,26 @@ let styleObject = null,
     styleObjectOuterCircle = null,
     zIndex = 0;
 
+/**
+ * Converts a value from one unit to another.
+ * @param {Number} value The value to convert.
+ * @param {String} sourceUnit The source unit.
+ * @param {String} targetUnit The target unit.
+ * @returns {Number} The converted value.
+ */
+function convertUnits (value, sourceUnit, targetUnit) {
+    if (sourceUnit === targetUnit) {
+        return value;
+    }
+    else if (sourceUnit === "m" && targetUnit === "km") {
+        return value / 1000;
+    }
+    else if (sourceUnit === "km" && targetUnit === "m") {
+        return value * 1000;
+    }
+    return value;
+}
+
 /**
  * Transform the radius to map projection unit.
  * @param {Number} radius The radius.
@@ -70,8 +90,10 @@ function transformMapUnitRadius (radius, mapProjection) {
  */
 function drawOuterCircle (feature, mapProjection, source, options = {}) {
     const innerCircleFeature = feature.clone(),
-        mapUnitInnerRadius = transformMapUnitRadius(options.innerRadius, mapProjection),
-        mapUnitOuterRadius = transformMapUnitRadius(options.outerRadius, mapProjection),
+        innerRadius = convertUnits(options.innerRadius, options.unit, "m"),
+        outerRadius = convertUnits(options.outerRadius, options.unit, "m"),
+        mapUnitInnerRadius = transformMapUnitRadius(innerRadius, mapProjection),
+        mapUnitOuterRadius = transformMapUnitRadius(outerRadius, mapProjection),
         innerStyle = createStyle.createStyle(styleObject, innerCircleFeature, false),
         outerStyle = createStyle.createStyle(styleObjectOuterCircle, feature, false);
 
@@ -95,7 +117,8 @@ function drawOuterCircle (feature, mapProjection, source, options = {}) {
  * @returns {void}
  */
 function drawInnerCircle (feature, mapProjection, options = {}) {
-    const mapUnitInnerRadius = transformMapUnitRadius(options.innerRadius, mapProjection);
+    const innerRadius = convertUnits(options.innerRadius, options.unit, "m"),
+        mapUnitInnerRadius = transformMapUnitRadius(innerRadius, mapProjection);
 
     feature.getGeometry().setRadius(mapUnitInnerRadius);
 }
@@ -205,6 +228,7 @@ function createDrawInteraction (drawType, source) {
 export {styleObject};
 
 export default {
+    convertUnits,
     createDrawInteraction,
     drawCircle,
     drawInnerCircle,

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
     },