1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
{{py:
from html import escape
import textwrap
import json
wrapper = textwrap.TextWrapper(replace_whitespace=False, width=90,
break_long_words=False)
def approx_bbox(layer, srs):
from mapproxy.srs import SRS
extent = layer.md['extent'].bbox_for(SRS(srs))
return ', '.join(map(lambda x: '%.2f' % x, extent))
menu_title= "WMTS %s %s"%(layer.name, srs)
jscript_functions=None
}}
{{def jscript_openlayers}}
<script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
<script type="text/javascript">
async function init() {
const transparent = {{if format == 'image/png'}}true{{else}}false{{endif}};
const srs = "{{srs}}";
const grid_extent = [{{', '.join(str(r) for r in layer.grid.bbox)}}];
const extent = [{{', '.join(str(r) for r in layer.bbox)}}];
const resolutions = [{{', '.join(str(r) for r in resolutions)}}];
const matrixIds = [];
for (let z = 0; z < resolutions.length; ++z) {
matrixIds[z] = z;
}
const tileSize = {{json.dumps(layer.grid.tile_size)}};
if (!ol.proj.get(srs)) {
const allDefs = await import('./static/proj4defs.js');
const srsNum = srs.indexOf(':') > -1 ? parseInt(srs.split(':')[1]) : parseInt(srs);
if (!allDefs.defs[srsNum]) {
alert("The preview map does not support this coordinate system");
return;
}
proj4.defs(srs, allDefs.defs[srsNum]);
ol.proj.proj4.register(proj4);
}
const projection = ol.proj.get(srs);
const source = new ol.source.WMTS({
url: {{if rest_enabled}}'../wmts{{restful_url}}'{{else}}'../service?'{{endif}},
layer: "{{layer.name}}",
matrixSet: '{{matrix_set}}',
format: "{{format}}",
projection: "{{srs}}",
transparent: transparent,
style: '',
{{if rest_enabled}}requestEncoding: 'REST',{{endif}}
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(grid_extent),
resolutions: resolutions,
matrixIds: matrixIds,
tileSize: tileSize
})
});
const background_source = new ol.source.XYZ({
url: "{{background_url}}"
});
const layers = [
new ol.layer.Tile({
source: background_source
}),
new ol.layer.Tile({source})
];
const map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
projection: "{{srs}}",
resolutions
})
});
map.getView().fit(extent);
zoomToFullExtent = () => {
map.getView().fit(extent);
}
toogleBackgroundMap = () => {
layers[0].setVisible(!layers[0].getVisible());
}
}
</script>
{{enddef}}
<h2>Layer Preview - {{layer.name}}</h2>
<table>
<tr><th>Coordinate System</th><th>Image format</th></tr>
<tr><td>
<select name="srs" size="1" onchange="this.form.submit()">
{{for wmts_layer in all_tile_layers.values()}}
{{if wmts_layer.name == layer.name and wmts_layer.grid.supports_access_with_origin('nw')}}
{{if wmts_layer.md['name_internal'] == layer.md['name_internal']}}
<option selected value="{{srs}}">{{srs}}</option>
{{else}}
<option value="{{wmts_layer.grid.srs.srs_code}}">{{wmts_layer.grid.srs.srs_code}}</option>
{{endif}}
{{endif}}
{{endfor}}
</select>
<input type="hidden" name="format" value="{{format}}">
<input type="hidden" name="wmts_layer" value="{{layer.name}}">
</td>
<td>{{layer.format}}</td></tr>
</table>
<div id='map'></div>
<button class="mapBtn" onclick="zoomToFullExtent()">Zoom to full extent</button>
<button class="mapBtn" onclick="toogleBackgroundMap()">Toggle background map</button>
<h3>Bounding Box</h3>
<p class="code">{{', '.join(str(s) for s in layer.extent.bbox)}}</p>
|
