-
Notifications
You must be signed in to change notification settings - Fork 302
/
view_3d_map.html
156 lines (116 loc) · 6.11 KB
/
view_3d_map.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
<head>
<title>Itowns - Globe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
<link rel="stylesheet" type="text/css" href="css/widgets.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
</head>
<body>
<div id="viewerDiv"></div>
<!-- Import iTowns source code -->
<script src="../dist/itowns.js"></script>
<script src="../dist/debug.js"></script>
<!-- Import iTowns Widgets plugin -->
<script src="../dist/itowns_widgets.js"></script>
<!-- Import iTowns LoadingScreen and GuiTools plugins -->
<script src="js/GUI/GuiTools.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script type="text/javascript">
// ---------- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION : ----------
// Define camera initial position
const placement = {
coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
range: 25000000,
}
// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
const viewerDiv = document.getElementById('viewerDiv');
// Create a GlobeView
const view = new itowns.GlobeView(viewerDiv, placement);
// Setup loading screen and debug menu
setupLoadingScreen(viewerDiv, view);
const debugMenu = new GuiTools('menuDiv', view);
// ---------- DISPLAY ORTHO-IMAGES : ----------
// Add one imagery layer to the scene. This layer's properties are defined in a json file, but it could be
// defined as a plain js object. See `Layer` documentation for more info.
itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
config.source = new itowns.WMTSSource(config.source);
view.addLayer(
new itowns.ColorLayer('Ortho', config),
).then(debugMenu.addLayerGUI.bind(debugMenu));
});
// ---------- DISPLAY A DIGITAL ELEVATION MODEL : ----------
// Add two elevation layers, each with a different level of detail. Here again, each layer's properties are
// defined in a json file.
function addElevationLayerFromConfig(config) {
config.source = new itowns.WMTSSource(config.source);
view.addLayer(
new itowns.ElevationLayer(config.id, config),
).then(debugMenu.addLayerGUI.bind(debugMenu));
}
itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
// ---------- ADD SOME WIDGETS : ----------
// ADD A SCALE :
const scale = new itowns_widgets.Scale(view, { position: 'bottom-right', translate: { x: -80 } });
// ADD A MINIMAP :
const minimap = new itowns_widgets.Minimap(
view,
new itowns.ColorLayer('minimap', {
source: new itowns.VectorTilesSource({
style: "https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json",
// We don't display mountains and plot related data to ease visualisation
filter: (layer) => !layer['source-layer'].includes('oro_')
&& !layer['source-layer'].includes('parcellaire'),
}),
addLabelLayer: { performance: true },
}),
{ cursor: '+' },
);
// ADD NAVIGATION TOOLS :
const navigation = new itowns_widgets.Navigation(view, {
position: 'bottom-right',
translate: { y: -40 },
});
// ADD A SEARCH BAR :
// You can find more precise explanation on searchbar options in the doc
// (http://www.itowns-project.org/itowns/docs/#api/Widgets/Searchbar) and in the searchbar example
// (https://www.itowns-project.org/itowns/examples/#widgets_searchbar)
// Define options for geocoding service that should be used by the searchbar.
const geocodingOptions = {
url: new URL(
'https://data.geopf.fr/geocodage/completion?' +
'text=&type=StreetAddress,PositionOfInterest',
),
parser: (response) => {
const map = new Map();
response.results.forEach(location => {
map.set(location.fulltext, new itowns.Coordinates('EPSG:4326', location.x, location.y));
});
return map;
},
onSelected: (coordinates) => {
view.controls.lookAtCoordinate({ coord: coordinates, range: 20000, tilt: 45, heading: 0 });
},
}
// Create the searchbar
const searchbar = new itowns_widgets.Searchbar(view, geocodingOptions, {
maxSuggestionNumber: 15,
placeholder: 'Search a location in France',
position: 'top-right',
});
// ---------- DISPLAY ATMOSPHERIC LIGHTING : ----------
const atmosphere = view.getLayerById('atmosphere');
atmosphere.setRealisticOn(!view.isDebugMode);
// ---------- DEBUG TOOLS : ----------
// Toggle atmospheric lighting on/off.
const cRL = debugMenu.addGUI('RealisticLighting', !view.isDebugMode, function (v) {
atmosphere.setRealisticOn(v);
view.notifyChange(atmosphere);
});
debug.createTileDebugUI(debugMenu.gui, view);
</script>
</body>
</html>