wegue-oss#124 TileGrid support - Dutch Tilegrid WMTS example - Unit tests

justb4 · justb4 · commit 12ccf521df1c · 2020-04-01T12:22:17.000+02:00
diff --git a/src/components/ol/Map.vue b/src/components/ol/Map.vue
@@ -11,6 +11,7 @@ import SelectInteraction from 'ol/interaction/Select';
 import {defaults as defaultInteractions} from 'ol/interaction';
 import RotateControl from 'ol/control/Rotate';
 import Projection from 'ol/proj/Projection';
+import TileGrid from 'ol/tilegrid/TileGrid';
 import {register as olproj4} from 'ol/proj/proj4';
 import proj4 from 'proj4'
 import Overlay from 'ol/Overlay';
@@ -31,7 +32,9 @@ export default {
       zoom: this.$appConfig.mapZoom,
       center: this.$appConfig.mapCenter,
       projection: this.$appConfig.mapProjection,
-      projectionDefs: this.$appConfig.projectionDefs
+      projectionDefs: this.$appConfig.projectionDefs,
+      tileGridDefs: this.$appConfig.tileGridDefs || {},
+      tileGrids: {}
     }
   },
   mounted () {
@@ -87,6 +90,11 @@ export default {
     }
     const projection = new Projection(me.projection);
 
+    // Optional TileGrid definitions by name, for ref in Layers
+    Object.keys(me.tileGridDefs).map(name => {
+      me.tileGrids[name] = new TileGrid(me.tileGridDefs[name]);
+    });
+
     me.map = new Map({
       layers: [],
       controls: controls,
@@ -114,6 +122,9 @@ export default {
       const appConfig = this.$appConfig;
       const mapLayersConfig = appConfig.mapLayers || [];
       mapLayersConfig.reverse().forEach(function (lConf) {
+        // Some Layers may require a TileGrid object
+        lConf.tileGrid = lConf.tileGridRef ? me.tileGrids[lConf.tileGridRef] : null;
+
         let layer = LayerFactory.getInstance(lConf);
         layers.push(layer);
 
diff --git a/src/factory/Layer.js b/src/factory/Layer.js
@@ -79,7 +79,9 @@ export const LayerFactory = {
           'TILED': lConf.tiled
         },
         serverType: lConf.serverType,
-        attributions: lConf.attributions
+        attributions: lConf.attributions,
+        tileGrid: lConf.tileGrid,
+        projection: lConf.projection
       })
     });
 
@@ -101,7 +103,9 @@ export const LayerFactory = {
       opacity: lConf.opacity,
       source: new XyzSource({
         url: lConf.url,
-        attributions: lConf.attributions
+        attributions: lConf.attributions,
+        tileGrid: lConf.tileGrid,
+        projection: lConf.projection
       })
     });
 
@@ -170,7 +174,9 @@ export const LayerFactory = {
       source: new VectorTileSource({
         url: lConf.url,
         format: new this.formatMapping[lConf.format](),
-        attributions: lConf.attributions
+        attributions: lConf.attributions,
+        tileGrid: lConf.tileGrid,
+        projection: lConf.projection
       }),
       style: OlStyleFactory.getInstance(lConf.style),
       hoverable: lConf.hoverable,
diff --git a/static/app-conf-projected.json b/static/app-conf-projected.json
@@ -27,17 +27,26 @@
     ]
   ],
 
+  "tileGridDefs": {
+    "dutch_rd": {
+      "extent": [-285401.920, 22598.080, 595401.920, 903401.920],
+      "resolutions": [3440.640, 1720.320, 860.160, 430.080, 215.040, 107.520, 53.760, 26.880, 13.440, 6.720, 3.360, 1.680, 0.840, 0.420, 0.210],
+      "tileSize": [256, 256]
+    }
+  },
+
   "mapLayers": [
     {
       "type": "WMS",
       "lid": "pdok-natura2000-wms",
-      "name": "WMS (Natura 2000 Areas PDOK)",
+      "name": "WMS - Natura 2000 Areas - PDOK",
       "format": "image/png",
       "layers": "natura2000",
       "url": "https://geodata.nationaalgeoregister.nl/natura2000/wms",
       "transparent": true,
       "singleTile": false,
       "projection": "EPSG:28992",
+      "tileGridRef": "dutch_rd",
       "attributions": "<a href='https://www.pdok.nl' target='_blank'>PDOK</a> by Dutch Kadaster",
       "isBaseLayer": false,
       "visible": false,
@@ -46,17 +55,29 @@
     {
       "type": "WMS",
       "lid": "pdok-lufo-wms",
-      "name": "WMS (Dutch Arial Map PDOK)",
+      "name": "WMS - Dutch Arial Map - PDOK",
       "format": "image/jpeg",
       "layers": "2018_ortho25",
       "url": "http://geodata.nationaalgeoregister.nl/luchtfoto/rgb/wms",
       "transparent": false,
       "singleTile": false,
       "projection": "EPSG:28992",
+      "tileGridRef": "dutch_rd",
       "attributions": "<a href='https://www.pdok.nl' target='_blank'>PDOK</a> by Dutch Kadaster",
       "isBaseLayer": true,
-      "visible": true,
+      "visible": false,
       "displayInLayerList": true
+    },
+    {
+      "type": "XYZ",
+      "lid": "brtachtergrondkaart",
+      "name": "WMTS - Topo Basemap - PDOK",
+      "url": "https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart/EPSG:28992/{z}/{x}/{y}.png",
+      "attributions": "<a href='https://www.pdok.nl' target='_blank'>PDOK</a> by Dutch Kadaster",
+      "projection": "EPSG:28992",
+      "tileGridRef": "dutch_rd",
+      "displayInLayerList": true,
+      "visible": true
     }
   ],
 
diff --git a/test/unit/specs/components/ol/Map.spec.js b/test/unit/specs/components/ol/Map.spec.js
@@ -8,6 +8,16 @@ import VectorSource from 'ol/source/Vector';
 import Point from 'ol/geom/Point';
 import SelectInteraction from 'ol/interaction/Select';
 
+// Used several times, so make const
+const epsg28992Extent = [-285401.920, 22598.080, 595401.920, 903401.920];
+const tileGridDefs = {
+  'dutch_rd': {
+    'extent': epsg28992Extent,
+    'resolutions': [3440.640, 1720.320, 860.160, 430.080, 215.040, 107.520, 53.760, 26.880, 13.440, 6.720, 3.360, 1.680, 0.840, 0.420, 0.210],
+    'tileSize': [256, 256]
+  }
+};
+
 describe('ol/Map.vue', () => {
   // Inspect the raw component options
   it('is defined', () => {
@@ -49,11 +59,55 @@ describe('ol/Map.vue', () => {
     it('has correct default data', () => {
       expect(vm.zoom).to.equal(undefined);
       expect(vm.center).to.equal(undefined);
+      expect(vm.tileGridDefs).to.be.empty;
+      expect(vm.tileGrids).to.be.empty;
+      expect(vm.projection).to.deep.equal({code: 'EPSG:3857', units: 'm'});
+      expect(vm.map.getView().getProjection().getCode()).to.equal('EPSG:3857');
     });
+  });
 
-    it('has correct default data', () => {
-      expect(vm.zoom).to.equal(undefined);
-      expect(vm.center).to.equal(undefined);
+  describe('data - TileGrid Definitions', () => {
+    let comp;
+    let vm;
+    beforeEach(() => {
+      Vue.prototype.$appConfig = { tileGridDefs: tileGridDefs };
+      comp = shallowMount(Map);
+      vm = comp.vm;
+    });
+
+    it('has instantiated TileGridDefs', () => {
+      expect(vm.tileGridDefs).to.not.be.empty;
+      expect(vm.tileGrids).to.not.be.empty;
+      expect(vm.tileGridDefs['dutch_rd']).to.deep.equal(tileGridDefs['dutch_rd']);
+      expect(vm.tileGrids['dutch_rd']).to.not.be.empty;
+    });
+  });
+
+  describe('data - Projection Definitions', () => {
+    let comp;
+    let vm;
+    beforeEach(() => {
+      Vue.prototype.$appConfig = {
+        mapProjection: {
+          'code': 'EPSG:28992',
+          'units': 'm',
+          'extent': epsg28992Extent
+        },
+        projectionDefs: [
+          ['EPSG:28992', '+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.999908 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs']
+        ]
+      };
+      comp = shallowMount(Map);
+      vm = comp.vm;
+    });
+
+    it('has instantiated Projection for Map View', () => {
+      expect(vm.projectionDefs).to.not.be.empty;
+      expect(vm.projection).to.not.be.empty;
+
+      const mapProjection = vm.map.getView().getProjection();
+      expect(mapProjection).to.not.be.empty;
+      expect(mapProjection.getCode()).to.equal('EPSG:28992');
     });
   });
 
@@ -233,4 +287,50 @@ describe('ol/Map.vue', () => {
       expect(vm.overlay.getPosition()).to.equal(undefined);
     });
   });
+
+  describe('methods - TileGrids and Projections', () => {
+    let comp;
+    let vm;
+    beforeEach(() => {
+      Vue.prototype.$appConfig = {
+        mapZoom: 3,
+        mapCenter: [155000, 463000],
+        mapProjection: {
+          'code': 'EPSG:28992',
+          'units': 'm',
+          'extent': epsg28992Extent
+        },
+        projectionDefs: [
+          ['EPSG:28992', '+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.999908 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs']
+        ],
+        tileGridDefs: tileGridDefs,
+        mapLayers: [{
+          'type': 'XYZ',
+          'lid': 'brtachtergrondkaart',
+          'name': 'BRTAchtergrondKaart',
+          'url': 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart/EPSG:28992/{z}/{x}/{y}.png',
+          'attributions': '<a href="https://www.pdok.nl" target="_blank">PDOK</a> by Dutch Kadaster',
+          'projection': 'EPSG:28992',
+          'tileGridRef': 'dutch_rd',
+          'displayInLayerList': true,
+          'visible': true
+        }]
+      };
+      comp = shallowMount(Map);
+      vm = comp.vm;
+    });
+
+    it('createLayers assigns TileGrid to Layer Sources', () => {
+      const layers = vm.createLayers();
+      const tileGrid = layers[0].getSource().getTileGrid();
+      expect(tileGrid).to.be.not.empty;
+      expect(tileGrid.getResolutions()[0]).to.equal(3440.640);
+    });
+
+    it('createLayers assigns Projection to Layer Sources', () => {
+      const layers = vm.createLayers();
+      const source = layers[0].getSource();
+      expect(source.getProjection().getCode()).to.equal('EPSG:28992');
+    });
+  });
 });
diff --git a/test/unit/specs/ol/Map.spec.js b/test/unit/specs/ol/Map.spec.js
