From 7de656ffc2a7782bd1660f2aa8753f02de87cfe4 Mon Sep 17 00:00:00 2001 From: vladyslavtk Date: Thu, 6 Jun 2024 18:47:48 +0300 Subject: [PATCH] Update camera, target point and cursor positions on exaggeration --- ui/src/cesiumutils.ts | 6 ++-- ui/src/elements/ngm-coordinate-popup.ts | 2 +- ui/src/elements/ngm-cursor-information.ts | 2 +- ui/src/elements/ngm-map-configuration.ts | 2 ++ ui/src/elements/ngm-nav-tools.ts | 37 +++++++++++++++++------ ui/src/store/navTools.ts | 2 +- 6 files changed, 36 insertions(+), 15 deletions(-) diff --git a/ui/src/cesiumutils.ts b/ui/src/cesiumutils.ts index 37d528cb4..8225e257c 100644 --- a/ui/src/cesiumutils.ts +++ b/ui/src/cesiumutils.ts @@ -477,7 +477,7 @@ 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); @@ -485,8 +485,10 @@ export function positionFromPxDistance(scene: Scene, firstPoint: Cartesian3, dis 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); diff --git a/ui/src/elements/ngm-coordinate-popup.ts b/ui/src/elements/ngm-coordinate-popup.ts index d4e3e4531..1756c4b12 100644 --- a/ui/src/elements/ngm-coordinate-popup.ts +++ b/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'; diff --git a/ui/src/elements/ngm-cursor-information.ts b/ui/src/elements/ngm-cursor-information.ts index bd55cc077..6ac6f702b 100644 --- a/ui/src/elements/ngm-cursor-information.ts +++ b/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; } diff --git a/ui/src/elements/ngm-map-configuration.ts b/ui/src/elements/ngm-map-configuration.ts index 73412483d..dff144472 100644 --- a/ui/src/elements/ngm-map-configuration.ts +++ b/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); } } diff --git a/ui/src/elements/ngm-nav-tools.ts b/ui/src/elements/ngm-nav-tools.ts index dd2624acd..70d243e1d 100644 --- a/ui/src/elements/ngm-nav-tools.ts +++ b/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 = center; + this.refIcon.position = new ConstantPositionProperty(center); const cam = this.viewer!.camera; this.refIcon.show = true; if (lookAtTransform) { diff --git a/ui/src/store/navTools.ts b/ui/src/store/navTools.ts index b8f67467f..482dab6ba 100644 --- a/ui/src/store/navTools.ts +++ b/ui/src/store/navTools.ts @@ -8,7 +8,7 @@ export default class NavToolsStore { private static hideTargetPointSubject = new Subject(); private static navLockTypeSubject = new BehaviorSubject(''); private static targetPointPositionSubject = new BehaviorSubject(undefined); - + static exaggerationChanged = new Subject(); static get syncTargetPoint() { return this.syncTargetPointSubject;