Garrett Luu / Oxkintok

Download as
Browse Code »

Commit 9f6da49531d69002e01b18e4c4e0bdca7d347370

Authored by Garrett Luu
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">&nbsp;</span> 296 296 <span class="legend-color">&nbsp;</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