geosolutions-it#81: upgrade CesiumJS to 1.79.1 (TODO: cesium-navigati…

…on, more testing) # Conflicts: # package.json # project/custom/templates/index.html # project/standard/templates/index.html # project/standard/templates/indexTemplate.html # web/client/components/map/cesium/Map.jsx # web/client/components/map/cesium/plugins/MarkerLayer.js # web/client/components/map/cesium/plugins/WMSLayer.js # web/client/examples/api/index.html # web/client/index.html # web/client/indexTemplate.html
MV88 · Jun 30, 2021 · 9fb976b · 9fb976b
1 parent 399ba62
commit 9fb976b
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 65 deletions.
diff --git a/web/client/components/map/cesium/Map.jsx b/web/client/components/map/cesium/Map.jsx
@@ -5,7 +5,7 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import Cesium from '../../../libs/cesium';
+import * as Cesium from 'Cesium';
 
 import PropTypes from 'prop-types';
 import Rx from 'rxjs';

diff --git a/web/client/components/map/cesium/__tests__/Layer-test-chrome.jsx b/web/client/components/map/cesium/__tests__/Layer-test-chrome.jsx
@@ -10,7 +10,7 @@ import ReactDOM from 'react-dom';
 import { castArray } from 'lodash';
 import CesiumLayer from '../Layer';
 import expect from 'expect';
-import Cesium from '../../../../libs/cesium';
+import * as Cesium from 'Cesium';
 
 import assign from 'object-assign';
 
@@ -158,9 +158,9 @@ describe('Cesium layer', () => {
 
         expect(layer).toExist();
         expect(map.imageryLayers.length).toBe(1);
-        expect(map.imageryLayers._layers[0]._imageryProvider._url).toBe('{s}');
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource._url).toBe('{s}');
         expect(map.imageryLayers._layers[0]._imageryProvider._tileProvider._subdomains.length).toBe(1);
-        expect(map.imageryLayers._layers[0]._imageryProvider.proxy.proxy).toExist();
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource.proxy.proxy).toExist();
     });
 
     it('test wms vector formats must change to default image format (image/png)', () => {
@@ -181,8 +181,7 @@ describe('Cesium layer', () => {
             map={map} />, document.getElementById("container"));
 
         expect(layer).toExist();
-
-        expect(layer.layer._tileProvider._url.indexOf('format=image%2Fpng') !== -1).toBe(true);
+        expect(layer.layer._tileProvider._resource._queryParameters.format).toBe('image/png');
 
         layer = ReactDOM.render(<CesiumLayer
             type="wms"
@@ -193,7 +192,7 @@ describe('Cesium layer', () => {
             map={map} />, document.getElementById("container"));
 
         expect(layer).toExist();
-        expect(layer.layer._tileProvider._url.indexOf('format=image%2Fpng') !== -1).toBe(true);
+        expect(layer.layer._tileProvider._resource._queryParameters.format).toBe('image/png');
 
         layer = ReactDOM.render(<CesiumLayer
             type="wms"
@@ -204,7 +203,7 @@ describe('Cesium layer', () => {
             map={map} />, document.getElementById("container"));
 
         expect(layer).toExist();
-        expect(layer.layer._tileProvider._url.indexOf('format=image%2Fpng') !== -1).toBe(true);
+        expect(layer.layer._tileProvider._resource._queryParameters.format).toBe('image/png');
 
         // check if it switches to jpeg
         layer = ReactDOM.render(<CesiumLayer
@@ -216,7 +215,7 @@ describe('Cesium layer', () => {
             map={map} />, document.getElementById("container"));
 
         expect(layer).toExist();
-        expect(layer.layer._tileProvider._url.indexOf('format=image%2Fjpeg') !== -1).toBe(true);
+        expect(layer.layer._tileProvider._resource._queryParameters.format).toBe('image/jpeg');
     });
 
     it('wms layer with credits', () => {
@@ -258,10 +257,10 @@ describe('Cesium layer', () => {
 
         expect(layer).toExist();
         expect(map.imageryLayers.length).toBe(1);
-        expect(map.imageryLayers._layers[0]._imageryProvider._url).toBe('{s}');
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource._url).toBe('{s}');
         expect(map.imageryLayers._layers[0]._imageryProvider._tileProvider._subdomains.length).toBe(1);
-        expect(map.imageryLayers._layers[0]._imageryProvider.proxy.proxy).toExist();
-        expect(map.imageryLayers._layers[0]._imageryProvider._tileProvider._url.toLowerCase().indexOf('tiled=true') !== -1).toBe(true);
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource.proxy.proxy).toExist();
+        expect(map.imageryLayers._layers[0]._imageryProvider._tileProvider._resource._queryParameters.tiled).toBe(true);
     });
     it('check wms layer proxy skip for relative urls', () => {
         var options = {
@@ -279,9 +278,9 @@ describe('Cesium layer', () => {
 
         expect(layer).toExist();
         expect(map.imageryLayers.length).toBe(1);
-        expect(map.imageryLayers._layers[0]._imageryProvider._url).toBe('{s}');
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource._url).toBe('{s}');
         expect(map.imageryLayers._layers[0]._imageryProvider._tileProvider._subdomains.length).toBe(1);
-        expect(map.imageryLayers._layers[0]._imageryProvider.proxy.proxy).toNotExist();
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource.proxy.proxy).toNotExist();
     });
 
     it('creates a wmts layer for Cesium map', () => {
@@ -311,8 +310,8 @@ describe('Cesium layer', () => {
         expect(layer).toExist();
         // count layers
         expect(map.imageryLayers.length).toBe(1);
-        expect(map.imageryLayers._layers[0]._imageryProvider._url).toExist();
-        expect(map.imageryLayers._layers[0]._imageryProvider.proxy.proxy).toExist();
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource._url).toExist();
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource.proxy.proxy).toExist();
     });
     it('custom name tile set', () => {
         var options = {
@@ -370,8 +369,8 @@ describe('Cesium layer', () => {
         expect(layer).toExist();
         // count layers
         expect(map.imageryLayers.length).toBe(1);
-        expect(map.imageryLayers._layers[0]._imageryProvider._url).toExist();
-        expect(map.imageryLayers._layers[0]._imageryProvider.proxy.proxy).toNotExist();
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource._url).toExist();
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource.proxy.proxy).toNotExist();
     });
 
     it('creates a wms layer with single tile for CesiumLayer map', () => {
@@ -391,7 +390,8 @@ describe('Cesium layer', () => {
 
         expect(layer).toExist();
         expect(map.imageryLayers.length).toBe(1);
-        expect(map.imageryLayers._layers[0]._imageryProvider._url.indexOf('http://demo.geo-solutions.it/geoserver/wms?service=WMS')).toBe(0);
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource._url).toBe('http://demo.geo-solutions.it/geoserver/wms');
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource._queryParameters.service).toBe('WMS');
     });
 
     it('creates a wms layer with multiple urls for CesiumLayer map', () => {
@@ -410,14 +410,15 @@ describe('Cesium layer', () => {
 
         expect(layer).toExist();
         expect(map.imageryLayers.length).toBe(1);
-        expect(map.imageryLayers._layers[0]._imageryProvider._url).toBe('{s}');
+        expect(map.imageryLayers._layers[0]._imageryProvider._resource._url).toBe('{s}');
         expect(map.imageryLayers._layers[0]._imageryProvider._tileProvider._subdomains.length).toBe(2);
     });
 
     it('creates a bing layer for cesium map', () => {
         var options = {
             "type": "bing",
             "title": "Bing Aerial",
+            "apiKey": "aaa",
             "name": "Aerial",
             "group": "background"
         };
@@ -687,26 +688,26 @@ describe('Cesium layer', () => {
 
         expect(layer).toExist();
         // expect(map.imageryLayers.length).toBe(1);
-        let url = decodeURIComponent(layer.layer._tileProvider._url);
-        expect(url.match(/ms2-authkey=########-####-####-####-###########/g).length).toBe(1);
+        let token = layer.layer._tileProvider._resource._queryParameters["ms2-authkey"];
+        expect(token).toBe("########-####-####-####-###########");
 
         layer = ReactDOM.render(<CesiumLayer
             type="wms"
             options={options}
             map={map}
             securityToken=""/>, document.getElementById("container"));
 
-        url = decodeURIComponent(layer.layer._tileProvider._url);
-        expect(url.match(/ms2-authkey/g)).toBe(null);
+        token = layer.layer._tileProvider._resource._queryParameters["ms2-authkey"];
+        expect(token).toNotExist();
 
         layer = ReactDOM.render(<CesiumLayer
             type="wms"
             options={options}
             map={map}
             securityToken="########-####-$$$$-####-###########"/>, document.getElementById("container"));
 
-        url = decodeURIComponent(layer.layer._tileProvider._url);
-        expect(url.match(/ms2-authkey=########-####-\$\$\$\$-####-###########/g).length).toBe(1);
+        token = layer.layer._tileProvider._resource._queryParameters["ms2-authkey"];
+        expect(token).toBe("########-####-$$$$-####-###########");
     });
 
     it('test wmts security token', () => {
@@ -754,26 +755,26 @@ describe('Cesium layer', () => {
 
         expect(layer).toExist();
 
-        let url = decodeURIComponent(castArray(layer.layer._url)[0]);
-        expect(url.match(/ms2-authkey=########-####-####-####-###########/g).length).toBe(1);
+        let token = layer.layer._resource._queryParameters["ms2-authkey"];
+        expect(token).toBe("########-####-####-####-###########");
 
         layer = ReactDOM.render(<CesiumLayer
             type="wmts"
             options={options}
             map={map}
             securityToken=""/>, document.getElementById("container"));
 
-        url = decodeURIComponent(castArray(layer.layer._url)[0]);
-        expect(url.match(/ms2-authkey/g)).toBe(null);
+        token = layer.layer._resource._queryParameters["ms2-authkey"];
+        expect(token).toNotExist();
 
         layer = ReactDOM.render(<CesiumLayer
             type="wmts"
             options={options}
             map={map}
             securityToken="########-####-$$$$-####-###########"/>, document.getElementById("container"));
 
-        url = decodeURIComponent(castArray(layer.layer._url)[0]);
-        expect(url.match(/ms2-authkey=########-####-\$\$\$\$-####-###########/g).length).toBe(1);
+        token = layer.layer._resource._queryParameters["ms2-authkey"];
+        expect(token).toBe("########-####-$$$$-####-###########");
 
     });
     it('test cql_filter param to be passed to the layer', () => {
@@ -797,8 +798,8 @@ describe('Cesium layer', () => {
         />, document.getElementById("container"));
 
         expect(layer).toExist();
-        const cqlFilter = decodeURIComponent(/cql_filter=([^&#]+)/.exec(layer.layer._tileProvider.url)[1]);
 
+        const cqlFilter = layer.layer._tileProvider._resource._queryParameters.cql_filter;
         expect(cqlFilter).toBe("prop = 'value'");
     });
     it('test filterObj paramto be transformed into cql_filter', () => {
@@ -836,8 +837,7 @@ describe('Cesium layer', () => {
         />, document.getElementById("container"));
 
         expect(layer).toExist();
-        const cqlFilter = decodeURIComponent(/cql_filter=([^&#]+)/.exec(layer.layer._tileProvider.url)[1]);
-
+        const cqlFilter = layer.layer._tileProvider._resource._queryParameters.cql_filter;
         expect(cqlFilter).toBe("(\"prop2\" = 'value2')");
     });
     it('test filterObj and cql_filter combination (featuregrid active filter use this combination)', () => {
@@ -876,10 +876,9 @@ describe('Cesium layer', () => {
             options={options}
             map={map}
         />, document.getElementById("container"));
-        const cqlFilter = decodeURIComponent(/cql_filter=([^&#]+)/.exec(layer.layer._tileProvider.url)[1]);
 
         expect(layer).toExist();
-
+        const cqlFilter = layer.layer._tileProvider._resource._queryParameters.cql_filter;
         expect(cqlFilter).toBe("((\"prop2\" = 'value2')) AND (prop = 'value')");
     });
 

diff --git a/web/client/components/map/cesium/__tests__/Map-test-chrome.jsx b/web/client/components/map/cesium/__tests__/Map-test-chrome.jsx
@@ -10,7 +10,7 @@ import ReactDOM from 'react-dom';
 import CesiumMap from '../Map';
 import CesiumLayer from '../Layer';
 import expect from 'expect';
-import Cesium from '../../../../libs/cesium';
+import * as Cesium from 'Cesium';
 import {
     getHook,
     ZOOM_TO_EXTENT_HOOK,
@@ -143,7 +143,7 @@ describe('CesiumMap', () => {
         const cesiumMap = map.map;
         cesiumMap.camera.moveEnd.addEventListener(() => {
             // check arguments
-            expect(spy.calls[0].arguments.length).toEqual(7);
+            expect(spy.calls[0].arguments.length).toEqual(8);
             expect(spy.calls.length).toBe(expectedCalls);
             // check camera moved
             expect(Math.round(spy.calls[0].arguments[0].y * precision) / precision).toBe(30);

diff --git a/web/client/components/map/cesium/plugins/BingLayer.js b/web/client/components/map/cesium/plugins/BingLayer.js
@@ -6,8 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var Layers = require('../../../../utils/cesium/Layers');
-var Cesium = require('../../../../libs/cesium');
+import Layers from '../../../../utils/cesium/Layers';
+import * as Cesium from "Cesium";
 
 
 Layers.registerType('bing', (options) => {

diff --git a/web/client/components/map/cesium/plugins/GraticuleLayer.js b/web/client/components/map/cesium/plugins/GraticuleLayer.js
@@ -6,8 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var Layers = require('../../../../utils/cesium/Layers');
-var Cesium = require('../../../../libs/cesium');
+import Layers from '../../../../utils/cesium/Layers';
+import * as Cesium from "Cesium";
 var assign = require('object-assign');
 
 /**

diff --git a/web/client/components/map/cesium/plugins/MarkerLayer.js b/web/client/components/map/cesium/plugins/MarkerLayer.js
@@ -7,7 +7,7 @@
  */
 
 import Layers from '../../../../utils/cesium/Layers';
-import Cesium from '../../../../libs/cesium';
+import * as Cesium from "Cesium";
 
 import {isEqual} from 'lodash';
 import assign from 'object-assign';
@@ -24,7 +24,7 @@ Layers.registerType('marker', {
         }, options.style);
 
         const point = map.entities.add(assign({
-            position: Cesium.Cartesian3.fromDegrees(options.point.lng, options.point.lat)
+            position: Cesium.Cartesian3.fromDegrees(options.point[0], options.point[1])
         }, style));
         return {
             detached: true,

diff --git a/web/client/components/map/cesium/plugins/OSMLayer.js b/web/client/components/map/cesium/plugins/OSMLayer.js
@@ -6,11 +6,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var Layers = require('../../../../utils/cesium/Layers');
-var Cesium = require('../../../../libs/cesium');
+import Layers from '../../../../utils/cesium/Layers';
+import * as Cesium from 'Cesium';
 
 Layers.registerType('osm', () => {
-    return Cesium.createOpenStreetMapImageryProvider({
+    return new Cesium.OpenStreetMapImageryProvider({
         url: '//a.tile.openstreetmap.org/'
     });
 });
diff --git a/web/client/components/map/cesium/plugins/OverlayLayer.js b/web/client/components/map/cesium/plugins/OverlayLayer.js
@@ -6,8 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var Layers = require('../../../../utils/cesium/Layers');
-var Cesium = require('../../../../libs/cesium');
+import Layers from '../../../../utils/cesium/Layers';
+import * as Cesium from "Cesium";
 
 var eventListener = require('eventlistener');
 /**
@@ -166,7 +166,7 @@ Layers.registerType('overlay', {
         const cloned = cloneOriginalOverlay(original, options);
 
         let infoWindow = new InfoWindow(map);
-        infoWindow.showAt(options.position.y, options.position.x, cloned);
+        infoWindow.showAt(options.position[1], options.position[0], cloned);
         infoWindow.setVisible(true);
         let info = map.scene.primitives.add(infoWindow);
 

diff --git a/web/client/components/map/cesium/plugins/TileProviderLayer.js b/web/client/components/map/cesium/plugins/TileProviderLayer.js
@@ -7,7 +7,7 @@
  */
 
 import Layers from '../../../../utils/cesium/Layers';
-import Cesium from '../../../../libs/cesium';
+import * as Cesium from 'Cesium';
 import TileProvider from '../../../../utils/TileConfigProvider';
 import ConfigUtils from '../../../../utils/ConfigUtils';
 import {getProxyUrl, needProxy} from '../../../../utils/ProxyUtils';

diff --git a/web/client/components/map/cesium/plugins/WMSLayer.js b/web/client/components/map/cesium/plugins/WMSLayer.js
@@ -7,8 +7,8 @@
  */
 
 import Layers from '../../../../utils/cesium/Layers';
-import Cesium from '../../../../libs/cesium';
 import createBILTerrainProvider from '../../../../utils/cesium/BILTerrainProvider';
+import * as Cesium from "Cesium";
 const BILTerrainProvider = createBILTerrainProvider(Cesium);
 import ConfigUtils from '../../../../utils/ConfigUtils';
 import {getProxyUrl, needProxy} from "../../../../utils/ProxyUtils";
@@ -89,10 +89,9 @@ function wmsToCesiumOptions(options) {
     const credit = cr ? new Cesium.Credit(cr.text || cr.title, cr.imageUrl, cr.link) : options.attribution;
     // NOTE: can we use opacity to manage visibility?
     return assign({
-        url: "{s}",
+        url: new Cesium.Resource({url: "{s}", proxy: proxy && new WMSProxy(proxy) || new NoProxy()}),
         credit,
         subdomains: getURLs(isArray(options.url) ? options.url : [options.url]),
-        proxy: proxy && new WMSProxy(proxy) || new NoProxy(),
         layers: options.name,
         enablePickFeatures: false,
         parameters: assign({

diff --git a/web/client/components/map/cesium/plugins/WMTSLayer.js b/web/client/components/map/cesium/plugins/WMTSLayer.js
@@ -13,7 +13,7 @@ import {
     needProxy
 } from '../../../../utils/ProxyUtils';
 import * as WMTSUtils from '../../../../utils/WMTSUtils';
-import Cesium from '../../../../libs/cesium';
+import * as Cesium from 'Cesium';
 import { getAuthenticationParam, getURLs } from '../../../../utils/LayersUtils';
 import assign from 'object-assign';
 import { isObject, isArray, slice, get, head} from 'lodash';
@@ -116,7 +116,7 @@ function wmtsToCesiumOptions(options) {
 
     return assign({
         // TODO: multi-domain support, if use {s} switches to RESTFul mode
-        url: head(getURLs(isArray(options.url) ? options.url : [options.url], queryParametersString)),
+        url: new Cesium.Resource({url: head(getURLs(isArray(options.url) ? options.url : [options.url], queryParametersString)), proxy: proxy && new WMTSProxy(proxy) || new NoProxy()}),
         // set image format to png if vector to avoid errors while switching between map type
         format: isVectorFormat(options.format) && 'image/png' || options.format || 'image/png',
         isValid,
@@ -128,7 +128,6 @@ function wmtsToCesiumOptions(options) {
         style: options.style || "",
         tileMatrixLabels: matrixIds,
         tilingScheme: getTilingSchema(srs, options.matrixIds[tileMatrixSetID]),
-        proxy: proxy && new WMTSProxy(proxy) || new NoProxy(),
         enablePickFeatures: false,
         tileWidth: options.tileWidth || options.tileSize || 256,
         tileHeight: options.tileHeight || options.tileSize || 256,

diff --git a/web/client/utils/LayersUtils.js b/web/client/utils/LayersUtils.js
@@ -80,7 +80,8 @@ const addBaseParams = (url, params) => {
 };
 
 const isSupportedLayerFunc = (layer, maptype) => {
-    const Layers = require('./' + maptype + '/Layers');
+    const LayersUtil = require('./' + maptype + '/Layers');
+    const Layers = LayersUtil.default || LayersUtil;
     if (layer.type === "mapquest" || layer.type === "bing") {
         return Layers.isSupported(layer.type) && layer.apiKey && layer.apiKey !== "__API_KEY_MAPQUEST__" && !layer.invalid;
     }