Skip to content

Commit 08e5dee

Browse files
justb4justb4
committed
wegue-oss#122 merge from upstream wegue master
2 parents 30b5783 + bfc36d9 commit 08e5dee

File tree

8 files changed

+161
-247
lines changed

8 files changed

+161
-247
lines changed

‎src/components/ol/Map.vue

+14-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import SelectInteraction from 'ol/interaction/Select';
1111
import {defaults as defaultInteractions} from 'ol/interaction';
1212
import RotateControl from 'ol/control/Rotate';
1313
import Projection from 'ol/proj/Projection';
14+
import TileGrid from 'ol/tilegrid/TileGrid';
1415
import {register as olproj4} from 'ol/proj/proj4';
1516
import proj4 from 'proj4'
1617
import Overlay from 'ol/Overlay';
@@ -34,6 +35,8 @@ export default {
3435
projection: this.$appConfig.mapProjection,
3536
projectionObj: null,
3637
projectionDefs: this.$appConfig.projectionDefs,
38+
tileGridDefs: this.$appConfig.tileGridDefs || {},
39+
tileGrids: {},
3740
permalink: this.$appConfig.permalink
3841
}
3942
},
@@ -87,14 +90,21 @@ export default {
8790
this.projection = {code: 'EPSG:3857', units: 'm'}
8891
}
8992
93+
const projection = new Projection(this.projection);
94+
95+
// Optional TileGrid definitions by name, for ref in Layers
96+
Object.keys(this.tileGridDefs).map(name => {
97+
this.tileGrids[name] = new TileGrid(this.tileGridDefs[name]);
98+
});
99+
90100
this.map = new Map({
91101
layers: [],
92102
controls: controls,
93103
interactions: interactions,
94104
view: new View({
95105
center: this.center,
96106
zoom: this.zoom,
97-
projection: new Projection(this.projection)
107+
projection: projection
98108
})
99109
});
100110
@@ -121,6 +131,9 @@ export default {
121131
const appConfig = this.$appConfig;
122132
const mapLayersConfig = appConfig.mapLayers || [];
123133
mapLayersConfig.reverse().forEach(function (lConf) {
134+
// Some Layers may require a TileGrid object
135+
lConf.tileGrid = lConf.tileGridRef ? me.tileGrids[lConf.tileGridRef] : null;
136+
124137
let layer = LayerFactory.getInstance(lConf);
125138
layers.push(layer);
126139

‎src/factory/Layer.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,9 @@ export const LayerFactory = {
8080
'TILED': lConf.tiled
8181
},
8282
serverType: lConf.serverType,
83-
attributions: lConf.attributions
83+
attributions: lConf.attributions,
84+
tileGrid: lConf.tileGrid,
85+
projection: lConf.projection
8486
})
8587
});
8688

@@ -102,7 +104,9 @@ export const LayerFactory = {
102104
opacity: lConf.opacity,
103105
source: new XyzSource({
104106
url: lConf.url,
105-
attributions: lConf.attributions
107+
attributions: lConf.attributions,
108+
tileGrid: lConf.tileGrid,
109+
projection: lConf.projection
106110
})
107111
});
108112

@@ -171,7 +175,9 @@ export const LayerFactory = {
171175
source: new VectorTileSource({
172176
url: lConf.url,
173177
format: new this.formatMapping[lConf.format](),
174-
attributions: lConf.attributions
178+
attributions: lConf.attributions,
179+
tileGrid: lConf.tileGrid,
180+
projection: lConf.projection
175181
}),
176182
style: OlStyleFactory.getInstance(lConf.style),
177183
hoverable: lConf.hoverable,

‎src/factory/OlStyle.js

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const OlStyleFactory = {
4040
pointStyle = new Style({
4141
image: new IconStyle(({
4242
src: styleConf.iconUrl,
43+
scale: styleConf.scale || 1,
4344
anchor: styleConf.iconAnchor,
4445
anchorXUnits: styleConf.iconAnchorXUnits,
4546
anchorYUnits: styleConf.iconAnchorYUnits

‎static/app-conf-projected.json

+24-3
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,14 @@
2727
]
2828
],
2929

30+
"tileGridDefs": {
31+
"dutch_rd": {
32+
"extent": [-285401.920, 22598.080, 595401.920, 903401.920],
33+
"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],
34+
"tileSize": [256, 256]
35+
}
36+
},
37+
3038
"permalink": {
3139
"location": "search",
3240
"layers": true,
@@ -40,13 +48,14 @@
4048
{
4149
"type": "WMS",
4250
"lid": "pdok-natura2000-wms",
43-
"name": "WMS (Natura 2000 Areas PDOK)",
51+
"name": "WMS - Natura 2000 Areas - PDOK",
4452
"format": "image/png",
4553
"layers": "natura2000",
4654
"url": "https://geodata.nationaalgeoregister.nl/natura2000/wms",
4755
"transparent": true,
4856
"singleTile": false,
4957
"projection": "EPSG:28992",
58+
"tileGridRef": "dutch_rd",
5059
"attributions": "<a href='https://www.pdok.nl' target='_blank'>PDOK</a> by Dutch Kadaster",
5160
"isBaseLayer": false,
5261
"visible": false,
@@ -55,17 +64,29 @@
5564
{
5665
"type": "WMS",
5766
"lid": "pdok-lufo-wms",
58-
"name": "WMS (Dutch Arial Map PDOK)",
67+
"name": "WMS - Dutch Arial Map - PDOK",
5968
"format": "image/jpeg",
6069
"layers": "2018_ortho25",
6170
"url": "http://geodata.nationaalgeoregister.nl/luchtfoto/rgb/wms",
6271
"transparent": false,
6372
"singleTile": false,
6473
"projection": "EPSG:28992",
74+
"tileGridRef": "dutch_rd",
6575
"attributions": "<a href='https://www.pdok.nl' target='_blank'>PDOK</a> by Dutch Kadaster",
6676
"isBaseLayer": true,
67-
"visible": true,
77+
"visible": false,
6878
"displayInLayerList": true
79+
},
80+
{
81+
"type": "XYZ",
82+
"lid": "brtachtergrondkaart",
83+
"name": "WMTS - Topo Basemap - PDOK",
84+
"url": "https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart/EPSG:28992/{z}/{x}/{y}.png",
85+
"attributions": "<a href='https://www.pdok.nl' target='_blank'>PDOK</a> by Dutch Kadaster",
86+
"projection": "EPSG:28992",
87+
"tileGridRef": "dutch_rd",
88+
"displayInLayerList": true,
89+
"visible": true
6990
}
7091
],
7192

‎static/app-conf.json

+5-6
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@
4242
"fillColor": "rgba(155,153,51,0.5)"
4343
}
4444
},
45-
4645
{
4746
"type": "VECTOR",
4847
"lid": "earthquakes",
@@ -58,13 +57,13 @@
5857
"hoverable": true,
5958
"hoverAttribute": "name",
6059
"style": {
61-
"radius": 4,
62-
"strokeColor": "rgb(207, 16, 32)",
63-
"strokeWidth": 1,
64-
"fillColor": "rgba(207, 16, 32, 0.6)"
60+
"iconUrl": "./static/icon/circle.svg",
61+
"scale": 4,
62+
"anchor": [0.5, 37],
63+
"anchorXUnits": "fraction",
64+
"anchorYUnits": "pixels"
6565
}
6666
},
67-
6867
{
6968
"type": "WMS",
7069
"lid": "ahocevar-wms",

‎static/icon/circle.svg

+5
Loading

‎test/unit/specs/components/ol/Map.spec.js

+103-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@ import VectorSource from 'ol/source/Vector';
88
import Point from 'ol/geom/Point';
99
import SelectInteraction from 'ol/interaction/Select';
1010

11+
// Used several times, so make const
12+
const epsg28992Extent = [-285401.920, 22598.080, 595401.920, 903401.920];
13+
const tileGridDefs = {
14+
'dutch_rd': {
15+
'extent': epsg28992Extent,
16+
'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],
17+
'tileSize': [256, 256]
18+
}
19+
};
20+
1121
describe('ol/Map.vue', () => {
1222
// Inspect the raw component options
1323
it('is defined', () => {
@@ -49,11 +59,55 @@ describe('ol/Map.vue', () => {
4959
it('has correct default data', () => {
5060
expect(vm.zoom).to.equal(undefined);
5161
expect(vm.center).to.equal(undefined);
62+
expect(vm.tileGridDefs).to.be.empty;
63+
expect(vm.tileGrids).to.be.empty;
64+
expect(vm.projection).to.deep.equal({code: 'EPSG:3857', units: 'm'});
65+
expect(vm.map.getView().getProjection().getCode()).to.equal('EPSG:3857');
5266
});
67+
});
5368

54-
it('has correct default data', () => {
55-
expect(vm.zoom).to.equal(undefined);
56-
expect(vm.center).to.equal(undefined);
69+
describe('data - TileGrid Definitions', () => {
70+
let comp;
71+
let vm;
72+
beforeEach(() => {
73+
Vue.prototype.$appConfig = { tileGridDefs: tileGridDefs };
74+
comp = shallowMount(Map);
75+
vm = comp.vm;
76+
});
77+
78+
it('has instantiated TileGridDefs', () => {
79+
expect(vm.tileGridDefs).to.not.be.empty;
80+
expect(vm.tileGrids).to.not.be.empty;
81+
expect(vm.tileGridDefs['dutch_rd']).to.deep.equal(tileGridDefs['dutch_rd']);
82+
expect(vm.tileGrids['dutch_rd']).to.not.be.empty;
83+
});
84+
});
85+
86+
describe('data - Projection Definitions', () => {
87+
let comp;
88+
let vm;
89+
beforeEach(() => {
90+
Vue.prototype.$appConfig = {
91+
mapProjection: {
92+
'code': 'EPSG:28992',
93+
'units': 'm',
94+
'extent': epsg28992Extent
95+
},
96+
projectionDefs: [
97+
['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']
98+
]
99+
};
100+
comp = shallowMount(Map);
101+
vm = comp.vm;
102+
});
103+
104+
it('has instantiated Projection for Map View', () => {
105+
expect(vm.projectionDefs).to.not.be.empty;
106+
expect(vm.projection).to.not.be.empty;
107+
108+
const mapProjection = vm.map.getView().getProjection();
109+
expect(mapProjection).to.not.be.empty;
110+
expect(mapProjection.getCode()).to.equal('EPSG:28992');
57111
});
58112
});
59113

@@ -233,4 +287,50 @@ describe('ol/Map.vue', () => {
233287
expect(vm.overlay.getPosition()).to.equal(undefined);
234288
});
235289
});
290+
291+
describe('methods - TileGrids and Projections', () => {
292+
let comp;
293+
let vm;
294+
beforeEach(() => {
295+
Vue.prototype.$appConfig = {
296+
mapZoom: 3,
297+
mapCenter: [155000, 463000],
298+
mapProjection: {
299+
'code': 'EPSG:28992',
300+
'units': 'm',
301+
'extent': epsg28992Extent
302+
},
303+
projectionDefs: [
304+
['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']
305+
],
306+
tileGridDefs: tileGridDefs,
307+
mapLayers: [{
308+
'type': 'XYZ',
309+
'lid': 'brtachtergrondkaart',
310+
'name': 'BRTAchtergrondKaart',
311+
'url': 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart/EPSG:28992/{z}/{x}/{y}.png',
312+
'attributions': '<a href="https://www.pdok.nl" target="_blank">PDOK</a> by Dutch Kadaster',
313+
'projection': 'EPSG:28992',
314+
'tileGridRef': 'dutch_rd',
315+
'displayInLayerList': true,
316+
'visible': true
317+
}]
318+
};
319+
comp = shallowMount(Map);
320+
vm = comp.vm;
321+
});
322+
323+
it('createLayers assigns TileGrid to Layer Sources', () => {
324+
const layers = vm.createLayers();
325+
const tileGrid = layers[0].getSource().getTileGrid();
326+
expect(tileGrid).to.be.not.empty;
327+
expect(tileGrid.getResolutions()[0]).to.equal(3440.640);
328+
});
329+
330+
it('createLayers assigns Projection to Layer Sources', () => {
331+
const layers = vm.createLayers();
332+
const source = layers[0].getSource();
333+
expect(source.getProjection().getCode()).to.equal('EPSG:28992');
334+
});
335+
});
236336
});

0 commit comments

Comments
 (0)