diff --git a/web/client/utils/styleparser/CesiumStyleParser.js b/web/client/utils/styleparser/CesiumStyleParser.js index a631dc5114..a2436d1512 100644 --- 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 index f60ca3db00..32aceba0e3 100644 --- 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 index 047e06b788..ec993fee4d 100644 --- 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 index 2f1ace34b2..a14efc5735 100644 --- 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 index a6507def2b..8a8e0847c0 100644 --- 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"); });