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

package/src/util/featureconverter/featureconverterHelper.ts

@@ -609,7 +609,11 @@ export function addPrimitivesToContext(
           );
         } else {
           lineGeometries.push(
-            ...geometryFactory.createLineGeometries(geometryOptions, style),
+            ...geometryFactory.createLineGeometries(
+              geometryOptions,
+              style,
+              heightInfo.groundLevel,
+            ),
           );
         }
       }

package/src/util/featureconverter/lineStringToCesium.ts

@@ -48,7 +48,7 @@ function getArrowOptions(
   };
 }
 
-export function addArrowsToContext(
+export async function addArrowsToContext(
   feature: Feature,
   style: ArrowStyle,
   validGeometries: LineString[],
@@ -56,7 +56,7 @@ export function addArrowsToContext(
   scene: Scene,
   lineGeometryFactory: VectorGeometryFactoryType,
   context: CesiumVectorContext,
-): void {
+): Promise<void> {
   if (style.end === ArrowEnd.NONE || !style.primitiveOptions?.geometryOptions) {
     return;
   }
@@ -88,39 +88,41 @@ export function addArrowsToContext(
   const usedStyle = style.getOlcsStyle();
   const allowPicking = vectorProperties.getAllowPicking(feature);
 
-  arrowOptions.forEach((arrowOption) => {
-    const arrowFeature = new Feature({
-      ...feature.getProperties(),
-      olcs_primitiveOptions: style.primitiveOptions,
-      olcs_modelHeading: arrowOption.heading,
-      olcs_modelPitch: arrowOption.pitch,
-      geometry: new Point(arrowOption.location),
-      olcs_modelAutoScale: true,
-    });
+  await Promise.all(
+    arrowOptions.map(async (arrowOption) => {
+      const arrowFeature = new Feature({
+        ...feature.getProperties(),
+        olcs_primitiveOptions: style.primitiveOptions,
+        olcs_modelHeading: arrowOption.heading,
+        olcs_modelPitch: arrowOption.pitch,
+        geometry: new Point(arrowOption.location),
+        olcs_modelAutoScale: true,
+      });
 
-    const wgs84Position = Projection.mercatorToWgs84(arrowOption.location);
-    const cartesianLocation = Cartesian3.fromDegrees(
-      wgs84Position[0],
-      wgs84Position[1],
-      wgs84Position[2],
-    );
-    const primitiveOptions = getPrimitiveOptions(
-      arrowFeature,
-      usedStyle,
-      [wgs84Position],
-      [cartesianLocation],
-      vectorProperties,
-      scene,
-    );
-
-    if (primitiveOptions?.primitives) {
-      context.addScaledPrimitives(
-        primitiveOptions.primitives,
-        feature,
-        allowPicking,
+      const wgs84Position = Projection.mercatorToWgs84(arrowOption.location);
+      const cartesianLocation = Cartesian3.fromDegrees(
+        wgs84Position[0],
+        wgs84Position[1],
+        wgs84Position[2],
       );
-    }
-  });
+      const primitiveOptions = await getPrimitiveOptions(
+        arrowFeature,
+        usedStyle,
+        [wgs84Position],
+        [cartesianLocation],
+        vectorProperties,
+        scene,
+      );
+
+      if (primitiveOptions?.primitives) {
+        context.addScaledPrimitives(
+          primitiveOptions.primitives,
+          feature,
+          allowPicking,
+        );
+      }
+    }),
+  );
 }
 
 export type LineGeometryOptions = { positions: Cartesian3[] };
@@ -266,14 +268,14 @@ export function validateLineString(lineString: LineString): boolean {
  * @param  scene
  * @param  context
  */
-export default function lineStringToCesium(
+export default async function lineStringToCesium(
   feature: Feature,
   style: Style,
   geometries: LineString[],
   vectorProperties: VectorProperties,
   scene: Scene,
   context: CesiumVectorContext,
-): void {
+): Promise<void> {
   if (!style.getFill() && !style.getStroke()) {
     return;
   }
@@ -291,7 +293,7 @@ export default function lineStringToCesium(
     context,
   );
   if (style instanceof ArrowStyle) {
-    addArrowsToContext(
+    await addArrowsToContext(
       feature,
       style,
       validGeometries,

package/src/util/featureconverter/pointHelpers.ts

@@ -118,13 +118,16 @@ async function placePrimitiveOnTerrain(
     .catch(() => {});
 }
 
-export function getModelOptions(
+export async function getModelOptions(
   feature: Feature,
   wgs84Positions: Coordinate[],
   positions: Cartesian3[],
   vectorProperties: VectorProperties,
   scene: Scene,
-): null | { primitives: Model[]; options: VectorPropertiesModelOptions } {
+): Promise<null | {
+  primitives: Model[];
+  options: VectorPropertiesModelOptions;
+}> {
   const options = vectorProperties.getModel(feature);
   if (!options) {
     return null;
@@ -136,43 +139,52 @@ export function getModelOptions(
     options.roll,
   );
   const allowPicking = vectorProperties.getAllowPicking(feature);
-  const primitives = positions.map((position, index) => {
-    const modelMatrix = Matrix4.multiply(
-      Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll),
-      Matrix4.fromScale(scale),
-      new Matrix4(),
-    );
+  const primitives = await Promise.all(
+    positions.map(async (position, index) => {
+      const modelMatrix = Matrix4.multiply(
+        Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll),
+        Matrix4.fromScale(scale),
+        new Matrix4(),
+      );
 
-    const additionalModelOptions = vectorProperties.getModelOptions(feature);
-    const heightReference = vectorProperties.getAltitudeMode(feature);
-    const model = Model.fromGltf({
-      asynchronous: !feature[createSync],
-      url: options.url,
-      modelMatrix,
-      allowPicking,
-      ...additionalModelOptions,
-    });
+      const additionalModelOptions = vectorProperties.getModelOptions(feature);
+      const heightReference = vectorProperties.getAltitudeMode(feature);
+      const model = await Model.fromGltfAsync({
+        asynchronous: !feature[createSync],
+        url: options.url,
+        modelMatrix,
+        allowPicking,
+        ...additionalModelOptions,
+      });
 
-    if (
-      wgs84Positions[index][2] == null ||
-      heightReference === HeightReference.CLAMP_TO_GROUND
-    ) {
-      // eslint-disable-next-line no-void
-      void placePrimitiveOnTerrain(model, position, scene);
-    }
+      if (
+        wgs84Positions[index][2] == null ||
+        heightReference === HeightReference.CLAMP_TO_GROUND
+      ) {
+        await placePrimitiveOnTerrain(model, position, scene);
+      }
 
-    // eslint-disable-next-line no-void
-    void model.readyPromise.then(() => {
-      model.activeAnimations.addAll({
-        loop: ModelAnimationLoop.REPEAT,
-      });
-    });
+      const activateAnimations = (): void => {
+        model.activeAnimations.addAll({
+          loop: ModelAnimationLoop.REPEAT,
+        });
+      };
 
-    if (options.autoScale && !Cartesian3.ONE.equals(scale)) {
-      makeScaledAutoScalePrimitive(model, scale);
-    }
-    return model;
-  });
+      if (model.ready) {
+        activateAnimations();
+      } else {
+        const listener = model.readyEvent.addEventListener(() => {
+          listener();
+          activateAnimations();
+        });
+      }
+
+      if (options.autoScale && !Cartesian3.ONE.equals(scale)) {
+        makeScaledAutoScalePrimitive(model, scale);
+      }
+      return model;
+    }),
+  );
 
   return {
     primitives,
@@ -237,14 +249,17 @@ function getGeometryInstanceFromOptions(
   return null;
 }
 
-export function getPrimitiveOptions(
+export async function getPrimitiveOptions(
   feature: Feature,
   style: Style,
   wgs84Positions: Coordinate[],
   positions: Cartesian3[],
   vectorProperties: VectorProperties,
   scene: Scene,
-): null | { primitives: Primitive[]; options: VectorPropertiesPrimitive } {
+): Promise<null | {
+  primitives: Primitive[];
+  options: VectorPropertiesPrimitive;
+}> {
   const options = vectorProperties.getPrimitive(feature);
   if (!options) {
     return null;
@@ -281,127 +296,134 @@ export function getPrimitiveOptions(
     options.roll,
   );
   const allowPicking = vectorProperties.getAllowPicking(feature);
+  const heightReference = vectorProperties.getAltitudeMode(feature);
 
-  const primitives = positions.flatMap((position, index) => {
-    const geometryModelMatrix = Matrix4.fromScale(scale);
-    let offset: Cartesian3 | undefined;
-    if (options.primitiveOptions.offset?.length === 3) {
-      offset = Cartesian3.fromArray(options.primitiveOptions.offset);
-      Matrix4.setTranslation(
-        geometryModelMatrix,
-        Cartesian3.multiplyComponents(offset, scale, new Cartesian3()),
-        geometryModelMatrix,
+  const primitives = await Promise.all(
+    positions.map(async (position, index) => {
+      const geometryModelMatrix = Matrix4.fromScale(scale);
+      let offset: Cartesian3 | undefined;
+      if (options.primitiveOptions.offset?.length === 3) {
+        offset = Cartesian3.fromArray(options.primitiveOptions.offset);
+        Matrix4.setTranslation(
+          geometryModelMatrix,
+          Cartesian3.multiplyComponents(offset, scale, new Cartesian3()),
+          geometryModelMatrix,
+        );
+      }
+      const transform = Transforms.headingPitchRollToFixedFrame(
+        position,
+        headingPitchRoll,
       );
-    }
-    const transform = Transforms.headingPitchRollToFixedFrame(
-      position,
-      headingPitchRoll,
-    );
-    const modelMatrix = Matrix4.multiply(
-      transform,
-      geometryModelMatrix,
-      new Matrix4(),
-    );
-
-    let depthFail;
-    if (options.primitiveOptions.depthFailColor) {
-      const depthFailColor = getCesiumColor(
-        options.primitiveOptions.depthFailColor,
-        [255, 255, 255, 0.4],
+      const modelMatrix = Matrix4.multiply(
+        transform,
+        geometryModelMatrix,
+        new Matrix4(),
       );
-      depthFail = new MaterialAppearance({
-        translucent: depthFailColor.alpha < 1,
-        material: Material.fromType('Color', {
-          color: depthFailColor,
-        }),
-      });
-    }
-
-    const createPrimitive = (
-      translucent: boolean,
-      geometryInstances: (GeometryInstance | null)[],
-      depthFailAppearance?: MaterialAppearance,
-    ): Primitive => {
-      const primitive = new Primitive({
-        asynchronous: !feature[createSync],
-        geometryInstances: geometryInstances.filter(
-          (g) => g,
-        ) as GeometryInstance[],
-        modelMatrix,
-        appearance: new PerInstanceColorAppearance({
-          translucent,
-          flat: true,
-        }),
-        depthFailAppearance,
-        allowPicking,
-        ...options.primitiveOptions.additionalOptions,
-      });
 
-      if (!wgs84Positions[index][2]) {
-        // eslint-disable-next-line no-void
-        void placePrimitiveOnTerrain(primitive, position, scene, offset).then(
-          () => {
-            Transforms.headingPitchRollToFixedFrame(
-              position,
-              headingPitchRoll,
-              undefined,
-              undefined,
-              transform,
-            ); // update transform for usage in offset auto scale
-          },
+      let depthFail;
+      if (options.primitiveOptions.depthFailColor) {
+        const depthFailColor = getCesiumColor(
+          options.primitiveOptions.depthFailColor,
+          [255, 255, 255, 0.4],
         );
+        depthFail = new MaterialAppearance({
+          translucent: depthFailColor.alpha < 1,
+          material: Material.fromType('Color', {
+            color: depthFailColor,
+          }),
+        });
       }
 
-      if (options.autoScale) {
-        if (offset) {
-          makeOffsetAutoScalePrimitive(primitive, transform, scale, offset);
-        } else if (!Cartesian3.ONE.equals(scale)) {
-          makeScaledAutoScalePrimitive(primitive, scale);
+      const createPrimitive = async (
+        translucent: boolean,
+        geometryInstances: (GeometryInstance | null)[],
+        depthFailAppearance?: MaterialAppearance,
+      ): Promise<Primitive> => {
+        const primitive = new Primitive({
+          asynchronous: !feature[createSync],
+          geometryInstances: geometryInstances.filter(
+            (g) => g,
+          ) as GeometryInstance[],
+          modelMatrix,
+          appearance: new PerInstanceColorAppearance({
+            translucent,
+            flat: true,
+          }),
+          depthFailAppearance,
+          allowPicking,
+          ...options.primitiveOptions.additionalOptions,
+        });
+
+        if (
+          wgs84Positions[index][2] == null ||
+          heightReference === HeightReference.CLAMP_TO_GROUND
+        ) {
+          await placePrimitiveOnTerrain(primitive, position, scene, offset);
+          Transforms.headingPitchRollToFixedFrame(
+            position,
+            headingPitchRoll,
+            undefined,
+            undefined,
+            transform,
+          ); // update transform for usage in offset auto scale
         }
-      }
-      return primitive;
-    };
 
-    const fillAndOutline = [];
-    if (fillColor) {
-      fillAndOutline.push(
-        createPrimitive(
-          fillColor.alpha < 1 || !!depthFail,
-          [getGeometryInstanceFromOptions(options.primitiveOptions, fillColor)],
-          depthFail,
-        ),
-      );
-    } else if (depthFail) {
-      const transparent = Color.TRANSPARENT;
-      fillAndOutline.push(
-        createPrimitive(
-          true,
-          [
+        if (options.autoScale) {
+          if (offset) {
+            makeOffsetAutoScalePrimitive(primitive, transform, scale, offset);
+          } else if (!Cartesian3.ONE.equals(scale)) {
+            makeScaledAutoScalePrimitive(primitive, scale);
+          }
+        }
+        return primitive;
+      };
+
+      const fillAndOutline = [];
+      if (fillColor) {
+        fillAndOutline.push(
+          createPrimitive(
+            fillColor.alpha < 1 || !!depthFail,
+            [
+              getGeometryInstanceFromOptions(
+                options.primitiveOptions,
+                fillColor,
+              ),
+            ],
+            depthFail,
+          ),
+        );
+      } else if (depthFail) {
+        const transparent = Color.TRANSPARENT;
+        fillAndOutline.push(
+          createPrimitive(
+            true,
+            [
+              getGeometryInstanceFromOptions(
+                options.primitiveOptions,
+                transparent,
+              ),
+            ],
+            depthFail,
+          ),
+        );
+      }
+      if (strokeColor) {
+        fillAndOutline.push(
+          createPrimitive(strokeColor.alpha < 1 || !!depthFail, [
             getGeometryInstanceFromOptions(
               options.primitiveOptions,
-              transparent,
+              strokeColor,
+              true,
             ),
-          ],
-          depthFail,
-        ),
-      );
-    }
-    if (strokeColor) {
-      fillAndOutline.push(
-        createPrimitive(strokeColor.alpha < 1 || !!depthFail, [
-          getGeometryInstanceFromOptions(
-            options.primitiveOptions,
-            strokeColor,
-            true,
-          ),
-        ]),
-      );
-    }
-    return fillAndOutline;
-  });
+          ]),
+        );
+      }
+      return Promise.all(fillAndOutline);
+    }),
+  );
 
   return {
-    primitives,
+    primitives: primitives.flatMap((p) => p),
     options,
   };
 }

package/src/util/featureconverter/pointToCesium.ts

@@ -271,14 +271,14 @@ export function getLineGeometries(
   return lineGeometries;
 }
 
-export default function pointToCesium(
+export default async function pointToCesium(
   feature: Feature,
   style: Style,
   geometries: Point[],
   vectorProperties: VectorProperties,
   scene: Scene,
   context: CesiumVectorContext,
-): void {
+): Promise<void> {
   if (!style.getImage() && !(style.getText() && style.getText().getText())) {
     return;
   }
@@ -301,7 +301,7 @@ export default function pointToCesium(
 
   let modelOrPrimitiveOptions = null;
   if (feature.get('olcs_modelUrl')) {
-    modelOrPrimitiveOptions = getModelOptions(
+    modelOrPrimitiveOptions = await getModelOptions(
       feature,
       wgs84Positions,
       positions,
@@ -309,7 +309,7 @@ export default function pointToCesium(
       scene,
     );
   } else if (feature.get('olcs_primitiveOptions')) {
-    modelOrPrimitiveOptions = getPrimitiveOptions(
+    modelOrPrimitiveOptions = await getPrimitiveOptions(
       feature,
       style,
       wgs84Positions,
@@ -319,21 +319,21 @@ export default function pointToCesium(
     );
   } else {
     modelOrPrimitiveOptions =
-      getModelOptions(
+      (await getModelOptions(
         feature,
         wgs84Positions,
         positions,
         vectorProperties,
         scene,
-      ) ??
-      getPrimitiveOptions(
+      )) ??
+      (await getPrimitiveOptions(
         feature,
         style,
         wgs84Positions,
         positions,
         vectorProperties,
         scene,
-      );
+      ));
   }
 
   if (heightInfo.extruded && style.getStroke()) {

package/src/util/featureconverter/polygonToCesium.ts

@@ -7,6 +7,7 @@ import {
   PolygonHierarchy,
   PolylineGeometry,
   type Scene,
+  Cartographic,
 } from '@vcmap-cesium/engine';
 import type { Style } from 'ol/style.js';
 import type { Polygon } from 'ol/geom.js';
@@ -73,19 +74,32 @@ export function createFillGeometries(
 export function getLineGeometryOptions(
   options: PolygonGeometryOptions,
   style: Style,
+  groundLevel?: number,
 ): PolylineGeometryOptions[] {
   const width = parseNumber(style.getStroke().getWidth(), 1.0);
   const geometryOptions: PolylineGeometryOptions[] = [];
+
   geometryOptions.push({
     positions: options.polygonHierarchy.positions,
     width,
   });
+
   options.polygonHierarchy.holes.forEach((polygonHierarchy) => {
     geometryOptions.push({
       positions: polygonHierarchy.positions,
       width,
     });
   });
+
+  if (groundLevel) {
+    geometryOptions.forEach((polylineOptions) => {
+      polylineOptions.positions = polylineOptions.positions.map((c) => {
+        const geographic = Cartographic.fromCartesian(c);
+        geographic.height = groundLevel;
+        return Cartographic.toCartesian(geographic);
+      });
+    });
+  }
   return geometryOptions;
 }
 
@@ -100,8 +114,9 @@ export function createGroundLineGeometries(
 export function createLineGeometries(
   options: PolygonGeometryOptions,
   style: Style,
+  groundLevel?: number,
 ): PolylineGeometry[] {
-  return getLineGeometryOptions(options, style).map((option) => {
+  return getLineGeometryOptions(options, style, groundLevel).map((option) => {
     return new PolylineGeometry(option);
   });
 }