Merge pull request #1291 from swissgeol/GSNGM-1163_update_pos_on_exag…

…geration

Update camera, target point positions and cursor height information on exaggeration

ui/src/cesiumutils.ts

@@ -477,16 +477,18 @@ const axisVector3dScratch = new Cartesian3();
  * @param axis configures on which axis second points should be placed (x or y axis according to map rectangle)
  * @param side configures where second point will be placed (left/right or above/below first point)
  */
-export function positionFromPxDistance(scene: Scene, firstPoint: Cartesian3, distancePx: number, axis: 'x' | 'y', side: 1 | -1) {
+export function positionFromPxDistance(scene: Scene, firstPoint: Cartesian3, distancePx: number, axis: 'x' | 'y' | 'z', side: 1 | -1) {
   const mapRect = scene.globe.cartographicLimitRectangle;
   scratchBoundingSphere.center = firstPoint;
   const pixelSize = scene.camera.getPixelSize(scratchBoundingSphere, scene.drawingBufferWidth, scene.drawingBufferHeight);
   const distance = distancePx * pixelSize;
   let corners;
   if (axis === 'y') {
     corners = [Cartographic.toCartesian(Rectangle.northeast(mapRect)), Cartographic.toCartesian(Rectangle.southeast(mapRect))];
-  } else {
+  } else if (axis === 'x') {
     corners = [Cartographic.toCartesian(Rectangle.northwest(mapRect)), Cartographic.toCartesian(Rectangle.northeast(mapRect))];
+  } else {
+    corners = [firstPoint, updateHeightForCartesianPositions([firstPoint], distance)[0]];
   }
   Cartesian3.midpoint(corners[0], corners[1], scratchPosition);
   const pos = projectPointOnSegment(firstPoint, corners[0], corners[1], 0, 1, 0);

ui/src/elements/ngm-coordinate-popup.ts

@@ -35,7 +35,7 @@ export class NgmCoordinatePopup extends LitElementI18n {
                         const cartCoords = Cartographic.fromCartesian(cartesian);
                         this.coordinatesLv95 = formatCartographicAs2DLv95(cartCoords);
                         this.coordinatesWgs84 = [cartCoords.longitude, cartCoords.latitude].map(radToDeg);
-                        this.elevation = this.integerFormat.format(cartCoords.height);
+                        this.elevation = this.integerFormat.format(cartCoords.height / viewer.scene.verticalExaggeration);
                         const altitude = viewer.scene.globe.getHeight(cartCoords) || 0;
                         this.terrainDistance = this.integerFormat.format(Math.abs(cartCoords.height - altitude));
                         this.style.left = event.position.x + 'px';

ui/src/elements/ngm-cursor-information.ts

@@ -61,7 +61,7 @@ export class NgmCursorInformation extends LitElementI18n {
         this.coordinates = formatCartographicAs2DLv95(Cartographic.fromCartesian(cartesian));
         const position = Cartographic.fromCartesian(cartesian);
         const lineOrPolygon = getValueOrUndefined(feature?.id?.polyline?.show) || getValueOrUndefined(feature?.id?.polygon?.show);
-        this.height = position.height;
+        this.height = position.height / this.viewer.scene.verticalExaggeration;
         this.showTerrainHeight = !(feature && !lineOrPolygon);
         return;
       }

ui/src/elements/ngm-map-configuration.ts

@@ -13,6 +13,7 @@ import {
 import type MapChooser from '../MapChooser.js';
 import {debounce} from '../utils';
 import {updateExaggerationForKmlDataSource} from '../cesiumutils';
+import NavToolsStore from '../store/navTools';
 
 @customElement('ngm-map-configuration')
 export class NgmMapConfiguration extends LitElementI18n {
@@ -113,6 +114,7 @@ export class NgmMapConfiguration extends LitElementI18n {
       this.viewer.scene.verticalExaggeration = this.exaggeration;
       this.viewer.scene.requestRender();
       setExaggeration(this.exaggeration);
+      NavToolsStore.exaggerationChanged.next(this.exaggeration);
     }
   }
 

ui/src/elements/ngm-nav-tools.ts

@@ -3,7 +3,7 @@ import {customElement, property, state} from 'lit/decorators.js';
 import {html} from 'lit';
 import draggable from './draggable';
 import {DEFAULT_VIEW} from '../constants';
-import type {Event, Scene, Viewer} from 'cesium';
+import {ConstantPositionProperty, Event, Scene, Viewer} from 'cesium';
 import {
   ArcType,
   CallbackProperty,
@@ -23,10 +23,9 @@ import {
 import type {Interactable} from '@interactjs/types';
 import {classMap} from 'lit/directives/class-map.js';
 import {
-  lookAtPoint,
+  lookAtPoint, pickCenter,
   pickCenterOnMapOrObject, pickPositionOrVoxel,
   positionFromPxDistance,
-  updateHeightForCartesianPositions
 } from '../cesiumutils';
 import {showSnackbarError} from '../notifications';
 import i18next from 'i18next';
@@ -78,12 +77,8 @@ export class NgmNavTools extends LitElementI18n {
   private xyAxisCalculation = (axis, side) => [this.axisCenter, positionFromPxDistance(this.viewer!.scene, this.axisCenter!, AXIS_LENGTH, axis, side)];
   private xAxisCallback = new CallbackProperty(() => this.xyAxisCalculation('x', -1), false);
   private yAxisCallback = new CallbackProperty(() => this.xyAxisCalculation('y', 1), false);
-  private zAxisCallback = new CallbackProperty(() => {
-    if (!this.axisCenter) return [];
-    const positions = this.xyAxisCalculation('x', -1);
-    const distance = Cartesian3.distance(positions[0]!, positions[1]!);
-    return [this.axisCenter, updateHeightForCartesianPositions([this.axisCenter], distance, this.viewer?.scene)[0]];
-  }, false);
+  private zAxisCallback = new CallbackProperty(() => this.xyAxisCalculation('z', -1), false);
+  private exaggeration = 1;
 
   constructor() {
     super();
@@ -92,6 +87,7 @@ export class NgmNavTools extends LitElementI18n {
       if (!this.viewer) return;
       this.axisDataSource = await this.viewer!.dataSources.add(new CustomDataSource('navigationAxes'));
       this.toggleAxis(this.axisCenter);
+      this.exaggeration = this.viewer.scene.verticalExaggeration;
     });
     NavToolsStore.syncTargetPoint.subscribe(() => this.syncPoint());
     NavToolsStore.hideTargetPointListener.subscribe(() => this.removeTargetPoint());
@@ -106,6 +102,27 @@ export class NgmNavTools extends LitElementI18n {
       if (type !== '' && type !== 'elevation' && this.showTargetPoint) this.removeTargetPoint();
       this.lockType = type;
     });
+    NavToolsStore.exaggerationChanged.subscribe(exaggeration => {
+      if (!this.viewer) return;
+      this.showTargetPoint && this.stopTracking();
+      const exaggerationScale = exaggeration / this.exaggeration;
+      const pc = this.viewer.camera.positionCartographic;
+      const centerOfView = pickCenter(this.viewer.scene);
+      if (centerOfView) {
+        const cartographic = Cartographic.fromCartesian(centerOfView);
+        const height = cartographic.height;
+        const offset = height * exaggerationScale - height;
+        this.viewer.camera.position = Cartesian3.fromRadians(pc.longitude, pc.latitude, pc.height + offset);
+      }
+      if (this.showTargetPoint) {
+        const iconPos = Cartographic.fromCartesian(this.refIcon.position!.getValue(this.julianDate)!);
+        iconPos.height = iconPos.height * exaggerationScale;
+        this.refIcon.position = new ConstantPositionProperty(Cartographic.toCartesian(iconPos));
+        this.startTracking();
+        syncTargetParam(iconPos);
+      }
+      this.exaggeration = exaggeration;
+    });
   }
 
   updated() {
@@ -207,7 +224,7 @@ export class NgmNavTools extends LitElementI18n {
 
   addTargetPoint(center: Cartesian3, lookAtTransform = false) {
     this.showTargetPoint = true;
-    this.refIcon.position = <any>center;
+    this.refIcon.position = new ConstantPositionProperty(center);
     const cam = this.viewer!.camera;
     this.refIcon.show = true;
     if (lookAtTransform) {

ui/src/store/navTools.ts

@@ -8,7 +8,7 @@ export default class NavToolsStore {
   private static hideTargetPointSubject = new Subject<void>();
   private static navLockTypeSubject = new BehaviorSubject<LockType>('');
   private static targetPointPositionSubject = new BehaviorSubject<Cartesian3 | undefined>(undefined);
-
+  static exaggerationChanged = new Subject<number>();
 
   static get syncTargetPoint() {
     return this.syncTargetPointSubject;