From ab36426d2d7777b958c4929dc2ef70df5b3b1175 Mon Sep 17 00:00:00 2001 From: David Date: Fri, 24 Mar 2023 10:48:58 +0100 Subject: [PATCH] =?UTF-8?q?fix:=20decouple=20default=20WMS=20server=20styl?= =?UTF-8?q?e=20and=20preselected=20style=20for=20the=20=E2=80=A6=20(#1715)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: decouple default WMS server style and preselected style for the stylepicker in order to accomodate preselected alternative WMS server styles when a stylepicker is employed for WMS layers * fix: tolerate missing initialStyle prop in layerPicker --- src/controls/legend/overlayproperties.js | 23 +++--- src/layer/wms.js | 90 +++++++++++++++++------- src/viewer.js | 9 ++- 3 files changed, 86 insertions(+), 36 deletions(-) diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js index bc66825bd..91c4ba052 100644 --- a/src/controls/legend/overlayproperties.js +++ b/src/controls/legend/overlayproperties.js @@ -65,7 +65,7 @@ const OverlayProperties = function OverlayProperties(options = {}) { function getStyleDisplayName(styleName) { let altStyle = stylePicker.find(s => s.style === styleName); if (!altStyle) { - altStyle = stylePicker.find(s => s.default); + altStyle = stylePicker.find(s => s.defaultWMSServerStyle); } return (altStyle && altStyle.title) || styleName; } @@ -75,27 +75,33 @@ const OverlayProperties = function OverlayProperties(options = {}) { const altStyle = stylePicker[altStyleIndex]; styleSelection.setButtonText(styleTitle); const legendCmp = document.getElementById(legendComponent.getId()); - if (!layer.get('defaultStyle')) layer.setProperties({ defaultStyle: layer.get('styleName') }); + if (!layer.get('defaultStyle')) { + layer.setProperties({ defaultStyle: layer.get('styleName') }); + } layer.setProperties({ altStyleIndex }); + if (layer.get('type') === 'WMS') { const layerSource = layer.get('source'); const sourceParams = layerSource.getParams(); let styleToSet = altStyle.style; - if (altStyle.default) { - sourceParams.STYLES = altStyle.style; + + if (altStyle.initialStyle) { styleToSet = layer.get('defaultStyle'); - } else { - sourceParams.STYLES = styleToSet; + } else if (altStyle.defaultWMSServerStyle) { + styleToSet = `${layer.get('name')}_WMSServerDefault`; } + + sourceParams.STYLES = altStyle.defaultWMSServerStyle ? '' : styleToSet; layerSource.refresh(); layer.set('styleName', styleToSet); let maxResolution; if (!(altStyle.legendParams) || !(Object.keys(altStyle.legendParams).find(key => key.toUpperCase() === 'SCALE'))) { maxResolution = viewer.getResolutions()[viewer.getResolutions().length - 1]; } - + let styleNameParam = styleToSet; + if (altStyle.defaultWMSServerStyle) styleNameParam = ''; const getLegendString = layerSource.getLegendUrl(maxResolution, { - STYLE: styleToSet, + STYLE: styleNameParam, ...altStyle.legendParams }); const newWmsStyle = [[{ @@ -110,6 +116,7 @@ const OverlayProperties = function OverlayProperties(options = {}) { layer.dispatchEvent('change:style'); return; } + layer.set('styleName', altStyle.style); legendCmp.innerHTML = Legend(viewer.getStyle(altStyle.style), opacity); const newStyle = Style.createStyle({ style: altStyle.style, clusterStyleName: altStyle.clusterStyle, viewer }); diff --git a/src/layer/wms.js b/src/layer/wms.js index d5f2e1d9f..a925c03d3 100644 --- a/src/layer/wms.js +++ b/src/layer/wms.js @@ -37,30 +37,45 @@ function createImageSource(options) { })); } -function createWmsStyle(wmsOptions, source, viewer, defaultStyle = true) { - let altStyleLegendParams; +function createWmsStyle({ wmsOptions, source, viewer, initialStyle = false }) { let maxResolution = viewer.getResolutions()[viewer.getResolutions().length - 1]; + let newStyle; - if (!(defaultStyle) && (wmsOptions.stylePicker)) { - const altStyle = wmsOptions.stylePicker.find(style => style.style === wmsOptions.styleName); - if (altStyle.legendParams) { - altStyleLegendParams = altStyle.legendParams; - if (Object.keys(altStyle.legendParams).find(key => key.toUpperCase() === 'SCALE')) { - maxResolution = null; - } + if (initialStyle) { + if (wmsOptions.stylePicker) { + newStyle = wmsOptions.stylePicker.find(style => style.initialStyle); + } else { + newStyle = { + defaultWMSServerStyle: true, + hasThemeLegend: wmsOptions.hasThemeLegend || false, + legendParams: wmsOptions.legendParams || false + }; } + } else { + newStyle = wmsOptions.stylePicker[wmsOptions.altStyleIndex]; } - const styleName = defaultStyle ? `${wmsOptions.name}_WMSDefault` : wmsOptions.styleName; - const getLegendString = defaultStyle ? source.getLegendUrl(maxResolution, wmsOptions.legendParams) : source.getLegendUrl(maxResolution, { - STYLE: styleName, - ...altStyleLegendParams - }); - let hasThemeLegend = wmsOptions.hasThemeLegend || false; - if (!defaultStyle) { - hasThemeLegend = wmsOptions.stylePicker[wmsOptions.altStyleIndex].hasThemeLegend || false; + const legendParams = wmsOptions.stylePicker ? newStyle.legendParams : wmsOptions.legendParams; + + if ((legendParams) && (Object.keys(legendParams).find(key => key.toUpperCase() === 'SCALE'))) { + maxResolution = null; } + let getLegendString; + let styleName; + + if (newStyle.defaultWMSServerStyle) { + getLegendString = source.getLegendUrl(maxResolution, legendParams); + styleName = `${wmsOptions.name}_WMSServerDefault`; + } else { + getLegendString = source.getLegendUrl(maxResolution, { + STYLE: newStyle.style, + ...legendParams + }); + styleName = newStyle.style; + } + + const hasThemeLegend = newStyle.hasThemeLegend || false; const style = [[{ icon: { src: `${getLegendString}` @@ -74,14 +89,33 @@ function createWmsStyle(wmsOptions, source, viewer, defaultStyle = true) { function createWmsLayer(wmsOptions, source, viewer) { const wmsOpts = wmsOptions; const wmsSource = source; - if (wmsOpts.styleName === 'default') { - wmsOpts.styleName = createWmsStyle(wmsOptions, source, viewer); - wmsOpts.style = wmsOptions.styleName; - } else if (wmsOptions.altStyleIndex > -1) { - wmsOpts.defaultStyle = createWmsStyle(wmsOptions, source, viewer); - wmsOpts.styleName = createWmsStyle(wmsOptions, source, viewer, false); + + function setInitialStyle() { + if (!(wmsOpts.stylePicker.some(style => style.initialStyle === true))) { + wmsOpts.stylePicker[0].initialStyle = true; + } + } + + if (wmsOptions.stylePicker) { + setInitialStyle(); + let pickedStyle; + if (wmsOptions.altStyleIndex > -1) { + wmsOpts.defaultStyle = createWmsStyle({ wmsOptions, source, viewer, initialStyle: true }); + wmsOpts.styleName = createWmsStyle({ wmsOptions, source, viewer }); + wmsOpts.style = wmsOptions.styleName; + pickedStyle = wmsOptions.stylePicker[wmsOptions.altStyleIndex]; + } else { + wmsOpts.styleName = createWmsStyle({ wmsOptions, source, viewer, initialStyle: true }); + wmsOpts.defaultStyle = wmsOpts.styleName; + wmsOpts.style = wmsOptions.styleName; + pickedStyle = wmsOpts.stylePicker.find(style => style.initialStyle === true); + } + if (!(pickedStyle.defaultWMSServerStyle)) { + wmsSource.getParams().STYLES = wmsOptions.styleName; + } + } else if (wmsOpts.styleName === 'default') { + wmsOpts.styleName = createWmsStyle({ wmsOptions, source, viewer, initialStyle: true }); wmsOpts.style = wmsOptions.styleName; - wmsSource.getParams().STYLES = wmsOptions.styleName; } } @@ -104,9 +138,11 @@ const wms = function wms(layerOptions, viewer) { sourceOptions.projection = viewer.getProjection(); sourceOptions.id = wmsOptions.id; sourceOptions.format = wmsOptions.format ? wmsOptions.format : sourceOptions.format; - const styleSettings = viewer.getStyle(wmsOptions.styleName); - const wmsStyleObject = styleSettings ? styleSettings[0].find(s => s.wmsStyle) : undefined; - sourceOptions.style = wmsStyleObject ? wmsStyleObject.wmsStyle : ''; + if (!wmsOptions.stylePicker) { + const styleSettings = viewer.getStyle(wmsOptions.styleName); + const wmsStyleObject = styleSettings ? styleSettings[0].find(s => s.wmsStyle) : undefined; + sourceOptions.style = wmsStyleObject ? wmsStyleObject.wmsStyle : ''; + } if (wmsOptions.tileGrid) { sourceOptions.tileGrid = maputils.tileGrid(wmsOptions.tileGrid); diff --git a/src/viewer.js b/src/viewer.js index 710ccc59b..e8442369f 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -343,7 +343,14 @@ const Viewer = function Viewer(targetOption, options = {}) { const altStyle = initialProps.stylePicker[savedLayerProps[layerName].altStyleIndex]; savedProps.clusterStyle = altStyle.clusterStyle; savedProps.style = altStyle.style; - savedProps.defaultStyle = initialProps.style; + if (initialProps.type === 'WMS') { + let WMSStylePickerInitialStyle = initialProps.stylePicker.find(style => style.initialStyle); + if (WMSStylePickerInitialStyle === undefined) { + WMSStylePickerInitialStyle = initialProps.stylePicker[0]; + WMSStylePickerInitialStyle.initialStyle = true; + } + savedProps.defaultStyle = WMSStylePickerInitialStyle; + } else savedProps.defaultStyle = initialProps.style; } savedProps.name = initialProps.name; const mergedProps = Object.assign({}, initialProps, savedProps);