@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/util/featureconverter/pointToCesium.ts

@@ -0,0 +1,403 @@
+import {
+  Cartesian3,
+  Color,
+  HeightReference,
+  VerticalOrigin,
+  Cartesian2,
+  LabelStyle,
+  HorizontalOrigin,
+  type BillboardGraphics,
+  type LabelGraphics,
+  type PolylineGeometry,
+  type Scene,
+} from '@vcmap-cesium/engine';
+import { Icon, type Style } from 'ol/style.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import ImageState from 'ol/ImageState.js';
+import type { Feature } from 'ol/index.js';
+import type { Point } from 'ol/geom.js';
+
+import { parseNumber } from '@vcsuite/parsers';
+import {
+  createLinePrimitive,
+  getHeightInfo,
+} from './featureconverterHelper.js';
+import Projection from '../projection.js';
+import { createLineGeometries } from './lineStringToCesium.js';
+import { getCesiumColor } from '../../style/styleHelpers.js';
+import { getModelOptions, getPrimitiveOptions } from './pointHelpers.js';
+import VectorProperties from '../../layer/vectorProperties.js';
+import type { VectorHeightInfo } from '../../layer/vectorLayer.js';
+import { AsyncCesiumVectorContext } from '../../layer/cesium/vectorContext.js';
+
+export function getCoordinates(geometries: Point[]): Coordinate[] {
+  return geometries.map((point) => {
+    return point.getCoordinates();
+  });
+}
+
+export type BillboardOptions = BillboardGraphics.ConstructorOptions;
+
+export function getBillboardOptions(
+  feature: Feature,
+  style: Style,
+  heightReference: HeightReference,
+  vectorProperties: VectorProperties,
+): BillboardOptions | null {
+  const imageStyle = style.getImage();
+  if (imageStyle) {
+    // ImageStyles should always have an opacity value between 0 and 1, default white Color
+    const color = new Color(1.0, 1.0, 1.0, imageStyle.getOpacity());
+
+    let image = null;
+    if (imageStyle instanceof Icon) {
+      imageStyle.load();
+      if (imageStyle.getImageState() === ImageState.LOADING) {
+        image = new Promise((resolve, reject) => {
+          const imageChangeListener = (): void => {
+            if (
+              imageStyle.getImageState() === ImageState.LOADED ||
+              imageStyle.getImageState() === ImageState.EMPTY
+            ) {
+              resolve(imageStyle.getImage(1));
+              imageStyle.unlistenImageChange(imageChangeListener);
+            } else if (imageStyle.getImageState() === ImageState.ERROR) {
+              reject();
+              imageStyle.unlistenImageChange(imageChangeListener);
+            }
+          };
+          imageStyle.listenImageChange(imageChangeListener);
+        });
+      }
+    }
+    if (!image) {
+      image = imageStyle.getImage(1);
+    }
+    const options: BillboardOptions = {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      image,
+      color,
+      scale: imageStyle.getScaleArray()[0],
+      heightReference,
+      verticalOrigin: VerticalOrigin.BOTTOM,
+      id: feature.getId(),
+    };
+
+    options.eyeOffset = vectorProperties.getEyeOffset(feature);
+    options.scaleByDistance = vectorProperties.getScaleByDistance(feature);
+    if (heightReference === HeightReference.CLAMP_TO_GROUND) {
+      options.disableDepthTestDistance = Number.POSITIVE_INFINITY;
+    }
+
+    return options;
+  }
+  return null;
+}
+
+export type LabelOptions = LabelGraphics.ConstructorOptions;
+/**
+ * extracts cesium label options from a feature and style
+ * @param  feature
+ * @param  style style.getText().getFill() is set by default to be #333,
+ * if no fill is required set Fill empty by using style.getText().setFill()
+ * @param  heightReference
+ * @param  vectorProperties
+ */
+export function getLabelOptions(
+  feature: Feature,
+  style: Style,
+  heightReference: HeightReference,
+  vectorProperties: VectorProperties,
+): LabelOptions | null {
+  const textStyle = style.getText();
+  const text = textStyle ? textStyle.getText() : null;
+  if (text) {
+    const options: LabelOptions = {};
+
+    options.text = text as string;
+
+    options.heightReference = heightReference;
+
+    const offsetX = textStyle.getOffsetX() ?? 0;
+    const offsetY = textStyle.getOffsetY() ?? 0;
+    options.pixelOffset = new Cartesian2(offsetX, offsetY);
+    options.scale = textStyle.getScaleArray()[0];
+
+    const font = textStyle.getFont();
+    if (font) {
+      options.font = font;
+    }
+
+    const fill = textStyle.getFill();
+    const stroke = textStyle.getStroke();
+
+    let labelStyle;
+    if (fill) {
+      options.fillColor = getCesiumColor(fill.getColor(), [0, 0, 0, 1]);
+      labelStyle = LabelStyle.FILL;
+    }
+    if (stroke) {
+      options.outlineWidth = parseNumber(stroke.getWidth(), 1.0);
+      options.outlineColor = getCesiumColor(stroke.getColor(), [0, 0, 0, 1]);
+      labelStyle = LabelStyle.OUTLINE;
+    }
+    if (fill && stroke) {
+      labelStyle = LabelStyle.FILL_AND_OUTLINE;
+    }
+    options.style = labelStyle;
+
+    let horizontalOrigin;
+    switch (textStyle.getTextAlign()) {
+      case 'left':
+        horizontalOrigin = HorizontalOrigin.LEFT;
+        break;
+      case 'right':
+        horizontalOrigin = HorizontalOrigin.RIGHT;
+        break;
+      case 'center':
+      default:
+        horizontalOrigin = HorizontalOrigin.CENTER;
+    }
+    options.horizontalOrigin = horizontalOrigin;
+
+    let verticalOrigin;
+    switch (textStyle.getTextBaseline()) {
+      case 'top':
+        verticalOrigin = VerticalOrigin.TOP;
+        break;
+      case 'middle':
+        verticalOrigin = VerticalOrigin.CENTER;
+        break;
+      case 'bottom':
+        verticalOrigin = VerticalOrigin.BOTTOM;
+        break;
+      case 'alphabetic':
+        verticalOrigin = VerticalOrigin.TOP;
+        break;
+      case 'hanging':
+        verticalOrigin = VerticalOrigin.BOTTOM;
+        break;
+      default:
+        verticalOrigin = VerticalOrigin.BASELINE;
+    }
+    options.verticalOrigin = verticalOrigin;
+    options.eyeOffset = vectorProperties.getEyeOffset(feature);
+    options.scaleByDistance = vectorProperties.getScaleByDistance(feature);
+
+    if (heightReference === HeightReference.CLAMP_TO_GROUND) {
+      options.disableDepthTestDistance = Number.POSITIVE_INFINITY;
+    }
+    return options;
+  }
+  return null;
+}
+
+/**
+ * validates if a point is renderable
+ */
+export function validatePoint(point: Point): boolean {
+  if (point.getType() !== 'Point') {
+    return false;
+  }
+  const flatCoordinates = point.getFlatCoordinates();
+  if (flatCoordinates && flatCoordinates.length >= 2) {
+    return flatCoordinates.every((value) => Number.isFinite(value));
+  }
+  return false;
+}
+
+/**
+ * returns positions (cartesian3) and WGS84 coordinates
+ * @param  coordinates
+ * @param  heightInfo
+ */
+export function getCartesian3AndWGS84FromCoordinates(
+  coordinates: Coordinate[],
+  heightInfo: VectorHeightInfo,
+): { positions: Cartesian3[]; wgs84Positions: Coordinate[] } {
+  const wgs84Positions = new Array(coordinates.length);
+  const positions = new Array(coordinates.length);
+  const heightValue =
+    heightInfo.groundLevel +
+    heightInfo.storeyHeightsAboveGround.reduce(
+      (sum, currentValue) => sum + currentValue,
+      0,
+    );
+  coordinates.forEach((coord, index) => {
+    wgs84Positions[index] = Projection.mercatorToWgs84(coord, true);
+    let height = null;
+    if (heightInfo.heightReference === HeightReference.RELATIVE_TO_GROUND) {
+      height = heightInfo.heightAboveGroundAdjustment;
+    } else {
+      height = heightValue;
+    }
+    positions[index] = Cartesian3.fromDegrees(coord[0], coord[1], height);
+  });
+  return {
+    positions,
+    wgs84Positions,
+  };
+}
+
+export function getLineGeometries(
+  wgs84Positions: Coordinate[],
+  heightInfo: VectorHeightInfo,
+  positions: Cartesian3[],
+  style: Style,
+): PolylineGeometry[] {
+  const lineGeometries = [];
+  const heightValueCorrection =
+    heightInfo.skirt +
+    heightInfo.storeyHeightsBelowGround.reduce(
+      (sum, currentValue) => sum + currentValue,
+      0,
+    );
+  for (let i = 0; i < wgs84Positions.length; i++) {
+    const pointPosition = wgs84Positions[i];
+    let heightValue =
+      pointPosition[2] != null ? pointPosition[2] : heightInfo.groundLevel;
+    heightValue -= heightValueCorrection;
+    const secondPoint = Cartesian3.fromDegrees(
+      pointPosition[0],
+      pointPosition[1],
+      heightValue,
+    );
+    const linePositions = [positions[i], secondPoint];
+    lineGeometries.push(
+      ...createLineGeometries({ positions: linePositions }, style),
+    );
+  }
+  return lineGeometries;
+}
+
+export default async function pointToCesium(
+  feature: Feature,
+  style: Style,
+  geometries: Point[],
+  vectorProperties: VectorProperties,
+  scene: Scene,
+  context: AsyncCesiumVectorContext,
+): Promise<void> {
+  if (!style.getImage() && !(style.getText() && style.getText().getText())) {
+    return;
+  }
+  const validGeometries = geometries.filter((point) => validatePoint(point));
+
+  // no geometries, so early escape
+  if (!validGeometries.length) {
+    return;
+  }
+
+  const coordinates = getCoordinates(validGeometries);
+  const heightInfo = getHeightInfo(feature, vectorProperties, coordinates);
+  let { heightReference } = heightInfo;
+  const allowPicking = vectorProperties.getAllowPicking(feature);
+
+  const { positions, wgs84Positions } = getCartesian3AndWGS84FromCoordinates(
+    coordinates,
+    heightInfo,
+  );
+
+  let modelOrPrimitiveOptions = null;
+  if (feature.get('olcs_modelUrl')) {
+    modelOrPrimitiveOptions = await getModelOptions(
+      feature,
+      wgs84Positions,
+      positions,
+      vectorProperties,
+      scene,
+    );
+  } else if (feature.get('olcs_primitiveOptions')) {
+    modelOrPrimitiveOptions = await getPrimitiveOptions(
+      feature,
+      style,
+      wgs84Positions,
+      positions,
+      vectorProperties,
+      scene,
+    );
+  } else {
+    modelOrPrimitiveOptions =
+      (await getModelOptions(
+        feature,
+        wgs84Positions,
+        positions,
+        vectorProperties,
+        scene,
+      )) ??
+      (await getPrimitiveOptions(
+        feature,
+        style,
+        wgs84Positions,
+        positions,
+        vectorProperties,
+        scene,
+      ));
+  }
+
+  if (heightInfo.extruded && style.getStroke()) {
+    const lineGeometries = getLineGeometries(
+      wgs84Positions,
+      heightInfo,
+      positions,
+      style,
+    );
+    if (lineGeometries.length) {
+      heightReference = HeightReference.NONE;
+      const linePrimitive = createLinePrimitive(
+        scene,
+        vectorProperties,
+        allowPicking,
+        feature,
+        lineGeometries,
+        style,
+        false,
+      );
+      if (linePrimitive) {
+        context.addPrimitives([linePrimitive], feature, allowPicking);
+      }
+    }
+  }
+  if (modelOrPrimitiveOptions) {
+    if (modelOrPrimitiveOptions.options.autoScale) {
+      context.addScaledPrimitives(
+        modelOrPrimitiveOptions.primitives,
+        feature,
+        allowPicking,
+      );
+    } else {
+      context.addPrimitives(
+        modelOrPrimitiveOptions.primitives,
+        feature,
+        allowPicking,
+      );
+    }
+  } else {
+    const bbOptions = getBillboardOptions(
+      feature,
+      style,
+      heightReference,
+      vectorProperties,
+    );
+    if (bbOptions) {
+      const bbOptionsperPosition = positions.map((position) => {
+        return { ...bbOptions, position };
+      });
+      context.addBillboards(bbOptionsperPosition, feature, allowPicking);
+    }
+
+    const labelOptions = getLabelOptions(
+      feature,
+      style,
+      heightReference,
+      vectorProperties,
+    );
+    if (labelOptions) {
+      const labelOptionsPerPosition = positions.map((position) => {
+        return { ...labelOptions, position };
+      });
+      context.addLabels(labelOptionsPerPosition, feature, allowPicking);
+    }
+  }
+}

package/src/util/featureconverter/polygonToCesium.ts

@@ -0,0 +1,249 @@
+import {
+  Cartesian3,
+  PolygonGeometry,
+  PerInstanceColorAppearance,
+  PolygonOutlineGeometry,
+  GroundPolylineGeometry,
+  PolygonHierarchy,
+  PolylineGeometry,
+  type Scene,
+  Cartographic,
+} from '@vcmap-cesium/engine';
+import type { Style } from 'ol/style.js';
+import type { Polygon } from 'ol/geom.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { Feature } from 'ol/index.js';
+import { parseNumber } from '@vcsuite/parsers';
+import { addPrimitivesToContext } from './featureconverterHelper.js';
+import Projection from '../projection.js';
+import { getFlatCoordinatesFromSimpleGeometry } from '../geometryHelpers.js';
+import type { VectorGeometryFactoryType } from '../../layer/vectorLayer.js';
+import type VectorProperties from '../../layer/vectorProperties.js';
+import type { AsyncCesiumVectorContext } from '../../layer/cesium/vectorContext.js';
+
+export type PolygonGeometryOptions = ConstructorParameters<
+  typeof PolygonGeometry
+>[0];
+
+export type PolylineGeometryOptions = ConstructorParameters<
+  typeof PolylineGeometry
+>[0];
+
+export function createSolidGeometries(
+  options: PolygonGeometryOptions,
+  height: number,
+  perPositionHeight: boolean,
+  extrudedHeight?: number,
+): PolygonGeometry[] {
+  const polygonOptions: PolygonGeometryOptions = {
+    ...options,
+    perPositionHeight,
+    extrudedHeight,
+  };
+  if (!perPositionHeight) {
+    polygonOptions.height = height;
+  }
+  return [new PolygonGeometry(polygonOptions)];
+}
+
+export function createOutlineGeometries(
+  options: PolygonGeometryOptions,
+  height: number,
+  perPositionHeight: boolean,
+  extrudedHeight?: number,
+): PolygonOutlineGeometry[] {
+  return [
+    new PolygonOutlineGeometry({
+      ...options,
+      height: perPositionHeight ? undefined : height,
+      extrudedHeight,
+      perPositionHeight,
+      vertexFormat: PerInstanceColorAppearance.FLAT_VERTEX_FORMAT,
+    }),
+  ];
+}
+
+export function createFillGeometries(
+  options: PolygonGeometryOptions,
+  height: number,
+  perPositionHeight: boolean,
+): PolygonGeometry[] {
+  return createSolidGeometries(options, height, perPositionHeight, undefined);
+}
+
+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;
+}
+
+export function createGroundLineGeometries(
+  options: PolygonGeometryOptions,
+  style: Style,
+): GroundPolylineGeometry[] {
+  return getLineGeometryOptions(options, style).map((option) => {
+    return new GroundPolylineGeometry(option);
+  });
+}
+export function createLineGeometries(
+  options: PolygonGeometryOptions,
+  style: Style,
+  groundLevel?: number,
+): PolylineGeometry[] {
+  return getLineGeometryOptions(options, style, groundLevel).map((option) => {
+    return new PolylineGeometry(option);
+  });
+}
+
+export function getGeometryOptions(
+  geometry: Polygon,
+  positionHeightAdjustment: number,
+): PolygonGeometryOptions {
+  let hieraryPositions;
+  const holes = [];
+  const rings = geometry.getLinearRings();
+  for (let i = 0; i < rings.length; i++) {
+    const coords = rings[i].getCoordinates();
+    const positions = coords.map((coord) => {
+      const wgs84Coords = Projection.mercatorToWgs84(coord);
+      if (wgs84Coords[2] != null) {
+        wgs84Coords[2] += positionHeightAdjustment;
+      }
+      return Cartesian3.fromDegrees(
+        wgs84Coords[0],
+        wgs84Coords[1],
+        wgs84Coords[2],
+      );
+    });
+    // make sure the last and first vertex is identical.
+    if (!Cartesian3.equals(positions[0], positions[positions.length - 1])) {
+      positions.push(positions[0]);
+    }
+    if (i === 0) {
+      hieraryPositions = positions;
+    } else {
+      holes.push(new PolygonHierarchy(positions));
+    }
+  }
+  return {
+    polygonHierarchy: new PolygonHierarchy(hieraryPositions, holes),
+  };
+}
+
+export function getCoordinates(geometries: Polygon[]): Coordinate[] {
+  const coordinates: Coordinate[] = [];
+  geometries.forEach((polygon) => {
+    coordinates.push(...getFlatCoordinatesFromSimpleGeometry(polygon));
+  });
+  return coordinates;
+}
+
+let geometryFactory: VectorGeometryFactoryType | null = null;
+
+function getGeometryFactory(): VectorGeometryFactoryType {
+  if (!geometryFactory) {
+    geometryFactory = {
+      getCoordinates,
+      getGeometryOptions,
+      createSolidGeometries,
+      createOutlineGeometries,
+      createFillGeometries,
+      createGroundLineGeometries,
+      createLineGeometries,
+    };
+  }
+  return geometryFactory;
+}
+
+/**
+ * TODO maybe add validation Functions to OpenlayersMap
+ * validates if a polygon is renderable
+ * @param  polygon
+ */
+export function validatePolygon(polygon: Polygon): boolean {
+  if (polygon.getType() !== 'Polygon') {
+    return false;
+  }
+  const flatCoordinates = polygon.getFlatCoordinates();
+  const ends = polygon.getEnds();
+  const stride = polygon.getStride();
+  const valid = ends.every((end, index) => {
+    const previous = index ? ends[index - 1] : 0;
+    const currentRingSize = end - previous;
+    return currentRingSize >= stride * 3;
+  });
+  if (!valid) {
+    return false;
+  }
+  // should have at least three coordinates for each linearRing and every value should be a number
+  const minimumValues = stride * 3 * polygon.getLinearRingCount();
+  if (
+    flatCoordinates &&
+    flatCoordinates.length >= minimumValues &&
+    polygon.getLinearRingCount()
+  ) {
+    return flatCoordinates.every((value) => Number.isFinite(value));
+  }
+  return false;
+}
+
+/**
+ * converts a polygon to a a cesium primitive, with optional labels
+ * @param  feature
+ * @param  style
+ * @param  geometries
+ * @param  vectorProperties
+ * @param  scene
+ * @param  context
+ */
+export default function polygonToCesium(
+  feature: Feature,
+  style: Style,
+  geometries: Polygon[],
+  vectorProperties: VectorProperties,
+  scene: Scene,
+  context: AsyncCesiumVectorContext,
+): void {
+  if (!style.getFill() && !style.getStroke()) {
+    return;
+  }
+  const polygonGeometryFactory = getGeometryFactory();
+  const validGeometries = geometries.filter((polygon) =>
+    validatePolygon(polygon),
+  );
+  addPrimitivesToContext(
+    feature,
+    style,
+    validGeometries,
+    vectorProperties,
+    scene,
+    polygonGeometryFactory,
+    context,
+  );
+}

package/src/util/fetch.ts

@@ -0,0 +1,28 @@
+export async function requestUrl(
+  url: string,
+  init?: RequestInit,
+): Promise<Response> {
+  const response = await fetch(url, init);
+  if (!response.ok) {
+    throw new Error(
+      `Failed fetching url ${url} with status: ${response.status}`,
+    );
+  }
+  return response;
+}
+
+export async function requestJson<T>(
+  url: string,
+  init?: RequestInit,
+): Promise<T> {
+  const response = await requestUrl(url, init);
+  return response.json() as Promise<T>;
+}
+
+export async function requestArrayBuffer(
+  url: string,
+  init?: RequestInit,
+): Promise<ArrayBuffer> {
+  const response = await requestUrl(url, init);
+  return response.arrayBuffer();
+}