Map cesium update (#235)

* feat: adding popup functionality. * feat: changing scene options * feat: adjusting popup style. * feat: update demo maps. * feat: adding globe color option. * feat: adding icon support for geojson features. * docs: updating changelog and readme.
dlr-eoc · Jul 10, 2024 · 55e4fe6 · 55e4fe6
1 parent 6b1788d
commit 55e4fe6
Show file tree

Hide file tree

Showing 9 changed files with 287 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+# [13.X.X](https://github.com/dlr-eoc/ukis-frontend-libraries/tree/v13.X.X) (2024-07-10) (map-cesium)
+
+### Features
+* **@dlr-eoc/map-cesium:**
+- Added popup interface as an alternative to the infoBox. (In the long run the popup will replace the infoBox)
+- Adjustments for 3D scene lighting and support for imageBasedLighting luminanceAtZenith.
+- Added control option for the default globe color.
+- Added support for icon markers for point geojson features.
+
 # [13.0.0](https://github.com/dlr-eoc/ukis-frontend-libraries/tree/v13.0.0) (2024-07-08) (services-map-state, map-ol, map-cesium and map-maplibre)
 
 ### Breaking Changes

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
@@ -51,10 +51,14 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy {
     public mapStateSvc: MapStateService,
     public mapCesiumSvc: MapCesiumService
   ) {
-    this.controls = {
+  /*   this.controls = {
       infoBox: true,
       selectionIndicator: true
-    }
+    } */
+      this.controls = {
+        enablePopups: true,
+        globeColor: '#00FF00'
+      }
   }
 
   ngOnInit() {
@@ -77,6 +81,18 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy {
 
   addBaselayers() {
     const layers = [
+      new VectorLayer({
+        name: 'Transparent background',
+        id: 'blank',
+        type: 'geojson',
+        data: {
+          "type": "Feature",
+          "geometry": null,
+        },
+        description: 'This is a transparent background. Use this to save bandwidth when no background map is needed.',
+        visible: false,
+        opacity: 0
+      }),
       new OsmTileLayer({
         visible: true
       }),
@@ -234,7 +250,95 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy {
           },
           clampToGround: false
         }
-      })
+      }),
+      new VectorLayer({
+        id: 'geojson_test3',
+        name: 'GeoJSON Vector Layer (icons)',
+        attribution: `© DLR GeoJSON`,
+        type: 'geojson',
+        data: {
+          "type": "FeatureCollection",
+          "features": [
+            {
+            type: "Feature",
+            properties: {
+              id: 1,
+              title: "Point 1",
+              iconUrl: './assets/icons/icon-72x72.png'
+            },
+            geometry: {
+              coordinates: [
+                11.617674411393523,
+                48.12108785075742
+              ],
+              type: "Point"
+            }
+        },
+        {
+          type: "Feature",
+          properties: {
+            id: 1,
+            title: "Point 1",
+            iconUrl: './assets/icons/icon-72x72.png'
+          },
+          geometry: {
+            coordinates: [
+              -73.98871110194915,
+              40.704468034225556
+            ],
+            type: "Point"
+          }
+      },
+      {
+        type: "Feature",
+        properties: {
+          id: 1,
+          title: "Point 1",
+          iconUrl: './assets/icons/icon-72x72.png'
+        },
+        geometry: {
+          coordinates: [
+            -46.62002667427379,
+            -23.556899526881907
+          ],
+          type: "Point"
+        }
+    },
+    {
+      type: "Feature",
+      properties: {
+        id: 1,
+        title: "Point 1",
+        iconUrl: './assets/icons/icon-72x72.png'
+      },
+      geometry: {
+        coordinates: [
+          28.079737800003755,
+          -26.165098479883348
+        ],
+        type: "Point"
+      }
+  },
+  {
+    type: "Feature",
+    properties: {
+      id: 1,
+      title: "Point 1",
+      iconUrl: './assets/icons/icon-72x72.png'
+    },
+    geometry: {
+      coordinates: [
+        106.82649176443738,
+        -6.124589176175903
+      ],
+      type: "Point"
+    }
+}
+      ]
+    },
+        visible: false,
+        popup: true
+      }),
     ];
 
     layers.map(l => this.twoDlayerSvc.addLayer(l, 'Overlays'));

diff --git a/projects/demo-maps/src/assets/icons/icon-72x72.png b/projects/demo-maps/src/assets/icons/icon-72x72.png
diff --git a/projects/map-cesium/README.md b/projects/map-cesium/README.md
@@ -99,12 +99,15 @@ You can add widgets to the cesium viewer by specifying them in an `ICesiumContro
     sceneModePicker: false,
     homeButton: false,
     baseLayerPicker: false,
-    geocoder: false, //the geocoder requires an cesium ion access token to work
+    geocoder: false,
     navigationHelpButton: false,
     navigationInstructionsInitiallyVisible: false,
     fullscreenButton: false,
     scene3DOnly: true,
-    infoBox: false
+    skyAtmosphere: false,
+    infoBox: false,
+    selectionIndicator: false,
+    baseLayer: false
   };
 ```
 The widgets can be switched on and off inside the constructor of example-view.component.ts:
@@ -125,7 +128,7 @@ Popups for layers inside Cesium are handled with the [InfoBox widget](https://ce
 controls!: ICesiumControls;
 constructor() {
     this.controls = {
-      infoBox: true
+      enablePopups: true
     }
   }
 ```

diff --git a/projects/map-cesium/src/lib/map-cesium.component.html b/projects/map-cesium/src/lib/map-cesium.component.html
@@ -1,2 +1,8 @@
-<div #cesiumMapDiv class="map cesiumMap"></div>
-<div #cesiumCreditDiv class="cesiumCredits"></div>
+<div #cesiumMapDiv class="map cesiumMap">
+  <div class="cesium-popup" id="cesium_popup_div">
+    <a class="cesium-popup-closer" (click)="closeCesiumPopup()"></a>
+    <div class="cesium-popup-content" id="map_cesium_popup_content">
+    </div>
+  </div>
+</div>
+<div #cesiumCreditDiv class="cesiumCredits"></div>
diff --git a/projects/map-cesium/src/lib/map-cesium.component.scss b/projects/map-cesium/src/lib/map-cesium.component.scss
@@ -12,6 +12,7 @@
     width: 100%;
     height: 100%;
     position: relative;
+    overflow: hidden;
 }
 
 .cesium-viewer-bottom .cesium-credit-logoContainer {
@@ -70,4 +71,59 @@
     fill: var(--ukis-popup-bg-color);
     stroke: #0072a3;
     stroke-width: 1.1px;
-}
+}
+
+.cesium-popup {
+  position: absolute;
+  background-color: var(--ukis-popup-bg-color);
+  -webkit-filter: var(--ukis-drop-shadow);
+  filter: var(--ukis-drop-shadow);
+  padding: 15px;
+  border-radius: 2px;
+  top: 0px;
+  left: 0px;
+  margin: 0.5rem;
+  min-width: 280px;
+  display:none;
+  z-index: 1000000;
+
+  .cesium-popup-closer {
+    text-decoration: none;
+    position: absolute;
+    top: 0px;
+    right: 8px;
+    cursor: pointer;
+  }
+
+  .cesium-popup-closer:after {
+    content: "✖";
+  }
+
+  &:after,
+  &:before {
+    top: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  &:after {
+    border-top-color: var(--ukis-popup-bg-color);
+    border-width: 10px;
+    left: 48px;
+    margin-left: -10px;
+  }
+
+  &:before {
+    border-width: 11px;
+    left: 48px;
+    margin-left: -11px;
+  }
+
+  &.hidden {
+    visibility: hidden;
+  }
+}
diff --git a/projects/map-cesium/src/lib/map-cesium.component.ts b/projects/map-cesium/src/lib/map-cesium.component.ts
@@ -2,11 +2,11 @@ import { Component, OnInit, ViewEncapsulation, Input, OnDestroy, AfterViewInit,
 
 import { IMapStateOptions, MapState, MapStateService } from '@dlr-eoc/services-map-state';
 import { Subscription, Subject } from 'rxjs';
-import { filter, skip } from 'rxjs/operators';
+import { skip } from 'rxjs/operators';
 import { MapCesiumService } from './map-cesium.service';
 import { LayersService, Layer, TFiltertypes, TFiltertypesUncap } from '@dlr-eoc/services-layers';
 import { Viewer } from '@cesium/widgets';
-import { GeoJsonDataSource } from '@cesium/engine';
+import { ScreenSpaceEventHandler, ScreenSpaceEventType, GeoJsonDataSource } from '@cesium/engine';
 
 
 export interface ICesiumControls {
@@ -22,11 +22,14 @@ export interface ICesiumControls {
   fullscreenButton?: boolean;
   scene3DOnly?: boolean;
   infoBox?: boolean;
+  selectionIndicator?: boolean;
+  enablePopups?: boolean;
   //Also you can define an Cesium ion Access Token, https://cesium.com/learn/ion/cesium-ion-access-tokens/
   ionAccessToken?: string;
   //In the same way you can provide a personal key for Google Maps, https://cesium.com/learn/cesiumjs-learn/cesiumjs-photorealistic-3d-tiles/
   GoogleMapsApiKey?: string;
-  selectionIndicator?: boolean;
+  //default globe color as hex string
+  globeColor?: string;
 }
 
 declare type Tgroupfiltertype = TFiltertypesUncap | TFiltertypes;
@@ -64,6 +67,7 @@ export class MapCesiumComponent implements OnInit, AfterViewInit, OnDestroy {
       console.error(`provide a MapStateService as Input to ukis-map-cesium`);
     }
     this.mapSvc.removeAll2DLayers();
+
     //Set start time, if available
     if (this.startTime) {
       this.mapSvc.initTime(this.startTime);
@@ -181,15 +185,13 @@ export class MapCesiumComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private subscribeToMapEvents() {
-    // https://github.com/CesiumGS/cesium/blob/99d6fffe20d9cf19f2d70de97777dc00a435bc5e/packages/engine/Source/Scene/Camera.js#L223-L224
-    // The amount the camera has to change before the event is raised is 0.5
-    // this.viewer.camera.percentageChanged = 0.1;
     this.viewer.camera.changed.addEventListener((evt) => {
       const ms = this.calcMapStateFromCamera('map');
       this.mapStateSvc.setMapState(ms);
     });
 
-    //Changing entitiy parameters for the display in he infoBox window
+    if(this.controls.infoBox){
+      //Changing entitiy parameters for the display in he infoBox window
     this.viewer.selectedEntityChanged.addEventListener(() => {
       const entity = this.viewer.selectedEntity;
       //change infoBox title
@@ -212,6 +214,41 @@ export class MapCesiumComponent implements OnInit, AfterViewInit, OnDestroy {
         }
       }
     });
+    }
+
+    //Show the popup on click
+    if(this.controls.enablePopups){
+      const cesiumEventHandler = new ScreenSpaceEventHandler(this.viewer.scene.canvas);
+      cesiumEventHandler.setInputAction((e:any) => {
+        //get camera ray at picked position and get layer features at picked location
+        const ray = this.viewer.camera.getPickRay(e.position)!;
+        const entity = this.viewer.scene.imageryLayers.pickImageryLayerFeatures(ray, this.viewer.scene);
+        if(entity){
+        const popupContent = document.getElementById("map_cesium_popup_content")!;
+        const popupDiv = popupContent.parentElement;
+        const entity_x = e.position.x;
+        const entity_y = e.position.y
+
+        //hide popup while waiting for the content to load
+        popupDiv.style.display = 'none';
+
+        entity?.then(e =>{
+          //write description text to popup
+          popupContent.innerHTML = e[0].description!;
+          popupDiv.style.left = (entity_x-58) + 'px';
+          popupDiv.style.top = (entity_y-78) + 'px';
+          popupDiv.style.display = 'block';
+        }
+        );
+        }
+      }, ScreenSpaceEventType.LEFT_CLICK);
+
+      //Hide the popup
+      cesiumEventHandler.setInputAction((e:any) => {
+        const popup = document.getElementById("cesium_popup_div")!;
+        popup.style.display = 'none';
+      }, ScreenSpaceEventType.RIGHT_DOWN);
+    }
   }
 
 
@@ -243,9 +280,6 @@ export class MapCesiumComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private update2DBaseLayers(layers: Layer[]) {
     this.mapSvc.update2DLayerVisibility(layers, 'baselayers');
-    //In current application the folllowing map control functions are not enabled for baselayers
-    //this.mapSvc.updateLayerOpacity(layers, 'baselayers');
-    //this.mapSvc.updateLayerZIndex(layers, 'baselayers');
   }
 
   private addUpdateTerrainLayers(layers: Layer[]) {
@@ -319,4 +353,9 @@ export class MapCesiumComponent implements OnInit, AfterViewInit, OnDestroy {
     this.mapSvc.update3DLayerOpacity(layers, filtertype);
   }
 
+  closeCesiumPopup(){
+    const popup = document.getElementById("cesium_popup_div")!;
+    popup.style.display = 'none';
+  }
+
 }