-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path113_WMTSTileTrastition.html
99 lines (89 loc) · 3.04 KB
/
113_WMTSTileTrastition.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="ol.js"></script>
<link rel="stylesheet" href="ol.css">
<script
src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
</script>
</head>
<script>
// :
//기본 : Map View Source Layer
//추가 :
</script>
<body>
<!-- 기본틀로 사용하는 양식 -->
<div id="map" class="map"></div>
<label>
Sea-level
<input id="slider" type="range" value="10" max="100" min="-1">
</label>
<span id="theinfo"></span>
<script>
// create the WMTS tile grid in the google projection
var projection = ol.proj.get('EPSG:3857');
var tileSizePixels = 256;
var tileSizeMtrs = ol.extent.getWidth(projection.getExtent()) / tileSizePixels;
var matrixIds = [];
var resolutions = [];
for (var i = 0; i <= 14; i++) {
matrixIds[i] = i;
resolutions[i] = tileSizeMtrs / Math.pow(2, i);
}
var tileGrid = new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projection.getExtent()),
resolutions: resolutions,
matrixIds: matrixIds
});
var scalgoToken = 'CC5BF28A7D96B320C7DFBFD1236B5BEB';
var wmtsSource = new ol.source.WMTS({
url: 'http://ts2.scalgo.com/olpatch/wmts?token=' + scalgoToken,
layer: 'SRTM_4_1:SRTM_4_1_flooded_sealevels',
format: 'image/png',
matrixSet: 'EPSG:3857',
attributions: [
'<a href="http://scalgo.com">SCALGO</a>',
'<a href="https://cgiarcsi.community/data/' +
'srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>'
],
tileGrid: tileGrid,
style: 'default',
dimensions: {
'threshold': 100
}
});
var map = new ol.Map({
target: 'map',
view: new ol.View({
projection: projection,
center: [-9871995, 3566245],
zoom: 6
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
opacity: 0.5,
source: wmtsSource
})
]
});
var updateSourceDimension = function (source, sliderVal) {
source.updateDimensions({
'threshold': sliderVal
});
document.getElementById('theinfo').innerHTML = sliderVal + ' meters';
};
updateSourceDimension(wmtsSource, 10);
document.getElementById('slider').addEventListener('input', function () {
updateSourceDimension(wmtsSource, this.value);
});
</script>
</body>
</html>