feature: enable WMS-layers in stylepicker (origo-map#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
Flodkvist · Dec 7, 2022 · 40c2835 · 40c2835
1 parent c26b6bb
commit 40c2835
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 17 deletions.
diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
@@ -63,20 +63,49 @@ 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;
   }
 
   const onSelectStyle = (styleTitle) => {
     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
@@ -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
@@ -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);
 };