[Backport 2023.01.xx] Fix #9189 3d height from terrain not working wi…

…th cesium terrain provider (#9191) (#9192) * Fix #9189 3d height from terrain not working with cesium terrain provider (#9191) * fix failing test * remove path test
geosolutions-it · May 25, 2023 · 8b2dbc5 · 8b2dbc5
1 parent 5cfe935
commit 8b2dbc5
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 22 deletions.
diff --git a/web/client/components/map/cesium/DrawGeometrySupport.jsx b/web/client/components/map/cesium/DrawGeometrySupport.jsx
@@ -228,27 +228,38 @@ function getSampledTerrainPositions(terrainProvider, level = 18, positions) {
         const cartographicHeightZero = positions
             .map(cartesian => Cesium.Cartographic.fromCartesian(cartesian))
             .map(cartographic => new Cesium.Cartographic(cartographic.longitude, cartographic.latitude, 0));
-        const promise = terrainProvider?.availability
-            ? Cesium.sampleTerrainMostDetailed(
-                terrainProvider,
-                cartographicHeightZero
-            )
-            : Cesium.sampleTerrain(
-                terrainProvider,
-                level,
-                cartographicHeightZero
-            );
-        if (Cesium.defined(promise)) {
-            promise
-                .then((updatedPositions) => {
-                    resolve(updatedPositions);
-                })
-                .catch(() => {
-                    resolve();
-                });
-        } else {
-            resolve();
-        }
+
+        const readyPromise = terrainProvider.ready
+            ? Promise.resolve(true)
+            : terrainProvider.readyPromise;
+
+        readyPromise.then(() => {
+            const promise = terrainProvider?.availability
+                ? Cesium.sampleTerrainMostDetailed(
+                    terrainProvider,
+                    cartographicHeightZero
+                )
+                : Cesium.sampleTerrain(
+                    terrainProvider,
+                    level,
+                    cartographicHeightZero
+                );
+            if (Cesium.defined(promise)) {
+                promise
+                    .then((updatedPositions) => {
+                        resolve(updatedPositions);
+                    })
+                    // the sampleTerrainMostDetailed from the Cesium Terrain is still using .otherwise
+                    // and it resolve everything in the .then
+                    // while the sampleTerrain uses .catch
+                    // the optional chain help us to avoid error if catch is not exposed by the promise
+                    ?.catch?.(() => {
+                        resolve();
+                    });
+            } else {
+                resolve();
+            }
+        });
     });
 }
 

diff --git a/web/client/utils/styleparser/CesiumStyleParser.js b/web/client/utils/styleparser/CesiumStyleParser.js
@@ -112,7 +112,11 @@ function getLeaderLinePositions({
             if (Cesium.defined(promise)) {
                 promise
                     .then((updatedPositions) => drawLine(updatedPositions?.[0]?.height ?? 0))
-                    .catch(() => drawLine(0));
+                    // the sampleTerrainMostDetailed from the Cesium Terrain is still using .otherwise
+                    // and it resolve everything in the .then
+                    // while the sampleTerrain uses .catch
+                    // the optional chain help us to avoid error if catch is not exposed by the promise
+                    ?.catch?.(() => drawLine(0));
             } else {
                 drawLine(0);
             }

diff --git a/web/client/utils/styleparser/__tests__/CesiumStyleParser-test.js b/web/client/utils/styleparser/__tests__/CesiumStyleParser-test.js
@@ -642,6 +642,66 @@ describe('CesiumStyleParser', () => {
             }).catch(done);
         });
 
+        it('should add leader line where HeightReference is Relative and sampleTerrain is using when from Cesium', (done) => {
+            const style = {
+                "name": "",
+                "rules": [
+                    {
+                        "name": "",
+                        "symbolizers": [
+                            {
+                                "kind": "Mark",
+                                "color": "#ffea00",
+                                "fillOpacity": 1,
+                                "strokeColor": "#3f3f3f",
+                                "strokeOpacity": 1,
+                                "strokeWidth": 1,
+                                "radius": 32,
+                                "wellKnownName": "Star",
+                                "msHeightReference": "relative",
+                                "msBringToFront": false,
+                                "symbolizerId": "ea1db421-980f-11ed-a8e7-c1b9d44be36c",
+                                "msHeight": 5000,
+                                "msLeaderLineWidth": 4,
+                                "msLeaderLineColor": "#ff0000",
+                                "msLeaderLineOpacity": 1
+                            }
+                        ],
+                        "ruleId": "ea1db420-980f-11ed-a8e7-c1b9d44be36c"
+                    }
+                ]
+            };
+
+            const canvas = document.createElement('canvas');
+            images.push({
+                id: getImageIdFromSymbolizer(style.rules[0].symbolizers[0]),
+                image: canvas,
+                width: 32,
+                height: 32
+            });
+            const sampleTerrainTest = () => Cesium.when.resolve([new Cesium.Cartographic(9, 45, 1000)]);
+
+            parser.writeStyle(style).then((styleFunc) => {
+                return Cesium.GeoJsonDataSource.load({type: "FeatureCollection", features: [{type: "Feature", properties: {}, geometry: {type: "Point", coordinates: [9, 45]}}]})
+                    .then((dataSource) => {
+                        const entities = dataSource.entities.values;
+                        const mockMap = {terrainProvider: {ready: true}};
+                        return styleFunc({entities, map: mockMap, sampleTerrain: sampleTerrainTest }).then((styledEntities) => {
+                            expect(styledEntities.length).toBe(1);
+                            expect(styledEntities[0].billboard).toBeTruthy();
+                            expect(styledEntities[0].polyline).toBeTruthy();
+                            const cartographicPosition = Cesium.Cartographic.fromCartesian(styledEntities[0].position._value);
+                            const leaderLineCartographicPositionA = Cesium.Cartographic.fromCartesian(styledEntities[0].polyline.positions._value[0]);
+                            const leaderLineCartographicPositionB = Cesium.Cartographic.fromCartesian(styledEntities[0].polyline.positions._value[1]);
+                            expect(Math.round(cartographicPosition.height)).toBe(5000);
+                            expect(Math.round(leaderLineCartographicPositionA.height)).toBe(1000);
+                            expect(Math.round(leaderLineCartographicPositionB.height)).toBe(6000);
+                            done();
+                        });
+                    });
+            }).catch(done);
+        });
+
         it('should add leader line where HeightReference is none', (done) => {
             const style = {
                 "name": "",