-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (111 loc) · 4.4 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Globe</title>
<style>
html { height: 100%; }
body { margin: 0; overflow: hidden; height: 100%; }
#viewerDiv { margin: auto; height: 100%; width: 100%; padding: 0; }
canvas { display: block }
</style>
<link rel="stylesheet" type="text/css" href="examples/css/example.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
</head>
<body>
<div id="viewerDiv" class="viewer"></div>
<script src="examples/js/GUI/GuiTools.js"></script>
<script src="dist/itowns.js"></script>
<script src="dist/debug.js"></script>
<script type="text/javascript">
/* afficher Dalle Photo */
var viewerDiv = document.getElementById('viewerDiv');
var placement = {
coord: new itowns.Coordinates('EPSG:4326', 4.8589231, 45.7621631),
range: 1E3,
tilt: 22,
heading: 180
};
var view = new itowns.GlobeView(viewerDiv, placement);
var colorSource = new itowns.WMTSSource({
url: 'http://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wmts',
crs: 'EPSG:3857',
name: 'ORTHOIMAGERY.ORTHOPHOTOS',
tileMatrixSet: 'PM',
format: 'image/jpeg'
});
var colorLayer = new itowns.ColorLayer('Ortho', {
source: colorSource,
});
view.addLayer(colorLayer);
var elevationSource = new itowns.WMTSSource({
url: 'http://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wmts',
crs: 'EPSG:4326',
name: 'ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES',
tileMatrixSet: 'WGS84G',
format: 'image/x-bil;bits=32',
tileMatrixSetLimits: {
11: {
minTileRow: 442,
maxTileRow: 1267,
minTileCol: 1344,
maxTileCol: 2683
},
12: {
minTileRow: 885,
maxTileRow: 2343,
minTileCol: 3978,
maxTileCol: 5126
},
13: {
minTileRow: 1770,
maxTileRow: 4687,
minTileCol: 7957,
maxTileCol: 10253
},
14: {
minTileRow: 3540,
maxTileRow: 9375,
minTileCol: 15914,
maxTileCol: 20507
}
}
});
var elevationLayer = new itowns.ElevationLayer('MNT_WORLD', {
source: elevationSource,
});
view.addLayer(elevationLayer);
function setAltitude(properties) {
return -properties.hauteur;
}
function setExtrusion(properties) {
return properties.hauteur;
}
function setColor(properties) {
return new itowns.THREE.Color(0xaaaaaa);
}
var geometrySource = new itowns.WFSSource({
url: 'http://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_indifferencie',
crs: 'EPSG:4326',
});
var geometryLayer = new itowns.GeometryLayer('Buildings', new itowns.THREE.Group(), {
source: geometrySource,
update: itowns.FeatureProcessing.update,
convert: itowns.Feature2Mesh.convert({
altitude: setAltitude,
extrude: setExtrusion,
color: setColor
}),
zoom: { min: 14 },
});
view.addLayer(geometryLayer);
</script>
</body>
</html>