@vcmap/core 5.0.0-rc.37 → 5.0.0-rc.38

package/src/interaction/featureProviderInteraction.ts

@@ -22,14 +22,16 @@ class FeatureProviderInteraction extends AbstractInteraction {
   // eslint-disable-next-line class-methods-use-this
   async pipe(event: InteractionEvent): Promise<InteractionEvent> {
     if (!event.feature) {
-      const layersWithProvider = [...event.map.layerCollection].filter((l) => {
-        return (
-          l.featureProvider &&
-          l.active &&
-          l.isSupported(event.map) &&
-          l.featureProvider.isSupported(event.map)
-        );
-      });
+      const layersWithProvider = [...event.map.layerCollection]
+        .filter((l) => {
+          return (
+            l.featureProvider &&
+            l.active &&
+            l.isSupported(event.map) &&
+            l.featureProvider.isSupported(event.map)
+          );
+        })
+        .reverse();
 
       if (layersWithProvider.length > 0) {
         const resolution = event.map.getCurrentResolution(

package/src/layer/cesium/cesiumTilesetCesiumImpl.ts

@@ -16,6 +16,9 @@ import type { Coordinate } from 'ol/coordinate.js';
 import LayerImplementation from '../layerImplementation.js';
 import { vcsLayerName } from '../layerSymbols.js';
 import FeatureVisibility, {
+  hideFeature,
+  HighlightableFeature,
+  highlightFeature,
   originalStyle,
   updateOriginalStyle,
 } from '../featureVisibility.js';
@@ -34,6 +37,10 @@ export const cesiumTilesetLastUpdated: unique symbol = Symbol(
   'cesiumTilesetLastUpdated',
 );
 
+export const updateFeatureOverride: unique symbol = Symbol(
+  'updateFeatureOverride',
+);
+
 export function getExtentFromTileset(
   cesium3DTileset?: Cesium3DTileset,
 ): OLExtent {
@@ -120,11 +127,15 @@ class CesiumTilesetCesiumImpl
 
   async initialize(): Promise<void> {
     if (!this._initializedPromise) {
-      this._initializedPromise = Cesium3DTileset.fromUrl(
-        this.url as string,
-        this.tilesetOptions,
-      );
+      this._initializedPromise = Cesium3DTileset.fromUrl(this.url as string, {
+        ...this.tilesetOptions,
+        show: false, // show is handled by activate
+      });
       this.cesium3DTileset = await this._initializedPromise;
+      if (this.isDestroyed) {
+        this.cesium3DTileset.destroy();
+        return;
+      }
       if (this.tilesetProperties) {
         this.tilesetProperties.forEach(({ key, value }) => {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -138,6 +149,8 @@ class CesiumTilesetCesiumImpl
       );
       this.cesium3DTileset.tileUnload.addEventListener((tile: Cesium3DTile) => {
         delete tile[cesiumTilesetLastUpdated];
+        delete tile.content[cesiumTilesetLastUpdated];
+        delete tile.content[updateFeatureOverride];
       });
 
       this._originalOrigin = Cartesian3.clone(
@@ -277,7 +290,14 @@ class CesiumTilesetCesiumImpl
         (this.globalHider?.lastUpdated ?? 0) ||
       content[cesiumTilesetLastUpdated] < this._styleLastUpdated
     ) {
+      // content[updateFeatureOverride]?.reset();
+      delete content[updateFeatureOverride];
       const batchSize = content.featuresLength;
+      const featureOverride = {
+        hideLocal: [] as [string, HighlightableFeature][],
+        hideGlobal: [] as [string, HighlightableFeature][],
+        highlight: [] as [string, HighlightableFeature][],
+      };
       for (let batchId = 0; batchId < batchSize; batchId++) {
         const feature = content.getFeature(batchId);
         if (feature) {
@@ -286,11 +306,14 @@ class CesiumTilesetCesiumImpl
             id = `${content.url}${batchId}`;
           }
 
+          let shouldUpdateOriginalStyle = true;
           if (
             this.featureVisibility.highlightedObjects[id] &&
             !this.featureVisibility.hasHighlightFeature(id, feature)
           ) {
             this.featureVisibility.addHighlightFeature(id, feature);
+            featureOverride.highlight.push([id, feature]);
+            shouldUpdateOriginalStyle = false;
           }
 
           if (
@@ -298,6 +321,7 @@ class CesiumTilesetCesiumImpl
             !this.featureVisibility.hasHiddenFeature(id, feature)
           ) {
             this.featureVisibility.addHiddenFeature(id, feature);
+            featureOverride.hideLocal.push([id, feature]);
           }
 
           if (
@@ -305,9 +329,11 @@ class CesiumTilesetCesiumImpl
             !this.globalHider?.hasFeature(id, feature)
           ) {
             this.globalHider?.addFeature(id, feature);
+            featureOverride.hideGlobal.push([id, feature]);
           }
 
           if (
+            shouldUpdateOriginalStyle &&
             this._styleLastUpdated > (content[cesiumTilesetLastUpdated] ?? 0) &&
             feature[originalStyle] // can only be a color for cesium, so no check for undefined required
           ) {
@@ -315,7 +341,34 @@ class CesiumTilesetCesiumImpl
           }
         }
       }
+      if (
+        featureOverride.hideLocal.length > 0 ||
+        featureOverride.hideGlobal.length > 0 ||
+        featureOverride.highlight.length > 0
+      ) {
+        content[updateFeatureOverride] = (): void => {
+          featureOverride.hideGlobal.forEach(([id, feature]) => {
+            if (this.globalHider?.hasFeature(id, feature)) {
+              hideFeature(feature);
+            }
+          });
+
+          featureOverride.hideLocal.forEach(([id, feature]) => {
+            if (this.featureVisibility.hasHiddenFeature(id, feature)) {
+              hideFeature(feature);
+            }
+          });
+
+          featureOverride.highlight.forEach(([id, feature]) => {
+            if (this.featureVisibility.hasHighlightFeature(id, feature)) {
+              highlightFeature(feature);
+            }
+          });
+        };
+      }
       content[cesiumTilesetLastUpdated] = Date.now();
+    } else {
+      content[updateFeatureOverride]?.();
     }
   }
 

package/src/layer/cesium/rasterLayerCesiumImpl.ts

@@ -44,6 +44,10 @@ class RasterLayerCesiumImpl
   async initialize(): Promise<void> {
     if (!this.initialized) {
       this.cesiumLayer = await this.getCesiumLayer();
+      if (this.isDestroyed) {
+        this.cesiumLayer.destroy();
+        return Promise.resolve();
+      }
       this.cesiumLayer[vcsLayerName] = this.name;
       this.cesiumLayer.show = false;
       this.map.addImageryLayer(this.cesiumLayer);

package/src/layer/cesium/vectorCesiumImpl.ts

@@ -78,7 +78,8 @@ class VectorCesiumImpl
   private _addListeners(): void {
     this._olListeners.push(
       this.source.on('addfeature', (event) => {
-        this._addFeature(event.feature as Feature);
+        // eslint-disable-next-line no-void
+        void this._addFeature(event.feature as Feature);
       }),
     );
 
@@ -90,7 +91,8 @@ class VectorCesiumImpl
 
     this._olListeners.push(
       this.source.on('changefeature', (event) => {
-        this._featureChanged(event.feature as Feature);
+        // eslint-disable-next-line no-void
+        void this._featureChanged(event.feature as Feature);
       }),
     );
 
@@ -115,7 +117,7 @@ class VectorCesiumImpl
     if (!this.initialized) {
       this._scene = this.map.getScene();
       this._addListeners();
-      this._addFeatures(this.source.getFeatures());
+      await this._addFeatures(this.source.getFeatures());
       await this._setupContext(this.map);
     }
     await super.initialize();
@@ -124,20 +126,19 @@ class VectorCesiumImpl
     }
   }
 
-  private _addFeatures(features: Feature[]): void {
+  private async _addFeatures(features: Feature[]): Promise<void> {
     // TODO we should make this non-blocking to better handle larger data sets check in RIWA Impl
-    features.forEach((f) => {
-      this._addFeature(f);
-    });
+    await Promise.allSettled(features.map((f) => this._addFeature(f)));
   }
 
   /**
    * converts a feature and adds the associated primitives to the collection of primitives
    */
-  private _addFeature(feature: Feature): void {
+  private async _addFeature(feature: Feature): Promise<void> {
     if (this.active) {
       // XXX cluster check here? or on init?
-      convert(
+      this._context!.features.add(feature);
+      await convert(
         feature,
         this.style.style,
         this.vectorProperties,
@@ -152,9 +153,9 @@ class VectorCesiumImpl
   /**
    * Forces a complete re-render of all features.
    */
-  refresh(): void {
+  async refresh(): Promise<void> {
     this._context?.clear();
-    this._addFeatures(this.source.getFeatures());
+    await this._addFeatures(this.source.getFeatures());
   }
 
   /**
@@ -168,10 +169,10 @@ class VectorCesiumImpl
   /**
    * called when a features property have changed
    */
-  private _featureChanged(feature: Feature): void {
+  private async _featureChanged(feature: Feature): Promise<void> {
     const cache = this._context!.createFeatureCache(feature);
     this._featureToAdd.delete(feature);
-    this._addFeature(feature);
+    await this._addFeature(feature);
     this._context!.clearFeatureCache(cache);
   }
 
@@ -179,7 +180,7 @@ class VectorCesiumImpl
     if (!this.active) {
       await super.activate();
       if (this.active) {
-        this._addFeatures([...this._featureToAdd]);
+        await this._addFeatures([...this._featureToAdd]);
         this._featureToAdd.clear();
         this._rootCollection.show = true;
         if (this._featureVisibilityListeners.length === 0) {
@@ -208,7 +209,8 @@ class VectorCesiumImpl
     if (this.initialized && !silent) {
       const features = this.source.getFeatures().filter((f) => !f.getStyle());
       features.forEach((f) => {
-        this._featureChanged(f);
+        // eslint-disable-next-line no-void
+        void this._featureChanged(f);
       });
     }
   }

package/src/layer/cesium/vectorContext.ts

@@ -301,6 +301,8 @@ class VectorContext implements CesiumVectorContext {
 
   featureToLabelMap: Map<Feature, Array<Label>> = new Map();
 
+  features: Set<Feature> = new Set();
+
   splitDirection: SplitDirection;
 
   private _rootCollection: PrimitiveCollection;
@@ -346,14 +348,16 @@ class VectorContext implements CesiumVectorContext {
     feature: Feature,
     allowPicking = false,
   ): void {
-    addPrimitiveToContext(
-      primitives,
-      feature,
-      allowPicking,
-      this.primitives,
-      this.featureToPrimitiveMap,
-      this.splitDirection,
-    );
+    if (this.features.has(feature)) {
+      addPrimitiveToContext(
+        primitives,
+        feature,
+        allowPicking,
+        this.primitives,
+        this.featureToPrimitiveMap,
+        this.splitDirection,
+      );
+    }
   }
 
   addScaledPrimitives(
@@ -367,15 +371,17 @@ class VectorContext implements CesiumVectorContext {
     feature: Feature,
     allowPicking = false,
   ): void {
-    addPrimitiveToContext(
-      primitives,
-      feature,
-      allowPicking,
-      this.scaledPrimitives,
-      this.featureToScaledPrimitiveMap,
-      this.splitDirection,
-    );
-    this._scaledDirty.value = true;
+    if (this.features.has(feature)) {
+      addPrimitiveToContext(
+        primitives,
+        feature,
+        allowPicking,
+        this.scaledPrimitives,
+        this.featureToScaledPrimitiveMap,
+        this.splitDirection,
+      );
+      this._scaledDirty.value = true;
+    }
   }
 
   addBillboards(
@@ -383,14 +389,16 @@ class VectorContext implements CesiumVectorContext {
     feature: Feature,
     allowPicking = false,
   ): void {
-    addPrimitiveToContext(
-      billboardOptions,
-      feature,
-      allowPicking,
-      this.billboards,
-      this.featureToBillboardMap,
-      this.splitDirection,
-    );
+    if (this.features.has(feature)) {
+      addPrimitiveToContext(
+        billboardOptions,
+        feature,
+        allowPicking,
+        this.billboards,
+        this.featureToBillboardMap,
+        this.splitDirection,
+      );
+    }
   }
 
   addLabels(
@@ -398,20 +406,23 @@ class VectorContext implements CesiumVectorContext {
     feature: Feature,
     allowPicking = false,
   ): void {
-    addPrimitiveToContext(
-      labelOptions,
-      feature,
-      allowPicking,
-      this.labels,
-      this.featureToLabelMap,
-      this.splitDirection,
-    );
+    if (this.features.has(feature)) {
+      addPrimitiveToContext(
+        labelOptions,
+        feature,
+        allowPicking,
+        this.labels,
+        this.featureToLabelMap,
+        this.splitDirection,
+      );
+    }
   }
 
   /**
    * @param  feature
    */
   removeFeature(feature: Feature): void {
+    this.features.delete(feature);
     removeFeatureFromMap(feature, this.featureToPrimitiveMap, this.primitives);
     this._scaledDirty.value = removeFeatureFromMap(
       feature,
@@ -472,6 +483,7 @@ class VectorContext implements CesiumVectorContext {
     this.featureToPrimitiveMap.clear();
     this._scaledDirty.value = this.featureToScaledPrimitiveMap.size > 0;
     this.featureToScaledPrimitiveMap.clear();
+    this.features.clear();
   }
 
   /**
@@ -490,6 +502,7 @@ class VectorContext implements CesiumVectorContext {
     this.featureToBillboardMap.clear();
     this.featureToLabelMap.clear();
     this.featureToPrimitiveMap.clear();
+    this.features.clear();
     this.featureToScaledPrimitiveMap.clear();
     this._postRenderListener();
   }

package/src/layer/featureVisibility.ts

@@ -105,6 +105,7 @@ export function resetOriginalStyle(feature: HighlightableFeature): void {
   if (!(feature[globalHidden] || feature[hidden] || feature[highlighted])) {
     const style = feature[originalStyle];
     if (
+      style &&
       (feature instanceof Cesium3DTileFeature ||
         feature instanceof Cesium3DTilePointFeature) &&
       featureExists(feature)
@@ -383,21 +384,12 @@ class FeatureVisibility {
 
   hasHiddenFeature(
     id: string | number,
-    feature:
-      | import('ol').Feature<import('ol/geom/Geometry.js').default>
-      | import('@vcmap-cesium/engine').Cesium3DTileFeature
-      | import('@vcmap-cesium/engine').Entity,
+    feature: HighlightableFeature,
   ): boolean {
     return this.hiddenObjects[id] && this.hiddenObjects[id].has(feature);
   }
 
-  addHiddenFeature(
-    id: string | number,
-    feature:
-      | import('ol').Feature<import('ol/geom/Geometry.js').default>
-      | import('@vcmap-cesium/engine').Cesium3DTileFeature
-      | import('@vcmap-cesium/engine').Entity,
-  ): void {
+  addHiddenFeature(id: string | number, feature: HighlightableFeature): void {
     if (this.hiddenObjects[id]) {
       cacheOriginalStyle(feature);
       this.hiddenObjects[id].add(feature);

package/src/layer/vectorLayer.ts

@@ -101,6 +101,11 @@ export type VectorGeometryFactoryType = {
     style: Style,
   ): GroundPolylineGeometry[];
   createLineGeometries(obj: unknown, style: Style): PolylineGeometry[];
+  createLineGeometries(
+    obj: unknown,
+    style: Style,
+    groundLevel?: number,
+  ): PolylineGeometry[];
 };
 
 export type VectorHeightInfo = {

package/src/map/cesiumMap.ts

@@ -40,7 +40,7 @@ import {
 import type { Coordinate } from 'ol/coordinate.js';
 
 import { checkMaybe } from '@vcsuite/check';
-import { parseBoolean, parseInteger } from '@vcsuite/parsers';
+import { parseBoolean, parseInteger, parseNumber } from '@vcsuite/parsers';
 import VcsMap, { type VcsMapOptions } from './vcsMap.js';
 import Viewpoint from '../util/viewpoint.js';
 import Projection, { mercatorProjection } from '../util/projection.js';
@@ -80,6 +80,12 @@ export type CesiumMapOptions = VcsMapOptions & {
    * This is a global Setting for all VCMap Instances on the same page.
    */
   useOriginalCesiumShader?: boolean;
+
+  /**
+   * changes the default Cesium Sunlight Intensity (default is 3.0)
+   * Cesium Default is 2.0
+   */
+  lightIntensity?: number;
 };
 
 export type CesiumMapEvent = {
@@ -344,6 +350,8 @@ class CesiumMap extends VcsMap<CesiumVisualisationType> {
 
   private _useOriginalCesiumShader: boolean;
 
+  private _lightIntensity: number;
+
   constructor(options: CesiumMapOptions) {
     super(options);
 
@@ -403,6 +411,8 @@ class CesiumMap extends VcsMap<CesiumVisualisationType> {
     this._listeners = [];
 
     this._lastEventFrameNumber = null;
+
+    this._lightIntensity = parseNumber(options.lightIntensity, 3.0);
   }
 
   get splitPosition(): number {
@@ -653,6 +663,7 @@ class CesiumMap extends VcsMap<CesiumVisualisationType> {
       this._cesiumWidget.scene.highDynamicRange = false;
       // this._cesiumWidget.scene.logarithmicDepthBuffer = false; // TODO observe this
       this._cesiumWidget.scene.splitPosition = this.splitPosition;
+      this._cesiumWidget.scene.light.intensity = this._lightIntensity;
 
       this._cesiumWidget.scene.globe.enableLighting = this.enableLightning;
 

package/src/util/editor/createFeatureSession.ts

@@ -19,6 +19,7 @@ import VectorLayer from '../../layer/vectorLayer.js';
 import { createSync } from '../../layer/vectorSymbols.js';
 import geometryIsValid from './validateGeoemetry.js';
 import ObliqueMap from '../../map/obliqueMap.js';
+import { cursorMap } from './interactions/editGeometryMouseOverInteraction.js';
 
 export type CreateFeatureSession<T extends GeometryType> = EditorSession & {
   geometryType: T;
@@ -200,8 +201,15 @@ function startCreateFeatureSession<T extends GeometryType>(
   });
   setupActiveMap();
 
+  if (app.maps.target) {
+    app.maps.target.style.cursor = cursorMap.edit;
+  }
+
   const stop = (): void => {
     isStopped = true; // setting stopped true immediately, to prevent the recreation of the interaction chain on finished
+    if (app.maps.target) {
+      app.maps.target.style.cursor = cursorMap.auto;
+    }
     mapChangedListener();
     obliqueImageChangedListener();
     if (currentInteraction) {

package/src/util/editor/editFeaturesSession.ts

@@ -28,7 +28,7 @@ import ScaleInteraction from './transformation/scaleInteraction.js';
 import { obliqueGeometry } from '../../layer/vectorSymbols.js';
 import ExtrudeInteraction from './transformation/extrudeInteraction.js';
 import ObliqueMap from '../../map/obliqueMap.js';
-import { ensureFeatureAbsolute } from './editorHelpers.js';
+import { ensureFeatureAbsolute, geometryChangeKeys } from './editorHelpers.js';
 import CesiumMap from '../../map/cesiumMap.js';
 import EnsureHandlerSelectionInteraction from './interactions/ensureHandlerSelectionInteraction.js';
 import EditFeaturesMouseOverInteraction from './interactions/editFeaturesMouseOverInteraction.js';
@@ -92,12 +92,6 @@ export type EditFeaturesSession = EditorSession & {
   features: Feature[];
 };
 
-const geometryChangeKeys = [
-  'olcs_altitudeMode',
-  'olcs_groundLevel',
-  'olcs_heightAboveGround',
-];
-
 /**
  * Creates an editor session to select, translate, rotate & scale the feature on a given layer
  * @param  app

package/src/util/editor/editGeometrySession.ts

@@ -9,6 +9,7 @@ import type {
   LinearRing,
   Geometry,
 } from 'ol/geom.js';
+import { EventsKey } from 'ol/events.js';
 import {
   EditorSession,
   GeometryType,
@@ -20,7 +21,7 @@ import InteractionChain from '../../interaction/interactionChain.js';
 import VcsEvent from '../../vcsEvent.js';
 import TranslateVertexInteraction from './interactions/translateVertexInteraction.js';
 import RemoveVertexInteraction from './interactions/removeVertexInteraction.js';
-import { createVertex } from './editorHelpers.js';
+import { createVertex, geometryChangeKeys } from './editorHelpers.js';
 import InsertVertexInteraction from './interactions/insertVertexInteraction.js';
 import EditGeometryMouseOverInteraction from './interactions/editGeometryMouseOverInteraction.js';
 import { cartesian2DDistance, modulo } from '../math.js';
@@ -362,18 +363,30 @@ function startEditGeometrySession(
     currentFeature = null;
   };
 
+  let featureListener: EventsKey | undefined;
+
   /**
    * Creates an interaction set from an edit geometry interaction. If the geometry of the feature is not supported a message is logged.
    * @param {Feature} feature The feature to be edited.
    */
   function createCurrentInteractionSet(feature?: Feature): void {
     destroyCurrentInteractionSet();
+    if (featureListener) {
+      unByKey(featureListener);
+    }
     if (feature) {
+      featureListener = feature.on('propertychange', ({ key }) => {
+        if (geometryChangeKeys.includes(key)) {
+          createCurrentInteractionSet(feature);
+        }
+      });
       currentFeature = feature;
       currentFeature[createSync] = true;
       const geometry =
         feature[obliqueGeometry] ?? (feature.getGeometry() as Geometry);
       const geometryType = geometry.getType();
+      scratchLayer.vectorProperties.altitudeMode =
+        layer.vectorProperties.getAltitudeMode(feature);
       if (geometryType === GeometryType.Polygon) {
         if (geometry.get('_vcsGeomType') === GeometryType.BBox) {
           currentInteractionSet = createEditBBoxGeometryInteraction(
@@ -427,6 +440,9 @@ function startEditGeometrySession(
 
   const stop = (): void => {
     app.layers.remove(scratchLayer);
+    if (featureListener) {
+      unByKey(featureListener);
+    }
     mapActivatedListener();
     mapInteractionController.reset();
     mouseOverInteraction.reset();

package/src/util/editor/editorHelpers.ts

@@ -40,6 +40,12 @@ export interface SelectFeatureInteraction {
   hasFeatureId(id: string): boolean;
 }
 
+export const geometryChangeKeys = [
+  'olcs_altitudeMode',
+  'olcs_groundLevel',
+  'olcs_heightAboveGround',
+];
+
 /**
  * @param  coordinate
  */

package/src/util/editor/interactions/editGeometryMouseOverInteraction.ts

@@ -8,6 +8,14 @@ import {
 } from '../../../interaction/interactionType.js';
 import { Vertex } from '../editorHelpers.js';
 
+const pointerSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
+  <g id="pen">
+    <path d=" M 14.744 18.702 L 12.814 16.772 L 16.773 12.814 L 18.703 14.744 C 19.099 15.159 19.099 15.812 18.703 16.228 L 16.228 18.702 C 15.813 19.097 15.16 19.097 14.744 18.702 Z  M 3.959 0.002 L 15.635 11.679 L 11.678 15.637 L 0 3.962 L 0 0.002 L 3.959 0.002 Z " fill="rgb(0,0,0)"/>
+    <path d=" M 0.75 0.846 L 3.641 0.846 L 14.532 11.768 L 11.641 14.659 L 0.75 3.581 L 0.75 0.846 Z " fill="rgb(255,255,255)"/>
+    <path d=" M 16.75 14.018 L 18.242 15.511 L 15.414 18.339 L 13.881 16.805 L 16.75 14.018 Z " fill="rgb(255,255,255)"/>
+  </g>
+</svg>`;
+
 export const cursorMap = {
   // TODO these can now be designed custom. IE11 no linger required
   auto: 'auto',
@@ -16,7 +24,9 @@ export const cursorMap = {
   rotate: 'crosshair',
   translate: 'move',
   select: 'pointer',
-  edit: 'pointer', // fa pencil
+  edit: `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+    pointerSvg,
+  )}"), pointer`, // fa pencil
   translateVertex: 'move', // fa-stack pointer-move
   removeVertex: 'no-drop', // fa-stack pencil-minus
   insertVertex: 'cell', // fa-stack pencil-plus

package/src/util/featureconverter/arcToCesium.ts

@@ -86,14 +86,14 @@ function getGeometryFactory(
 /**
  * converts a linestring with an ArcStyle to a a cesium primitive
  */
-export default function arcToCesium(
+export default async function arcToCesium(
   feature: Feature,
   style: ArcStyle,
   geometries: LineString[],
   vectorProperties: VectorProperties,
   scene: Scene,
   context: CesiumVectorContext,
-): void {
+): Promise<void> {
   if (!style.getFill() && !style.getStroke()) {
     return;
   }
@@ -114,7 +114,7 @@ export default function arcToCesium(
     arcGeometryFactory,
     context,
   );
-  addArrowsToContext(
+  await addArrowsToContext(
     feature,
     style,
     validGeometries,