From 40c2835b06701f534f0d246261a0c5cacb532b86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Thor=C3=A9n?= Date: Wed, 7 Dec 2022 15:59:26 +0100 Subject: [PATCH] feature: enable WMS-layers in stylepicker (#1633) * feat: add wms-layers to style picker * feat: add wms-layers to style picker * feat: add wms stylepicker support for sharemap * feat: sharemap support for wms image layers * feat: get local wms source if exists for print legend * feat: add wms-layers to style picker * feat: add wms stylepicker support for sharemap * feat: sharemap support for wms image layers * feat: get local wms source if exists for print legend --- src/controls/legend/overlayproperties.js | 37 ++++++++++++++++++++--- src/controls/print/print-legend.js | 4 +++ src/layer/wms.js | 38 ++++++++++++++++-------- 3 files changed, 62 insertions(+), 17 deletions(-) diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js index 5c9ae276f..355bdaca1 100644 --- a/src/controls/legend/overlayproperties.js +++ b/src/controls/legend/overlayproperties.js @@ -63,7 +63,10 @@ const OverlayProperties = function OverlayProperties(options = {}) { } function getStyleDisplayName(styleName) { - const altStyle = stylePicker.find(s => s.style === styleName); + let altStyle = stylePicker.find(s => s.style === styleName); + if (!altStyle) { + altStyle = stylePicker.find(s => s.default); + } return (altStyle && altStyle.title) || styleName; } @@ -71,12 +74,38 @@ const OverlayProperties = function OverlayProperties(options = {}) { const altStyleIndex = stylePicker.findIndex(s => s.title === styleTitle); const altStyle = stylePicker[altStyleIndex]; styleSelection.setButtonText(styleTitle); - const newStyle = Style.createStyle({ style: altStyle.style, clusterStyleName: altStyle.clusterStyle, viewer }); const legendCmp = document.getElementById(legendComponent.getId()); - legendCmp.innerHTML = Legend(viewer.getStyle(altStyle.style), opacity); if (!layer.get('defaultStyle')) layer.setProperties({ defaultStyle: layer.get('styleName') }); layer.setProperties({ altStyleIndex }); - layer.setProperties({ styleName: altStyle.style }); + 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; + styleToSet = layer.get('defaultStyle'); + } else { + sourceParams.STYLES = styleToSet; + } + layerSource.refresh(); + layer.set('styleName', styleToSet); + const maxResolution = viewer.getResolutions()[viewer.getResolutions().length - 1]; + const getLegendString = layerSource.getLegendUrl(maxResolution, { STYLE: styleToSet }); + const newWmsStyle = [[{ + icon: { + src: `${getLegendString}` + }, + extendedLegend: altStyle.hasThemeLegend || false + }]]; + viewer.addStyle(styleToSet, newWmsStyle); + + legendCmp.innerHTML = Legend(viewer.getStyle(styleToSet), opacity); + 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 }); layer.setStyle(newStyle); layer.dispatchEvent('change:style'); }; diff --git a/src/controls/print/print-legend.js b/src/controls/print/print-legend.js index 06bbfbf53..dd9c9fe68 100644 --- a/src/controls/print/print-legend.js +++ b/src/controls/print/print-legend.js @@ -59,6 +59,10 @@ const LayerRow = function LayerRow(options) { const getWMSLegendUrl = (aLayer, format) => { const url = getOneUrl(aLayer); const layerName = aLayer.get('name'); + const style = viewer.getStyle(aLayer.get('styleName')); + if (style && style[0] && style[0][0] && style[0][0].icon) { + return `${style[0][0].icon.src}&format=${format}`; + } return `${url}?SERVICE=WMS&layer=${layerName}&format=${format}&version=1.1.1&request=getLegendGraphic&scale=401&legend_options=dpi:300`; }; diff --git a/src/layer/wms.js b/src/layer/wms.js index 1cd80c947..319788f50 100644 --- a/src/layer/wms.js +++ b/src/layer/wms.js @@ -37,20 +37,39 @@ function createImageSource(options) { })); } -function createDefaultStyle(wmsOptions, source, viewer) { +function createWmsStyle(wmsOptions, source, viewer, defaultStyle = true) { const maxResolution = viewer.getResolutions()[viewer.getResolutions().length - 1]; - const styleName = `${wmsOptions.name}_WMSDefault`; - const getLegendString = source.getLegendUrl(maxResolution, wmsOptions.legendParams); + const styleName = defaultStyle ? `${wmsOptions.name}_WMSDefault` : wmsOptions.styleName; + const getLegendString = defaultStyle ? source.getLegendUrl(maxResolution, wmsOptions.legendParams) : source.getLegendUrl(maxResolution, { STYLE: styleName }); + let hasThemeLegend = wmsOptions.hasThemeLegend || false; + if (!defaultStyle) { + hasThemeLegend = wmsOptions.stylePicker[wmsOptions.altStyleIndex].hasThemeLegend || false; + } + const style = [[{ icon: { src: `${getLegendString}` }, - extendedLegend: wmsOptions.hasThemeLegend || false + extendedLegend: hasThemeLegend }]]; viewer.addStyle(styleName, style); return styleName; } +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); + wmsOpts.style = wmsOptions.styleName; + wmsSource.getParams().STYLES = wmsOptions.styleName; + } +} + const wms = function wms(layerOptions, viewer) { const wmsDefault = { featureinfoLayer: null @@ -87,19 +106,12 @@ const wms = function wms(layerOptions, viewer) { if (renderMode === 'image') { const source = createImageSource(sourceOptions); - if (wmsOptions.styleName === 'default') { - wmsOptions.styleName = createDefaultStyle(wmsOptions, source, viewer); - wmsOptions.style = wmsOptions.styleName; - } + createWmsLayer(wmsOptions, source, viewer); return image(wmsOptions, source); } const source = createTileSource(sourceOptions); - - if (wmsOptions.styleName === 'default') { - wmsOptions.styleName = createDefaultStyle(wmsOptions, source, viewer); - wmsOptions.style = wmsOptions.styleName; - } + createWmsLayer(wmsOptions, source, viewer); return tile(wmsOptions, source); };