Fix #3410 Fixes to align WMS gridsets (#3505)

geosolutions-it · Feb 1, 2019 · d44109a · d44109a
2 parents 3af79d8 + 24342cd
commit d44109a
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 7 deletions.
diff --git a/web/client/components/map/openlayers/Map.jsx b/web/client/components/map/openlayers/Map.jsx
@@ -63,10 +63,12 @@ class OpenlayersMap extends React.Component {
     };
 
     componentDidMount() {
-        var center = CoordinatesUtils.reproject([this.props.center.x, this.props.center.y], 'EPSG:4326', this.props.projection);
         this.props.projectionDefs.forEach(p => {
             projUtils.addProjections(ol, p.code, p.extent, p.worldExtent);
         });
+        // It may be a good idea to check if CoordinateUtils also registered the projectionDefs
+        // normally it happens ad application level.
+        let center = CoordinatesUtils.reproject([this.props.center.x, this.props.center.y], 'EPSG:4326', this.props.projection);
         let interactionsOptions = assign(this.props.interactive ? {} : {
             doubleClickZoom: false,
             dragPan: false,
@@ -287,10 +289,10 @@ class OpenlayersMap extends React.Component {
         const projection = this.map.getView().getProjection();
         const extent = projection.getExtent();
         const size = !extent ?
-            // use an extent that can fit the whole world if need be
+            // use the max width
             360 * ol.proj.METERS_PER_UNIT[ol.proj.Units.DEGREES] /
                 ol.proj.METERS_PER_UNIT[projection.getUnits()] :
-            Math.max(ol.extent.getWidth(extent), ol.extent.getHeight(extent));
+            ol.extent.getWidth(extent);
 
         const defaultMaxResolution = size / 256 / Math.pow(
             defaultZoomFactor, 0);
@@ -415,7 +417,7 @@ class OpenlayersMap extends React.Component {
         var view = this.map.getView();
         const currentCenter = this.props.center;
         const centerIsUpdated = newProps.center.y === currentCenter.y &&
-                               newProps.center.x === currentCenter.x;
+                                newProps.center.x === currentCenter.x;
 
         if (!centerIsUpdated) {
             // let center = ol.proj.transform([newProps.center.x, newProps.center.y], 'EPSG:4326', newProps.projection);

diff --git a/web/client/components/map/openlayers/__tests__/Layer-test.jsx b/web/client/components/map/openlayers/__tests__/Layer-test.jsx
@@ -500,7 +500,26 @@ describe('Openlayers layer', () => {
         expect(map.getLayers().getLength()).toBe(1);
         expect(map.getLayers().item(0).getSource().urls.length).toBe(2);
     });
+    it('test correct wms origin', () => {
+        var options = {
+            "type": "wms",
+            "visibility": true,
+            "name": "nurc:Arc_Sample",
+            "group": "Meteo",
+            "format": "image/png",
+            "url": ["http://sample.server/geoserver/wms"]
+        };
+        // create layers
+        var layer = ReactDOM.render(
+            <OpenlayersLayer type="wms"
+                options={options} map={map} />, document.getElementById("container"));
+
 
+        expect(layer).toExist();
+        // count layers
+        expect(map.getLayers().getLength()).toBe(1);
+        expect(map.getLayers().item(0).getSource().getTileGrid().getOrigin()).toEqual([-20037508.342789244, 20037508.342789244]);
+    });
     it('creates a wms layer with custom origin', () => {
         var options = {
             "type": "wms",

diff --git a/web/client/components/map/openlayers/__tests__/Map-test.jsx b/web/client/components/map/openlayers/__tests__/Map-test.jsx
@@ -655,7 +655,57 @@ describe('OpenlayersMap', () => {
         attributions = document.body.getElementsByClassName('ol-attribution');
         expect(attributions.length).toBe(0);
     });
+    it('test getResolutions default', () => {
+        const maxResolution = 2 * 20037508.34;
+        const tileSize = 256;
+        const expectedResolutions = Array.from(Array(29).keys()).map( k=> maxResolution / tileSize / Math.pow(2, k));
+        let map = ReactDOM.render(<OpenlayersMap id="ol-map" center={{ y: 43.9, x: 10.3 }} zoom={11} mapOptions={{ attribution: { container: 'body' } }} />, document.getElementById("map"));
+        expect(map.getResolutions().length).toBe(expectedResolutions.length);
+        // NOTE: round
+        expect(map.getResolutions().map(a => a.toFixed(4))).toEqual(expectedResolutions.map(a => a.toFixed(4)));
 
+    });
+    it('test getResolutions with custom projection', () => {
+        const projectionDefs = [
+            {
+                "code": "EPSG:3003",
+                "def": "+proj=tmerc +lat_0=0 +lon_0=9 +k=0.9996 +x_0=1500000 +y_0=0 +ellps=intl+towgs84=-104.1,-49.1,-9.9,0.971,-2.917,0.714,-11.68 +units=m +no_defs",
+                "extent": [
+                    1241482.0019432348,
+                    972767.2605398067,
+                    1847542.2626266503,
+                    5215189.085323715
+                ],
+                "worldExtent": [
+                    6.6500,
+                    8.8000,
+                    12.0000,
+                    47.0500
+                ]
+            }
+        ];
+        proj.defs(projectionDefs[0].code, projectionDefs[0].def);
+        const maxResolution = 1847542.2626266503 - 1241482.0019432348;
+        const tileSize = 256;
+        const expectedResolutions = Array.from(Array(29).keys()).map(k => maxResolution / tileSize / Math.pow(2, k));
+        let map = ReactDOM.render(<OpenlayersMap
+            id="ol-map"
+            center={{
+                x: 10.710054361528954,
+                y: 43.69814562139725,
+                crs: 'EPSG:4326'
+            }}
+            projectionDefs={projectionDefs}
+            zoom={11}
+            mapOptions={{ attribution: { container: 'body' } }}
+            projection={projectionDefs[0].code}
+            />, document.getElementById("map"));
+
+        expect(map.getResolutions()).toExist();
+        expect(map.getResolutions().length).toBe(expectedResolutions.length);
+        // NOTE: round
+        expect(map.getResolutions().map(a => a.toFixed(4))).toEqual(expectedResolutions.map(a => a.toFixed(4)));
+    });
     it('test double attribution on document', () => {
         let map = ReactDOM.render(
             <span>

diff --git a/web/client/components/map/openlayers/plugins/WMSLayer.js b/web/client/components/map/openlayers/plugins/WMSLayer.js
@@ -144,7 +144,7 @@ Layers.registerType('wms', {
                 extent: extent,
                 resolutions: mapUtils.getResolutions(),
                 tileSize: options.tileSize ? options.tileSize : 256,
-                origin: options.origin ? options.origin : [extent[0], extent[1]]
+                origin: options.origin ? options.origin : [extent[0], extent[3]]
             })
         }, options);
         const layer = new ol.layer.Tile({
@@ -187,7 +187,7 @@ Layers.registerType('wms', {
                     extent: extent,
                     resolutions: mapUtils.getResolutions(),
                     tileSize: newOptions.tileSize ? newOptions.tileSize : 256,
-                    origin: newOptions.origin ? newOptions.origin : [extent[0], extent[1]]
+                    origin: newOptions.origin ? newOptions.origin : [extent[0], extent[3]]
                 });
             }
             if (changed) {
@@ -247,7 +247,7 @@ Layers.registerType('wms', {
                                 extent: extent,
                                 resolutions: mapUtils.getResolutions(),
                                 tileSize: newOptions.tileSize ? newOptions.tileSize : 256,
-                                origin: newOptions.origin ? newOptions.origin : [extent[0], extent[1]]
+                                origin: newOptions.origin ? newOptions.origin : [extent[0], extent[3]]
                             })
                         }, newOptions.forceProxy ? {tileLoadFunction: proxyTileLoadFunction} : {}))
                     });