@vcmap/core 5.0.0-rc.9 → 5.0.1

package/src/style/{vectorStyleItem.js → vectorStyleItem.ts}

@@ -1,205 +1,158 @@
-/* eslint-disable no-template-curly-in-string */
-import Stroke from 'ol/style/Stroke.js';
-import { Color, VerticalOrigin } from '@vcmap/cesium';
-import Icon from 'ol/style/Icon.js';
-import Style from 'ol/style/Style.js';
+/* eslint-disable no-template-curly-in-string,@typescript-eslint/ban-ts-comment */
+import Stroke, { Options as StrokeOptions } from 'ol/style/Stroke.js';
+import { Color, VerticalOrigin } from '@vcmap-cesium/engine';
+import Icon, { type Options as IconOptions } from 'ol/style/Icon.js';
+import Style, { type StyleFunction } from 'ol/style/Style.js';
 import OLText from 'ol/style/Text.js';
 import OLImage from 'ol/style/Image.js';
-import Fill from 'ol/style/Fill.js';
+import type { Size } from 'ol/size.js';
+import Fill, { type Options as FillOptions } from 'ol/style/Fill.js';
 import Circle from 'ol/style/Circle.js';
 import RegularShape from 'ol/style/RegularShape.js';
+import { Color as OLColor } from 'ol/color.js';
+import { ColorLike as OLColorLike } from 'ol/colorlike.js';
+import type { Feature } from 'ol/index.js';
 
 import { check, checkMaybe } from '@vcsuite/check';
-import StyleItem from './styleItem.js';
+import StyleItem, { StyleItemOptions } from './styleItem.js';
 import {
   parseColor,
   PatternType,
   createPattern,
-  getFillOptions,
   getStrokeOptions,
   getTextOptions,
   getTextFromOptions,
   getStringColor,
   getDefaultCondition,
   getDefaultVectorStyleItemOptions,
+  type FontObject,
+  olColorToCesiumColor,
+  getStrokeFromOptions,
+  getImageStyleOptions,
 } from './styleHelpers.js';
 import { getShapeFromOptions } from './shapesCategory.js';
 import { styleClassRegistry } from '../classRegistry.js';
 
-/**
- * @typedef {Object} VectorStyleItemPattern
- * @property {PatternType} type
- * @property {import("ol/color").Color|import("ol/colorlike").ColorLike} color
- * @property {number} width
- * @property {number} size
- * @api
- */
+export type ColorType = OLColor | OLColorLike;
+export type VectorStyleItemPattern = {
+  type: PatternType;
+  color: ColorType;
+  width: number;
+  size: number;
+};
 
-/**
- * @typedef {Object} VectorStyleItemFill
- * @property {import("ol/color").Color|import("ol/colorlike").ColorLike} color
- * @property {VectorStyleItemPattern|undefined} pattern
- * @api
- */
+export type VectorStyleItemFill = {
+  color: ColorType;
+  pattern?: VectorStyleItemPattern;
+};
 
-/**
- * This is either <b>olx.style.IconOptions</b> or <b>olx.style.CircleOptions</b>
- * @typedef {Object} VectorStyleItemImage
- * @property {string|undefined} src
- * @property {number|import("ol/size").Size|undefined} scale
- * @property {number|undefined} opacity
- * @property {import("ol/color").Color|import("ol/colorlike").ColorLike|undefined} color
- * @property {import("ol/style/Fill").Options|import("ol/style/Fill").default|undefined} fill
- * @property {import("ol/style/Stroke").Options|import("ol/style/Stroke").default|undefined} stroke
- * @property {number|undefined} radius
- * @property {number|undefined} points
- * @property {number|undefined} angle
- * @property {Array<number>|undefined} anchor
- * @property {VectorStyleItemImage|undefined} circle - vcs:undocumented legacy
- * @property {VectorStyleItemImage|undefined} icon - vcs:undocumented legacy
- * @property {string|undefined} currentImage - vcs:undocumented styleEditor
- * @api
- */
+export type VectorStyleItemImage = {
+  src?: string;
+  scale?: number | Size;
+  opacity?: number;
+  color?: ColorType;
+  fill?: FillOptions | Fill;
+  stroke?: StrokeOptions | Stroke;
+  radius?: number;
+  points?: number;
+  angle?: number;
+  anchor?: number[];
+  circle?: VectorStyleItemImage;
+  icon?: VectorStyleItemImage;
+  currentImage?: string;
+};
 
-/**
- * @typedef {Object} VectorStyleItemText
- * @property {string|undefined} text
- * @property {string|FontObject|undefined} font
- * @property {import("ol/style/Fill").Options|import("ol/style/Fill").default|undefined} fill
- * @property {import("ol/style/Stroke").Options|import("ol/style/Stroke").default|undefined} stroke
- * @property {string|undefined} textBaseline
- * @property {number|undefined} offsetX
- * @property {number|undefined} offsetY
- * @api
- */
+export type VectorStyleItemText = {
+  text?: string | string[];
+  font?: string | FontObject;
+  fill?: FillOptions | Fill;
+  stroke?: StrokeOptions | Stroke;
+  textBaseline?: string;
+  offsetX?: number;
+  offsetY?: number;
+};
 
-/**
- * @typedef {Object} VectorStyleItemExclusion
- * @property {boolean} fill
- * @property {boolean} stroke
- * @property {boolean} image
- * @api
- */
+export type VectorStyleItemExclusion = {
+  fill: boolean;
+  stroke: boolean;
+  image: boolean;
+};
 
-/**
- * @typedef {StyleItemSections} VectorStyleItemSections
- * @property {boolean|undefined} fill
- * @property {boolean|undefined} stroke
- * @property {boolean|undefined} text
- * @property {boolean|undefined} image
- * @property {boolean|undefined} label
- * @api
- */
+export enum OlcsGeometryType {
+  POLYGON = 1,
+  POLYLINE = 2,
+  POINT = 3,
+}
 
-/**
- * @enum {number}
- * @property {number} POLYGON
- * @property {number} POLYLINE
- * @property {number} POINT
- */
-export const OlcsGeometryType = {
-  POLYGON: 1,
-  POLYLINE: 2,
-  POINT: 3,
+export type VectorStyleItemOptions = StyleItemOptions & {
+  fill?: VectorStyleItemFill | false;
+  stroke?: StrokeOptions | false;
+  image?: VectorStyleItemImage | false;
+  text?: VectorStyleItemText;
+  label?: string;
 };
 
-/**
- * @typedef {StyleItemOptions} VectorStyleItemOptions
- * @property {VectorStyleItemFill|false|undefined} fill
- * @property {import("ol/style/Stroke").Options|false|undefined} stroke
- * @property {VectorStyleItemImage|false|undefined} image
- * @property {VectorStyleItemText|undefined} text
- * @property {string|undefined} label
- * @api
- */
-
 /**
  * Is set on a feature and is used to signal that the feature has a specific vectorStyleItem.
  * Is set by the Editor if the layerStyle is overwritten. The VectorLayer layer assures this style is set, if
  * the style on the layer is not a DeclarativeStyle
- * @type {symbol}
- * @export
  */
-export const vectorStyleSymbol = Symbol('VcsVectorStyleItem');
+export const vectorStyleSymbol: unique symbol = Symbol('VcsVectorStyleItem');
 
 /**
- * @class
- * @extends {StyleItem}
- * @export
- * @api
+ * @group Style
  */
 class VectorStyleItem extends StyleItem {
-  static get className() { return 'VectorStyleItem'; }
+  static get className(): string {
+    return 'VectorStyleItem';
+  }
 
-  /**
-   * @param {VectorStyleItemOptions} options
-   */
-  constructor(options) {
+  exclude: VectorStyleItemExclusion;
+
+  private _fillOptions: VectorStyleItemFill | null;
+
+  private _fill: Fill | undefined;
+
+  private _stroke: Stroke | undefined;
+
+  private _text: OLText | undefined;
+
+  private _label: string | undefined;
+
+  private _cesiumColor: Color;
+
+  private _image: OLImage | undefined;
+
+  constructor(options: VectorStyleItemOptions) {
     super(options);
 
     this.validateOptions(options);
-    /**
-     * @type {VectorStyleItemExclusion}
-     * @api
-     */
     this.exclude = {
       fill: options.fill === false,
       stroke: options.stroke === false,
       image: options.image === false,
     };
-    /**
-     * @type {VectorStyleItemFill|null}
-     * @private
-     */
     this._fillOptions = null;
-    /**
-     * @type {import("ol/style/Fill").default|undefined}
-     * @private
-     */
     this._fill = undefined;
 
-    /**
-     * @type {import("ol/style/Stroke").default|undefined}
-     * @private
-     */
-    this._stroke = options.stroke ? new Stroke(options.stroke) : undefined;
-
-    /**
-     * @type {import("ol/style/Text").default|undefined}
-     * @private
-     */
+    this._stroke = options.stroke
+      ? getStrokeFromOptions(options.stroke)
+      : undefined;
     this._text = undefined;
     if (options.text) {
       this._text = getTextFromOptions(options.text);
     }
-
-    /**
-     * @type {string|undefined}
-     * @private
-     */
     this._label = options.label;
     this.label = this._label;
 
-    /**
-     * @type {import("@vcmap/cesium").Color}
-     * @private
-     */
     this._cesiumColor = new Color();
-
-    /**
-     * @type {import("ol/style/Icon").default|import("ol/style/RegularShape").default|undefined}
-     * @private
-     */
     this._image = undefined;
     if (options.image) {
-      this._image = options.image.radius ?
-        getShapeFromOptions({ ...options.image }) :
-        new Icon(/** @type {import("ol/style/Icon").Options} */ (options.image));
+      this._image = options.image.radius
+        ? getShapeFromOptions({ ...options.image })
+        : new Icon(options.image as IconOptions);
     }
 
-    /**
-     * @type {import("ol/style/Style").default|import("ol/style/Style").StyleFunction}
-     */
     this._style = new Style({
       image: this._image,
       stroke: this._stroke,
@@ -214,22 +167,22 @@ class VectorStyleItem extends StyleItem {
     }
   }
 
-  /**
-   * @param {VectorStyleItemOptions} options
-   */
-  validateOptions(options) {
-    const checkColor = (option) => {
+  validateOptions(options: VectorStyleItemOptions): void {
+    const checkColor = (option: { color?: ColorType | null }): void => {
       try {
-        option.color = parseColor(option.color);
+        option.color = parseColor(option.color as ColorType);
         check(option.color, [Number]);
         check(option.color.length, [3, 4]);
       } catch (e) {
-        this.getLogger().error(e.message);
-        option.color = /** @type {import("ol/color").Color} */ ([255, 255, 255, 0.4]);
+        this.getLogger().error((e as Error).message);
+        option.color = [255, 255, 255, 0.4];
       }
     };
 
-    const checkStroke = (option) => {
+    const checkStroke = (option: {
+      color?: ColorType | null;
+      width?: number;
+    }): void => {
       checkColor(option);
       if (!option.width) {
         this.getLogger().error('missing width for stroke, setting to 1.5');
@@ -241,8 +194,15 @@ class VectorStyleItem extends StyleItem {
       checkColor(options.fill);
       if (options.fill.pattern) {
         checkStroke(options.fill.pattern);
-        if (!(options.fill.pattern.type && Object.values(PatternType).includes(options.fill.pattern.type))) {
-          this.getLogger().error(`Cannot find pattern ${options.fill.pattern.type}`);
+        if (
+          !(
+            options.fill.pattern.type &&
+            Object.values(PatternType).includes(options.fill.pattern.type)
+          )
+        ) {
+          this.getLogger().error(
+            `Cannot find pattern ${options.fill.pattern.type}`,
+          );
           options.fill.pattern.type = PatternType.NWSE;
         }
       }
@@ -261,7 +221,9 @@ class VectorStyleItem extends StyleItem {
       }
 
       if (!(options.image.src || options.image.radius)) {
-        this.getLogger().error('missing source or label in style, setting default circle');
+        this.getLogger().error(
+          'missing source or label in style, setting default circle',
+        );
         options.image = {
           fill: {
             color: 'rgba(255,255,255,0.4)',
@@ -280,11 +242,11 @@ class VectorStyleItem extends StyleItem {
           this.getLogger().error('radius must be a number');
           options.image.radius = 5;
         }
-        if (options.image.fill) {
-          checkColor(options.image.fill);
+        if ((options.image.fill as FillOptions)?.color) {
+          checkColor(options.image.fill as FillOptions);
         }
-        if (options.image.stroke) {
-          checkStroke(options.image.stroke);
+        if ((options.image.stroke as StrokeOptions)?.color) {
+          checkStroke(options.image.stroke as StrokeOptions);
         }
       }
     }
@@ -293,39 +255,19 @@ class VectorStyleItem extends StyleItem {
 
   /**
    * the current fill color, not the pattern
-   * @type {import("ol/color").Color|null}
-   * @api
    */
-  get fillColor() {
-    return this._fillOptions ? /** @type {import("ol/color").Color} */ (this._fillOptions.color) : null;
+  get fillColor(): OLColor | undefined {
+    return this._fillOptions ? (this._fillOptions.color as OLColor) : undefined;
   }
 
-  /**
-   * the current fill color as a cesium color
-   * @readonly
-   * @type {import("@vcmap/cesium").Color}
-   * @api
-   */
-  get cesiumFillColor() {
-    const fillColor = this.fillColor ? this.fillColor.slice() : null;
-    if (fillColor) {
-      fillColor[3] = fillColor[3] || 1;
-      fillColor[3] *= 255; // cesium alpha range between 0 and 255
-      // @ts-ignore
-      return Color.fromBytes(...fillColor, this._cesiumColor);
-    }
-    return Color.RED.clone(this._cesiumColor); // TODO should not be red - transparent?
-  }
-
-  /**
-   * @param {(import("ol/color").Color|import("ol/colorlike").ColorLike)=} color
-   */
-  set fillColor(color) {
+  set fillColor(color: ColorType | undefined) {
     this.exclude.fill = false;
     if (this._style instanceof Style) {
       if (!color) {
         this._fillOptions = null;
         this._fill = undefined;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore // bug in ol def. you can set fill undefined
         this._style.setFill(this._fill);
         this.updateCesiumStyleColor(true);
       } else {
@@ -342,28 +284,38 @@ class VectorStyleItem extends StyleItem {
   }
 
   /**
-   * @type {VectorStyleItemPattern}
-   * @api
+   * the current fill color as a cesium color
    */
-  get pattern() {
-    return this._fillOptions && this._fillOptions.pattern ? this._fillOptions.pattern : null;
+  get cesiumFillColor(): Color | null {
+    const fillColor = this.fillColor ? this.fillColor.slice() : null;
+    if (fillColor) {
+      return olColorToCesiumColor(fillColor, this._cesiumColor);
+    }
+    return Color.RED.clone(this._cesiumColor); // TODO should not be red - transparent?
   }
 
-  /**
-   * @param {VectorStyleItemPattern} patternOptions
-   */
-  set pattern(patternOptions) {
+  get pattern(): VectorStyleItemPattern | undefined {
+    return this._fillOptions && this._fillOptions.pattern
+      ? this._fillOptions.pattern
+      : undefined;
+  }
+
+  set pattern(patternOptions: VectorStyleItemPattern | undefined) {
     if (!this._fillOptions) {
       this.getLogger().error('Missing fill color');
       return;
     }
     if (patternOptions) {
-      checkMaybe(patternOptions, {
-        color: [String, [Number]],
-        width: Number,
-        type: Number,
-        size: [Number, undefined, null],
-      }, true);
+      checkMaybe(
+        patternOptions,
+        {
+          color: [String, [Number]],
+          width: Number,
+          type: Number,
+          size: [Number, undefined, null],
+        },
+        true,
+      );
       this._fillOptions.pattern = patternOptions;
     } else {
       this._fillOptions.pattern = undefined;
@@ -371,19 +323,16 @@ class VectorStyleItem extends StyleItem {
     this._setFill();
   }
 
-  /**
-   * @type {import("ol/style/Stroke").default}
-   * @api
-   */
-  get stroke() { return this._stroke; }
+  get stroke(): Stroke | undefined {
+    return this._stroke;
+  }
 
-  /**
-   * @param {import("ol/style/Stroke").default=} stroke
-   */
-  set stroke(stroke) {
+  set stroke(stroke: Stroke | undefined) {
     this.exclude.stroke = false;
     if (this._style instanceof Style) {
       checkMaybe(stroke, Stroke);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore // bug in ol
       this._style.setStroke(stroke);
       this._stroke = stroke;
       this.updateCesiumStyleColor(true);
@@ -392,16 +341,11 @@ class VectorStyleItem extends StyleItem {
     }
   }
 
-  /**
-   * @type {string}
-   * @api
-   */
-  get label() { return this._label; }
+  get label(): string | undefined {
+    return this._label;
+  }
 
-  /**
-   * @param {string} label
-   */
-  set label(label) {
+  set label(label: string | undefined) {
     checkMaybe(label, String);
     if (!label) {
       this._label = undefined;
@@ -413,40 +357,34 @@ class VectorStyleItem extends StyleItem {
     }
   }
 
-  /**
-   * @type {import("ol/style/Text").default}
-   * @api
-   */
-  get text() { return this._text; }
+  get text(): OLText | undefined {
+    return this._text;
+  }
 
-  /**
-   * @param {import("ol/style/Text").default=} text
-   */
-  set text(text) {
+  set text(text: OLText | undefined) {
     if (this._style instanceof Style) {
       checkMaybe(text, OLText);
       this._text = text;
-      this._text.setText(this._label);
+      this._text?.setText?.(this._label);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore // bug in ol
       this._style.setText(this._text);
     } else {
       this.getLogger().info('trying to set text on a style function');
     }
   }
 
-  /**
-   * @type {(import("ol/style/Icon").default|import("ol/style/RegularShape").default)}
-   * @api
-   */
-  get image() { return this._image; }
+  get image(): OLImage | undefined {
+    return this._image;
+  }
 
-  /**
-   * @param {(import("ol/style/Icon").default|import("ol/style/RegularShape").default)=} image
-   */
-  set image(image) {
+  set image(image: OLImage | undefined) {
     this.exclude.image = false;
     if (this._style instanceof Style) {
       checkMaybe(image, OLImage);
       this._image = image;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore // bug in ol
       this._style.setImage(this._image);
       this.updateCesiumStyle();
     } else {
@@ -454,22 +392,17 @@ class VectorStyleItem extends StyleItem {
     }
   }
 
-  /**
-   * @type {import("ol/style/Style").default|import("ol/style/Style").StyleFunction}
-   * @api
-   */
-  get style() { return this._style; }
+  get style(): Style | StyleFunction {
+    return this._style;
+  }
 
-  /**
-   * @param {import("ol/style/Style").default|import("ol/style/Style").StyleFunction} style
-   */
-  set style(style) {
+  set style(style: Style | StyleFunction) {
     checkMaybe(style, [Style, Function]);
     if (style instanceof Style) {
       this._stroke = style.getStroke();
       this._fill = style.getFill();
       this._text = style.getText();
-      this._image = /** @type {import("ol/style/Icon").default|import("ol/style/Circle").default} */ (style.getImage());
+      this._image = style.getImage();
     } else {
       this._stroke = undefined;
       this._fill = undefined;
@@ -478,7 +411,9 @@ class VectorStyleItem extends StyleItem {
     }
     this._style = style;
     if (this._fill && this._fill.getColor()) {
-      this._fillOptions = { color: parseColor(this._fill.getColor()) };
+      this._fillOptions = {
+        color: parseColor(this._fill.getColor() as OLColor),
+      };
     }
     if (this._text) {
       this._text.setText(this._label);
@@ -486,14 +421,16 @@ class VectorStyleItem extends StyleItem {
     this.updateCesiumStyle();
   }
 
-  /**
-   * @private
-   */
-  _setFill() {
+  private _setFill(): void {
     if (this._style instanceof Style) {
-      const color = this._fillOptions.pattern ?
-        createPattern(this._fillOptions) :
-        this._fillOptions.color;
+      const color = this._fillOptions?.pattern
+        ? createPattern(this._fillOptions as Required<VectorStyleItemFill>)
+        : this._fillOptions?.color;
+
+      if (!color) {
+        return;
+      }
+
       if (this._fill) {
         this._fill.setColor(color);
       } else {
@@ -501,38 +438,38 @@ class VectorStyleItem extends StyleItem {
         this._style.setFill(this._fill);
       }
 
-      if (this._fillOptions.pattern) {
+      if (this._fillOptions?.pattern) {
         this._fill.fallBackColor = this._fillOptions.color;
       }
       this.updateCesiumStyle();
     }
   }
 
-  updateCesiumStyle() {
+  updateCesiumStyle(): void {
     this.updateCesiumStyleColor(true);
     this.updateCesiumStyleImage(true);
     this.updateCesiumStyleText(true);
     this._styleChanged();
   }
 
-  /**
-   *
-   * @param {boolean} silent
-   */
-  updateCesiumStyleColor(silent) {
+  updateCesiumStyleColor(silent: boolean): void {
     const colorConditions = getDefaultCondition('olcs_color', true);
     if (this.stroke && this.stroke.getColor()) {
-      colorConditions.splice(1, 0, [`\${olcs_geometryType}===${OlcsGeometryType.POLYLINE}`, getStringColor(this.stroke.getColor())]);
+      colorConditions.splice(1, 0, [
+        `\${olcs_geometryType}===${OlcsGeometryType.POLYLINE}`,
+        getStringColor(this.stroke.getColor()),
+      ]);
     }
     if (this._image instanceof Circle && this._image.getFill()) {
-      colorConditions.splice(
-        1, 0,
-        [`\${olcs_geometryType}===${OlcsGeometryType.POINT}`, getStringColor(this._image.getFill().getColor())],
-      );
+      colorConditions.splice(1, 0, [
+        `\${olcs_geometryType}===${OlcsGeometryType.POINT}`,
+        getStringColor(this._image.getFill().getColor() as OLColor),
+      ]);
     }
     if (this.fillColor) {
       colorConditions.splice(-1, 1, ['true', getStringColor(this.fillColor)]);
     }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     this.cesiumStyle.color = { conditions: colorConditions };
 
@@ -541,7 +478,7 @@ class VectorStyleItem extends StyleItem {
     }
   }
 
-  updateCesiumStyleImage(silent) {
+  updateCesiumStyleImage(silent: boolean): void {
     /* this.cesiumStyle.show = {
       conditions: [
         ['${olcs_color}===false', false],
@@ -549,8 +486,12 @@ class VectorStyleItem extends StyleItem {
       ],
     } */
     const scaleConditions = getDefaultCondition('olcs_scale');
-    const pointOutlineWidthConditions = getDefaultCondition('olcs_outlineWidth');
-    const pointOutlineColorConditions = getDefaultCondition('olcs_outlineColor', true);
+    const pointOutlineWidthConditions =
+      getDefaultCondition('olcs_outlineWidth');
+    const pointOutlineColorConditions = getDefaultCondition(
+      'olcs_outlineColor',
+      true,
+    );
     const pointSizeConditions = getDefaultCondition('olcs_pointSize');
     const imageConditions = getDefaultCondition('olcs_image');
     /* commented out, because we simulate the anchorline via a line in the tileset, TODO Evaluate again
@@ -566,25 +507,34 @@ class VectorStyleItem extends StyleItem {
     */
     if (this._image) {
       if (this._image.getScale() != null) {
-        scaleConditions.splice(1, 1, ['true', `${this._image.getScale()}`]);
+        scaleConditions.splice(1, 1, [
+          'true',
+          `${String(this._image.getScale())}`,
+        ]);
       }
       if (this._image instanceof Circle) {
         const stroke = this._image.getStroke();
         let size = this._image.getRadius() * 2;
         if (stroke) {
           if (this._image.getStroke().getColor()) {
-            pointOutlineColorConditions.splice(1, 1, ['true', getStringColor(this._image.getStroke().getColor())]);
+            pointOutlineColorConditions.splice(1, 1, [
+              'true',
+              getStringColor(this._image.getStroke().getColor()),
+            ]);
           }
-          const width = this._image.getStroke().getWidth();
+          const width = this._image.getStroke().getWidth() as number;
           pointOutlineWidthConditions.splice(1, 1, ['true', `${width}`]);
           size -= width;
         }
         pointSizeConditions.splice(1, 1, ['true', `${size}`]);
       } else if (this._image instanceof RegularShape) {
-        const dataUrl = /** @type {HTMLCanvasElement} */ (this._image.getImage(1)).toDataURL();
+        const dataUrl = this._image.getImage(1).toDataURL();
         imageConditions.splice(1, 1, ['true', `"${dataUrl}"`]);
       } else if (this._image instanceof Icon) {
-        imageConditions.splice(1, 1, ['true', `"${this._image.getSrc()}"`]);
+        imageConditions.splice(1, 1, [
+          'true',
+          `"${String(this._image.getSrc())}"`,
+        ]);
       }
     }
     /*
@@ -594,10 +544,14 @@ class VectorStyleItem extends StyleItem {
     */
     // @ts-ignore
     this.cesiumStyle.scale = { conditions: scaleConditions };
-    // @ts-ignore
-    this.cesiumStyle.pointOutlineWidth = { conditions: pointOutlineWidthConditions };
-    // @ts-ignore
-    this.cesiumStyle.pointOutlineColor = { conditions: pointOutlineColorConditions };
+    this.cesiumStyle.pointOutlineWidth = {
+      // @ts-ignore
+      conditions: pointOutlineWidthConditions,
+    };
+    this.cesiumStyle.pointOutlineColor = {
+      // @ts-ignore
+      conditions: pointOutlineColorConditions,
+    };
     // @ts-ignore
     this.cesiumStyle.pointSize = { conditions: pointSizeConditions };
     // @ts-ignore
@@ -619,27 +573,47 @@ class VectorStyleItem extends StyleItem {
     }
   }
 
-  updateCesiumStyleText(silent) {
+  updateCesiumStyleText(silent: boolean): void {
     const fontConditions = getDefaultCondition('olcs_font');
     const labelTextConditions = getDefaultCondition('olcs_labelText');
     const labelColorConditions = getDefaultCondition('olcs_fontColor', true);
-    const labelOutlineWidthConditions = getDefaultCondition('olcs_fontOutlineWidth');
-    const labelOutlineColorConditions = getDefaultCondition('olcs_fontOutlineColor', true);
+    const labelOutlineWidthConditions = getDefaultCondition(
+      'olcs_fontOutlineWidth',
+    );
+    const labelOutlineColorConditions = getDefaultCondition(
+      'olcs_fontOutlineColor',
+      true,
+    );
 
     if (this._text) {
       if (this._text.getFont()) {
-        fontConditions.splice(1, 1, ['true', `'${this._text.getFont()}'`]);
+        fontConditions.splice(1, 1, [
+          'true',
+          `'${String(this._text.getFont())}'`,
+        ]);
       }
       if (this._text.getText()) {
-        labelTextConditions.splice(1, 1, ['true', `'${this._text.getText()}'`]);
+        labelTextConditions.splice(1, 1, [
+          'true',
+          `'${String(this._text.getText())}'`,
+        ]);
       }
       if (this._text.getFill() && this._text.getFill().getColor()) {
-        labelColorConditions.splice(1, 1, ['true', getStringColor(this._text.getFill().getColor())]);
+        labelColorConditions.splice(1, 1, [
+          'true',
+          getStringColor(this._text.getFill().getColor() as OLColor),
+        ]);
       }
 
       if (this._text.getStroke() && this._text.getStroke().getColor()) {
-        labelOutlineColorConditions.splice(1, 1, ['true', getStringColor(this._text.getStroke().getColor())]);
-        labelOutlineWidthConditions.splice(1, 1, ['true', `${this._text.getStroke().getWidth() || 1.25}`]);
+        labelOutlineColorConditions.splice(1, 1, [
+          'true',
+          getStringColor(this._text.getStroke().getColor()),
+        ]);
+        labelOutlineWidthConditions.splice(1, 1, [
+          'true',
+          `${this._text.getStroke().getWidth() || 1.25}`,
+        ]);
       }
     }
 
@@ -650,12 +624,17 @@ class VectorStyleItem extends StyleItem {
     // @ts-ignore
     this.cesiumStyle.labelColor = { conditions: labelColorConditions };
 
+    this.cesiumStyle.labelOutlineWidth = {
+      // @ts-ignore
+      conditions: labelOutlineWidthConditions,
+    };
+    this.cesiumStyle.labelOutlineColor = {
+      // @ts-ignore
+      conditions: labelOutlineColorConditions,
+    };
     // @ts-ignore
-    this.cesiumStyle.labelOutlineWidth = { conditions: labelOutlineWidthConditions };
-    // @ts-ignore
-    this.cesiumStyle.labelOutlineColor = { conditions: labelOutlineColorConditions };
-    // @ts-ignore
-    this.cesiumStyle.labelStyle = 'Boolean(${olcs_fontOutlineWidth}) === true ? 2 : 0';
+    this.cesiumStyle.labelStyle =
+      'Boolean(${olcs_fontOutlineWidth}) === true ? 2 : 0';
     // @ts-ignore
     this.cesiumStyle.labelHorizontalOrigin = '0';
 
@@ -689,24 +668,20 @@ class VectorStyleItem extends StyleItem {
     }
   }
 
-  /**
-   * @param {VectorStyleItem=} result
-   * @returns {VectorStyleItem}
-   * @api
-   */
-  clone(result) {
+  clone(result?: VectorStyleItem): VectorStyleItem {
     if (result) {
-      result.style = this._style instanceof Style ? this._style.clone() : this._style;
+      result.style =
+        this._style instanceof Style ? this._style.clone() : this._style;
       if (this._fillOptions && this._fillOptions.color) {
-        result.fillColor = /** @type {import("ol/color").Color} */ (this._fillOptions.color).slice();
+        result.fillColor = (this._fillOptions.color as OLColor).slice();
         if (this._fillOptions.pattern) {
           result.pattern = { ...this._fillOptions.pattern };
         }
       }
 
       Object.keys(this.exclude).forEach((section) => {
-        if (this.exclude[section]) {
-          result.unset(section);
+        if (this.exclude[section as keyof VectorStyleItemExclusion]) {
+          result.unset(section as keyof VectorStyleItemExclusion);
         }
       });
       return result;
@@ -716,12 +691,7 @@ class VectorStyleItem extends StyleItem {
     return new VectorStyleItem(config);
   }
 
-  /**
-   * @param {VectorStyleItem} result
-   * @returns {VectorStyleItem}
-   * @api
-   */
-  assign(result) {
+  assign(result: VectorStyleItem): VectorStyleItem {
     super.assign(result);
     if (result.fillColor) {
       this.fillColor = result.fillColor.slice();
@@ -750,24 +720,20 @@ class VectorStyleItem extends StyleItem {
     }
 
     Object.keys(result.exclude).forEach((section) => {
-      if (result.exclude[section]) {
-        this.unset(section);
+      if (result.exclude[section as keyof VectorStyleItemExclusion]) {
+        this.unset(section as keyof VectorStyleItemExclusion);
       }
     });
 
     return this;
   }
 
-  /**
-   * @returns {VectorStyleItemOptions}
-   * @api
-   */
-  toJSON() {
+  toJSON(): VectorStyleItemOptions {
     // TODO clean default, only copy relevant keys
-    const options = /** @type {VectorStyleItemOptions} */ (super.toJSON());
+    const options: VectorStyleItemOptions = super.toJSON();
     if (this._fillOptions) {
       options.fill = {
-        color: /** @type {import("ol/color").Color} */ (parseColor(this._fillOptions.color).slice()),
+        color: parseColor(this._fillOptions.color).slice(),
       };
       if (this._fillOptions.pattern) {
         options.fill.pattern = { ...this._fillOptions.pattern };
@@ -790,28 +756,11 @@ class VectorStyleItem extends StyleItem {
       options.label = this._label;
     }
 
-    if (this._image instanceof Icon) {
-      options.image = {
-        src: this._image.getSrc(), // XXX this is an issue... we dont want a data URI in the geoJSON
-        scale: this._image.getScale(),
-        opacity: this._image.getOpacity(),
-      };
-    } else if (this._image instanceof Circle) {
-      options.image = {
-        scale: this._image.getScale(),
-        fill: getFillOptions(this._image),
-        radius: this._image.getRadius(),
-        stroke: this._image.getStroke() ? getStrokeOptions(this._image.getStroke()) : undefined,
-      };
-    } else if (this._image instanceof RegularShape) {
-      options.image = {
-        scale: this._image.getScale(),
-        fill: getFillOptions(this._image),
-        points: this._image.getPoints(),
-        angle: this._image.getAngle(),
-        radius: this._image.getRadius(),
-        stroke: this._image.getStroke() ? getStrokeOptions(this._image.getStroke()) : undefined,
-      };
+    const imageOptions = this._image
+      ? getImageStyleOptions(this._image)
+      : undefined;
+    if (imageOptions) {
+      options.image = imageOptions;
     } else if (this.exclude.image) {
       options.image = false;
     }
@@ -819,18 +768,13 @@ class VectorStyleItem extends StyleItem {
     return options;
   }
 
-  /**
-   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
-   * @returns {VectorStyleItemOptions}
-   */
-  getOptionsForFeature(feature) {
-    const type = feature.getGeometry().getType();
-    const extrusion = feature.get('olcs_extrudedHeight') ||
-      (feature.get('olcs_storeyHeight') && feature.get('olcs_storeyNumber'));
-    const sections = new Set();
+  getOptionsForFeature(feature: Feature): VectorStyleItemOptions {
+    const type = feature.getGeometry()?.getType();
+    const extrusion = !!feature.get('olcs_extrudedHeight');
+    const sections: Set<keyof VectorStyleItemOptions> = new Set();
 
     if (type === 'Point' || type === 'MultiPoint') {
-      if (feature[vectorStyleSymbol].label != null) {
+      if (feature[vectorStyleSymbol]?.label != null) {
         sections.add('text');
         sections.add('label');
       }
@@ -844,7 +788,11 @@ class VectorStyleItem extends StyleItem {
       if (extrusion) {
         sections.add('fill');
       }
-    } else if (type === 'Polygon' || type === 'MultiPolygon' || type === 'Circle') {
+    } else if (
+      type === 'Polygon' ||
+      type === 'MultiPolygon' ||
+      type === 'Circle'
+    ) {
       sections.add('stroke');
       sections.add('fill');
     } else if (type === 'GeometryCollection') {
@@ -854,8 +802,9 @@ class VectorStyleItem extends StyleItem {
       sections.add('text');
     }
     const config = this.toJSON();
-    const options = {};
+    const options: VectorStyleItemOptions = {};
     sections.forEach((key) => {
+      // @ts-ignore
       options[key] = config[key];
     });
     return options;
@@ -864,10 +813,9 @@ class VectorStyleItem extends StyleItem {
   /**
    * Exclude a section from this style. Excluded section are not returned and cannot be assigned via .assign.
    * Setting the section over a property will remove it from the excluded sections.
-   * @param {string} section - one of fill, stroke, image
-   * @api
+   * @param  section - one of fill, stroke, image
    */
-  unset(section) {
+  unset(section: keyof VectorStyleItemExclusion): void {
     check(section, Object.keys(this.exclude));
     if (section === 'fill') {
       this.fillColor = undefined;
@@ -877,43 +825,32 @@ class VectorStyleItem extends StyleItem {
     this.exclude[section] = true;
   }
 
-  /**
-   * @inheritDoc
-   */
-  destroy() {
-    this._image = null;
-    this._stroke = null;
-    this._fill = null;
-    this._label = null;
-    this._text = null;
-    this._style = null;
+  destroy(): void {
+    this._image = undefined;
+    this._stroke = undefined;
+    this._fill = undefined;
+    this._label = undefined;
+    this._text = undefined;
+    this._style = (): void => {};
     super.destroy();
   }
 }
 
 export default VectorStyleItem;
 
-/**
- * @type {VectorStyleItem}
- * @export
- */
-export const defaultVectorStyle = new VectorStyleItem(getDefaultVectorStyleItemOptions());
+export const defaultVectorStyle = new VectorStyleItem(
+  getDefaultVectorStyleItemOptions(),
+);
 styleClassRegistry.registerClass(VectorStyleItem.className, VectorStyleItem);
 
-/**
- * @param {import("@vcmap/cesium").Color} cesiumColor
- * @returns {VectorStyleItem}
- * @export
- */
-export function fromCesiumColor(cesiumColor) {
-  const color = /** @type {import("ol/color").Color} */ (cesiumColor.toBytes());
+export function fromCesiumColor(cesiumColor: Color): VectorStyleItem {
+  const color = cesiumColor.toBytes();
   color[3] /= 255;
   return new VectorStyleItem({
     fill: { color },
     stroke: {
       color,
-      width: defaultVectorStyle.stroke.getWidth(),
+      width: defaultVectorStyle.stroke?.getWidth() as number,
     },
   });
 }
-