Navigation and refinements

src/apps/permits/demoPermitConfig.ts

@@ -28,17 +28,48 @@ export const config: IPermitsConfig = {
       },
       layers: {
         tiles3d: ['@geoadmin/buildings'], // @cesium/googlePhotorealistic
-        // models: ['@demo/sofa', '@demo/thatopensmall'],
+        models: ['@demo/sofa', '@demo/thatopensmall'],
         imageries: ['@geoadmin/pixel-karte-farbe'],
         terrain: '@geoadmin/terrain',
       },
+      quickLists: {
+        baseLayers: ['@geoadmin/pixel-karte-farbe'],
+      },
       camera: {
         position: [6.628484, 46.5, 1000],
         orientation: {
           heading: 0,
           pitch: -30.0,
         },
       },
+      views: [
+        {
+          positions: [
+            [6.62571, 46.50666],
+            [6.62582, 46.50659],
+            [6.62556, 46.50655],
+            [6.62566, 46.50648],
+          ],
+          height: 5,
+          elevation: 374,
+          flyDuration: 2,
+          title: 'Building',
+          fovAngle: 45,
+        },
+        {
+          positions: [
+            [6.62582, 46.50651],
+            [6.62587, 46.50654],
+            [6.62592, 46.50651],
+            [6.62587, 46.50648],
+          ],
+          height: 2,
+          elevation: 374,
+          flyDuration: 2,
+          title: 'Building 2',
+          fovAngle: 45,
+        },
+      ],
       layerOptions: {},
       widgetOptions: {
         scene3DOnly: true,

src/apps/permits/index.ts

@@ -15,6 +15,7 @@ import '../../plugins/cesium/ngv-plugin-cesium-upload';
 import '../../plugins/cesium/ngv-plugin-cesium-model-interact';
 import '../../plugins/cesium/ngv-plugin-cesium-slicing';
 import '../../plugins/cesium/ngv-plugin-cesium-measure';
+import '../../plugins/cesium/ngv-plugin-cesium-navigation';
 import type {CesiumWidget, DataSourceCollection} from '@cesium/engine';
 
 import {PrimitiveCollection} from '@cesium/engine';
@@ -34,6 +35,8 @@ export class NgvAppPermits extends ABaseApp<IPermitsConfig> {
     indexDbName: 'permits-uploadedModelsStore',
   };
 
+  private sliceStoreKey = 'permits-localStoreClipping';
+
   private collections: ViewerInitializedDetails['primitiveCollections'];
 
   constructor() {
@@ -80,11 +83,18 @@ export class NgvAppPermits extends ABaseApp<IPermitsConfig> {
                   .viewer="${this.viewer}"
                   .tiles3dCollection="${this.collections.tiles3d}"
                   .dataSourceCollection="${this.dataSourceCollection}"
+                  .storeKey="${this.sliceStoreKey}"
                 ></ngv-plugin-cesium-slicing>
                 <ngv-plugin-cesium-measure
                   .viewer="${this.viewer}"
                   .dataSourceCollection="${this.dataSourceCollection}"
+                  .options=${this.config.app.cesiumContext.measureOptions}
                 ></ngv-plugin-cesium-measure>
+                <ngv-plugin-cesium-navigation
+                  .viewer="${this.viewer}"
+                  .viewsConfig="${this.config.app.cesiumContext.views}"
+                  .dataSourceCollection="${this.dataSourceCollection}"
+                ></ngv-plugin-cesium-navigation>
               `
             : ''}
         </div>

src/catalogs/demoCatalog.ts

@@ -12,19 +12,21 @@ export const catalog: INGVCatalog = {
           credit: 'test',
         },
       },
-      position: [6.628484, 46.5],
-      height: 0,
-      rotation: 0,
+      position: [6.625727097014207, 46.50662035273721],
+      // todo apply terrain height automatically?
+      height: 374,
+      rotation: 45,
     },
     sofa: {
       type: 'model',
       options: {
         url: 'https://raw.GithubUserContent.com/KhronosGroup/glTF-Sample-Assets/main/./Models/SheenWoodLeatherSofa/glTF-Binary/SheenWoodLeatherSofa.glb',
         credit: 'Khonos',
       },
-      position: [6.628484, 46.5],
-      height: 0,
-      rotation: 0,
+      position: [6.625858407650085, 46.50649671101955],
+      // todo apply terrain height automatically?
+      height: 374,
+      rotation: 239,
     },
     // to complete
   },

src/interfaces/cesium/ingv-cesium-context.ts

@@ -31,6 +31,30 @@ export interface IngvCesiumContext {
       pitch: number;
     };
   };
+  views?: {
+    positions: [
+      [number, number],
+      [number, number],
+      [number, number],
+      [number, number],
+    ];
+    height: number;
+    elevation: number;
+    title: string;
+    flyDuration?: number;
+    fovAngle: number;
+    highlightColor?: string; // css string, default red
+  }[];
   widgetOptions?: ConstructorParameters<typeof CesiumWidget>[1];
   globeOptions?: Partial<Globe>;
+  measureOptions?: {
+    areaFill?: string;
+    lineColor?: string;
+    lineWidth?: number;
+    showPoints?: boolean;
+    pointColor?: string;
+    pointOutlineWidth?: number;
+    pointOutlineColor?: string;
+    pointPixelSize?: number;
+  };
 }

src/plugins/cesium/draw.ts

@@ -42,7 +42,14 @@ export interface DrawOptions {
   strokeColor?: string | Color;
   strokeWidth?: number;
   minPointsStop?: boolean;
-  pointOptions?: PointOptions;
+  pointOptions?: Omit<
+    PointOptions,
+    'color' | 'virtualColor' | 'outlineColor'
+  > & {
+    color?: Color | string;
+    virtualColor?: Color | string;
+    outlineColor?: Color | string;
+  };
   lineClampToGround?: boolean;
 }
 
@@ -129,15 +136,17 @@ export class CesiumDraw extends EventTarget {
     const heightReference = pointOptions?.heightReference;
     this.pointOptions = {
       color:
-        pointOptions?.color instanceof Color ? pointOptions.color : Color.WHITE,
+        pointOptions?.color instanceof Color
+          ? pointOptions.color
+          : Color.fromCssColorString(pointOptions?.color || '#fff'),
       virtualColor:
         pointOptions?.virtualColor instanceof Color
           ? pointOptions.virtualColor
-          : Color.GREY,
+          : Color.fromCssColorString(pointOptions?.virtualColor || '#808080'),
       outlineColor:
         pointOptions?.outlineColor instanceof Color
           ? pointOptions.outlineColor
-          : Color.BLACK,
+          : Color.fromCssColorString(pointOptions?.outlineColor || '#000'),
       outlineWidth:
         typeof pointOptions?.outlineWidth === 'number' &&
         !isNaN(pointOptions?.outlineWidth)

src/plugins/cesium/interactionHelpers.ts

@@ -1,11 +1,13 @@
 import type {
   Cesium3DTileset,
   CustomDataSource,
+  DirectionUp,
   Globe,
   Model,
   PrimitiveCollection,
   Scene,
 } from '@cesium/engine';
+import {Math as CMath} from '@cesium/engine';
 import {ClippingPolygonCollection} from '@cesium/engine';
 import {
   ArcType,
@@ -638,3 +640,68 @@ export function updateHeightForCartesianPositions(
       : Cartographic.toCartesian(cartographicPosition);
   });
 }
+
+export function calculateViewOnRectangle(
+  bottomLeft: Cartesian3,
+  bottomRight: Cartesian3,
+  topLeft: Cartesian3,
+  topRight: Cartesian3,
+  fovAngle: number,
+): {
+  destination: Cartesian3;
+  orientation: DirectionUp;
+} {
+  // Calculate the midpoint of the rectangle
+  const midpoint = Cartesian3.multiplyByScalar(
+    Cartesian3.add(
+      Cartesian3.add(bottomLeft, bottomRight, new Cartesian3()),
+      Cartesian3.add(topLeft, topRight, new Cartesian3()),
+      new Cartesian3(),
+    ),
+    0.25,
+    new Cartesian3(),
+  );
+
+  const verticalDistance = Cartesian3.distance(topLeft, bottomLeft);
+  const horizontalDistance = Cartesian3.distance(bottomLeft, bottomRight);
+  const diagonalDistance = Math.sqrt(
+    verticalDistance ** 2 + horizontalDistance ** 2,
+  );
+
+  const fov = CMath.toRadians(fovAngle);
+  const cameraDistance = diagonalDistance / (2 * Math.tan(fov / 2));
+
+  // Calculate the normal vector of the rectangle plane
+  const horizontalVector = Cartesian3.subtract(
+    bottomRight,
+    bottomLeft,
+    new Cartesian3(),
+  );
+  const verticalVector = Cartesian3.subtract(
+    topLeft,
+    bottomLeft,
+    new Cartesian3(),
+  );
+
+  const normalVector = Cartesian3.normalize(
+    Cartesian3.cross(horizontalVector, verticalVector, new Cartesian3()),
+    new Cartesian3(),
+  );
+
+  // Camera position is offset along the normal vector
+  const cameraPosition = Cartesian3.add(
+    midpoint,
+    Cartesian3.multiplyByScalar(normalVector, cameraDistance, new Cartesian3()),
+    new Cartesian3(),
+  );
+
+  const cameraDirection = Cartesian3.negate(normalVector, new Cartesian3());
+
+  return {
+    destination: cameraPosition,
+    orientation: {
+      direction: cameraDirection,
+      up: verticalVector,
+    },
+  };
+}

src/plugins/cesium/localStore.ts

@@ -162,16 +162,17 @@ export type StoredClipping = {
   tilesClipping: boolean;
 };
 
-const CLIPPING_KEY = 'clipping-polygons';
-
-export function updateClippingInLocalStore(clipping: StoredClipping[]): void {
-  localStorage.setItem(CLIPPING_KEY, JSON.stringify(clipping));
+export function updateClippingInLocalStore(
+  clipping: StoredClipping[],
+  key: string,
+): void {
+  localStorage.setItem(key, JSON.stringify(clipping));
 }
 
-export function getStoredClipping(): StoredClipping[] {
-  if (!localStorage.getItem(CLIPPING_KEY)) return [];
+export function getStoredClipping(key: string): StoredClipping[] {
+  if (!localStorage.getItem(key)) return [];
   try {
-    return <StoredClipping[]>JSON.parse(localStorage.getItem(CLIPPING_KEY));
+    return <StoredClipping[]>JSON.parse(localStorage.getItem(key));
   } catch (e) {
     console.error('Not possible to parse clippings from local storage', e);
     return [];

src/plugins/cesium/ngv-cesium-factories.ts

@@ -267,7 +267,7 @@ export async function initCesiumWidget(
 
   const viewer = new CesiumWidget(
     container,
-    Object.assign({}, cesiumContext.widgetOptions),
+    Object.assign({baseLayer: false}, cesiumContext.widgetOptions),
   );
 
   if (cesiumContext.globeOptions) {