feat(cesium): Allow extrude GeoJSON and KML sources to height

...using 'extrudedHeight' property on layer
hslayers · Mar 22, 2024 · 76ad049 · 76ad049
1 parent 4ee9c2b
commit 76ad049
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 13 deletions.
diff --git a/projects/cesium-test-app/src/assets/polygon2.5d.geojson b/projects/cesium-test-app/src/assets/polygon2.5d.geojson
@@ -1 +1,103 @@
-{"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"}}]}
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "name": "Polygon with height higher than its Z-coords",
+                "extrudedHeight": 800
+            },
+            "geometry": {
+                "coordinates": [
+                    [
+                        [
+                            13.375,
+                            49.750,
+                            350.0
+                        ],
+                        [
+                            13.373,
+                            49.745,
+                            400.0
+                        ],
+                        [
+                            13.380,
+                            49.745,
+                            450.0
+                        ],
+                        [
+                            13.383,
+                            49.750,
+                            500.0
+                        ],
+                        [
+                            13.382,
+                            49.750,
+                            650.0
+                        ],
+                        [
+                            13.378,
+                            49.748,
+                            700.0
+                        ],
+                        [
+                            13.375,
+                            49.750,
+                            350.0
+                        ]
+                    ]
+                ],
+                "type": "Polygon"
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "name": "Polygon with height lower than its Z-coords",
+                "extrudedHeight": 102
+            },
+            "geometry": {
+                "coordinates": [
+                    [
+                        [
+                            13.385,
+                            49.760,
+                            350.0
+                        ],
+                        [
+                            13.383,
+                            49.755,
+                            400.0
+                        ],
+                        [
+                            13.390,
+                            49.755,
+                            450.0
+                        ],
+                        [
+                            13.393,
+                            49.760,
+                            500.0
+                        ],
+                        [
+                            13.392,
+                            49.760,
+                            650.0
+                        ],
+                        [
+                            13.388,
+                            49.758,
+                            700.0
+                        ],
+                        [
+                            13.385,
+                            49.760,
+                            350.0
+                        ]
+                    ]
+                ],
+                "type": "Polygon"
+            }
+        }
+    ]
+}
diff --git a/projects/cesium-test-app/src/assets/polygon2.5d.kml b/projects/cesium-test-app/src/assets/polygon2.5d.kml
@@ -2,14 +2,14 @@
 <kml xmlns="http://www.opengis.net/kml/2.2">
 <Document id="root_doc">
 <Schema name="polygon2.5d" id="polygon2.5d">
-  <SimpleField name="height" type="int"></SimpleField>
+  <SimpleField name="extrudedHeight" type="int"></SimpleField>
 </Schema>
 <Folder><name>polygon2.5d</name>
   <Placemark>
   <name>Polygon with height higher than its Z-coords</name>
   <Style><LineStyle><color>ff0000ff</color></LineStyle><PolyStyle><fill>0</fill></PolyStyle></Style>
   <ExtendedData><SchemaData schemaUrl="#polygon2.5d">
-    <SimpleData name="height">800</SimpleData>
+    <SimpleData name="extrudedHeight">800</SimpleData>
   </SchemaData></ExtendedData>
     <Polygon><outerBoundaryIs><LinearRing><coordinates>13.365,49.74,350 13.363,49.735,400 13.37,49.735,450 13.373,49.74,500 13.372,49.74,650 13.368,49.738,700 13.365,49.74,350</coordinates></LinearRing></outerBoundaryIs></Polygon>
   </Placemark>

diff --git a/projects/hslayers-cesium/src/hscesium-layers.service.ts b/projects/hslayers-cesium/src/hscesium-layers.service.ts
@@ -4,9 +4,11 @@ import dayjs from 'dayjs';
 import {
   Cartesian3,
   CesiumTerrainProvider,
+  ConstantProperty,
   DataSource,
   GeoJsonDataSource,
   GetFeatureInfoFormat,
+  HeightReference,
   ImageryLayer,
   KmlDataSource,
   OpenStreetMapImageryProvider,
@@ -205,7 +207,7 @@ export class HsCesiumLayersService {
     });
   }
 
-  serializeVectorLayerToGeoJson(ol_source: VectorSource): any {
+  serializeVectorLayerToGeoJson(ol_source: VectorSource) {
     const f = new GeoJSON();
     const cesiumLayer = <DataSource>this.findCesiumLayer(ol_source);
     //console.log('start serialize',(new Date()).getTime() - window.lasttime); window.lasttime = (new Date()).getTime();
@@ -355,15 +357,19 @@ 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);
+      if (entity.properties.hasProperty('extrudedHeight')) {
+        entity.polygon.extrudedHeight = entity.properties.getValue(
+          this.viewer.clock.currentTime,
+        ).extrudedHeight;
+        entity.polygon.extrudedHeightReference = new ConstantProperty(
+          HeightReference.RELATIVE_TO_GROUND,
+        );
+      }
       try {
         if (cesiumLayer.entities.getById(entity.id) == undefined) {
-          console.log('Adding', entity.id);
+          //console.log('Adding', entity.id);
           cesiumLayer.entities.add(entity);
         }
       } catch (ex) {
@@ -432,10 +438,6 @@ 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') {