fixed update layer for cesium

web/client/components/map/cesium/Layer.jsx

@@ -19,13 +19,13 @@ const CesiumLayer = React.createClass({
     componentDidMount() {
         this.createLayer(this.props.type, this.props.options, this.props.position, this.props.map);
         if (this.props.options && this.layer && this.props.options.visibility !== false) {
-            this.addLayer();
+            this.addLayer(this.props);
             this.updateZIndex();
         }
     },
     componentWillReceiveProps(newProps) {
         const newVisibility = newProps.options && newProps.options.visibility !== false;
-        this.setLayerVisibility(newVisibility);
+        this.setLayerVisibility(newVisibility, newProps);
 
         const newOpacity = (newProps.options && newProps.options.opacity !== undefined) ? newProps.options.opacity : 1.0;
         this.setLayerOpacity(newOpacity);
@@ -47,7 +47,7 @@ const CesiumLayer = React.createClass({
                 const oldProvider = this.provider;
                 const newLayer = this.layer.updateParams(newProps.options.params);
                 this.layer = newLayer;
-                this.addLayer();
+                this.addLayer(newProps);
                 setTimeout(() => {
                     this.removeLayer(oldProvider);
                 }, 1000);
@@ -106,11 +106,11 @@ const CesiumLayer = React.createClass({
                 });
         }
     },
-    setLayerVisibility(visibility) {
+    setLayerVisibility(visibility, newProps) {
         var oldVisibility = this.props.options && this.props.options.visibility !== false;
         if (visibility !== oldVisibility) {
             if (visibility) {
-                this.addLayer();
+                this.addLayer(newProps);
                 this.updateZIndex();
             } else {
                 this.removeLayer();
@@ -138,26 +138,26 @@ const CesiumLayer = React.createClass({
         if (newLayer) {
             this.removeLayer();
             this.layer = newLayer;
-            this.addLayer();
+            this.addLayer(newProps);
         }
     },
-    addLayerInternal() {
+    addLayerInternal(newProps) {
         this.provider = this.props.map.imageryLayers.addImageryProvider(this.layer);
         this.provider._position = this.props.position;
-        if (this.props.options.opacity) {
-            this.provider.alpha = this.props.options.opacity;
+        if (newProps.options.opacity !== undefined) {
+            this.provider.alpha = newProps.options.opacity;
         }
     },
-    addLayer() {
+    addLayer(newProps) {
         if (this.layer && !this.layer.detached) {
-            this.addLayerInternal();
+            this.addLayerInternal(newProps);
             if (this.props.options.refresh && this.layer.updateParams) {
                 let counter = 0;
                 this.refreshTimer = setInterval(() => {
                     const newLayer = this.layer.updateParams(assign({}, this.props.options.params, {_refreshCounter: counter++}));
                     this.removeLayer();
                     this.layer = newLayer;
-                    this.addLayerInternal();
+                    this.addLayerInternal(newProps);
                 }, this.props.options.refresh);
             }
         }

web/client/components/map/cesium/plugins/WMSLayer.js

@@ -12,6 +12,7 @@ const ProxyUtils = require('../../../../utils/ProxyUtils');
 const Cesium = require('../../../../libs/cesium');
 const assign = require('object-assign');
 const {isArray} = require('lodash');
+const WMSUtils = require('../../../../utils/cesium/WMSUtils');
 
 function getWMSURLs( urls ) {
     return urls.map((url) => url.split("\?")[0]);
@@ -111,23 +112,20 @@ const createLayer = (options) => {
     };
     return layer;
 };
-const updateLayer = (newOptions, oldOptions) => {
-    if (oldOptions.singleTile !== newOptions.singleTile
-        || oldOptions.tiled !== newOptions.tiled
-        || oldOptions.transparent !== newOptions.transparent ) {
-        let layer;
-        if (newOptions.singleTile) {
-            layer = new Cesium.SingleTileImageryProvider(wmsToCesiumOptionsSingleTile(newOptions));
-        } else {
-            layer = new Cesium.WebMapServiceImageryProvider(wmsToCesiumOptions(newOptions));
-        }
-        layer.updateParams = (params) => {
-            const newOp = assign({}, newOptions, {
-                params: assign({}, newOptions.params || {}, params)
-            });
-            return createLayer(newOp);
-        };
-        return layer;
+const updateLayer = (layer, newOptions, oldOptions) => {
+    const requiresUpdate = (el) => WMSUtils.PARAM_OPTIONS.indexOf(el.toLowerCase()) >= 0;
+    const newParams = (newOptions && newOptions.params);
+    const oldParams = (oldOptions && oldOptions.params);
+    const allParams = {...newParams, ...oldParams };
+    let newParameters = Object.keys({...newOptions, ...oldOptions, ...allParams})
+        .filter(requiresUpdate)
+        .filter((key) => {
+            const oldOption = oldOptions[key] === undefined ? oldParams && oldParams[key] : oldOptions[key];
+            const newOption = newOptions[key] === undefined ? newParams && newParams[key] : newOptions[key];
+            return oldOption !== newOption;
+        });
+    if (newParameters.length > 0) {
+        return createLayer(newOptions);
     }
     return null;
 };

web/client/components/map/leaflet/plugins/WMSLayer.js

@@ -79,7 +79,7 @@ function wmsToLeafletOptions(options) {
         transparent: options.transparent !== undefined ? options.transparent : true,
         tiled: options.tiled !== undefined ? options.tiled : true,
         opacity: opacity,
-        "zIndex": options.zIndex,
+        zIndex: options.zIndex,
         version: options.version || "1.3.0",
         SRS: CoordinatesUtils.normalizeSRS(options.srs || 'EPSG:3857', options.allowedSRS),
         CRS: CoordinatesUtils.normalizeSRS(options.srs || 'EPSG:3857', options.allowedSRS),
@@ -97,7 +97,7 @@ Layers.registerType('wms', {
         const queryParameters = wmsToLeafletOptions(options) || {};
         urls.forEach(url => SecurityUtils.addAuthenticationParameter(url, queryParameters));
         if (options.singleTile) {
-            return L.nonTiledLayer.wms(urls, queryParameters);
+            return L.nonTiledLayer.wms(urls[0], queryParameters);
         }
         return L.tileLayer.multipleUrlWMS(urls, queryParameters);
     },
@@ -118,7 +118,9 @@ Layers.registerType('wms', {
                 newLayer = L.tileLayer.multipleUrlWMS(urls, newQueryParameters);
             }
             if ( newParameters.length > 0 ) {
-                newParameters.forEach( key => newParams[key] = newQueryParameters[key] );
+                newParams = newParameters.reduce( (accumulator, currentValue) => {
+                    return objectAssign({}, accumulator, {[currentValue]: newQueryParameters[currentValue] });
+                }, newParams);
                 // set new options as parameters, merged with params
                 newLayer.setParams(objectAssign(newParams, newParams.params, newOptions.params));
             } else if (!isEqual(newOptions.params, oldOptions.params)) {
@@ -127,7 +129,9 @@ Layers.registerType('wms', {
             return newLayer;
         }
         if ( newParameters.length > 0 ) {
-            newParameters.forEach( key => newParams[key] = newQueryParameters[key] );
+            newParams = newParameters.reduce( (accumulator, currentValue) => {
+                return objectAssign({}, accumulator, {[currentValue]: newQueryParameters[currentValue] });
+            }, newParams);
             // set new options as parameters, merged with params
             layer.setParams(objectAssign(newParams, newParams.params, newOptions.params));
         } else if (!isEqual(newOptions.params, oldOptions.params)) {

web/client/utils/cesium/Layers.js

@@ -35,7 +35,7 @@ var Layers = {
     updateLayer: function(type, layer, newOptions, oldOptions, map) {
         var layerCreator = layerTypes[type];
         if (layerCreator && layerCreator.update) {
-            return layerCreator.update(newOptions, oldOptions, map);
+            return layerCreator.update(layer, newOptions, oldOptions, map);
         }
     }
 };

web/client/utils/cesium/WMSUtils.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const WMSUtils = {
+    PARAM_OPTIONS: ["layers", "styles", "style", "format", "transparent", "version", "tiled", "opacity", "zindex", "srs", "singletile" ]
+};
+
+module.exports = WMSUtils;