-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
66 lines (55 loc) · 2 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Raster Viewer</title>
<style type="text/css">
*{margin:0;padding:0;box-sizing:border-box;vertical-align:middle;}
@font-face {font-family:'Open Sans';font-style:normal;font-weight:400;
src:local('Open Sans Regular'),local('OpenSans-Regular'),url(fonts/open-sans-regular.woff2) format('woff2');
}
#mapContainer{position:fixed;top:0;bottom:0;left:0;right:0;}
#snapshotBtn{position:fixed;bottom:10px;left:10px;padding:4px 8px;}
</style>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="libs/ol.css">
</head>
<body>
<div id="mapContainer">
</div>
<button id="snapshotBtn" onClick="snapshot()">Snapshot</button>
</body>
<script src="libs/ol.js"></script>
<script type="text/javascript">
'use strict';
const pixelDensity = window.devicePixelRatio || 1;
const parseDecimal = function(dec){
return Number(dec.toFixed(4));
};
const snapshot = function(){
//console.log('view:',olMap.getView().getCenter());
const center = ol.proj.toLonLat(olMap.getView().getCenter());
const zoom = olMap.getView().getZoom();
/*
window.open('https://raster.tegola.io/styles/default/static/'+parseDecimal(center[0])+','+parseDecimal(center[1])+','+zoom+'/'+window.innerWidth+'x'+window.innerHeight+'@'+pixelDensity+'x.jpg','_blank');
*/
window.open('https://raster.tegola.io/styles/default/static/'+parseDecimal(center[0])+','+parseDecimal(center[1])+','+zoom+'/4096x4096.jpg','_blank');
};
let olMap = new ol.Map({
target: 'mapContainer',
layers: [
new ol.layer.Tile({
//source: new ol.source.OSM()
source: new ol.source.XYZ({
url:'https://raster.tegola.io/styles/default/tiles/256/{z}/{x}/{y}@'+pixelDensity+'x.jpg',
tilePixelRatio: pixelDensity
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([2.1833, 41.3833]),
zoom: 6
})
});
</script>
</html>