feat(cesium): Allow display 3D GeoJSON

+ cesium-test-app: Add example of a 3D (2.5D) GeoJSON

refs #4757

projects/cesium-test-app/src/app/app.component.ts

@@ -28,7 +28,16 @@ export class AppComponent implements OnInit {
     private hsOverlayConstructorService: HsOverlayConstructorService,
     private hsPanelConstructorService: HsPanelConstructorService,
   ) {
-    const geojsonObject = {
+    const polygon25d = new VectorLayer({
+      properties: {
+        title: '2.5D polygon surface',
+      },
+      source: new VectorSource({
+        url: '../assets/polygon2.5d.geojson',
+        format: new GeoJSON(),
+      }) as VectorSource, //FIXME: Type-cast shall be automatically inferred after OL >8.2
+    });
+    const geojsonObject2d = {
       'type': 'FeatureCollection',
       'crs': {
         'type': 'name',
@@ -243,9 +252,10 @@ export class AppComponent implements OnInit {
             path: 'User generated',
           },
           source: new VectorSource({
-            features: new GeoJSON().readFeatures(geojsonObject),
+            features: new GeoJSON().readFeatures(geojsonObject2d),
           }) as VectorSource, //FIXME: Type-cast shall be automatically inferred after OL >8.2
         }),
+        polygon25d,
         opticalMap,
       ],
     });

projects/cesium-test-app/src/assets/polygon2.5d.geojson

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"height": 102},"geometry":{"coordinates":[[[13.37468316380017,49.750247610454466,350.0],[13.372724660371745,49.74524997861067,370.0],[13.379961164565032,49.744627919732466,390.0],[13.382550372488254,49.74900361289147,410.0],[13.37468316380017,49.750247610454466,350.0]]],"type":"Polygon"}}]}

projects/hslayers-cesium/src/hscesium-layers.service.ts

@@ -223,7 +223,7 @@ export class HsCesiumLayersService {
       ) {
         features.splice(features.indexOf(feature), 1);
       } else {
-        //console.log('New feadure', feature.getId())
+        //console.log('New feature', feature.getId())
       }
     });
     //console.log('start removing entities',(new Date()).getTime() - window.lasttime); window.lasttime = (new Date()).getTime();
@@ -239,7 +239,7 @@ export class HsCesiumLayersService {
       //console.log('Didn't find OL feature ', id);
       cesiumLayer.entities.removeById(id);
     }
-    //console.log('revoved. serializing',(new Date()).getTime() - window.lasttime); window.lasttime = (new Date()).getTime();
+    //console.log('removed. serializing',(new Date()).getTime() - window.lasttime); window.lasttime = (new Date()).getTime();
     const json: any = f.writeFeaturesObject(features);
     //console.log('done',(new Date()).getTime() - window.lasttime); window.lasttime = (new Date()).getTime();
     //cesiumLayer.entities.removeAll();
@@ -338,9 +338,14 @@ export class HsCesiumLayersService {
 
       const xa = coordinates[0];
       const ya = coordinates[1];
+      const za = coordinates[2];
 
       const newCoordinates = proj4(firstProjection, secondProjection, [xa, ya]);
-      return Cartesian3.fromDegrees(newCoordinates[0], newCoordinates[1], 0);
+      return Cartesian3.fromDegrees(
+        newCoordinates[0],
+        newCoordinates[1],
+        za ?? 0,
+      );
     };
     //console.log('loading to cesium',(new Date()).getTime() - window.lasttime); window.lasttime = (new Date()).getTime();
     const source = await tmp_source.load(
@@ -350,11 +355,15 @@ export class HsCesiumLayersService {
       },
     );
     const cesiumLayer = <DataSource>this.findCesiumLayer(ol_source);
+    console.log('🚀 ~ syncFeatures ~ cesiumLayer:', cesiumLayer);
+    //FIXME: the entities are present only when this console.log or the one inside loop occurs. Otherwise, they are empty 😮
+    console.log('🚀 ~ syncFeatures ~ source.entities.values:', source.entities);
     //console.log('loaded in temp.',(new Date()).getTime() - window.lasttime); window.lasttime = (new Date()).getTime();
     source.entities.values.forEach((entity) => {
+      //console.log('🚀 ~ source.entities.values.forEach ~ entity:', entity);
       try {
         if (cesiumLayer.entities.getById(entity.id) == undefined) {
-          //console.log('Adding', entity.id);
+          console.log('Adding', entity.id);
           cesiumLayer.entities.add(entity);
         }
       } catch (ex) {
@@ -423,6 +432,10 @@ export class HsCesiumLayersService {
           this.HsUtilsService.instOf(cesium_layer, KmlDataSource)) &&
         this.viewer.dataSources
       ) {
+        //TODO: there shall be a way how to set real 3D coordinates when the GeoJSON contains also z-coords
+        /*for (const entity of (cesium_layer as DataSource).entities.values) {
+          entity.polygon.perPositionHeight;
+        }*/
         this.viewer.dataSources.add(<DataSource>cesium_layer);
         //TODO: Point clicked, Datasources extents, Composition extents shall be also synced
         if (getTitle(lyr as Layer<Source>) != 'Point clicked') {

projects/hslayers-cesium/src/hscesium.service.ts

@@ -72,17 +72,17 @@ export class HsCesiumService {
         'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZDk3ZmM0Mi01ZGFjLTRmYjQtYmFkNC02NTUwOTFhZjNlZjMiLCJpZCI6MTE2MSwiaWF0IjoxNTI3MTYxOTc5fQ.tOVBzBJjR3mwO3osvDVB_RwxyLX7W-emymTOkfz6yGA';
       if (!this.HsCesiumConfig.cesiumBase) {
         this.hsLog.error(
-          'Please set HsCesiumConfig.get().cesiumBase to the directory where cesium assets will be copied to',
+          'Please set HsCesiumConfig.cesiumBase to the directory where Cesium assets will be copied to',
         );
       }
       (<any>window).CESIUM_BASE_URL = this.HsCesiumConfig.cesiumBase;
-      let terrain_provider =
+      let terrainProvider =
         this.HsCesiumConfig.terrain_provider ||
         (await createWorldTerrainAsync(
           this.HsCesiumConfig.createWorldTerrainOptions,
         ));
       if (this.HsCesiumConfig.newTerrainProviderOptions) {
-        terrain_provider = new CesiumTerrainProvider(
+        terrainProvider = new CesiumTerrainProvider(
           this.HsCesiumConfig.newTerrainProviderOptions,
         );
       }
@@ -118,7 +118,7 @@ export class HsCesiumService {
           infoBox: this.HsCesiumConfig.cesiumInfoBox
             ? this.HsCesiumConfig.cesiumInfoBox
             : false,
-          terrainProvider: terrain_provider,
+          terrainProvider: terrainProvider,
           baseLayer: this.HsCesiumConfig.imageryProvider
             ? new ImageryLayer(this.HsCesiumConfig.imageryProvider, {})
             : false,
@@ -150,7 +150,7 @@ export class HsCesiumService {
       viewer.scene.globe.shadows = this.getShadowMode();
       viewer.scene.globe.terrainExaggeration =
         this.HsCesiumConfig.terrainExaggeration || 1.0;
-      viewer.terrainProvider = terrain_provider;
+      viewer.terrainProvider = terrainProvider;
 
       if (this.HsCesiumConfig.cesiumTime) {
         viewer.clockViewModel.currentTime = this.HsCesiumConfig.cesiumTime;