Mapstate update (#217)

* Feat: adding viewAngle and rotation. #216 * Doc: Updating changelog. * Feat: add setter functions. #216 * Feat: Adjust angle and rotation setter functions. #216 * Feat: Connect rotation to map-ol. #216 * Feat: connect viewAngle and rotation to map-maplibre. #216 * Feat: Integrate viewAngle and rotation from mapState. #216 * Feat: Add viewAngle and rotation to demos. #216 * Feat: Improve mapstate handling. #216 * Docs: update readme. #216 * Test: Adding tests for rotation and view angle. #216 * Docs: updating changelog * feat: add notifier to setTime and test values in setters * docs: add fix getExtent to changelog * docs: add more documentation for set view angle and rotation * fix: rename to differentiate between these functions and maplibre internals - change before release * feat: add flyTo options to setViewAngle and setRotation * fix: check for entityCollection?.owner in infoBox * fix: preserve the last state from camera view before destroy * docs: add rotation for map-ol in changelog * refactor: reset setViewAngle and rotation with 0 * feat: add flyTo options for setNadirViewAngle and use it on switch map --------- Co-authored-by: Mathias Boeck <[email protected]>
dlr-eoc · Mar 13, 2024 · ff2e872 · ff2e872
1 parent 7226455
commit ff2e872
Show file tree

Hide file tree

Showing 23 changed files with 470 additions and 150 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,32 @@
+# [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).
+  - Added optional `notifier`  to `setTime` like in the setters  `setExtent`, `setViewAngle` or `setRotation`.
+  - Test for incorrect values in setters
+
+* **@dlr-eoc/map-ol:**
+  - Adding support for mapState rotation [#216](e04b42fd62c4b66fc21920a514da1375bb297a11)
+
+* **@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 
+
+### Bug Fixes
+ * **@dlr-eoc/map-maplibre:**
+  - Fix wrong coordinate order from `getExtent` [#216](7ff01801fd3af594aaa34b2479e921be88894dbe)
+  - Rename `set/getBearing` to `set/getRotation` because we want to have the same behavior as in openlayers and `set/getBearing` is expected differently in mapliebre
+
+* **@dlr-eoc/map-cesium:**
+  - Fix get entity.name for infoBox in none GeoJson layers
+  - Get camera view and set `Mapstate` before destroy to preserve the last state for switching maps.
+
 # [12.0.0](https://github.com/dlr-eoc/ukis-frontend-libraries/tree/v12.0.0) (2023-12-12) (map-ol, map-cesium and map-maplibre)
 ### Breaking Changes
   - Update angular from `^14.2.11` to `^16.2.1` automatic migrations are made by ng update. See update angular from [14.0-15.0](https://update.angular.io/?l=3&v=14.0-15.0) and [14.0-15.0](https://update.angular.io/?l=3&v=15.0-16.0).

diff --git a/...mo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.html b/...mo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.html
@@ -53,6 +53,19 @@
         </clr-vertical-nav-group-children>
     </clr-vertical-nav-group>
 
+    <clr-vertical-nav-group [clrVerticalNavGroupExpanded]="true" class="layers">
+      <clr-icon shape="cog" title="Actions" clrVerticalNavIcon></clr-icon>
+      Actions
+      <clr-vertical-nav-group-children class="padding title-ellipsis">
+
+        <button class="btn btn-primary" (click)="setViewAngle()">set ViewAngle</button>
+        <button class="btn btn-primary" (click)="resetViewAngle()">reset ViewAngle</button>
+        <button class="btn btn-primary" (click)="setRotation()">set Rotation</button>
+        <button class="btn btn-primary" (click)="resetRotation()">reset Rotation</button>
+
+      </clr-vertical-nav-group-children>
+    </clr-vertical-nav-group>
+
     <a clrVerticalNavLink *ngIf="is2dMap" class="iconButton" (click)="changeMapDimension()">
         <clr-icon shape="block" title="3D View" clrVerticalNavIcon></clr-icon>
         3D View

diff --git a/...demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts b/...demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts
@@ -5,7 +5,6 @@ import { MapStateService, IMapState } from '@dlr-eoc/services-map-state';
 import { OsmTileLayer, EocLitemap, BlueMarbleTile, EocLiteoverlayTile } from '@dlr-eoc/base-layers-raster';
 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';
@@ -37,7 +36,9 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy {
     center: {
       lat: 40,
       lon: 13
-    }
+    },
+    rotation: 0,
+    viewAngle: 0
   };
 
   //Set inititial 2D/3D state
@@ -47,8 +48,8 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy {
     @Inject('twoDlayerSvc') public twoDlayerSvc: LayersService,
     @Inject('threeDlayerSvc') public threeDlayerSvc: LayersService,
     public mapOlSvc: MapOlService,
-    public mapCesiumSvc: MapCesiumService,
-    public mapStateSvc: MapStateService
+    public mapStateSvc: MapStateService,
+    public mapCesiumSvc: MapCesiumService
   ) {
     this.controls = {
       infoBox: true,
@@ -274,17 +275,6 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy {
   }
 
   async addTerrainlayer() {
-    // Terrain Datasource as Custom Layer
-    const bkgDGM5 = new CustomLayer({
-      name: 'BKG DGM5',
-      displayName: 'BKG DGM5',
-      id: 'bkg_dgm5',
-      custom_layer: await CesiumTerrainProvider.fromUrl('https://geoportal.de/3d/dgm5'),
-      visible: false,
-      attribution: `© <a href="https://www.bkg.de">Bundesamt für Kartographie und Geodäsie (BKG)</a>`,
-      description: 'BKG digital elevation modell with 5m grid resulution',
-      type: 'custom',
-    });
 
     // Dataservices from the masterportal: https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/src/master/
     const hamburg_dgm = new CustomLayer({
@@ -313,30 +303,37 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy {
     });
 
 
-    const layers = [bkgDGM5, hamburg_dgm, default_ellipsoid];
+    const layers = [hamburg_dgm, default_ellipsoid];
     layers.map(l => this.threeDlayerSvc.addLayer(l, 'Baselayers'));
   }
 
   changeMapDimension() {
     if (this.is2dMap) {
       this.is2dMap = false;
     } else {
-      // If there is no camera roll, the flyTo is not necessary
-      if (this.mapCesiumSvc.viewer.camera.roll != 0) {
-        this.mapCesiumSvc.setNadirViewAngle();
-        // 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;
-      }
-
-
+        }
+      });
     }
   }
+
+  setViewAngle() {
+    /** set map rotation with the MapStateService */
+    this.mapStateSvc.setViewAngle(45);
+  }
+  resetViewAngle() {
+    /** set map rotation with the MapStateService */
+    this.mapStateSvc.setViewAngle(0);
+  }
+  setRotation() {
+    /** set map rotation with the MapStateService */
+    this.mapStateSvc.setRotation(10);
+  }
+  resetRotation() {
+    /** set map rotation with the MapStateService, due to the rotation constraint small numbers are snapped to 0 */
+    this.mapStateSvc.setRotation(0);
+  }
 }
 
diff --git a/projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.html b/projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.html
@@ -41,6 +41,8 @@
 
       <button class="btn btn-primary" (click)="removeAllLayers()">remove All Layers</button>
       <button class="btn btn-primary" (click)="setExtent()">set Extent</button>
+      <button class="btn btn-primary" (click)="setRotation()">set Rotation</button>
+      <button class="btn btn-primary" (click)="resetRotation()">reset Rotation</button>
 
       <button class="btn btn-primary" (click)="parseCapabilities()">Parse WMS capabilities</button>
 

diff --git a/projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.ts b/projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.ts
@@ -53,6 +53,14 @@ export class RouteMapComponent implements OnInit {
     /** set map extent or IMapState (zoom, center...) with the MapStateService */
     this.mapStateSvc.setExtent([-14, 33, 40, 57]);
   }
+  setRotation() {
+    /** set map rotation with the MapStateService */
+    this.mapStateSvc.setRotation(90);
+  }
+  resetRotation() {
+    /** set map rotation with the MapStateService, due to the rotation constraint small numbers are snapped to 0 */
+    this.mapStateSvc.setRotation(0);
+  }
 
   parseCapabilities() {
     this.wmsSvc.getCapabilities('https://geoservice.dlr.de/eoc/land/wms').subscribe(caps => {

diff --git a/...aps/src/app/route-components/route-example-maplibre/route-example-maplibre.component.html b/...aps/src/app/route-components/route-example-maplibre/route-example-maplibre.component.html
@@ -35,8 +35,12 @@
     <clr-vertical-nav-group-children class="padding title-ellipsis">
 
       <button class="btn btn-primary" (click)="updateLayer()">update Geojson Layer</button>
+      <button class="btn btn-primary" (click)="setViewAngle()">set ViewAngle</button>
+      <button class="btn btn-primary" (click)="resetViewAngle()">reset ViewAngle</button>
+      <button class="btn btn-primary" (click)="setRotation()">set Rotation</button>
+      <button class="btn btn-primary" (click)="resetRotation()">reset Rotation</button>
 
     </clr-vertical-nav-group-children>
   </clr-vertical-nav-group>
 
-</clr-vertical-nav>
+</clr-vertical-nav>
diff --git a/...-maps/src/app/route-components/route-example-maplibre/route-example-maplibre.component.ts b/...-maps/src/app/route-components/route-example-maplibre/route-example-maplibre.component.ts
@@ -48,9 +48,13 @@ export class RouteExampleMaplibreComponent implements OnInit, OnDestroy {
       lat: 47.41449812198263,
       lon: 11.7455863952639
     };
+    const rotation = 45;
+    const viewAngle = 60;
     this.mapStateSvc.setMapState({
       zoom,
-      center
+      center,
+      rotation,
+      viewAngle
     });
   }
 
@@ -87,8 +91,6 @@ export class RouteExampleMaplibreComponent implements OnInit, OnDestroy {
           exaggeration: exaggeration
         });
 
-        map.setBearing(-20);
-        map.setPitch(60);
         map.setMaxPitch(80);
 
         map.addControl(
@@ -103,7 +105,7 @@ export class RouteExampleMaplibreComponent implements OnInit, OnDestroy {
   }
 
   addBaselayers() {
-    // some of the fonts are not working 
+    // some of the fonts are not working
     greyscale.layers.forEach(l => {
       if (l?.layout?.['text-font']) {
         l.layout['text-font'] = l.layout['text-font'].filter(i => i !== 'Noto Sans Regular' && i !== 'Noto Sans Italic');
@@ -231,7 +233,7 @@ export class RouteExampleMaplibreComponent implements OnInit, OnDestroy {
     const sentinel2Europe = new WmsLayer({
       name: 'Sentinel-2 Europe',
       id: 'sentinel2Europe',
-      visible: false,
+      visible: true,
       type: 'wms',
       removable: false,
       params: {
@@ -249,7 +251,7 @@ export class RouteExampleMaplibreComponent implements OnInit, OnDestroy {
     const mosaic_hillshade = new WmsLayer({
       name: 'mosaic_hillshade',
       id: 'gmted2010_dsc075_mosaic_hillshade',
-      visible: true,
+      visible: false,
       type: 'wms',
       removable: false,
       params: {
@@ -551,7 +553,7 @@ export class RouteExampleMaplibreComponent implements OnInit, OnDestroy {
       id: 'group_1',
       name: 'Raster Group',
       visible: false,
-      layers: [eocBasemap, osm, MODIS_EU_DAILY, sentinel2Europe],
+      layers: [eocBasemap, osm, MODIS_EU_DAILY, hillshade, mosaic_hillshade],
       description: 'This is a group with multiple raster layers',
       expanded: {
         tab: 'description'
@@ -560,7 +562,7 @@ export class RouteExampleMaplibreComponent implements OnInit, OnDestroy {
     });
 
 
-    const layers = [groupLayer, hillshade, mosaic_hillshade, waterway, wfsLayer, kmlLayer, geoJsonLayer, stackedLayer, agrodeLayer];
+    const layers = [groupLayer, ,sentinel2Europe, waterway, wfsLayer, kmlLayer, geoJsonLayer, stackedLayer, agrodeLayer];
     layers.map(l => {
       if (l instanceof Layer) {
         this.layerSvc.addLayer(l, 'Layers');
@@ -629,7 +631,7 @@ export class RouteExampleMaplibreComponent implements OnInit, OnDestroy {
       opacity: 1
     });
 
-    // some of the fonts are not working 
+    // some of the fonts are not working
     placeLabels.layers.forEach(l => {
       l.source = 'place-labels-planet_eoc';
       if (l?.layout?.['text-font']) {
@@ -713,5 +715,21 @@ export class RouteExampleMaplibreComponent implements OnInit, OnDestroy {
     };
     this.layerSvc.updateLayer(layer);
   }
+  setViewAngle() {
+    /** set map rotation with the MapStateService */
+    this.mapStateSvc.setViewAngle(45);
+  }
+  resetViewAngle() {
+    /** set map rotation with the MapStateService */
+    this.mapStateSvc.setViewAngle(0);
+  }
+  setRotation() {
+    /** set map rotation with the MapStateService */
+    this.mapStateSvc.setRotation(90);
+  }
+  resetRotation() {
+    /** set map rotation with the MapStateService, due to the rotation constraint small numbers are snapped to 0 */
+    this.mapStateSvc.setRotation(0);
+  }
 
 }
diff --git a/projects/map-cesium/src/lib/map-cesium.component.spec.ts b/projects/map-cesium/src/lib/map-cesium.component.spec.ts
@@ -6,7 +6,7 @@ import { MapCesiumService } from './map-cesium.service';
 import { MapStateService } from '@dlr-eoc/services-map-state';
 import { Viewer } from '@cesium/widgets';
 import { Component, Injectable, Input, OnDestroy, OnInit } from '@angular/core';
-import { of } from 'rxjs';
+import { of, timeout } from 'rxjs';
 import { OsmTileLayer, EocBasemapTile } from '@dlr-eoc/base-layers-raster';
 
 /**
@@ -183,6 +183,24 @@ describe('MapCesiumComponent', () => {
     expect(component.viewer === mapSvc.viewer).toBeTruthy();
   });
 
+  it('should set mapstate rotation', async () => {
+    //set rotation to 90°
+    component.mapStateSvc.setRotation(90);
+    // we have to wait for the flyTo to finish
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    // some radians to degree conversions are made, so there are some rounding errors to be expected
+    expect(mapSvc.getRotation()).toBeCloseTo(90);
+  });
+
+  it('should set mapstate view angle', async () => {
+    //set view angle to 55°
+    component.mapStateSvc.setViewAngle(55);
+    // we have to wait for the flyTo to finish
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    // some radians to degree conversions are made, so there are some rounding errors to be expected
+    expect(mapSvc.getViewAngle()).toBeCloseTo(55);
+  });
+
   it('should add Imagery layers', () => {
     let { osmLayer, EocBasemap} = addSomeLayers(component, mapSvc);
     const baseLayers = [osmLayer, EocBasemap];