Fix #10373 Style layer - Property value cause an error on 3D view (#1…

…0383) (#10388)
geosolutions-it · May 31, 2024 · 7fbd031 · 7fbd031
1 parent 60be415
commit 7fbd031
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 3 deletions.
diff --git a/web/client/utils/styleparser/CesiumStyleParser.js b/web/client/utils/styleparser/CesiumStyleParser.js
@@ -7,7 +7,7 @@
  */
 import * as Cesium from 'cesium';
 import chroma from 'chroma-js';
-import { castArray, isNumber, isEqual, range } from 'lodash';
+import { castArray, isNumber, isEqual, range, isNaN } from 'lodash';
 import { needProxy, getProxyUrl } from '../ProxyUtils';
 import {
     resolveAttributeTemplate,
@@ -613,7 +613,7 @@ const symbolizerToPrimitives = {
         const { image, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(parsedSymbolizer, symbolizer)) || {};
         const side = width > height ? width : height;
         const scale = (parsedSymbolizer.radius * 2) / side;
-        return image ? [
+        return image && !isNaN(scale) ? [
             {
                 type: 'point',
                 geometryType: 'point',
@@ -652,7 +652,7 @@ const symbolizerToPrimitives = {
         const { image, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(parsedSymbolizer, symbolizer)) || {};
         const side = width > height ? width : height;
         const scale = parsedSymbolizer.size / side;
-        return image ? [{
+        return image && !isNaN(scale) ? [{
             type: 'point',
             geometryType: 'point',
             entity: {

diff --git a/web/client/utils/styleparser/__tests__/CesiumStyleParser-test.js b/web/client/utils/styleparser/__tests__/CesiumStyleParser-test.js
@@ -1461,4 +1461,98 @@ describe('CesiumStyleParser', () => {
                 }).catch(done);
         });
     });
+    it('should not draw the marker when using radius property without argument', (done) => {
+        const style = {
+            name: '',
+            rules: [
+                {
+                    filter: undefined,
+                    name: '',
+                    symbolizers: [
+                        {
+                            kind: 'Mark',
+                            wellKnownName: 'Circle',
+                            color: '#ff0000',
+                            fillOpacity: 0.5,
+                            strokeColor: '#00ff00',
+                            strokeOpacity: 0.25,
+                            strokeWidth: 3,
+                            radius: {
+                                name: 'property',
+                                args: []
+                            },
+                            rotate: 90,
+                            msBringToFront: true,
+                            symbolizerId: 'symbolizer-01'
+                        }
+                    ]
+                }
+            ]
+        };
+        const feature = {
+            type: 'Feature',
+            id: 'feature-01',
+            properties: {
+                radius: 2
+            },
+            geometry: {
+                type: 'Point',
+                coordinates: [7, 41]
+            }
+        };
+        parser.writeStyle(style)
+            .then((styleFunc) => styleFunc({
+                features: [{ ...feature, positions: GeoJSONStyledFeatures.featureToCartesianPositions(feature) }]
+            }))
+            .then((styledFeatures) => {
+                expect(styledFeatures.length).toBe(0);
+                done();
+            }).catch(done);
+    });
+    it('should not draw the icon when using size property without argument', (done) => {
+        const style = {
+            name: '',
+            rules: [
+                {
+                    filter: undefined,
+                    name: '',
+                    symbolizers: [
+                        {
+                            kind: 'Icon',
+                            /* png 1px x 1px */
+                            image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=',
+                            opacity: 0.5,
+                            size: {
+                                name: 'property',
+                                args: []
+                            },
+                            rotate: 90,
+                            msBringToFront: true,
+                            anchor: 'bottom-left',
+                            symbolizerId: 'symbolizer-01'
+                        }
+                    ]
+                }
+            ]
+        };
+        const feature = {
+            type: 'Feature',
+            id: 'feature-01',
+            properties: {
+                radius: 2
+            },
+            geometry: {
+                type: 'Point',
+                coordinates: [7, 41]
+            }
+        };
+        parser.writeStyle(style)
+            .then((styleFunc) => styleFunc({
+                features: [{ ...feature, positions: GeoJSONStyledFeatures.featureToCartesianPositions(feature) }]
+            }))
+            .then((styledFeatures) => {
+                expect(styledFeatures.length).toBe(0);
+                done();
+            }).catch(done);
+    });
 });