Fix #9653 with cesium marker (#9776)

geosolutions-it · Nov 30, 2023 · 57ba6d7 · 57ba6d7
1 parent f466921
commit 57ba6d7
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git a/web/client/utils/styleparser/CesiumStyleParser.js b/web/client/utils/styleparser/CesiumStyleParser.js
@@ -347,7 +347,7 @@ const getGraphics = ({
     const symbolizer = parseSymbolizerExpressions(_symbolizer, { properties });
     if (symbolizer.kind === 'Mark') {
         modifyPointHeight({ entity, symbolizer });
-        const { image, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(symbolizer)) || {};
+        const { image, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(symbolizer, _symbolizer)) || {};
         if (image) {
             const side = width > height ? width : height;
             const scale = (symbolizer.radius * 2) / side;
@@ -375,7 +375,7 @@ const getGraphics = ({
     }
     if (symbolizer.kind === 'Icon') {
         modifyPointHeight({ entity, symbolizer });
-        const { image, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(symbolizer)) || {};
+        const { image, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(symbolizer, _symbolizer)) || {};
         if (image) {
             const side = width > height ? width : height;
             const scale = symbolizer.size / side;

diff --git a/web/client/utils/styleparser/LeafletStyleParser.js b/web/client/utils/styleparser/LeafletStyleParser.js
@@ -104,7 +104,7 @@ function getStyleFuncFromRules({ rules: geoStylerStyleRules = [] }) {
         const pointToLayer = ({ symbolizer: _symbolizer, latlng, feature }) => {
             const symbolizer = parseSymbolizerExpressions(_symbolizer, feature);
             if (symbolizer.kind === 'Mark') {
-                const { image, src, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(symbolizer)) || {};
+                const { image, src, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(symbolizer, _symbolizer)) || {};
                 if (image) {
                     const aspect = width / height;
                     const size = symbolizer.radius * 2;
@@ -125,7 +125,7 @@ function getStyleFuncFromRules({ rules: geoStylerStyleRules = [] }) {
                 }
             }
             if (symbolizer.kind === 'Icon') {
-                const { image, src, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(symbolizer)) || {};
+                const { image, src, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(symbolizer, _symbolizer)) || {};
                 if (image) {
                     const aspect = width / height;
                     let iconSizeW = symbolizer.size;
@@ -158,7 +158,7 @@ function getStyleFuncFromRules({ rules: geoStylerStyleRules = [] }) {
                         font-style: ${symbolizer.fontStyle || 'normal'};
                         font-weight: ${symbolizer.fontWeight || 'normal'};
                         font-size: ${symbolizer.size}px;
-                        
+
                         position: absolute;
                         transform: translate(calc(${anchorH} + ${symbolizer?.offset?.[0] ?? 0}px), calc(${anchorV} + ${symbolizer?.offset?.[1] ?? 0}px)) rotateZ(${symbolizer?.rotate ?? 0}deg);
 

diff --git a/web/client/utils/styleparser/OLStyleParser.js b/web/client/utils/styleparser/OLStyleParser.js
@@ -413,8 +413,8 @@ export class OlStyleParser {
         const olStyle = ({ map, features } = {}) => drawIcons(geoStylerStyle, { features })
             .then((images) => {
                 this._getImages = () => images;
-                this._computeIconScaleBasedOnSymbolizer = (symbolizer) => {
-                    const { image, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(symbolizer)) || {};
+                this._computeIconScaleBasedOnSymbolizer = (symbolizer, _symbolizer) => {
+                    const { image, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(symbolizer, _symbolizer)) || {};
                     if (image && width && height) {
                         const side = width > height ? width : height;
                         const scale = symbolizer.size / side;
@@ -557,7 +557,7 @@ export class OlStyleParser {
         }
         const geometryFunc = getGeometryFunction(markSymbolizer, feature, this._getMap());
         const images = this._getImages();
-        const { image, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(markSymbolizer)) || {};
+        const { image, width, height } = images.find(({ id }) => id === getImageIdFromSymbolizer(markSymbolizer, _markSymbolizer)) || {};
         if (image) {
             const side = width > height ? width : height;
             const scale = (markSymbolizer.radius * 2) / side;
@@ -597,7 +597,7 @@ export class OlStyleParser {
             src: symbolizer.image,
             crossOrigin: 'anonymous',
             opacity: symbolizer.opacity,
-            scale: this._computeIconScaleBasedOnSymbolizer(_symbolizer),
+            scale: this._computeIconScaleBasedOnSymbolizer(symbolizer, _symbolizer),
             // Rotation in openlayers is radians while we use degree
             rotation: (typeof (symbolizer.rotate) === 'number' ? symbolizer.rotate * Math.PI / 180 : undefined),
             displacement: symbolizer.offset,

diff --git a/web/client/utils/styleparser/StyleParserUtils.js b/web/client/utils/styleparser/StyleParserUtils.js
@@ -489,7 +489,7 @@ let imagesCache = {};
  * @param {object} symbolizer mark symbolizer
  * @returns {string} an id for the mark symbolizer
  */
-export const getImageIdFromSymbolizer = ({
+export const _getImageIdFromSymbolizer = ({
     image,
     color,
     fillOpacity,
@@ -505,6 +505,15 @@ export const getImageIdFromSymbolizer = ({
     }
     return [wellKnownName, color, fillOpacity, strokeColor, strokeOpacity, (strokeDasharray || []).join('_'), strokeWidth, radius].join(':');
 };
+/**
+ * generate an id based on a Mark symbolizer
+ * @param {object} parsedSymbolizer the parsed mark symbolizer
+ * @param {object} originalSymbolizer the original mark symbolizer
+ * @returns {string} an id for the mark symbolizer
+ */
+export const getImageIdFromSymbolizer = (parsedSymbolizer, originalSymbolizer) => {
+    return _getImageIdFromSymbolizer(originalSymbolizer?.image?.name === 'msMarkerIcon' ? originalSymbolizer : parsedSymbolizer);
+};
 
 /**
  * prefetch images of a icon symbolizer

diff --git a/web/client/utils/styleparser/__tests__/StyleParserUtils-test.js b/web/client/utils/styleparser/__tests__/StyleParserUtils-test.js
@@ -38,6 +38,9 @@ describe("StyleParserUtils ", () => {
             size: 32,
             rotate: 90
         })).toBe('path/to/image');
+        const parsedSymbolizer = {"symbolizerId": "df2715d2-8ecb-11ee-909e-8bd5d708e385", "kind": "Icon", "image": "data:image/png;base64,iVBORcmGtfaAAAAABJRU5ErkJggg==", "opacity": 1, "size": 46, "rotate": 0, "msBringToFront": false, "anchor": "bottom", "msHeightReference": "none"};
+        const originalSymbolizer = {"symbolizerId": "df2715d2-8ecb-11ee-909e-8bd5d708e385", "kind": "Icon", "image": {"name": "msMarkerIcon", "args": [{"glyph": "power-off", "color": "purple", "shape": "square"}]}, "opacity": 1, "size": 46, "rotate": 0, "msBringToFront": false, "anchor": "bottom", "msHeightReference": "none"};
+        expect(getImageIdFromSymbolizer(parsedSymbolizer, originalSymbolizer)).toEqual("msMarkerIcon:purple:square:power-off");
 
     });