feat: add flyTo options for setNadirViewAngle and use it on switch map

CHANGELOG.md

@@ -1,4 +1,6 @@
-# [12.x.x](https://github.com/dlr-eoc/ukis-frontend-libraries/tree/v12.0.0) (2024-02-07) (services-map-state, map-ol, map-cesium and map-maplibre)
+# [12.x.x]() () (services-map-state, map-ol, map-cesium and map-maplibre)
+
+
 ### Features
 * **@dlr-eoc/services-map-state:**
   - Added viewAngle and rotation to mapState [Issue #216](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/216).
@@ -11,6 +13,7 @@
 * **@dlr-eoc/map-cesium:**
   - Adding support for mapState viewAngle and rotation
   - Added flyTo options for `setViewAngle` and `setRotation`
+  - Added flyTo options for `setNadirViewAngle` - This can be useful if you switch the map to a 2D view and want to reset the `ViewAngle` before.
 
  * **@dlr-eoc/map-maplibre:**
   - Adding support for mapState viewAngle and rotation 

projects/demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts

@@ -3,9 +3,8 @@ import { LayersService, Layer, WmtsLayer, RasterLayer, CustomLayer, WmsLayer, Ve
 import { MapStateService, IMapState } from '@dlr-eoc/services-map-state';
 
 import { OsmTileLayer, EocLitemap, BlueMarbleTile, EocLiteoverlayTile } from '@dlr-eoc/base-layers-raster';
-import { ICesiumControls } from '@dlr-eoc/map-cesium';
+import { ICesiumControls, MapCesiumService } from '@dlr-eoc/map-cesium';
 import { MapOlService } from '@dlr-eoc/map-ol';
-import olMap from 'ol/Map';
 import { Cesium3DTileset, CesiumTerrainProvider, Credit, EllipsoidTerrainProvider, I3SDataProvider, createGooglePhotorealistic3DTileset } from '@cesium/engine';
 import testData from '@dlr-eoc/shared-assets/geojson/test.json';
 import { Feature } from 'ol';
@@ -20,6 +19,7 @@ import { Fill, Stroke, Style } from 'ol/style';
   providers: [
     MapStateService,
     MapOlService,
+    MapCesiumService,
     {
       provide: 'twoDlayerSvc', useClass: LayersService
     }, {
@@ -48,7 +48,8 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy {
     @Inject('twoDlayerSvc') public twoDlayerSvc: LayersService,
     @Inject('threeDlayerSvc') public threeDlayerSvc: LayersService,
     public mapOlSvc: MapOlService,
-    public mapStateSvc: MapStateService
+    public mapStateSvc: MapStateService,
+    public mapCesiumSvc: MapCesiumService
   ) {
     this.controls = {
       infoBox: true,
@@ -310,21 +311,11 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy {
     if (this.is2dMap) {
       this.is2dMap = false;
     } else {
-      // If there is no set view angle, the flyTo is not necessary
-      if (this.mapStateSvc.getMapState().getValue().viewAngle != 0) {
-        this.mapStateSvc.setViewAngle(0.01);
-        // Wait for the cesim flyTo function to finish
-        setTimeout(() => {
-          //the openlayers map needs to be fully resetted, to avoid an error with the map controls
-          this.mapOlSvc.map = new olMap({});
+      this.mapCesiumSvc.setNadirViewAngle({
+        complete: () => {
           this.is2dMap = true;
-        }, 1500);
-      } else {
-        this.mapOlSvc.map = new olMap({});
-        this.is2dMap = true;
-      }
-
-
+        }
+      });
     }
   }
 

projects/map-cesium/src/lib/map-cesium.service.ts

@@ -244,8 +244,22 @@ export class MapCesiumService {
     this.viewer.camera.flyTo(flyToOptions)
   }
 
-  public setNadirViewAngle() {
-    this.setViewAngle(0);
+  /**
+   * @param options of viewer.camera.flyTo
+   */
+  public setNadirViewAngle(options?: any) {
+    if (this.getViewAngle() !== 0) {
+      if (options) {
+        this.setViewAngle(0, options);
+      } else {
+        this.setViewAngle(0);
+      }
+    }else{
+      // If view angle is 0, setViewAngle(0) (flyTo) is not necessary
+      if(options.complete && typeof options.complete === 'function'){
+        options.complete();
+      }
+    }
   }
 
   //add 90°, to get the same behavior as in openlayers
@@ -272,7 +286,7 @@ export class MapCesiumService {
 
     this.viewer.camera.flyTo(flyToOptions)
   }
-// subtract rotation degree from 360° to get the same behavior as in openlayers
+  // subtract rotation degree from 360° to get the same behavior as in openlayers
   public getRotation():number{
     return 360 - CesiumMath.toDegrees(this.viewer.camera.heading);
   }