-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
106 lines (96 loc) · 3.35 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" href="assets/ol/ol.css" type="text/css">
<link rel="stylesheet" href="assets/ol-ext/ol-ext.min.css" type="text/css">
<link rel="stylesheet" href="assets/bootstrap/bootstrap.min.css">
<style>
.map {
width: 100%;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAAAAABzHgM7AAAAAnRSTlMAAHaTzTgAAAARSURBVHgBY3iKBFEAOp/+MgB+UQnYeBZPWAAAAABJRU5ErkJggg==) !important;
background-color: rgb(255, 255, 255);
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAAAAABzHgM7AAAAAnRSTlMAAHaTzTgAAAARSURBVHgBY3iKBFEAOp/+MgB+UQnYeBZPWAAAAABJRU5ErkJggg==");
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
}
html,
body {
height: 100%;
}
</style>
<script
src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Element.prototype.classList,URL,Object.assign"></script>
<script src="assets/jquery/jquery-3.3.1.min.js"></script>
<script src="assets/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/proj4/proj4.js"></script>
<script src="assets/ol/ol.js"></script>
<script src="assets/ol-ext/ol-ext.min.js"></script>
<title>H18</title>
</head>
<body>
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-baseline">
<h3>ACTUEL</h3>
<h1 class="text-center">H18</h1>
<h3>FUTUR</h3>
</div>
<div id="sitn-map" class="map"></div>
<script>
const target = 'sitn-map';
const extent = [2420000, 1030000, 2900000, 1350000];
const crs = 'EPSG:2056';
proj4.defs(crs,
'+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333' +
' +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel ' +
'+towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs')
ol.proj.proj4.register(proj4)
const _projection = new ol.proj.Projection({
code: crs,
extent: extent
});
const layer2019 = new ol.layer.Image({
extent: extent,
source: new ol.source.ImageWMS({
url: 'https://sitn.ne.ch/planville2019/wms?',
params: { 'LAYERS': 'SITN' },
ratio: 1
})
});
const layerH18 = new ol.layer.Image({
extent: extent,
source: new ol.source.ImageWMS({
url: 'https://sitn.ne.ch/planville2019_h18/wms?',
params: { 'LAYERS': 'SITN' },
ratio: 1
})
});
const swipe = $('#swipe')[0];
const view = new ol.View({
projection: _projection,
center: ol.proj.fromLonLat([6.841, 47.096], _projection),
zoom: 10
});
const map1 = new ol.Map({
target: target,
layers: [layer2019, layerH18],
view: view
});
const ctrl = new ol.control.Swipe();
map1.addControl(ctrl);
// Set layer2019 on left
ctrl.addLayer(layer2019);
// layerH18 on right
ctrl.addLayer(layerH18, true);
</script>
</div>
</body>
</html>