From 396707d5cb88a7bbcb65259f9e063b980888c994 Mon Sep 17 00:00:00 2001 From: Matteo Velludini Date: Thu, 11 May 2017 14:22:48 +0200 Subject: [PATCH] fixed update layer for cesium --- web/client/components/map/cesium/Layer.jsx | 24 +++++++------- .../components/map/cesium/plugins/WMSLayer.js | 32 +++++++++---------- .../map/leaflet/plugins/WMSLayer.js | 12 ++++--- web/client/utils/cesium/Layers.js | 2 +- web/client/utils/cesium/WMSUtils.js | 13 ++++++++ 5 files changed, 49 insertions(+), 34 deletions(-) create mode 100644 web/client/utils/cesium/WMSUtils.js diff --git a/web/client/components/map/cesium/Layer.jsx b/web/client/components/map/cesium/Layer.jsx index 840c0e95c8..27a0de196c 100644 --- a/web/client/components/map/cesium/Layer.jsx +++ b/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); } } diff --git a/web/client/components/map/cesium/plugins/WMSLayer.js b/web/client/components/map/cesium/plugins/WMSLayer.js index 5e38c14262..b400061a51 100644 --- a/web/client/components/map/cesium/plugins/WMSLayer.js +++ b/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; }; diff --git a/web/client/components/map/leaflet/plugins/WMSLayer.js b/web/client/components/map/leaflet/plugins/WMSLayer.js index 4d2c2bc089..8c4a9eb5b4 100644 --- a/web/client/components/map/leaflet/plugins/WMSLayer.js +++ b/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)) { diff --git a/web/client/utils/cesium/Layers.js b/web/client/utils/cesium/Layers.js index 91403714d6..068793115d 100644 --- a/web/client/utils/cesium/Layers.js +++ b/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); } } }; diff --git a/web/client/utils/cesium/WMSUtils.js b/web/client/utils/cesium/WMSUtils.js new file mode 100644 index 0000000000..5b5c15e25d --- /dev/null +++ b/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;