@vcmap/core 6.0.0-rc.4 → 6.0.0-rc.6

package/src/util/editor/editGeometrySession.ts

@@ -2,12 +2,12 @@ import { getLogger } from '@vcsuite/logger';
 import { unByKey } from 'ol/Observable.js';
 import type { Feature } from 'ol/index.js';
 import type {
-  LineString,
   Circle,
-  Polygon,
-  Point,
-  LinearRing,
   Geometry,
+  LinearRing,
+  LineString,
+  Point,
+  Polygon,
 } from 'ol/geom.js';
 import { EventsKey } from 'ol/events.js';
 import {
@@ -26,8 +26,9 @@ import RemoveVertexInteraction from './interactions/removeVertexInteraction.js';
 import {
   createVertex,
   geometryChangeKeys,
+  getCoordinatesAndLayoutFromVertices,
   getOlcsPropsFromFeature,
-  vectorPropertyChangeKeys,
+  syncScratchLayerVectorProperties,
 } from './editorHelpers.js';
 import InsertVertexInteraction from './interactions/insertVertexInteraction.js';
 import EditGeometryMouseOverInteraction from './interactions/editGeometryMouseOverInteraction.js';
@@ -37,15 +38,18 @@ import geometryIsValid from './validateGeoemetry.js';
 import MapInteractionController from './interactions/mapInteractionController.js';
 import type VectorLayer from '../../layer/vectorLayer.js';
 import type VcsApp from '../../vcsApp.js';
-import type {
-  // eslint-disable-next-line import/no-named-default
-  default as VectorProperties,
-  PropertyChangedKey,
-} from '../../layer/vectorProperties.js';
+// eslint-disable-next-line import/no-named-default
+import type { default as VectorProperties } from '../../layer/vectorProperties.js';
+import TranslationSnapping from './interactions/translationSnapping.js';
+import { vertexIndexSymbol } from './editorSymbols.js';
+import LayerSnapping from './interactions/layerSnapping.js';
+import { EventType } from '../../interaction/interactionType.js';
+import { SnapType, snapTypes } from './snappingHelpers.js';
 
 export type EditGeometrySession = EditorSession<SessionType.EDIT_GEOMETRY> & {
   setFeature(feature?: Feature): void;
   feature: Feature | null;
+  snapToLayers: VectorLayer[];
 };
 
 type EditGeometryInteraction = {
@@ -53,51 +57,52 @@ type EditGeometryInteraction = {
   destroy(): void;
 };
 
-function assignVectorProperty<
-  K extends PropertyChangedKey,
-  V extends VectorProperties[K],
->(props: VectorProperties, key: K, value: V): void {
-  props[key] = value;
-}
-
 type EditGeometrySessionOptions = {
   denyInsertion?: boolean;
   denyRemoval?: boolean;
+  initialSnapToLayers?: VectorLayer[];
+  snapTo?: SnapType[];
 };
 
-/**
- * Create the editing interaction for a feature with a line geometry
- * @param  feature
- * @param  scratchLayer
- * @group Editor
- */
 function createEditLineStringGeometryInteraction(
   feature: Feature<LineString>,
   scratchLayer: VectorLayer,
+  vectorProperties: VectorProperties,
   options: EditGeometrySessionOptions,
+  snapTo: SnapType[],
 ): EditGeometryInteraction {
   const geometry =
     feature[obliqueGeometry] ?? (feature.getGeometry() as LineString);
   const olcsProps = getOlcsPropsFromFeature(feature);
   const vertices = geometry
     .getCoordinates()
-    .map((c) => createVertex(c, olcsProps));
+    .map((c, i) => createVertex(c, olcsProps, i));
   scratchLayer.addFeatures(vertices);
   const resetGeometry = (): void => {
-    geometry.setCoordinates(
-      vertices.map((f) => f.getGeometry()!.getCoordinates()),
-    );
+    const { coordinates, layout } =
+      getCoordinatesAndLayoutFromVertices(vertices);
+    geometry.setCoordinates(coordinates, layout);
   };
   const translateVertex = new TranslateVertexInteraction(feature);
   translateVertex.vertexChanged.addEventListener(resetGeometry);
 
-  const interactions: AbstractInteraction[] = [translateVertex];
+  const interactions: AbstractInteraction[] = [
+    new TranslationSnapping(scratchLayer, geometry, snapTo),
+    translateVertex,
+  ];
 
   if (!options.denyInsertion) {
-    const insertVertex = new InsertVertexInteraction(feature, geometry);
+    const insertVertex = new InsertVertexInteraction(
+      feature,
+      geometry,
+      vectorProperties,
+    );
     insertVertex.vertexInserted.addEventListener(({ vertex, index }) => {
       scratchLayer.addFeatures([vertex]);
       vertices.splice(index, 0, vertex);
+      vertices.forEach((v, i) => {
+        v[vertexIndexSymbol] = i;
+      });
       resetGeometry();
     });
     interactions.push(insertVertex);
@@ -138,7 +143,7 @@ function createEditCircleGeometryInteraction(
   const olcsProps = getOlcsPropsFromFeature(feature);
   const vertices = geometry
     .getCoordinates()
-    .map((c) => createVertex(c, olcsProps));
+    .map((c, i) => createVertex(c, olcsProps, i));
   scratchLayer.addFeatures(vertices);
 
   const translateVertex = new TranslateVertexInteraction(feature);
@@ -151,8 +156,13 @@ function createEditCircleGeometryInteraction(
       const newRadius = cartesian2DDistance(coords[0], coords[1]);
       geometry.setRadius(newRadius);
     } else {
-      geometry.setCenter(vertex.getGeometry()!.getCoordinates());
-      vertices[1].getGeometry()!.setCoordinates(geometry.getCoordinates()[1]);
+      const { coordinates, layout } = getCoordinatesAndLayoutFromVertices([
+        vertex,
+      ]);
+      geometry.setCenterAndRadius(coordinates[0], geometry.getRadius(), layout);
+      vertices[1]
+        .getGeometry()!
+        .setCoordinates(geometry.getCoordinates()[1], layout);
     }
     suspend = false;
   });
@@ -188,16 +198,16 @@ function createEditBBoxGeometryInteraction(
   const olcsProps = getOlcsPropsFromFeature(feature);
   const vertices = geometry
     .getCoordinates()[0]
-    .map((c) => createVertex(c, olcsProps));
+    .map((c, i) => createVertex(c, olcsProps, i));
 
   scratchLayer.addFeatures(vertices);
   let suspend = false;
   const translateVertex = new TranslateVertexInteraction(feature);
   translateVertex.vertexChanged.addEventListener((vertex) => {
-    const vertexIndex = vertices.indexOf(vertex);
-    const originIndex = modulo(vertexIndex + 2, 4);
-    const rightOfIndex = modulo(vertexIndex + 1, 4);
-    const leftOfIndex = modulo(vertexIndex - 1, 4);
+    const index = vertices.indexOf(vertex);
+    const originIndex = modulo(index + 2, 4);
+    const rightOfIndex = modulo(index + 1, 4);
+    const leftOfIndex = modulo(index - 1, 4);
 
     const originCoords = vertices[originIndex].getGeometry()!.getCoordinates();
     const vertexCoords = vertex.getGeometry()!.getCoordinates();
@@ -231,16 +241,17 @@ function createEditBBoxGeometryInteraction(
     updateOtherVertex(leftOfIndex);
 
     suspend = true;
-    geometry.setCoordinates([
-      vertices.map((f) => f.getGeometry()!.getCoordinates()),
-    ]);
+    const { coordinates, layout } =
+      getCoordinatesAndLayoutFromVertices(vertices);
+    geometry.setCoordinates([coordinates], layout);
     suspend = false;
   });
 
   const geometryListener = geometry.on('change', () => {
     if (!suspend) {
+      const layout = geometry.getLayout();
       geometry.getCoordinates()[0].forEach((c, index) => {
-        vertices[index].getGeometry()!.setCoordinates(c);
+        vertices[index].getGeometry()!.setCoordinates(c, layout);
       });
     }
   });
@@ -261,7 +272,9 @@ function createEditBBoxGeometryInteraction(
 function createEditSimplePolygonInteraction(
   feature: Feature<Polygon>,
   scratchLayer: VectorLayer,
+  vectorProperties: VectorProperties,
   options: EditGeometrySessionOptions,
+  snapTo: SnapType[],
 ): EditGeometryInteraction {
   const geometry =
     feature[obliqueGeometry] ?? (feature.getGeometry() as Polygon);
@@ -270,26 +283,35 @@ function createEditSimplePolygonInteraction(
 
   const vertices = linearRing
     .getCoordinates()
-    .map((c) => createVertex(c, olcsProps));
+    .map((c, i) => createVertex(c, olcsProps, i));
   scratchLayer.addFeatures(vertices);
   const resetGeometry = (): void => {
-    const coordinates = vertices.map((f) => f.getGeometry()!.getCoordinates());
-    linearRing.setCoordinates(coordinates); // update linear ring for proper vertex insertion
-    geometry.setCoordinates([
-      vertices.map((f) => f.getGeometry()!.getCoordinates()),
-    ]); // update actual geometry, since linear ring is a clone and not a ref
+    const { coordinates, layout } =
+      getCoordinatesAndLayoutFromVertices(vertices);
+    linearRing.setCoordinates(coordinates, layout); // update linear ring for proper vertex insertion
+    geometry.setCoordinates([coordinates], layout); // update actual geometry, since linear ring is a clone and not a ref
   };
 
   const translateVertex = new TranslateVertexInteraction(feature);
   translateVertex.vertexChanged.addEventListener(resetGeometry);
 
-  const interactions: AbstractInteraction[] = [translateVertex];
+  const interactions: AbstractInteraction[] = [
+    new TranslationSnapping(scratchLayer, geometry, snapTo),
+    translateVertex,
+  ];
 
   if (!options.denyInsertion) {
-    const insertVertex = new InsertVertexInteraction(feature, linearRing);
+    const insertVertex = new InsertVertexInteraction(
+      feature,
+      linearRing,
+      vectorProperties,
+    );
     insertVertex.vertexInserted.addEventListener(({ vertex, index }) => {
       scratchLayer.addFeatures([vertex]);
       vertices.splice(index, 0, vertex);
+      vertices.forEach((v, i) => {
+        v[vertexIndexSymbol] = i;
+      });
       resetGeometry();
     });
     interactions.push(insertVertex);
@@ -329,7 +351,7 @@ function createEditPointInteraction(
   const geometry = feature[obliqueGeometry] ?? (feature.getGeometry() as Point);
   const olcsProps = getOlcsPropsFromFeature(feature);
 
-  const vertex = createVertex(geometry.getCoordinates(), olcsProps);
+  const vertex = createVertex(geometry.getCoordinates(), olcsProps, 0);
   const featureIdArray = [feature.getId() as string];
   layer.featureVisibility.hideObjects(featureIdArray);
   vertex[createSync] = true;
@@ -338,13 +360,18 @@ function createEditPointInteraction(
   let suspend = false;
   translateVertex.vertexChanged.addEventListener(() => {
     suspend = true;
-    geometry.setCoordinates(vertex.getGeometry()!.getCoordinates());
+    const { coordinates, layout } = getCoordinatesAndLayoutFromVertices([
+      vertex,
+    ]);
+    geometry.setCoordinates(coordinates[0], layout);
     suspend = false;
   });
 
   const geometryListener = geometry.on('change', () => {
     if (!suspend) {
-      vertex.getGeometry()!.setCoordinates(geometry.getCoordinates());
+      vertex
+        .getGeometry()!
+        .setCoordinates(geometry.getCoordinates(), geometry.getLayout());
     }
   });
 
@@ -365,7 +392,7 @@ function createEditPointInteraction(
  * Creates the edit geometry session.
  * @param  app
  * @param  layer
- * @param  [interactionId] id for registering mutliple exclusive interaction. Needed to run a selection session at the same time as a edit features session.
+ * @param  [interactionId] id for registering multiple exclusive interaction. Needed to run a selection session at the same time as a edit features session.
  * @param  [editVertexOptions={}]
  */
 function startEditGeometrySession(
@@ -396,38 +423,28 @@ function startEditGeometrySession(
    * The feature that is set for the edit session.
    */
   let currentFeature: Feature | null = null;
+  let layerSnappingInteraction: LayerSnapping | null = null;
+  let snapToLayers: VectorLayer[] =
+    editVertexOptions?.initialSnapToLayers?.slice() ?? [layer];
+
+  const snapTo = editVertexOptions?.snapTo ?? [...snapTypes];
 
   const pickingBehavior = createPickingBehavior(app);
   const altitudeModeChanged = (): void => {
     const altitudeMode = currentFeature
       ? layer.vectorProperties.getAltitudeMode(currentFeature)
       : layer.vectorProperties.altitudeMode;
+
+    scratchLayer.vectorProperties.altitudeMode = altitudeMode;
     pickingBehavior.setForAltitudeMode(altitudeMode);
   };
   altitudeModeChanged();
-  vectorPropertyChangeKeys.forEach((key) => {
-    assignVectorProperty(
-      scratchLayer.vectorProperties,
-      key,
-      layer.vectorProperties[key],
-    );
-  });
 
-  const vectorPropertiesChangedListener =
-    layer.vectorProperties.propertyChanged.addEventListener((props) => {
-      vectorPropertyChangeKeys.forEach((key) => {
-        if (props.includes(key)) {
-          assignVectorProperty(
-            scratchLayer.vectorProperties,
-            key,
-            layer.vectorProperties[key],
-          );
-          if (key === 'altitudeMode') {
-            altitudeModeChanged();
-          }
-        }
-      });
-    });
+  const vectorPropertiesChangedListener = syncScratchLayerVectorProperties(
+    scratchLayer,
+    layer,
+    altitudeModeChanged,
+  );
 
   const destroyCurrentInteractionSet = (): void => {
     if (currentInteractionSet) {
@@ -436,6 +453,7 @@ function startEditGeometrySession(
       );
       currentInteractionSet.destroy();
       currentInteractionSet = null;
+      layerSnappingInteraction = null; // destroyed in current interaction set
     }
 
     if (currentFeature) {
@@ -483,14 +501,18 @@ function startEditGeometrySession(
           currentInteractionSet = createEditSimplePolygonInteraction(
             feature as Feature<Polygon>,
             scratchLayer,
+            layer.vectorProperties,
             editVertexOptions,
+            snapTo,
           );
         }
       } else if (geometryType === GeometryType.LineString) {
         currentInteractionSet = createEditLineStringGeometryInteraction(
           feature as Feature<LineString>,
           scratchLayer,
+          layer.vectorProperties,
           editVertexOptions,
+          snapTo,
         );
       } else if (geometryType === GeometryType.Point) {
         currentInteractionSet = createEditPointInteraction(
@@ -506,6 +528,17 @@ function startEditGeometrySession(
       }
 
       if (currentInteractionSet) {
+        layerSnappingInteraction = new LayerSnapping(
+          snapToLayers,
+          scratchLayer,
+          (f) => f !== feature,
+          snapTo,
+          EventType.DRAGEVENTS,
+        );
+        currentInteractionSet.interactionChain.addInteraction(
+          layerSnappingInteraction,
+          0,
+        );
         interactionChain.addInteraction(currentInteractionSet.interactionChain);
         altitudeModeChanged();
       } else {
@@ -529,6 +562,7 @@ function startEditGeometrySession(
 
   const stop = (): void => {
     app.layers.remove(scratchLayer);
+    scratchLayer.destroy();
     if (featureListener) {
       unByKey(featureListener);
     }
@@ -554,6 +588,15 @@ function startEditGeometrySession(
     get feature(): Feature | null {
       return currentFeature;
     },
+    get snapToLayers(): VectorLayer[] {
+      return snapToLayers.slice();
+    },
+    set snapToLayers(layers: VectorLayer[]) {
+      snapToLayers = layers.slice();
+      if (layerSnappingInteraction) {
+        layerSnappingInteraction.layers = snapToLayers;
+      }
+    },
   };
 }
 

package/src/util/editor/editorHelpers.ts

@@ -2,6 +2,7 @@ import Point from 'ol/geom/Point.js';
 import Feature from 'ol/Feature.js';
 import type { Coordinate } from 'ol/coordinate.js';
 import type { Geometry } from 'ol/geom.js';
+import { GeometryLayout } from 'ol/geom/Geometry.js';
 
 import {
   Cartesian2,
@@ -11,7 +12,6 @@ import {
   Ray,
   IntersectionTests,
   Cartographic,
-  HeightReference,
   Cesium3DTileFeature,
   type Scene,
   type Camera,
@@ -20,17 +20,19 @@ import {
 import { mercatorToCartesian } from '../math.js';
 import { getFlatCoordinatesFromGeometry } from '../geometryHelpers.js';
 import CesiumMap from '../../map/cesiumMap.js';
-import { vertexSymbol } from './editorSymbols.js';
+import { vertexIndexSymbol, vertexSymbol } from './editorSymbols.js';
 import {
   alreadyTransformedToImage,
   createSync,
   doNotTransform,
 } from '../../layer/vectorSymbols.js';
-import type VectorLayer from '../../layer/vectorLayer.js';
 import type VcsMap from '../../map/vcsMap.js';
-import { PropertyChangedKey } from '../../layer/vectorProperties.js';
+import VectorProperties, {
+  PropertyChangedKey,
+} from '../../layer/vectorProperties.js';
+import VectorLayer from '../../layer/vectorLayer.js';
 
-export type Vertex = Feature<Point>;
+export type Vertex = Feature<Point> & { [vertexIndexSymbol]: number };
 
 export type SelectableFeatureType = Feature | Cesium3DTileFeature;
 export interface SelectFeatureInteraction {
@@ -53,6 +55,42 @@ export const vectorPropertyChangeKeys: PropertyChangedKey[] = [
   'heightAboveGround',
 ];
 
+function assignVectorProperty<
+  K extends PropertyChangedKey,
+  V extends VectorProperties[K],
+>(props: VectorProperties, key: K, value: V): void {
+  props[key] = value;
+}
+
+export function syncScratchLayerVectorProperties(
+  scratchLayer: VectorLayer,
+  layer: VectorLayer,
+  altitudeModeChanged?: () => void,
+): () => void {
+  vectorPropertyChangeKeys.forEach((key) => {
+    assignVectorProperty(
+      scratchLayer.vectorProperties,
+      key,
+      layer.vectorProperties[key],
+    );
+  });
+
+  return layer.vectorProperties.propertyChanged.addEventListener((props) => {
+    vectorPropertyChangeKeys.forEach((key) => {
+      if (props.includes(key)) {
+        assignVectorProperty(
+          scratchLayer.vectorProperties,
+          key,
+          layer.vectorProperties[key],
+        );
+        if (key === 'altitudeMode') {
+          altitudeModeChanged?.();
+        }
+      }
+    });
+  });
+}
+
 export function getOlcsPropsFromFeature(
   feature: Feature,
 ): Record<string, number | string> {
@@ -70,19 +108,50 @@ export function getOlcsPropsFromFeature(
 export function createVertex(
   coordinate: Coordinate,
   olcsProps: Record<string, number | string>,
+  index: number,
 ): Vertex {
   const geometry = new Point(coordinate);
   geometry[alreadyTransformedToImage] = true;
   const vertex = new Feature({
     geometry,
     ...olcsProps,
-  });
+  }) as Vertex;
   vertex[vertexSymbol] = true;
+  vertex[vertexIndexSymbol] = index;
   vertex[doNotTransform] = true;
   vertex[createSync] = true;
   return vertex;
 }
 
+export function getCoordinatesAndLayoutFromVertices(vertices: Vertex[]): {
+  coordinates: Coordinate[];
+  layout: GeometryLayout;
+} {
+  let is2D = false;
+  const flatCoordinates = new Array<number>(vertices.length * 3);
+  vertices.forEach((v, i) => {
+    const vertexCoordinates = v.getGeometry()!.getCoordinates();
+    is2D = is2D || vertexCoordinates.length === 2;
+    flatCoordinates[i * 3] = vertexCoordinates[0];
+    flatCoordinates[i * 3 + 1] = vertexCoordinates[1];
+    flatCoordinates[i * 3 + 2] = vertexCoordinates[2];
+  });
+
+  const coordinates = new Array<Coordinate>(vertices.length);
+  for (let i = 0; i < vertices.length; i++) {
+    const coordinate = [flatCoordinates[i * 3], flatCoordinates[i * 3 + 1]];
+    if (!is2D) {
+      coordinate[2] = flatCoordinates[i * 3 + 2];
+    }
+    coordinates[i] = coordinate;
+  }
+
+  return {
+    coordinates,
+    layout: is2D ? 'XY' : 'XYZ',
+  };
+}
+
 let scratchCartesian21 = new Cartesian2();
 let scratchCartesian22 = new Cartesian2();
 let scratchCartesian23 = new Cartesian2();
@@ -124,6 +193,7 @@ export function getClosestPointOn2DLine(
     lambda,
     scratchCartesian21,
   );
+
   return [
     scratchCartesian21.x + start[0],
     scratchCartesian21.y + start[1],
@@ -297,7 +367,7 @@ export async function drapeGeometryOnTerrain(
     const coordinates = geometry.getCoordinates() as any[];
     const flats = getFlatCoordinatesFromGeometry(geometry, coordinates);
     await map.getHeightFromTerrain(flats);
-    geometry.setCoordinates(coordinates);
+    geometry.setCoordinates(coordinates, 'XYZ');
   }
 }
 
@@ -323,28 +393,6 @@ export async function placeGeometryOnTerrain(
     flats.forEach((coord) => {
       coord[2] = minHeight;
     });
-    geometry.setCoordinates(coordinates);
-  }
-}
-
-export async function ensureFeatureAbsolute(
-  feature: Feature,
-  layer: VectorLayer,
-  cesiumMap: CesiumMap,
-): Promise<void> {
-  // XXX this does not ensure 3D coordinates
-  const layerIsClamped =
-    layer.vectorProperties.altitudeMode === HeightReference.CLAMP_TO_GROUND;
-  const altitudeMode = feature.get('olcs_altitudeMode') as string;
-  if (altitudeMode === 'clampToGround' || (!altitudeMode && layerIsClamped)) {
-    feature.set('olcs_altitudeMode', 'absolute', true);
-    const geometry = feature.getGeometry();
-    if (geometry) {
-      await placeGeometryOnTerrain(geometry, cesiumMap);
-    }
+    geometry.setCoordinates(coordinates, 'XYZ');
   }
 }
-
-export function clampFeature(feature: import('ol').Feature): void {
-  feature.set('olcs_altitudeMode', 'clampToGround');
-}

package/src/util/editor/editorSessionHelpers.ts

@@ -10,6 +10,13 @@ import { markVolatile } from '../../vcsModule.js';
 import { PrimitiveOptionsType } from '../../layer/vectorProperties.js';
 import EventHandler from '../../interaction/eventHandler.js';
 import type VcsApp from '../../vcsApp.js';
+import { InteractionEvent } from '../../interaction/abstractInteraction.js';
+
+export const alreadySnapped = Symbol('alreadySnapped');
+
+export type SnappingInteractionEvent = InteractionEvent & {
+  [alreadySnapped]?: boolean;
+};
 
 export enum SessionType {
   CREATE = 'create',

package/src/util/editor/editorSymbols.ts

@@ -5,7 +5,7 @@ export const vertexSymbol = Symbol('Vertex');
 /**
  * Symbol to denote the vertexes index in the vertices array. This is important for snapping & bbox operations
  */
-export const vertexIndex = Symbol('VertexIndex');
+export const vertexIndexSymbol = Symbol('VertexIndex');
 /**
  * Symbol added to primitives and features to denote that these are handlers. It is expected, that the value of the symobl is
  * equal to an {@link AxisAndPlanes}

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

@@ -13,6 +13,7 @@ import {
 } from '../../../layer/vectorSymbols.js';
 import ObliqueMap from '../../../map/obliqueMap.js';
 import type { CreateInteraction } from '../createFeatureSession.js';
+import { is2DLayout } from '../../geometryHelpers.js';
 
 /**
  * Offset to prevent bbox from collapsing
@@ -32,6 +33,8 @@ class CreateBBoxInteraction
 
   private _lastCoordinate: Coordinate | null = null;
 
+  private _is3D = false;
+
   finished = new VcsEvent<Polygon | null>();
 
   created = new VcsEvent<Polygon>();
@@ -56,27 +59,32 @@ class CreateBBoxInteraction
         this._lastCoordinate[1] += precisionOffset;
       }
 
-      this._lastCoordinate[2] = this._origin[2];
-      let ringCoordinates;
+      if (this._is3D) {
+        this._lastCoordinate[2] = this._origin[2];
+      }
+
+      let lowerRight: Coordinate;
+      let upperLeft: Coordinate;
+
       if (
         (originXHigher && originYHigher) ||
         (!originXHigher && !originYHigher)
       ) {
-        ringCoordinates = [
-          this._origin,
-          [this._lastCoordinate[0], this._origin[1], this._origin[2]],
-          this._lastCoordinate,
-          [this._origin[0], this._lastCoordinate[1], this._origin[2]],
-        ];
+        lowerRight = [this._lastCoordinate[0], this._origin[1]];
+        upperLeft = [this._origin[0], this._lastCoordinate[1]];
       } else {
-        ringCoordinates = [
-          this._origin,
-          [this._origin[0], this._lastCoordinate[1], this._origin[2]],
-          this._lastCoordinate,
-          [this._lastCoordinate[0], this._origin[1], this._origin[2]],
-        ];
+        lowerRight = [this._origin[0], this._lastCoordinate[1]];
+        upperLeft = [this._lastCoordinate[0], this._origin[1]];
       }
-      this._geometry.setCoordinates([ringCoordinates]);
+
+      if (this._is3D) {
+        lowerRight.push(this._origin[2]);
+        upperLeft.push(this._origin[2]);
+      }
+
+      this._geometry.setCoordinates([
+        [this._origin, lowerRight, this._lastCoordinate, upperLeft],
+      ]);
     }
   }
 
@@ -94,8 +102,9 @@ class CreateBBoxInteraction
       if (this._geometry) {
         this.finish();
       } else {
-        this._geometry = new Polygon([[event.positionOrPixel.slice()]], 'XYZ');
+        this._geometry = new Polygon([[event.positionOrPixel.slice()]]);
         this._geometry.set('_vcsGeomType', GeometryType.BBox);
+        this._is3D = !is2DLayout(this._geometry.getLayout());
         if (event.map instanceof ObliqueMap) {
           this._geometry[alreadyTransformedToImage] = true;
         } else {

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

@@ -60,7 +60,7 @@ class CreateCircleInteraction
       if (this._geometry) {
         this.finish();
       } else {
-        this._geometry = new Circle(event.positionOrPixel, 20, 'XYZ');
+        this._geometry = new Circle(event.positionOrPixel, 20);
         this._geometry[actuallyIsCircle] = event.map instanceof ObliqueMap;
         if (event.map instanceof ObliqueMap) {
           this._geometry[alreadyTransformedToImage] = true;