-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (109 loc) · 4.49 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
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="./Qgis2threejs.css">
<script src="./threejs/three.min.js"></script>
<script src="./threejs/OrbitControls.js"></script>
<script src="./dat-gui/dat.gui.min.js"></script>
<script src="./Qgis2threejs.js"></script>
<script src="./dat-gui_panel.js"></script>
</head>
<body>
<div id="view">
<div id="labels"></div>
<div id="northarrow"></div>
</div>
<!-- popup -->
<div id="popup">
<div id="closebtn">×</div>
<div id="popupbar"></div>
<div id="popupbody">
<div id="popupcontent"></div>
<!-- query result -->
<div id="queryresult">
<table id="qr_layername_table">
<caption>Layer name</caption>
<tr><td id="qr_layername"></td></tr>
</table>
<table id="qr_coords_table">
<caption>Clicked coordinates</caption>
<tr><td id="qr_coords"></td></tr>
</table>
<!-- camera actions -->
<div class="action-btn action-zoom" onclick="app.cameraAction.zoomIn(); app.closePopup();">Zoom in here</div>
<div class="action-btn action-move" onclick="app.cameraAction.move(); app.closePopup();">Move here</div>
<div class="action-btn action-orbit" onclick="app.cameraAction.orbit(); app.closePopup();">Orbit around here</div>
<!-- attributes -->
<table id="qr_attrs_table">
<caption>Attributes</caption>
</table>
</div>
<!-- page info -->
<div id="pageinfo">
<h1>Current View URL</h1>
<div><input id="urlbox" type="text"></div>
<h1>Usage</h1>
<table id="usage">
<tr><td colspan="2" class="star">Mouse</td></tr>
<tr><td>Left button + Move</td><td>Orbit</td></tr>
<tr><td>Mouse Wheel</td><td>Zoom</td></tr>
<tr><td>Right button + Move</td><td>Pan</td></tr>
<tr><td colspan="2" class="star">Keys</td></tr>
<tr><td>Arrow keys</td><td>Move Horizontally</td></tr>
<tr><td>Shift + Arrow keys</td><td>Orbit</td></tr>
<tr><td>Ctrl + Arrow keys</td><td>Rotate</td></tr>
<tr><td>Shift + Ctrl + Up / Down</td><td>Zoom In / Out</td></tr>
<tr><td>L</td><td>Toggle Label Visibility</td></tr>
<tr><td>R</td><td>Start / Stop Rotate Animation (Orbiting)</td></tr>
<tr><td>W</td><td>Wireframe Mode</td></tr>
<tr><td>Shift + R</td><td>Reset Camera Position</td></tr>
<tr><td>Shift + S</td><td>Save Image</td></tr>
</table>
<h1>About</h1>
<div id="about">
This page was made with <a href="https://www.qgis.org/" target="_blank">QGIS</a> and <a href="https://github.com/minorua/Qgis2threejs" target="_blank">Qgis2threejs</a> plugin.
Dependent JavaScript libraries are
<a href="https://threejs.org/" target="_blank">three.js</a>,
<a href="https://code.google.com/p/dat-gui/" target="_blank">dat-gui</a>
<span id="lib_proj4js"> and <a href="https://trac.osgeo.org/proj4js/" target="_blank">Proj4js</a></span>
.
</div>
</div>
</div>
</div>
<!-- progress bar -->
<div id="progress"><div id="bar"></div></div>
<!-- header and footer -->
<div id="header">船木池</div>
<div id="footer">標高は国土地理院10B
背景図は国土地理院シームレス写真
をそれぞれ使用した</div>
<script>
Q3D.Config.camera.ortho = true;
Q3D.Config.northArrow.visible = true;
Q3D.Config.northArrow.color = 0xff0000;
if (typeof proj4 === "undefined") document.getElementById("lib_proj4js").style.display = "none";
var app = Q3D.application,
container = document.getElementById("view");
app.init(container); // initialize application
// when all relevant files have been loaded into the scene
app.addEventListener("sceneLoaded", function () {
// set custom plane z range
var box = new THREE.Box3().setFromObject(app.scene),
zMin = app.scene.toMapCoordinates(0, 0, box.min.y).z,
zMax = app.scene.toMapCoordinates(0, 0, box.max.y).z;
Q3D.gui.initCustomPlaneFolder(zMin, zMax);
});
// load the scene
app.loadJSONFile("./data/index/scene.json", function () {
app.start();
Q3D.gui.init(); // initialize dat-gui panel
// North arrow inset
if (Q3D.Config.northArrow.visible) app.buildNorthArrow(document.getElementById("northarrow"), app.scene.userData.rotation);
});
</script>
</body>
</html>