mirror of https://github.com/CesiumGS/cesium.git
243 lines
8.6 KiB
HTML
243 lines
8.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>
|