Commit 9f6da49531d69002e01b18e4c4e0bdca7d347370
1 parent
c3de46ad6f
Exists in
main
Implement legend functionality
Showing 2 changed files with 34 additions and 56 deletions Inline Diff
Oxkintok_t.html
View file @
9f6da49
<!DOCTYPE html> | 1 | 1 | <!DOCTYPE html> | |
<html lang="en"> | 2 | 2 | <html lang="en"> | |
3 | 3 | |||
<head> | 4 | 4 | <head> | |
<meta charset="utf-8"> | 5 | 5 | <meta charset="utf-8"> | |
<meta name="description" content=""> | 6 | 6 | <meta name="description" content=""> | |
<meta name="author" content=""> | 7 | 7 | <meta name="author" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | 8 | 8 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
<title>Potree Viewer</title> | 9 | 9 | <title>Potree Viewer</title> | |
10 | 10 | |||
<link rel="stylesheet" type="text/css" href="build/potree/potree.css"> | 11 | 11 | <link rel="stylesheet" type="text/css" href="build/potree/potree.css"> | |
<link rel="stylesheet" type="text/css" href="libs/jquery-ui/jquery-ui.min.css"> | 12 | 12 | <link rel="stylesheet" type="text/css" href="libs/jquery-ui/jquery-ui.min.css"> | |
<link rel="stylesheet" type="text/css" href="libs/openlayers3/ol.css"> | 13 | 13 | <link rel="stylesheet" type="text/css" href="libs/openlayers3/ol.css"> | |
<link rel="stylesheet" type="text/css" href="libs/spectrum/spectrum.css"> | 14 | 14 | <link rel="stylesheet" type="text/css" href="libs/spectrum/spectrum.css"> | |
<link rel="stylesheet" type="text/css" href="libs/jstree/themes/mixed/style.css"> | 15 | 15 | <link rel="stylesheet" type="text/css" href="libs/jstree/themes/mixed/style.css"> | |
<link rel="stylesheet" type="text/css" href="libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css"> | 16 | 16 | <link rel="stylesheet" type="text/css" href="libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css"> | |
<link rel="stylesheet" type="text/css" | 17 | 17 | <link rel="stylesheet" type="text/css" | |
href="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Widgets/widgets.css"> | 18 | 18 | href="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Widgets/widgets.css"> | |
19 | 19 | |||
<style> | 20 | 20 | <style> | |
#potree_toolbar { | 21 | 21 | #potree_toolbar { | |
position: absolute; | 22 | 22 | position: absolute; | |
z-index: 10000; | 23 | 23 | z-index: 10000; | |
right: 50px; | 24 | 24 | right: 50px; | |
bottom: 0px; | 25 | 25 | bottom: 0px; | |
background: #1b3448; | 26 | 26 | background: #1b3448; | |
color: white; | 27 | 27 | color: white; | |
padding: 0.3em 0.8em; | 28 | 28 | padding: 0.3em 0.8em; | |
font-family: "system-ui"; | 29 | 29 | font-family: "system-ui"; | |
border-radius: 0em 0em 0.3em 0.3em; | 30 | 30 | border-radius: 0em 0em 0.3em 0.3em; | |
display: flex; | 31 | 31 | display: flex; | |
} | 32 | 32 | } | |
33 | 33 | |||
.potree_toolbar_label { | 34 | 34 | .potree_toolbar_label { | |
text-align: center; | 35 | 35 | text-align: center; | |
font-size: smaller; | 36 | 36 | font-size: smaller; | |
opacity: 0.9; | 37 | 37 | opacity: 0.9; | |
} | 38 | 38 | } | |
39 | 39 | |||
.potree_toolbar_separator { | 40 | 40 | .potree_toolbar_separator { | |
background: white; | 41 | 41 | background: white; | |
padding: 0px; | 42 | 42 | padding: 0px; | |
margin: 5px 10px; | 43 | 43 | margin: 5px 10px; | |
width: 1px; | 44 | 44 | width: 1px; | |
} | 45 | 45 | } | |
46 | 46 | |||
.p_collapsible { | 47 | 47 | .p_collapsible { | |
background-color: #1b3448; | 48 | 48 | background-color: #1b3448; | |
z-index: 10000; | 49 | 49 | z-index: 10000; | |
position: absolute; | 50 | 50 | position: absolute; | |
top: 5px; | 51 | 51 | top: 5px; | |
right: 5px; | 52 | 52 | right: 5px; | |
color: white; | 53 | 53 | color: white; | |
font-family: "system-ui"; | 54 | 54 | font-family: "system-ui"; | |
cursor: pointer; | 55 | 55 | cursor: pointer; | |
padding: 18px; | 56 | 56 | padding: 18px; | |
width: 500px; | 57 | 57 | width: 500px; | |
border: none; | 58 | 58 | border: none; | |
text-align: left; | 59 | 59 | text-align: left; | |
outline: none; | 60 | 60 | outline: none; | |
font-size: 15px; | 61 | 61 | font-size: 15px; | |
} | 62 | 62 | } | |
63 | 63 | |||
.active, | 64 | 64 | .active, | |
.p_collapsible:hover { | 65 | 65 | .p_collapsible:hover { | |
background-color: #555; | 66 | 66 | background-color: #555; | |
} | 67 | 67 | } | |
68 | 68 | |||
.p_content { | 69 | 69 | .p_content { | |
z-index: 10000; | 70 | 70 | z-index: 10000; | |
position: absolute; | 71 | 71 | position: absolute; | |
top: 31px; | 72 | 72 | top: 31px; | |
right: 5px; | 73 | 73 | right: 5px; | |
padding: 18px; | 74 | 74 | padding: 18px; | |
display: none; | 75 | 75 | display: none; | |
overflow: scroll; | 76 | 76 | overflow: scroll; | |
background-color: #f1f1f1; | 77 | 77 | background-color: #f1f1f1; | |
font-family: "system-ui"; | 78 | 78 | font-family: "system-ui"; | |
opacity: 0.8; | 79 | 79 | opacity: 0.8; | |
} | 80 | 80 | } | |
81 | 81 | |||
.p_collapsible:after { | 82 | 82 | .p_collapsible:after { | |
83 | 83 | |||
content: '\02795'; | 84 | 84 | content: '\02795'; | |
/* Unicode character for "plus" sign (+) */ | 85 | 85 | /* Unicode character for "plus" sign (+) */ | |
font-size: 13px; | 86 | 86 | font-size: 13px; | |
color: white; | 87 | 87 | color: white; | |
float: right; | 88 | 88 | float: right; | |
margin-left: 5px; | 89 | 89 | margin-left: 5px; | |
} | 90 | 90 | } | |
91 | 91 | |||
.active:after { | 92 | 92 | .active:after { | |
content: "\2796"; | 93 | 93 | content: "\2796"; | |
/* Unicode character for "minus" sign (-) */ | 94 | 94 | /* Unicode character for "minus" sign (-) */ | |
} | 95 | 95 | } | |
96 | 96 | |||
/* Make Cesium UI stuff clickable */ | 97 | 97 | /* Make Cesium UI stuff clickable */ | |
.cesium-viewer-toolbar { | 98 | 98 | .cesium-viewer-toolbar { | |
top: 64px; | 99 | 99 | top: 64px; | |
z-index: 2; | 100 | 100 | z-index: 2; | |
} | 101 | 101 | } | |
102 | 102 | |||
.cesium-viewer-animationContainer { | 103 | 103 | .cesium-viewer-animationContainer { | |
z-index: 2; | 104 | 104 | z-index: 2; | |
} | 105 | 105 | } | |
106 | 106 | |||
.cesium-viewer-timelineContainer { | 107 | 107 | .cesium-viewer-timelineContainer { | |
z-index: 2; | 108 | 108 | z-index: 2; | |
} | 109 | 109 | } | |
110 | 110 | |||
#info { | 111 | 111 | #info { | |
position: absolute; | 112 | 112 | position: absolute; | |
bottom: 3em; | 113 | 113 | bottom: 3em; | |
right: 1em; | 114 | 114 | right: 1em; | |
padding: 1em; | 115 | 115 | padding: 1em; | |
background: rgba(40, 40, 40, 0.8); | 116 | 116 | background: rgba(40, 40, 40, 0.8); | |
border: 1px solid rgb(200, 200, 200); | 117 | 117 | border: 1px solid rgb(200, 200, 200); | |
border-radius: 5px; | 118 | 118 | border-radius: 5px; | |
font-size: 16px; | 119 | 119 | font-size: 16px; | |
color: rgb(200, 200, 200); | 120 | 120 | color: rgb(200, 200, 200); | |
z-index: 2; | 121 | 121 | z-index: 2; | |
} | 122 | 122 | } | |
123 | 123 | |||
#info a { | 124 | 124 | #info a { | |
font: 400 14px "helvetica", sans-serif; | 125 | 125 | font: 400 14px "helvetica", sans-serif; | |
padding: 0 0.75em; | 126 | 126 | padding: 0 0.75em; | |
color: rgb(200, 200, 200); | 127 | 127 | color: rgb(200, 200, 200); | |
} | 128 | 128 | } | |
129 | 129 | |||
#info a:hover { | 130 | 130 | #info a:hover { | |
color: rgb(255, 255, 255); | 131 | 131 | color: rgb(255, 255, 255); | |
} | 132 | 132 | } | |
133 | 133 | |||
#legend { | 134 | 134 | #legend { | |
display: none; | 135 | 135 | display: none; | |
padding: 0 0 10px 7px; | 136 | 136 | padding: 0 0 10px 7px; | |
font: 100 13px/13px "Lucida Sans", Arial, Sans-Serif; | 137 | 137 | font: 100 13px/13px "Lucida Sans", Arial, Sans-Serif; | |
} | 138 | 138 | } | |
139 | 139 | |||
.legend-title { | 140 | 140 | .legend-title { | |
font-size: 13px; | 141 | 141 | font-size: 13px; | |
} | 142 | 142 | } | |
143 | 143 | |||
.legend-colorbar { | 144 | 144 | .legend-colorbar { | |
width: 137px; | 145 | 145 | width: 137px; | |
height: 15px; | 146 | 146 | height: 15px; | |
border: 1px solid black; | 147 | 147 | border: 1px solid black; | |
} | 148 | 148 | } | |
149 | 149 | |||
.legend-ranges { | 150 | 150 | .legend-ranges { | |
width: 140px; | 151 | 151 | width: 140px; | |
font-size: 10px; | 152 | 152 | font-size: 10px; | |
} | 153 | 153 | } | |
154 | 154 | |||
.legend-max { | 155 | 155 | .legend-max { | |
float: right; | 156 | 156 | float: right; | |
} | 157 | 157 | } | |
158 | 158 | |||
.legend-color { | 159 | 159 | .legend-color { | |
padding: 0 5px; | 160 | 160 | padding: 0 5px; | |
border: 1px solid black; | 161 | 161 | border: 1px solid black; | |
} | 162 | 162 | } | |
</style> | 163 | 163 | </style> | |
</head> | 164 | 164 | </head> | |
165 | 165 | |||
<body> | 166 | 166 | <body> | |
<script src="libs/jquery/jquery-3.1.1.min.js"></script> | 167 | 167 | <script src="libs/jquery/jquery-3.1.1.min.js"></script> | |
<script src="libs/spectrum/spectrum.js"></script> | 168 | 168 | <script src="libs/spectrum/spectrum.js"></script> | |
<script src="libs/jquery-ui/jquery-ui.min.js"></script> | 169 | 169 | <script src="libs/jquery-ui/jquery-ui.min.js"></script> | |
<!-- <script src="./libs/three.js/build/three.min.js"></script> --> | 170 | 170 | <!-- <script src="./libs/three.js/build/three.min.js"></script> --> | |
<script src="https://unpkg.com/three@0.120.1/build/three.js"></script> | 171 | 171 | <script src="https://unpkg.com/three@0.120.1/build/three.js"></script> | |
<script src="libs/other/BinaryHeap.js"></script> | 172 | 172 | <script src="libs/other/BinaryHeap.js"></script> | |
<script src="libs/tween/tween.min.js"></script> | 173 | 173 | <script src="libs/tween/tween.min.js"></script> | |
<script src="libs/d3/d3.js"></script> | 174 | 174 | <script src="libs/d3/d3.js"></script> | |
<script src="libs/proj4/proj4.js"></script> | 175 | 175 | <script src="libs/proj4/proj4.js"></script> | |
<script src="libs/openlayers3/ol.js"></script> | 176 | 176 | <script src="libs/openlayers3/ol.js"></script> | |
<script src="libs/i18next/i18next.js"></script> | 177 | 177 | <script src="libs/i18next/i18next.js"></script> | |
<script src="libs/jstree/jstree.js"></script> | 178 | 178 | <script src="libs/jstree/jstree.js"></script> | |
<script src="build/potree/potree.js"></script> | 179 | 179 | <script src="build/potree/potree.js"></script> | |
<script src="libs/plasio/js/laslaz.js"></script> | 180 | 180 | <script src="libs/plasio/js/laslaz.js"></script> | |
181 | 181 | |||
<script src="libs/Cesium/Cesium.js"></script> | 182 | 182 | <script src="libs/Cesium/Cesium.js"></script> | |
<script src="libs/sql.js/sql-wasm.js"></script> | 183 | 183 | <script src="libs/sql.js/sql-wasm.js"></script> | |
<script src="libs/geopackage/geopackage.js"></script> | 184 | 184 | <script src="libs/geopackage/geopackage.js"></script> | |
<script src="libs/three.js/extra/lines/LineSegmentsGeometry.js"></script> | 185 | 185 | <script src="libs/three.js/extra/lines/LineSegmentsGeometry.js"></script> | |
<script src="libs/three.js/extra/lines/LineGeometry.js"></script> | 186 | 186 | <script src="libs/three.js/extra/lines/LineGeometry.js"></script> | |
<script src="libs/three.js/extra/lines/LineMaterial.js"></script> | 187 | 187 | <script src="libs/three.js/extra/lines/LineMaterial.js"></script> | |
<script src="libs/three.js/extra/lines/LineSegments2.js"></script> | 188 | 188 | <script src="libs/three.js/extra/lines/LineSegments2.js"></script> | |
<script src="libs/three.js/extra/lines/Line2.js"></script> | 189 | 189 | <script src="libs/three.js/extra/lines/Line2.js"></script> | |
190 | 190 | |||
<script src="gibsTilingScheme.js"></script> | 191 | 191 | <script src="gibsTilingScheme.js"></script> | |
192 | 192 | |||
<script> | 193 | 193 | <script> | |
194 | 194 | |||
/** | 195 | 195 | /** | |
* Moves the camera to a specified position, looking at a specified target | 196 | 196 | * Moves the camera to a specified position, looking at a specified target | |
*/ | 197 | 197 | */ | |
function moveCameraTo(cameraPosition, cameraTarget) { | 198 | 198 | function moveCameraTo(cameraPosition, cameraTarget) { | |
let cameraPositionVector = cameraPosition; | 199 | 199 | let cameraPositionVector = cameraPosition; | |
let cameraTargetVector = cameraTarget; | 200 | 200 | let cameraTargetVector = cameraTarget; | |
201 | 201 | |||
// Convert things to vectors if needed | 202 | 202 | // Convert things to vectors if needed | |
if (cameraPosition instanceof Array) { | 203 | 203 | if (cameraPosition instanceof Array) { | |
cameraPositionVector = new THREE.Vector3().fromArray(cameraPosition); | 204 | 204 | cameraPositionVector = new THREE.Vector3().fromArray(cameraPosition); | |
} | 205 | 205 | } | |
206 | 206 | |||
if (cameraTarget instanceof Array) { | 207 | 207 | if (cameraTarget instanceof Array) { | |
cameraTargetVector = new THREE.Vector3().fromArray(cameraTarget); | 208 | 208 | cameraTargetVector = new THREE.Vector3().fromArray(cameraTarget); | |
} | 209 | 209 | } | |
210 | 210 | |||
// Actually move the camera | 211 | 211 | // Actually move the camera | |
Potree.Utils.moveTo( | 212 | 212 | Potree.Utils.moveTo( | |
viewer.scene, | 213 | 213 | viewer.scene, | |
cameraPositionVector, | 214 | 214 | cameraPositionVector, | |
cameraTargetVector | 215 | 215 | cameraTargetVector | |
); | 216 | 216 | ); | |
} | 217 | 217 | } | |
function toggleAnnotations() { | 218 | 218 | function toggleAnnotations() { | |
// Loop through all annotations and toggle them on/off | 219 | 219 | // Loop through all annotations and toggle them on/off | |
viewer.scene.annotations.children.forEach((annotation) => { | 220 | 220 | viewer.scene.annotations.children.forEach((annotation) => { | |
annotation.visible = !annotation.visible; | 221 | 221 | annotation.visible = !annotation.visible; | |
}); | 222 | 222 | }); | |
} | 223 | 223 | } | |
const sliderInput = (value) => { | 224 | 224 | const sliderInput = (value) => { | |
// Start by toggling all pointclouds to be off | 225 | 225 | // Start by toggling all pointclouds to be off | |
window.pointclouds.forEach((p) => { | 226 | 226 | window.pointclouds.forEach((p) => { | |
p.visible = false; | 227 | 227 | p.visible = false; | |
}); | 228 | 228 | }); | |
229 | 229 | |||
// Now go and toggle on the correct pointclouds | 230 | 230 | // Now go and toggle on the correct pointclouds | |
window.pointcloudMap[value].forEach((p) => { | 231 | 231 | window.pointcloudMap[value].forEach((p) => { | |
p.visible = true; | 232 | 232 | p.visible = true; | |
}); | 233 | 233 | }); | |
} | 234 | 234 | } | |
235 | 235 | |||
// document.getElementById('slider').addEventListener('input', (e) => { | 236 | 236 | // document.getElementById('slider').addEventListener('input', (e) => { | |
// sliderInput(e.target.value); | 237 | 237 | // sliderInput(e.target.value); | |
// }) | 238 | 238 | // }) | |
239 | 239 | |||
</script> | 240 | 240 | </script> | |
241 | 241 | |||
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE --> | 242 | 242 | <!-- INCLUDE ADDITIONAL DEPENDENCIES HERE --> | |
<!-- INCLUDE SETTINGS HERE --> | 243 | 243 | <!-- INCLUDE SETTINGS HERE --> | |
244 | 244 | |||
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; "> | 245 | 245 | <div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; "> | |
<div id="potree_render_area" style="background-image: url('./build/potree/resources/images/background.jpg');"> | 246 | 246 | <div id="potree_render_area" style="background-image: url('./build/potree/resources/images/background.jpg');"> | |
<div id="cesiumContainer" style="position: absolute; width: 100%; height: 100%; background-color:black"> | 247 | 247 | <div id="cesiumContainer" style="position: absolute; width: 100%; height: 100%; background-color:black"> | |
</div> | 248 | 248 | </div> | |
</div> | 249 | 249 | </div> | |
<div id="potree_sidebar_container"> </div> | 250 | 250 | <div id="potree_sidebar_container"> </div> | |
</div> | 251 | 251 | </div> | |
252 | 252 | |||
253 | 253 | |||
<button type="button" class="p_collapsible">Oxkintok 3D Archaeological Atlas <div id="potree_toolbar"></div> | 254 | 254 | <button type="button" class="p_collapsible">Oxkintok 3D Archaeological Atlas <div id="potree_toolbar"></div> | |
</button> | 255 | 255 | </button> | |
256 | 256 | |||
<div class="p_content"> | 257 | 257 | <div class="p_content"> | |
<a href="#" onclick="moveCameraTo( | 258 | 258 | <a href="#" onclick="moveCameraTo( | |
[192061.839, 2276373.225, 324.879], | 259 | 259 | [192061.839, 2276373.225, 324.879], | |
[192061.839, 2276373.225, 30.038])"> Zoom to Full</a> | <a href="#" onclick="toggleAnnotations()"> Toggle | 260 | 260 | [192061.839, 2276373.225, 30.038])"> Zoom to Full</a> | <a href="#" onclick="toggleAnnotations()"> Toggle | |
Labels</a> | 261 | 261 | Labels</a> | |
262 | 262 | |||
</p> | 263 | 263 | </p> | |
<li> <a href="#" onclick="sliderInput(1)"> Tunnel TLS 2022 </a> </li> | 264 | 264 | <li> <a href="#" onclick="sliderInput(1)"> Tunnel TLS 2022 </a> </li> | |
<li> <a href="#" onclick="sliderInput(2)"> RealityCapture - TLS</a> </li> | 265 | 265 | <li> <a href="#" onclick="sliderInput(2)"> RealityCapture - TLS</a> </li> | |
266 | 266 | |||
<p> | 267 | 267 | <p> | |
<h4>Models by</h4> | 268 | 268 | <h4>Models by</h4> | |
269 | 269 | |||
Dominique Rissolo</br> | 270 | 270 | Dominique Rissolo</br> | |
Eric Lo | 271 | 271 | Eric Lo | |
272 | 272 | |||
</br>Qualcomm Institute, University of California | 273 | 273 | </br>Qualcomm Institute, University of California | |
</br> Cultural Heritage Engineering Initiative | 274 | 274 | </br> Cultural Heritage Engineering Initiative | |
</p> | 275 | 275 | </p> | |
</br> | 276 | 276 | </br> | |
277 | 277 | |||
278 | 278 | |||
</p> | 279 | 279 | </p> | |
</br> | 280 | 280 | </br> | |
<iframe src='papers/Rissolo_2019.html' width="100%" height="50%"></iframe> | 281 | 281 | <iframe src='papers/Rissolo_2019.html' width="100%" height="50%"></iframe> | |
</br> | 282 | 282 | </br> | |
</div> | 283 | 283 | </div> | |
284 | 284 | |||
<div id="info"> | 285 | 285 | <div id="info"> | |
<div id="legend"> | 286 | 286 | <div id="legend"> | |
<div class="scale"> | 287 | 287 | <div class="scale"> | |
<div class="legend-title"></div> | 288 | 288 | <div class="legend-title"></div> | |
<div><img class="legend-colorbar"></img></div> | 289 | 289 | <div><img class="legend-colorbar"></img></div> | |
<div class="legend-ranges"> | 290 | 290 | <div class="legend-ranges"> | |
<span class="legend-min"></span> | 291 | 291 | <span class="legend-min"></span> | |
<span class="legend-max"></span> | 292 | 292 | <span class="legend-max"></span> | |
</div> | 293 | 293 | </div> | |
</div> | 294 | 294 | </div> | |
<div class="single"> | 295 | 295 | <div class="single"> | |
<span class="legend-color"> </span> | 296 | 296 | <span class="legend-color"> </span> | |
<span class="legend-title"></span> | 297 | 297 | <span class="legend-title"></span> | |
</div> | 298 | 298 | </div> | |
</div> | 299 | 299 | </div> | |
<a href='https://wiki.earthdata.nasa.gov/display/GIBS'>NASA EOSDIS GIBS</a> | 300 | 300 | <a href='https://wiki.earthdata.nasa.gov/display/GIBS'>NASA EOSDIS GIBS</a> | |
</div> | 301 | 301 | </div> | |
302 | 302 | |||
<script> | 303 | 303 | <script> | |
304 | 304 | |||
var pTime = Cesium.JulianDate.fromIso8601('2021-02-12T08:45:00+03'); | 305 | 305 | var pTime = Cesium.JulianDate.fromIso8601('2021-02-12T08:45:00+03'); | |
306 | 306 | |||
console.log("test") | 307 | 307 | console.log("test") | |
var clock = new Cesium.Clock({ | 308 | 308 | var clock = new Cesium.Clock({ | |
startTime: pTime, | 309 | 309 | startTime: pTime, | |
currentTime: pTime, | 310 | 310 | currentTime: pTime, | |
clockRange: Cesium.ClockRange.LOOP_STOP, | 311 | 311 | clockRange: Cesium.ClockRange.LOOP_STOP, | |
clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER, | 312 | 312 | clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER, | |
multiplier: 3600.0 | 313 | 313 | multiplier: 3600.0 | |
}); | 314 | 314 | }); | |
315 | 315 | |||
const providerViewModels = Cesium.createDefaultImageryProviderViewModels(); | 316 | 316 | const providerViewModels = Cesium.createDefaultImageryProviderViewModels(); | |
console.log("test2") | 317 | 317 | console.log("test2") | |
// const imageryLayers = cesiumViewer.imageryLayers; | 318 | 318 | // const imageryLayers = cesiumViewer.imageryLayers; | |
// const layer = imageryLayers.addImageryProvider(provider); | 319 | 319 | // const layer = imageryLayers.addImageryProvider(provider); | |
320 | 320 | |||
321 | 321 | |||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0YjA5NWU1YS00MTE0LTQ5YTctOWFhNy0xN2EwNmU2NzgwZjkiLCJpZCI6NTYzOTUsImlhdCI6MTY0MjQzODc4MH0.3yyDeYbXe0TPJHNobfwSL5WFXhnTLwn9yz6LOu79tBc'; | 322 | 322 | Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0YjA5NWU1YS00MTE0LTQ5YTctOWFhNy0xN2EwNmU2NzgwZjkiLCJpZCI6NTYzOTUsImlhdCI6MTY0MjQzODc4MH0.3yyDeYbXe0TPJHNobfwSL5WFXhnTLwn9yz6LOu79tBc'; | |
window.cesiumViewer = new Cesium.Viewer('cesiumContainer', { | 323 | 323 | window.cesiumViewer = new Cesium.Viewer('cesiumContainer', { | |
// useDefaultRenderLoop: false, | 324 | 324 | // useDefaultRenderLoop: false, | |
// animation: false, | 325 | 325 | // animation: false, | |
// baseLayerPicker: false, | 326 | 326 | // baseLayerPicker: false, | |
fullscreenButton: false, | 327 | 327 | fullscreenButton: false, | |
geocoder: false, | 328 | 328 | geocoder: false, | |
homeButton: false, | 329 | 329 | homeButton: false, | |
// infoBox: false, | 330 | 330 | // infoBox: false, | |
sceneModePicker: false, | 331 | 331 | sceneModePicker: false, | |
// selectionIndicator: false, | 332 | 332 | // selectionIndicator: false, | |
// skyAtmosphere: false, | 333 | 333 | // skyAtmosphere: false, | |
// groundAtmosphere: false, | 334 | 334 | // groundAtmosphere: false, | |
// timeline: false, | 335 | 335 | // timeline: false, | |
navigationHelpButton: false, | 336 | 336 | navigationHelpButton: false, | |
// clockViewModel: new Cesium.ClockViewModel(clock), | 337 | 337 | // clockViewModel: new Cesium.ClockViewModel(clock), | |
imageryProviderViewModels: providerViewModels, | 338 | 338 | imageryProviderViewModels: providerViewModels, | |
// imageryProvider: Cesium.createWorldImagery({ | 339 | 339 | // imageryProvider: Cesium.createWorldImagery({ | |
// style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS | 340 | 340 | // style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS | |
// }), | 341 | 341 | // }), | |
terrainProvider: Cesium.createWorldTerrain({ | 342 | 342 | terrainProvider: Cesium.createWorldTerrain({ | |
requestWaterMask: false, | 343 | 343 | requestWaterMask: false, | |
requestVertexNormals: true | 344 | 344 | requestVertexNormals: true | |
}), | 345 | 345 | }), | |
346 | 346 | |||
terrainShadows: Cesium.ShadowMode.ENABLED, | 347 | 347 | terrainShadows: Cesium.ShadowMode.ENABLED, | |
348 | 348 | |||
}); | 349 | 349 | }); | |
350 | 350 | |||
/* Geocoder */ | 351 | 351 | /* Geocoder */ | |
// cesiumViewer.geocoder.viewModel.destinationFound = (viewModel, destination) => { | 352 | 352 | // cesiumViewer.geocoder.viewModel.destinationFound = (viewModel, destination) => { | |
// console.log(destination) | 353 | 353 | // console.log(destination) | |
// const fromCes = (cPos) => { | 354 | 354 | // const fromCes = (cPos) => { | |
// const toDegrees = (cartesian3Pos) => { | 355 | 355 | // const toDegrees = (cartesian3Pos) => { | |
// let pos; | 356 | 356 | // let pos; | |
// if (cartesian3Pos instanceof Cesium.Cartesian3) { | 357 | 357 | // if (cartesian3Pos instanceof Cesium.Cartesian3) { | |
// pos = Cesium.Cartographic.fromCartesian(cartesian3Pos) | 358 | 358 | // pos = Cesium.Cartographic.fromCartesian(cartesian3Pos) | |
// } else { | 359 | 359 | // } else { | |
// pos = cartesian3Pos | 360 | 360 | // pos = cartesian3Pos | |
// } | 361 | 361 | // } | |
// return [pos.longitude / Math.PI * 180, pos.latitude / Math.PI * 180] | 362 | 362 | // return [pos.longitude / Math.PI * 180, pos.latitude / Math.PI * 180] | |
// } | 363 | 363 | // } | |
// let deg = toDegrees(cPos); | 364 | 364 | // let deg = toDegrees(cPos); | |
// let height = cPos.z; | 365 | 365 | // let height = cPos.z; | |
// console.log("deg: ", deg) | 366 | 366 | // console.log("deg: ", deg) | |
// let xy = toMap.inverse(deg); | 367 | 367 | // let xy = toMap.inverse(deg); | |
// return {x: xy[0], y: xy[1], z: 0} | 368 | 368 | // return {x: xy[0], y: xy[1], z: 0} | |
// }; | 369 | 369 | // }; | |
370 | 370 | |||
371 | 371 | |||
// let position; | 372 | 372 | // let position; | |
// if (destination instanceof Cesium.Rectangle) { | 373 | 373 | // if (destination instanceof Cesium.Rectangle) { | |
// position = fromCes(Cesium.Rectangle.center(destination)); | 374 | 374 | // position = fromCes(Cesium.Rectangle.center(destination)); | |
// } else { | 375 | 375 | // } else { | |
// position = fromCes(destination); | 376 | 376 | // position = fromCes(destination); | |
// } | 377 | 377 | // } | |
// console.log(position) | 378 | 378 | // console.log(position) | |
// viewer.scene.view.position.set(position); | 379 | 379 | // viewer.scene.view.position.set(position); | |
// } | 380 | 380 | // } | |
381 | 381 | |||
function createNewViewModel({name, tooltip, layer, id, format}) { | 382 | 382 | function createNewViewModel({name, tooltip, layer, id, format, units, min, max, legend = true}) { | |
const now = Cesium.JulianDate.now(); | 383 | 383 | const now = Cesium.JulianDate.now(); | |
const past = Cesium.JulianDate.now(); | 384 | 384 | const past = Cesium.JulianDate.now(); | |
Cesium.JulianDate.addDays(now, -2, past); | 385 | 385 | Cesium.JulianDate.addDays(now, -7, now); | |
386 | Cesium.JulianDate.addDays(now, -9, past); | |||
const times = Cesium.TimeIntervalCollection.fromIso8601({ | 386 | 387 | const times = Cesium.TimeIntervalCollection.fromIso8601({ | |
iso8601: `${Cesium.JulianDate.toIso8601(past, 0)}/${Cesium.JulianDate.toIso8601(now, 0)}`, | 387 | 388 | iso8601: `${Cesium.JulianDate.toIso8601(past, 0)}/${Cesium.JulianDate.toIso8601(now, 0)}`, | |
leadingInterval: true, | 388 | 389 | leadingInterval: true, | |
trailingInterval: true, | 389 | 390 | trailingInterval: true, | |
isStopIncluded: false, | 390 | 391 | isStopIncluded: false, | |
dataCallback: dataCallback, | 391 | 392 | dataCallback: dataCallback, | |
}); | 392 | 393 | }); | |
let providerViewModel = new Cesium.ProviderViewModel({ | 393 | 394 | let providerViewModel = new Cesium.ProviderViewModel({ | |
name: name, | 394 | 395 | name: name, | |
tooltip: tooltip, | 395 | 396 | tooltip: tooltip, | |
category: "Other", | 396 | 397 | category: "Other", | |
iconUrl: "libs/Cesium/Widgets/Images/ImageryProviders/bingAerial.png", | 397 | 398 | iconUrl: "libs/Cesium/Widgets/Images/ImageryProviders/bingAerial.png", | |
creationFunction: () => { | 398 | 399 | creationFunction: () => { | |
const provider = new Cesium.WebMapTileServiceImageryProvider({ | 399 | 400 | const provider = new Cesium.WebMapTileServiceImageryProvider({ | |
url: | 400 | 401 | url: | |
`https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/${layer}/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.${format}`, | 401 | 402 | `https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/${layer}/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.${format}`, | |
layer: "MODIS_Terra_CorrectedReflectance_TrueColor", | 402 | 403 | layer: layer, | |
style: "default", | 403 | 404 | style: "default", | |
tileMatrixSetID: id, | 404 | 405 | tileMatrixSetID: id, | |
maximumLevel: 5, | 405 | 406 | maximumLevel: 5, | |
format: `image/${format}`, | 406 | 407 | format: `image/${format}`, | |
clock: cesiumViewer.clock, | 407 | 408 | clock: cesiumViewer.clock, | |
times: times, | 408 | 409 | times: times, | |
credit: "NASA Global Imagery Browse Services for EOSDIS", | 409 | 410 | credit: "NASA Global Imagery Browse Services for EOSDIS", | |
tilingScheme: gibs.GeographicTilingScheme() | 410 | 411 | tilingScheme: gibs.GeographicTilingScheme() | |
}); | 411 | 412 | }); | |
413 | // update legend | |||
414 | if (legend) { | |||
415 | var qs = document.querySelector.bind(document); | |||
416 | qs('.scale .legend-title').textContent = units | |||
417 | qs('.legend-colorbar').setAttribute('src', `images/${layer}.png`); | |||
418 | qs('.legend-max').innerHTML = max; | |||
419 | qs('.legend-min').innerHTML = min; | |||
420 | qs('#legend .single').style.display = 'none'; | |||
421 | qs('#legend .scale').style.display = 'block'; | |||
422 | qs('#legend').style.display = 'block'; | |||
423 | } else { | |||
424 | var qs = document.querySelector.bind(document); | |||
425 | qs('#legend').style.display = 'none'; | |||
426 | } | |||
// Make the weather layer semi-transparent to see the underlying geography. | 412 | 427 | // Make the weather layer semi-transparent to see the underlying geography. | |
provider.defaultAlpha = .5; | 413 | 428 | provider.defaultAlpha = .5; | |
return [providerViewModels[1].creationCommand(), provider] | 414 | 429 | return [providerViewModels[1].creationCommand(), provider] | |
430 | ||||
} | 415 | 431 | } | |
}) | 416 | 432 | }) | |
providerViewModels.push(providerViewModel); | 417 | 433 | providerViewModels.push(providerViewModel); | |
cesiumViewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels; | 418 | 434 | cesiumViewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels; | |
} | 419 | 435 | } | |
420 | 436 | |||
createNewViewModel({ | 421 | 437 | createNewViewModel({ | |
name: "MODIS Terra Corrected Reflectance", | 422 | 438 | name: "MODIS Terra Corrected Reflectance", | |
tooltip: "Realtime weather data from NASA Global Imagery", | 423 | 439 | tooltip: "Realtime weather data from NASA Global Imagery", | |
layer: "MODIS_Terra_CorrectedReflectance_TrueColor", | 424 | 440 | layer: "MODIS_Terra_CorrectedReflectance_TrueColor", | |
id: "250m", | 425 | 441 | id: "250m", | |
format: "jpg" | 426 | 442 | format: "jpg", | |
443 | legend: false | |||
}); | 427 | 444 | }); | |
428 | 445 | |||
createNewViewModel({ | 429 | 446 | createNewViewModel({ | |
name: "Aerosols", | 430 | 447 | name: "Aerosols", | |
tooltip: "Realtime aerosols data", | 431 | 448 | tooltip: "Realtime aerosols data", | |
layer: "MODIS_Terra_Aerosol", | 432 | 449 | layer: "MODIS_Terra_Aerosol", | |
id: "2km", | 433 | 450 | id: "2km", | |
format: "png" | 434 | 451 | format: "png", | |
452 | units: "Optical Depth", | |||
453 | min: "0.0", | |||
454 | max: "โฉพ 5.0", | |||
}); | 435 | 455 | }); | |
436 | 456 | createNewViewModel({ | ||
437 | ||||
let fireProviderViewModel = new Cesium.ProviderViewModel({ | 438 | |||
name: "Infrared", | 439 | 457 | name: "Infrared", | |
tooltip: "Realtime weather data from NASA Global Imagery", | 440 | 458 | tooltip: "Infrared", | |
category: "Other", | 441 | 459 | layer: "GOES-East_ABI_Band13_Clean_Infrared", | |
iconUrl: "libs/Cesium/Widgets/Images/ImageryProviders/bingAerial.png", | 442 | 460 | id: "2km", | |
creationFunction: () => { | 443 | 461 | format: "png", | |
const provider = new Cesium.WebMapTileServiceImageryProvider({ | 444 | 462 | units: "Temperature", | |
url: | 445 | 463 | min: "-92โ", | |
"https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/GOES-East_ABI_Band13_Clean_Infrared/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png", | 446 | 464 | max: "> 57โ" | |
layer: "GOES-East_ABI_Band13_Clean_Infrared", | 447 | |||
style: "default", | 448 | |||
tileMatrixSetID: "2km", | 449 | |||
maximumLevel: 5, | 450 | |||
format: "image/png", | 451 | |||
clock: cesiumViewer.clock, | 452 | |||
times: times, | 453 | |||
credit: "NASA Global Imagery Browse Services for EOSDIS", | 454 | |||
tilingScheme: gibs.GeographicTilingScheme() | 455 | |||
}); | 456 | |||
// Make the weather layer semi-transparent to see the underlying geography. | 457 | |||
provider.defaultAlpha = .5; | 458 | |||
provider.readyPromise.then(() => { | 459 | |||
const start = Cesium.JulianDate.fromIso8601("2022-11-08"); | 460 | |||
const stop = Cesium.JulianDate.fromIso8601("2022-11-09"); | 461 | |||
462 | ||||
cesiumViewer.timeline.zoomTo(start, stop); | 463 | |||
clock.startTime = start; | 464 | |||
clock.stopTime = stop; | 465 | |||
clock.currentTime = start; | 466 | |||
clock.clockRange = Cesium.ClockRange.LOOP_STOP; | 467 | |||
clock.multiplier = 7200; | 468 | |||
}); | 469 | |||
// update legend | 470 | |||
var qs = document.querySelector.bind(document); | 471 | |||
qs('.scale .legend-title').textContent = "Temperature" | 472 | |||
qs('.legend-colorbar').setAttribute('src', "images/GOES-East_ABI_Band13_Clean_Infrared.png"); | 473 | |||
qs('.legend-max').innerHTML = "57"; | 474 | |||
qs('.legend-min').innerHTML = "-92"; | 475 | |||
qs('#legend .single').style.display = 'none'; | 476 | |||
qs('#legend .scale').style.display = 'block'; | 477 | |||
qs('#legend').style.display = 'block'; | 478 | |||
return [providerViewModels[1].creationCommand(), provider] | 479 | |||
} | 480 | |||
}) | 481 | 465 | }) | |
482 | 466 | |||
// providerViewModels.push(weatherProviderViewModel); | 483 | |||
// providerViewModels.push(aerosolProviderViewModel); | 484 | |||
// providerViewModels.push(fireProviderViewModel); | 485 | |||
// cesiumViewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels; | 486 | |||
487 | ||||
488 | ||||
let cp = new Cesium.Cartesian3(4303414.154026048, 552161.235598733, 4660771.704035539); | 489 | 467 | let cp = new Cesium.Cartesian3(4303414.154026048, 552161.235598733, 4660771.704035539); | |
cesiumViewer.camera.setView({ | 490 | 468 | cesiumViewer.camera.setView({ | |
destination: cp, | 491 | 469 | destination: cp, | |
orientation: { | 492 | 470 | orientation: { | |
heading: 10, | 493 | 471 | heading: 10, | |
pitch: -Cesium.Math.PI_OVER_TWO * 0.5, | 494 | 472 | pitch: -Cesium.Math.PI_OVER_TWO * 0.5, | |
roll: 0.0 | 495 | 473 | roll: 0.0 | |
} | 496 | 474 | } | |
}); | 497 | 475 | }); | |
498 | 476 | |||
function dataCallback(interval, index) { | 499 | 477 | function dataCallback(interval, index) { | |
let time; | 500 | 478 | let time; | |
if (index === 0) { | 501 | 479 | if (index === 0) { | |
// leading | 502 | 480 | // leading | |
time = Cesium.JulianDate.toIso8601(interval.stop); | 503 | 481 | time = Cesium.JulianDate.toIso8601(interval.stop); | |
} else { | 504 | 482 | } else { | |
time = Cesium.JulianDate.toIso8601(interval.start); | 505 | 483 | time = Cesium.JulianDate.toIso8601(interval.start); | |
} | 506 | 484 | } | |
507 | 485 | |||
return { | 508 | 486 | return { | |
Time: time, | 509 | 487 | Time: time, | |
}; | 510 | 488 | }; | |
} | 511 | 489 | } | |
512 | 490 | |||
</script> | 513 | 491 | </script> | |
514 | 492 | |||
<script type="module"> | 515 | 493 | <script type="module"> | |
// import { GLTFLoader } from 'https://unpkg.com/three@0.120.1/examples/jsm/loaders/GLTFLoader.js'; | 516 | 494 | // import { GLTFLoader } from 'https://unpkg.com/three@0.120.1/examples/jsm/loaders/GLTFLoader.js'; | |
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area")); | 517 | 495 | window.viewer = new Potree.Viewer(document.getElementById("potree_render_area")); | |
518 | 496 | |||
viewer.setEDLEnabled(true); | 519 | 497 | viewer.setEDLEnabled(true); | |
viewer.useHQ = true; | 520 | 498 | viewer.useHQ = true; | |
viewer.setEDLRadius(1.2); | 521 | 499 | viewer.setEDLRadius(1.2); | |
viewer.setEDLStrength(0.2); | 522 | 500 | viewer.setEDLStrength(0.2); | |
viewer.setFOV(60); | 523 | 501 | viewer.setFOV(60); | |
viewer.setPointBudget(10 * 1000 * 1000); | 524 | 502 | viewer.setPointBudget(10 * 1000 * 1000); | |
viewer.loadSettingsFromURL(); | 525 | 503 | viewer.loadSettingsFromURL(); | |
viewer.setBackground(null); | 526 | 504 | viewer.setBackground(null); | |
527 | 505 | |||
528 | 506 | |||
viewer.setDescription(` `); | 529 | 507 | viewer.setDescription(` `); | |
530 | 508 | |||
viewer.loadGUI(() => { | 531 | 509 | viewer.loadGUI(() => { | |
viewer.setLanguage('en'); | 532 | 510 | viewer.setLanguage('en'); | |
$("#menu_tools").next().show(); | 533 | 511 | $("#menu_tools").next().show(); | |
$("#menu_clipping").next().show(); | 534 | 512 | $("#menu_clipping").next().show(); | |
//viewer.toggleSidebar(); | 535 | 513 | //viewer.toggleSidebar(); | |
}); | 536 | 514 | }); | |
537 | 515 | |||
$(".p_content").draggable(); | 538 | 516 | $(".p_content").draggable(); | |
$(".p_content").resizable(); | 539 | 517 | $(".p_content").resizable(); | |
540 | 518 | |||
const NUM_OF_GROUPS = 9999; | 541 | 519 | const NUM_OF_GROUPS = 9999; | |
// Maps slider to arrays of pointclouds refs | 542 | 520 | // Maps slider to arrays of pointclouds refs | |
window.pointcloudMap = {}; | 543 | 521 | window.pointcloudMap = {}; | |
window.pointclouds = []; | 544 | 522 | window.pointclouds = []; | |
545 | 523 | |||
// initialize empty arrays for each "group" | 546 | 524 | // initialize empty arrays for each "group" | |
for (let i = 1; i <= NUM_OF_GROUPS; i++) { | 547 | 525 | for (let i = 1; i <= NUM_OF_GROUPS; i++) { | |
window.pointcloudMap[i] = []; | 548 | 526 | window.pointcloudMap[i] = []; | |
} | 549 | 527 | } | |
Potree.loadPointCloud("pointclouds/oxkintok_medium/cloud.js", "Oxkintok - Satunsat", e => { | 550 | 528 | Potree.loadPointCloud("pointclouds/oxkintok_medium/cloud.js", "Oxkintok - Satunsat", e => { | |
let scene = viewer.scene; | 551 | 529 | let scene = viewer.scene; | |
let pointcloud = e.pointcloud; | 552 | 530 | let pointcloud = e.pointcloud; | |
let material = pointcloud.material; | 553 | 531 | let material = pointcloud.material; | |
viewer.scene.addPointCloud(pointcloud); | 554 | 532 | viewer.scene.addPointCloud(pointcloud); | |
555 | 533 | |||
e.pointcloud.translateX(191977.1); | 556 | 534 | e.pointcloud.translateX(191977.1); | |
e.pointcloud.translateY(2276370.2); | 557 | 535 | e.pointcloud.translateY(2276370.2); | |
e.pointcloud.translateZ(65.14); | 558 | 536 | e.pointcloud.translateZ(65.14); | |
e.pointcloud.scale.set(0.363, 0.363, 0.363); | 559 | 537 | e.pointcloud.scale.set(0.363, 0.363, 0.363); | |
e.pointcloud.rotateX(-1.474); | 560 | 538 | e.pointcloud.rotateX(-1.474); | |
e.pointcloud.rotateY(-0.626); | 561 | 539 | e.pointcloud.rotateY(-0.626); | |
e.pointcloud.rotateZ(-2.996); | 562 | 540 | e.pointcloud.rotateZ(-2.996); | |
563 | 541 | |||
material.activeAttributeName = "rgba"; | 564 | 542 | material.activeAttributeName = "rgba"; | |
pointcloud.material.intensityRange = [0, 16000]; | 565 | 543 | pointcloud.material.intensityRange = [0, 16000]; | |
material.minSize = 2; | 566 | 544 | material.minSize = 2; | |
material.pointSizeType = Potree.PointSizeType.ADAPTIVE; | 567 | 545 | material.pointSizeType = Potree.PointSizeType.ADAPTIVE; | |
material.shape = Potree.PointShape.CIRCLE; | 568 | 546 | material.shape = Potree.PointShape.CIRCLE; | |
e.pointcloud.visible = false; | 569 | 547 | e.pointcloud.visible = false; | |
viewer.scene.view.position.set(191928.993, 2276368.263, 31.583); | 570 | 548 | viewer.scene.view.position.set(191928.993, 2276368.263, 31.583); | |
let lookAtTarget = new THREE.Vector3(191947.466, 2276366.913, 30.038) | 571 | 549 | let lookAtTarget = new THREE.Vector3(191947.466, 2276366.913, 30.038) | |
viewer.spower | 572 | 550 | viewer.spower | |
viewer.scene.view.lookAt(lookAtTarget); | 573 | 551 | viewer.scene.view.lookAt(lookAtTarget); | |
//viewer.fitToScreen(); | 574 | 552 | //viewer.fitToScreen(); | |
window.pointcloudMap['1'].push(pointcloud); | 575 | 553 | window.pointcloudMap['1'].push(pointcloud); | |
window.pointclouds.push(pointcloud); | 576 | 554 | window.pointclouds.push(pointcloud); | |
577 | 555 | |||
// load the position and target from url | 578 | 556 | // load the position and target from url | |
viewer.loadSettingsFromURL(); | 579 | 557 | viewer.loadSettingsFromURL(); | |
580 | 558 | |||
// function for updating url with current camera position and target | 581 | 559 | // function for updating url with current camera position and target | |
let changeUrl = () => { | 582 | 560 | let changeUrl = () => { | |
const camera = viewer.scene.getActiveCamera(); | 583 | 561 | const camera = viewer.scene.getActiveCamera(); | |
// set the url search param for position | 584 | 562 | // set the url search param for position | |
const url = new URL(window.location); | 585 | 563 | const url = new URL(window.location); | |
const positionSearchParam = "[" + camera.position.x + ";" | 586 | 564 | const positionSearchParam = "[" + camera.position.x + ";" | |
+ camera.position.y + ";" | 587 | 565 | + camera.position.y + ";" | |
+ camera.position.z + "]" | 588 | 566 | + camera.position.z + "]" | |
url.searchParams.set('position', positionSearchParam); | 589 | 567 | url.searchParams.set('position', positionSearchParam); | |
590 | 568 | |||
// get camera target (pivot) | 591 | 569 | // get camera target (pivot) | |
let target = viewer.scene.view.getPivot(); | 592 | 570 | let target = viewer.scene.view.getPivot(); | |
593 | 571 | |||
// set the url search param for camera target | 594 | 572 | // set the url search param for camera target | |
const targetSearchParam = "[" + target.x + ";" | 595 | 573 | const targetSearchParam = "[" + target.x + ";" | |
+ target.y + ";" | 596 | 574 | + target.y + ";" | |
+ target.z + "]" | 597 | 575 | + target.z + "]" | |
url.searchParams.set('target', targetSearchParam); | 598 | 576 | url.searchParams.set('target', targetSearchParam); | |
599 | 577 | |||
// push the url to the history, without refreshing the page | 600 | 578 | // push the url to the history, without refreshing the page | |
history.pushState({}, '', url); | 601 | 579 | history.pushState({}, '', url); | |
}; | 602 | 580 | }; | |
603 | 581 | |||
// run func() when something stops happening | 604 | 582 | // run func() when something stops happening | |
let debounce = (func, wait, immediate) => { | 605 | 583 | let debounce = (func, wait, immediate) => { | |
var timeout; | 606 | 584 | var timeout; | |
return function () { | 607 | 585 | return function () { | |
var context = this, args = arguments; | 608 | 586 | var context = this, args = arguments; | |
var later = function () { | 609 | 587 | var later = function () { | |
timeout = null; | 610 | 588 | timeout = null; | |
if (!immediate) func.apply(context, args); | 611 | 589 | if (!immediate) func.apply(context, args); | |
}; | 612 | 590 | }; | |
var callNow = immediate && !timeout; | 613 | 591 | var callNow = immediate && !timeout; | |
clearTimeout(timeout); | 614 | 592 | clearTimeout(timeout); | |
timeout = setTimeout(later, wait); | 615 | 593 | timeout = setTimeout(later, wait); | |
if (callNow) func.apply(context, args); | 616 | 594 | if (callNow) func.apply(context, args); | |
}; | 617 | 595 | }; | |
}; | 618 | 596 | }; | |
619 | 597 | |||
// change the url only when we stop moving the camera | 620 | 598 | // change the url only when we stop moving the camera | |
viewer.addEventListener("camera_changed", debounce(changeUrl, 250)) | 621 | 599 | viewer.addEventListener("camera_changed", debounce(changeUrl, 250)) | |
622 | 600 | |||
623 | 601 | |||
624 | 602 | |||
625 | 603 | |||
//let pointcloudProjection = e.pointcloud.projection; | 626 | 604 | //let pointcloudProjection = e.pointcloud.projection; | |
let pointcloudProjection = "+proj=utm +zone=16 +ellps=WGS84 +datum=WGS84 +units=m +no_defs"; | 627 | 605 | let pointcloudProjection = "+proj=utm +zone=16 +ellps=WGS84 +datum=WGS84 +units=m +no_defs"; | |
let mapProjection = proj4.defs("WGS84"); | 628 | 606 | let mapProjection = proj4.defs("WGS84"); | |
629 | 607 | |||
window.toMap = proj4(pointcloudProjection, mapProjection); | 630 | 608 | window.toMap = proj4(pointcloudProjection, mapProjection); | |
window.toScene = proj4(mapProjection, pointcloudProjection); | 631 | 609 | window.toScene = proj4(mapProjection, pointcloudProjection); | |
632 | 610 | |||
{ | 633 | 611 | { | |
let bb = viewer.getBoundingBox(); | 634 | 612 | let bb = viewer.getBoundingBox(); | |
635 | 613 | |||
let minWGS84 = proj4(pointcloudProjection, mapProjection, bb.min.toArray()); | 636 | 614 | let minWGS84 = proj4(pointcloudProjection, mapProjection, bb.min.toArray()); | |
let maxWGS84 = proj4(pointcloudProjection, mapProjection, bb.max.toArray()); | 637 | 615 | let maxWGS84 = proj4(pointcloudProjection, mapProjection, bb.max.toArray()); | |
} | 638 | 616 | } | |
639 | 617 | |||
}); | 640 | 618 | }); | |
Potree.loadPointCloud("pointclouds/oxkintok_rc/metadata.json", "oxkintok_rc", e => { | 641 | 619 | Potree.loadPointCloud("pointclouds/oxkintok_rc/metadata.json", "oxkintok_rc", e => { | |
let pointcloud = e.pointcloud; | 642 | 620 | let pointcloud = e.pointcloud; | |
643 | 621 | |||
let material = pointcloud.material; | 644 | 622 | let material = pointcloud.material; | |
viewer.scene.addPointCloud(pointcloud); | 645 | 623 | viewer.scene.addPointCloud(pointcloud); | |
material.activeAttributeName = "intensity"; | 646 | 624 | material.activeAttributeName = "intensity"; | |
pointcloud.material.intensityRange = [0, 300]; | 647 | 625 | pointcloud.material.intensityRange = [0, 300]; | |
material.size = 2; | 648 | 626 | material.size = 2; | |
material.pointSizeType = Potree.PointSizeType.ADAPTIVE; | 649 | 627 | material.pointSizeType = Potree.PointSizeType.ADAPTIVE; | |
material.shape = Potree.PointShape.CIRCLE; | 650 | 628 | material.shape = Potree.PointShape.CIRCLE; | |
e.pointcloud.translateX(191948); | 651 | 629 | e.pointcloud.translateX(191948); | |
e.pointcloud.translateY(2276367); | 652 | 630 | e.pointcloud.translateY(2276367); | |
e.pointcloud.translateZ(25); | 653 | 631 | e.pointcloud.translateZ(25); | |
//e.pointcloud.rotation.set(0,0,2.7); | 654 | 632 | //e.pointcloud.rotation.set(0,0,2.7); | |
//e.pointcloud.position.set(601553.456, 1933499.008, 121.25); | 655 | 633 | //e.pointcloud.position.set(601553.456, 1933499.008, 121.25); | |
e.pointcloud.visible = true; | 656 | 634 | e.pointcloud.visible = true; | |
window.pointcloudMap['2'].push(pointcloud); | 657 | 635 | window.pointcloudMap['2'].push(pointcloud); | |
window.pointclouds.push(pointcloud); | 658 | 636 | window.pointclouds.push(pointcloud); | |
659 | 637 | |||
}); | 660 | 638 | }); | |
661 | 639 | |||
662 | 640 | |||
viewer.scene.addAnnotation([601169.706, 1933313.556, 157.702], { | 663 | 641 | viewer.scene.addAnnotation([601169.706, 1933313.556, 157.702], { | |
title: "Temple of the Inscriptions", | 664 | 642 | title: "Temple of the Inscriptions", | |
description: "Temple of the Inscriptions", | 665 | 643 | description: "Temple of the Inscriptions", | |
cameraPosition: [601196.465, 1933341.498, 171.578], | 666 | 644 | cameraPosition: [601196.465, 1933341.498, 171.578], | |
cameraTarget: [601183.252, 1933306.155, 159.894], | 667 | 645 | cameraTarget: [601183.252, 1933306.155, 159.894], | |
}); | 668 | 646 | }); | |
669 | 647 | |||
viewer.scene.addAnnotation([600979.750, 1933556.750, 118.007], { | 670 | 648 | viewer.scene.addAnnotation([600979.750, 1933556.750, 118.007], { | |
title: "Group 4", | 671 | 649 | title: "Group 4", | |
description: "Group 4", | 672 | 650 | description: "Group 4", | |
cameraPosition: [601018.516, 1933594.135, 144.074], | 673 | 651 | cameraPosition: [601018.516, 1933594.135, 144.074], | |
cameraTarget: [600993.640, 1933553.760, 117.620], | 674 | 652 | cameraTarget: [600993.640, 1933553.760, 117.620], | |
}); | 675 | 653 | }); |
images/MODIS_Terra_Aerosol.png
View file @
9f6da49
593 Bytes