You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
326 lines
10 KiB
HTML
326 lines
10 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="Apply elevation band material to the globe."
|
|
/>
|
|
<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);
|
|
</style>
|
|
<div id="cesiumContainer" class="fullSize"></div>
|
|
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
|
<div id="toolbar">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>Background Transparency</td>
|
|
<td>
|
|
<input
|
|
type="range"
|
|
min="0.0"
|
|
max="1.0"
|
|
step="0.01"
|
|
data-bind="value: backgroundTransparency, valueUpdate: 'input'"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Band Transparency</td>
|
|
<td>
|
|
<input
|
|
type="range"
|
|
min="0.0"
|
|
max="1.0"
|
|
step="0.01"
|
|
data-bind="value: bandTransparency, valueUpdate: 'input'"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Band Thickness</td>
|
|
<td>
|
|
<input
|
|
type="range"
|
|
min="10"
|
|
max="1000"
|
|
step="1"
|
|
data-bind="value: bandThickness, valueUpdate: 'input'"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Band 1 Position</td>
|
|
<td>
|
|
<input
|
|
type="range"
|
|
min="4000"
|
|
max="8848"
|
|
step="1"
|
|
data-bind="value: band1Position, valueUpdate: 'input'"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Band 2 Position</td>
|
|
<td>
|
|
<input
|
|
type="range"
|
|
min="4000"
|
|
max="8848"
|
|
step="1"
|
|
data-bind="value: band2Position, valueUpdate: 'input'"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Band 3 Position</td>
|
|
<td>
|
|
<input
|
|
type="range"
|
|
min="4000"
|
|
max="8848"
|
|
step="1"
|
|
data-bind="value: band3Position, valueUpdate: 'input'"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Gradient</td>
|
|
<td>
|
|
<input type="checkbox" data-bind="checked: gradient" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script id="cesium_sandcastle_script">
|
|
function startup(Cesium) {
|
|
"use strict";
|
|
//Sandcastle_Begin
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|
terrainProvider: Cesium.createWorldTerrain({
|
|
requestVertexNormals: true, //Needed to visualize slope
|
|
}),
|
|
});
|
|
|
|
viewer.camera.setView({
|
|
destination: new Cesium.Cartesian3(
|
|
290637.5534733206,
|
|
5637471.593707632,
|
|
2978256.8126927214
|
|
),
|
|
orientation: {
|
|
heading: 4.747266966349747,
|
|
pitch: -0.2206998858596192,
|
|
roll: 6.280340554587955,
|
|
},
|
|
});
|
|
|
|
var viewModel = {
|
|
gradient: false,
|
|
band1Position: 7000.0,
|
|
band2Position: 7500.0,
|
|
band3Position: 8000.0,
|
|
bandThickness: 100.0,
|
|
bandTransparency: 0.5,
|
|
backgroundTransparency: 0.75,
|
|
};
|
|
|
|
Cesium.knockout.track(viewModel);
|
|
var toolbar = document.getElementById("toolbar");
|
|
Cesium.knockout.applyBindings(viewModel, toolbar);
|
|
for (var name in viewModel) {
|
|
if (viewModel.hasOwnProperty(name)) {
|
|
Cesium.knockout
|
|
.getObservable(viewModel, name)
|
|
.subscribe(updateMaterial);
|
|
}
|
|
}
|
|
|
|
function updateMaterial() {
|
|
var gradient = Boolean(viewModel.gradient);
|
|
var band1Position = Number(viewModel.band1Position);
|
|
var band2Position = Number(viewModel.band2Position);
|
|
var band3Position = Number(viewModel.band3Position);
|
|
var bandThickness = Number(viewModel.bandThickness);
|
|
var bandTransparency = Number(viewModel.bandTransparency);
|
|
var backgroundTransparency = Number(viewModel.backgroundTransparency);
|
|
|
|
var layers = [];
|
|
var backgroundLayer = {
|
|
entries: [
|
|
{
|
|
height: 4200.0,
|
|
color: new Cesium.Color(0.0, 0.0, 0.2, backgroundTransparency),
|
|
},
|
|
{
|
|
height: 8000.0,
|
|
color: new Cesium.Color(1.0, 1.0, 1.0, backgroundTransparency),
|
|
},
|
|
{
|
|
height: 8500.0,
|
|
color: new Cesium.Color(1.0, 0.0, 0.0, backgroundTransparency),
|
|
},
|
|
],
|
|
extendDownwards: true,
|
|
extendUpwards: true,
|
|
};
|
|
layers.push(backgroundLayer);
|
|
|
|
var gridStartHeight = 4200.0;
|
|
var gridEndHeight = 8848.0;
|
|
var gridCount = 50;
|
|
for (var i = 0; i < gridCount; i++) {
|
|
var lerper = i / (gridCount - 1);
|
|
var heightBelow = Cesium.Math.lerp(
|
|
gridStartHeight,
|
|
gridEndHeight,
|
|
lerper
|
|
);
|
|
var heightAbove = heightBelow + 10.0;
|
|
var alpha =
|
|
Cesium.Math.lerp(0.2, 0.4, lerper) * backgroundTransparency;
|
|
layers.push({
|
|
entries: [
|
|
{
|
|
height: heightBelow,
|
|
color: new Cesium.Color(1.0, 1.0, 1.0, alpha),
|
|
},
|
|
{
|
|
height: heightAbove,
|
|
color: new Cesium.Color(1.0, 1.0, 1.0, alpha),
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
var antialias = Math.min(10.0, bandThickness * 0.1);
|
|
|
|
if (!gradient) {
|
|
var band1 = {
|
|
entries: [
|
|
{
|
|
height: band1Position - bandThickness * 0.5 - antialias,
|
|
color: new Cesium.Color(0.0, 0.0, 1.0, 0.0),
|
|
},
|
|
{
|
|
height: band1Position - bandThickness * 0.5,
|
|
color: new Cesium.Color(0.0, 0.0, 1.0, bandTransparency),
|
|
},
|
|
{
|
|
height: band1Position + bandThickness * 0.5,
|
|
color: new Cesium.Color(0.0, 0.0, 1.0, bandTransparency),
|
|
},
|
|
{
|
|
height: band1Position + bandThickness * 0.5 + antialias,
|
|
color: new Cesium.Color(0.0, 0.0, 1.0, 0.0),
|
|
},
|
|
],
|
|
};
|
|
|
|
var band2 = {
|
|
entries: [
|
|
{
|
|
height: band2Position - bandThickness * 0.5 - antialias,
|
|
color: new Cesium.Color(0.0, 1.0, 0.0, 0.0),
|
|
},
|
|
{
|
|
height: band2Position - bandThickness * 0.5,
|
|
color: new Cesium.Color(0.0, 1.0, 0.0, bandTransparency),
|
|
},
|
|
{
|
|
height: band2Position + bandThickness * 0.5,
|
|
color: new Cesium.Color(0.0, 1.0, 0.0, bandTransparency),
|
|
},
|
|
{
|
|
height: band2Position + bandThickness * 0.5 + antialias,
|
|
color: new Cesium.Color(0.0, 1.0, 0.0, 0.0),
|
|
},
|
|
],
|
|
};
|
|
|
|
var band3 = {
|
|
entries: [
|
|
{
|
|
height: band3Position - bandThickness * 0.5 - antialias,
|
|
color: new Cesium.Color(1.0, 0.0, 0.0, 0.0),
|
|
},
|
|
{
|
|
height: band3Position - bandThickness * 0.5,
|
|
color: new Cesium.Color(1.0, 0.0, 0.0, bandTransparency),
|
|
},
|
|
{
|
|
height: band3Position + bandThickness * 0.5,
|
|
color: new Cesium.Color(1.0, 0.0, 0.0, bandTransparency),
|
|
},
|
|
{
|
|
height: band3Position + bandThickness * 0.5 + antialias,
|
|
color: new Cesium.Color(1.0, 0.0, 0.0, 0.0),
|
|
},
|
|
],
|
|
};
|
|
|
|
layers.push(band1);
|
|
layers.push(band2);
|
|
layers.push(band3);
|
|
} else {
|
|
var combinedBand = {
|
|
entries: [
|
|
{
|
|
height: band1Position - bandThickness * 0.5,
|
|
color: new Cesium.Color(0.0, 0.0, 1.0, bandTransparency),
|
|
},
|
|
{
|
|
height: band2Position,
|
|
color: new Cesium.Color(0.0, 1.0, 0.0, bandTransparency),
|
|
},
|
|
{
|
|
height: band3Position + bandThickness * 0.5,
|
|
color: new Cesium.Color(1.0, 0.0, 0.0, bandTransparency),
|
|
},
|
|
],
|
|
};
|
|
|
|
layers.push(combinedBand);
|
|
}
|
|
|
|
var material = Cesium.createElevationBandMaterial({
|
|
scene: viewer.scene,
|
|
layers: layers,
|
|
});
|
|
viewer.scene.globe.material = material;
|
|
}
|
|
|
|
updateMaterial();
|
|
//Sandcastle_End
|
|
Sandcastle.finishedLoading();
|
|
}
|
|
if (typeof Cesium !== "undefined") {
|
|
window.startupCalled = true;
|
|
startup(Cesium);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|