Add Customizable layer origin for ol3 wms Fix #1184 (#1186)

* Add Customizable layer origin for ol3 wms Fix #1184 * Fix typo
geosolutions-it · Oct 27, 2016 · 503c9b7 · 503c9b7
1 parent 16ccaf8
commit 503c9b7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/web/client/components/map/openlayers/__tests__/Layer-test.jsx b/web/client/components/map/openlayers/__tests__/Layer-test.jsx
@@ -163,7 +163,6 @@ describe('Openlayers layer', () => {
             <OpenlayersLayer type="wms"
                  options={options} map={map}/>, document.getElementById("container"));
 
-
         expect(layer).toExist();
         // count layers
         expect(map.getLayers().getLength()).toBe(1);
@@ -184,13 +183,34 @@ describe('Openlayers layer', () => {
             <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().urls.length).toBe(2);
     });
 
+    it('creates a wms layer with custom origin', () => {
+        var options = {
+            "type": "wms",
+            "visibility": true,
+            "name": "nurc:Arc_Sample",
+            "group": "Meteo",
+            "format": "image/png",
+            "origin": [0, 0],
+            "url": ["http://demo.geo-solutions.it/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([0, 0]);
+    });
+
     it('creates a wms layer with proxy  for openlayers map', () => {
         var options = {
             "type": "wms",

diff --git a/web/client/components/map/openlayers/plugins/WMSLayer.js b/web/client/components/map/openlayers/plugins/WMSLayer.js
@@ -13,7 +13,7 @@ const CoordinatesUtils = require('../../../../utils/CoordinatesUtils');
 const ProxyUtils = require('../../../../utils/ProxyUtils');
 const {isArray} = require('lodash');
 const SecurityUtils = require('../../../../utils/SecurityUtils');
-
+const mapUtils = require('../../../../utils/MapUtils');
 
 function wmsToOpenlayersOptions(options) {
     // NOTE: can we use opacity to manage visibility?
@@ -44,7 +44,7 @@ function proxyTileLoadFunction(imageTile, src) {
 }
 
 Layers.registerType('wms', {
-    create: (options) => {
+    create: (options, map) => {
         const urls = getWMSURLs(isArray(options.url) ? options.url : [options.url]);
         const queryParameters = wmsToOpenlayersOptions(options) || {};
         urls.forEach(url => SecurityUtils.addAuthenticationParameter(url, queryParameters));
@@ -59,17 +59,21 @@ Layers.registerType('wms', {
                 })
             });
         }
+        const mapSrs = map && map.getView() && map.getView().getProjection() && map.getView().getProjection().getCode() || 'EPSG:3857';
+        const extent = ol.proj.get(CoordinatesUtils.normalizeSRS(options.srs || mapSrs, options.allowedSRS)).getExtent();
         return new ol.layer.Tile({
             opacity: options.opacity !== undefined ? options.opacity : 1,
             visible: options.visibility !== false,
             zIndex: options.zIndex,
             source: new ol.source.TileWMS(objectAssign({
               urls: urls,
               params: queryParameters,
-              tileGrid: options.tileSize ? ol.tilegrid.createXYZ({
-                  extent: ol.proj.get(CoordinatesUtils.normalizeSRS(options.srs || 'EPSG:3857', options.allowedSRS)).getExtent(),
-                  tileSize: options.tileSize
-              }) : undefined
+              tileGrid: new ol.tilegrid.TileGrid({
+                  extent: extent,
+                  resolutions: mapUtils.getResolutions(),
+                  tileSize: options.tileSize ? options.tileSize : 256,
+                  origin: options.origin ? options.origin : [extent[0], extent[1]]
+              })
             }, (options.forceProxy) ? {tileLoadFunction: proxyTileLoadFunction} : {}))
         });
     },