316 lines
9.6 KiB
HTML
316 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
|
/>
|
|
<meta
|
|
name="description"
|
|
content="View datasets underneath the surface with globe translucency."
|
|
/>
|
|
<meta name="cesium-sandcastle-labels" content="Showcases" />
|
|
<title>Cesium Demo</title>
|
|
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="../../../Build/CesiumUnminified/Cesium.js"
|
|
nomodule
|
|
></script>
|
|
<script type="module" src="../load-cesium-es6.js"></script>
|
|
</head>
|
|
<body
|
|
class="sandcastle-loading"
|
|
data-sandcastle-bucket="bucket-requirejs.html"
|
|
>
|
|
<style>
|
|
@import url(../templates/bucket.css);
|
|
#toolbar {
|
|
background: rgba(42, 42, 42, 0.8);
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
#toolbar input {
|
|
vertical-align: middle;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
#toolbar .header {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
<div id="cesiumContainer" class="fullSize"></div>
|
|
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
|
<div id="toolbar">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>Translucency enabled</td>
|
|
<td>
|
|
<input type="checkbox" data-bind="checked: translucencyEnabled" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Fade by distance</td>
|
|
<td>
|
|
<input type="checkbox" data-bind="checked: fadeByDistance" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Show vector data</td>
|
|
<td>
|
|
<input type="checkbox" data-bind="checked: showVectorData" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Alpha</td>
|
|
<td>
|
|
<input
|
|
type="range"
|
|
min="0.0"
|
|
max="1.0"
|
|
step="0.1"
|
|
data-bind="value: alpha, valueUpdate: 'input'"
|
|
/>
|
|
<input type="text" size="5" data-bind="value: alpha" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script id="cesium_sandcastle_script">
|
|
window.startup = async function (Cesium) {
|
|
"use strict";
|
|
//Sandcastle_Begin
|
|
const viewer = new Cesium.Viewer("cesiumContainer", {
|
|
terrain: Cesium.Terrain.fromWorldTerrain(),
|
|
});
|
|
|
|
const scene = viewer.scene;
|
|
const globe = scene.globe;
|
|
|
|
scene.screenSpaceCameraController.enableCollisionDetection = false;
|
|
globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
|
|
400.0,
|
|
0.0,
|
|
800.0,
|
|
1.0
|
|
);
|
|
|
|
const longitude = -3.82518;
|
|
const latitude = 53.11728;
|
|
const height = 72.8;
|
|
const position = Cesium.Cartesian3.fromDegrees(
|
|
longitude,
|
|
latitude,
|
|
height
|
|
);
|
|
const url = "../../SampleData/models/ParcLeadMine/ParcLeadMine.glb";
|
|
|
|
const entity = viewer.entities.add({
|
|
name: url,
|
|
position: position,
|
|
model: {
|
|
uri: url,
|
|
},
|
|
});
|
|
|
|
const polygon = viewer.entities.add({
|
|
polygon: {
|
|
hierarchy: new Cesium.PolygonHierarchy(
|
|
Cesium.Cartesian3.fromDegreesArrayHeights([
|
|
-3.8152789692233817,
|
|
53.124521420389996,
|
|
200.20779492422255,
|
|
-3.8165955002619016,
|
|
53.12555934545405,
|
|
205.85834336951655,
|
|
-3.8201599842222054,
|
|
53.12388420656903,
|
|
230.82362697069453,
|
|
-3.8198667503545027,
|
|
53.123748567587455,
|
|
225.53297006293968,
|
|
-3.8190548496317476,
|
|
53.1240486000822,
|
|
221.82677773619432,
|
|
-3.817536387097508,
|
|
53.122763476393764,
|
|
209.94136782255705,
|
|
-3.8169125359199336,
|
|
53.12285547981627,
|
|
210.96626238861327,
|
|
-3.8166873871853073,
|
|
53.12299403424474,
|
|
211.02223937734595,
|
|
-3.8163695374580873,
|
|
53.12300505277307,
|
|
211.25942926271824,
|
|
-3.8162743040622313,
|
|
53.12281471203994,
|
|
212.35109129094147,
|
|
-3.8159746138174193,
|
|
53.12280996651767,
|
|
214.87977416348798,
|
|
-3.815429896849304,
|
|
53.1236135347983,
|
|
209.72496223706005,
|
|
])
|
|
),
|
|
material: Cesium.Color.LIME.withAlpha(0.5),
|
|
classificationType: Cesium.ClassificationType.TERRAIN,
|
|
},
|
|
});
|
|
|
|
const polyline = viewer.entities.add({
|
|
polyline: {
|
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
|
|
-3.8098444201746373,
|
|
53.1190304262546,
|
|
286.1875170545701,
|
|
-3.8099801237370663,
|
|
53.119539531697576,
|
|
288.7733884242394,
|
|
-3.810165716635671,
|
|
53.11979180761567,
|
|
290.9294630315179,
|
|
-3.8104840812145357,
|
|
53.12007534956926,
|
|
292.6392327626228,
|
|
-3.8105689502073554,
|
|
53.120259094792196,
|
|
292.222036965774,
|
|
-3.811027311824268,
|
|
53.120409248874196,
|
|
289.61356291617307,
|
|
-3.811530473295422,
|
|
53.12063281057782,
|
|
284.01098712543586,
|
|
-3.8120545342562693,
|
|
53.120742539082435,
|
|
280.118191867836,
|
|
-3.812444493044727,
|
|
53.120813289759326,
|
|
276.0400221387852,
|
|
-3.812779626711285,
|
|
53.12094275348024,
|
|
271.1187399484896,
|
|
-3.8133560322579494,
|
|
53.12104757866638,
|
|
263.3495497598578,
|
|
-3.8137266493960085,
|
|
53.12120789867194,
|
|
257.73878624321316,
|
|
-3.8142552291751133,
|
|
53.121321248522904,
|
|
251.87265828778177,
|
|
-3.814322603988525,
|
|
53.12174170121103,
|
|
238.7082749547689,
|
|
-3.8143764268391314,
|
|
53.1219492923309,
|
|
235.0371831845662,
|
|
-3.8148156514145786,
|
|
53.12210819668669,
|
|
230.2458816627467,
|
|
-3.8155394721966163,
|
|
53.1222990144029,
|
|
221.33319292262706,
|
|
-3.8159828072920927,
|
|
53.12203093429715,
|
|
223.66664756982703,
|
|
-3.816678108944717,
|
|
53.12183939425214,
|
|
223.8787312412801,
|
|
-3.817466081093726,
|
|
53.121751900508535,
|
|
224.52293229989735,
|
|
-3.8183082996527955,
|
|
53.12173266141031,
|
|
223.3672181535749,
|
|
]),
|
|
width: 8,
|
|
material: new Cesium.PolylineOutlineMaterialProperty({
|
|
color: Cesium.Color.YELLOW,
|
|
outlineWidth: 2,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
}),
|
|
clampToGround: true,
|
|
},
|
|
});
|
|
|
|
const viewModel = {
|
|
translucencyEnabled: true,
|
|
fadeByDistance: true,
|
|
showVectorData: false,
|
|
alpha: 0.5,
|
|
};
|
|
|
|
Cesium.knockout.track(viewModel);
|
|
const toolbar = document.getElementById("toolbar");
|
|
Cesium.knockout.applyBindings(viewModel, toolbar);
|
|
for (const name in viewModel) {
|
|
if (viewModel.hasOwnProperty(name)) {
|
|
Cesium.knockout.getObservable(viewModel, name).subscribe(update);
|
|
}
|
|
}
|
|
|
|
function update() {
|
|
globe.translucency.enabled = viewModel.translucencyEnabled;
|
|
|
|
let alpha = Number(viewModel.alpha);
|
|
alpha = !isNaN(alpha) ? alpha : 1.0;
|
|
alpha = Cesium.Math.clamp(alpha, 0.0, 1.0);
|
|
|
|
globe.translucency.frontFaceAlphaByDistance.nearValue = alpha;
|
|
globe.translucency.frontFaceAlphaByDistance.farValue = viewModel.fadeByDistance
|
|
? 1.0
|
|
: alpha;
|
|
|
|
polygon.show = viewModel.showVectorData;
|
|
polyline.show = viewModel.showVectorData;
|
|
}
|
|
update();
|
|
|
|
viewer.scene.camera.setView({
|
|
destination: new Cesium.Cartesian3(
|
|
3826465.9884728403,
|
|
-254831.02751468265,
|
|
5081387.671561018
|
|
),
|
|
orientation: new Cesium.HeadingPitchRoll(
|
|
3.3889450556243754,
|
|
-0.5276382514771969,
|
|
6.282272566663295
|
|
),
|
|
endTransform: Cesium.Matrix4.IDENTITY,
|
|
});
|
|
|
|
viewer.scene.camera.flyTo({
|
|
destination: new Cesium.Cartesian3(
|
|
3827270.552916987,
|
|
-255123.18143177085,
|
|
5079147.091351856
|
|
),
|
|
orientation: new Cesium.HeadingPitchRoll(
|
|
3.2624281242239963,
|
|
-0.22213535190506972,
|
|
6.282786783842843
|
|
),
|
|
duration: 0.0,
|
|
}); //Sandcastle_End
|
|
};
|
|
if (typeof Cesium !== "undefined") {
|
|
window.startupCalled = true;
|
|
window.startup(Cesium).catch((error) => {
|
|
"use strict";
|
|
console.error(error);
|
|
});
|
|
Sandcastle.finishedLoading();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|