Skip to content

GitLab

Commit 2dbd8f1f authored by Schaaf's avatar Schaaf
Browse files

Initial commit

parents
Show whitespace changes
Inline Side-by-side
Sandcastle/gallery/Earth at Night.html 0 → 100644
View file @ 2dbd8f1f
<!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="NASA-generated imagery of the earth at night hosted on Cesium ion. Also known as Black Marble and Night Lights."
/>
<meta name="cesium-sandcastle-labels" content="ion Assets" />
<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"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// The Earth at Night, also known as Black Marble 2017 and Night Lights
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3812 }),
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Export KML.html 0 → 100644
View file @ 2dbd8f1f
<!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="How to export a subset of a CesiumJS scene as a KML/KMZ file."
/>
<meta name="cesium-sandcastle-labels" content="Showcases, DataSources" />
<title>Export KML</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">
<div id="propertiesMenu"></div>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var modelCzml = [
{
id: "document",
name: "CZML Model",
version: "1.0",
},
{
id: "aircraft model",
name: "Cesium Air",
position: {
cartographicDegrees: [-77, 37, 0],
},
model: {
gltf:
"../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
},
},
];
function downloadBlob(filename, blob) {
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
var elem = window.document.createElement("a");
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
}
function reset() {
viewer.trackedEntity = undefined;
viewer.dataSources.removeAll();
}
// We fetch the resources that will be embedded in the KMZ file.
var daeModelPromise = Cesium.Resource.fetchBlob({
url: "../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.dae",
});
var texturePromise = Cesium.Resource.fetchBlob({
url: "../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.png",
});
// This callback allows us to set the URL of the model to use
// a COLLADA version of the model instead of the glTF version.
// It also lets us specify the files that will be embedded in the exported KMZ.
function modelCallback(modelGraphics, time, externalFiles) {
var resource = modelGraphics.uri.getValue(time);
if (resource.url.indexOf("CesiumMilkTruck") !== -1) {
externalFiles["model/CesiumMilkTruck.dae"] = daeModelPromise;
externalFiles["model/CesiumMilkTruck.png"] = texturePromise;
return "model/CesiumMilkTruck.dae";
}
throw Cesium.RuntimeError("Unknown Model");
}
var filenameToSave = "";
var dataSourcePromise;
Sandcastle.addToolbarMenu(
[
{
text: "Satellites",
onselect: function () {
reset();
filenameToSave = "Satellites.kmz";
dataSourcePromise = Cesium.CzmlDataSource.load(
"../../SampleData/simple.czml"
);
viewer.dataSources.add(dataSourcePromise);
viewer.camera.flyHome(0);
},
},
{
text: "Model",
onselect: function () {
reset();
filenameToSave = "Model.kmz";
dataSourcePromise = Cesium.CzmlDataSource.load(modelCzml);
viewer.dataSources
.add(dataSourcePromise)
.then(function (dataSource) {
viewer.trackedEntity = dataSource.entities.getById(
"aircraft model"
);
});
},
},
],
"propertiesMenu"
);
Sandcastle.addToolbarButton("Download", function () {
dataSourcePromise
.then(function (dataSource) {
return Cesium.exportKml({
entities: dataSource.entities,
kmz: true,
modelCallback: modelCallback,
});
})
.then(function (result) {
downloadBlob(filenameToSave, result.kmz);
});
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/FXAA.html 0 → 100644
View file @ 2dbd8f1f
<!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="Add FXAA to the scene." />
<meta name="cesium-sandcastle-labels" content="Post Processing" />
<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"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(
1331419.302230775,
-4656681.5022043325,
4136232.6465900405
),
orientation: new Cesium.HeadingPitchRoll(
6.032455545102689,
-0.056832496140112765,
6.282360923090216
),
endTransform: Cesium.Matrix4.IDENTITY,
});
viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(75343),
})
);
viewer.scene.postProcessStages.fxaa.enabled = true;
Sandcastle.addToggleButton("FXAA", true, function (checked) {
viewer.scene.postProcessStages.fxaa.enabled = checked;
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/GeoJSON and TopoJSON.html 0 → 100644
View file @ 2dbd8f1f
<!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="Load GeoJSON or TopoJSON data and apply custom styling."
/>
<meta
name="cesium-sandcastle-labels"
content="Showcases, Tutorials, DataSources"
/>
<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"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
//Example 1: Load with default styling.
Sandcastle.addDefaultToolbarButton("Default styling", function () {
viewer.dataSources.add(
Cesium.GeoJsonDataSource.load(
"../../SampleData/ne_10m_us_states.topojson"
)
);
});
//Example 2: Load with basic styling options.
Sandcastle.addToolbarButton("Basic styling", function () {
viewer.dataSources.add(
Cesium.GeoJsonDataSource.load(
"../../SampleData/ne_10m_us_states.topojson",
{
stroke: Cesium.Color.HOTPINK,
fill: Cesium.Color.PINK.withAlpha(0.5),
strokeWidth: 3,
}
)
);
});
//Example 3: Apply custom graphics after load.
Sandcastle.addToolbarButton("Custom styling", function () {
//Seed the random number generator for repeatable results.
Cesium.Math.setRandomNumberSeed(0);
var promise = Cesium.GeoJsonDataSource.load(
"../../SampleData/ne_10m_us_states.topojson"
);
promise
.then(function (dataSource) {
viewer.dataSources.add(dataSource);
//Get the array of entities
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
//For each entity, create a random color based on the state name.
//Some states have multiple entities, so we store the color in a
//hash so that we use the same color for the entire state.
var entity = entities[i];
var name = entity.name;
var color = colorHash[name];
if (!color) {
color = Cesium.Color.fromRandom({
alpha: 1.0,
});
colorHash[name] = color;
}
//Set the polygon material to our random color.
entity.polygon.material = color;
//Remove the outlines.
entity.polygon.outline = false;
//Extrude the polygon based on the state's population. Each entity
//stores the properties for the GeoJSON feature it was created from
//Since the population is a huge number, we divide by 50.
entity.polygon.extrudedHeight =
entity.properties.Population / 50.0;
}
})
.otherwise(function (error) {
//Display any errrors encountered while loading.
window.alert(error);
});
});
//Reset the scene when switching demos.
Sandcastle.reset = function () {
viewer.dataSources.removeAll();
//Set the camera to a US centered tilted view and switch back to moving in world coordinates.
viewer.camera.lookAt(
Cesium.Cartesian3.fromDegrees(-98.0, 40.0),
new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
};
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/GeoJSON simplestyle.html 0 → 100644
View file @ 2dbd8f1f
<!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="Load GeoJSON with simplestyle information."
/>
<meta name="cesium-sandcastle-labels" content="Showcases, DataSources" />
<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"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
//Load a GeoJSON file containing simplestyle information.
//To learn more about simplestyle, see https://github.com/mapbox/simplestyle-spec
//In this particular example, the name of each entity is set to its maki icon identifier.
//Clicking on each billboard will show it's identifier in the InfoBox.
var viewer = new Cesium.Viewer("cesiumContainer", {
sceneMode: Cesium.SceneMode.SCENE2D,
timeline: false,
animation: false,
});
var dataSource = Cesium.GeoJsonDataSource.load(
"../../SampleData/simplestyles.geojson"
);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Geometry Height Reference.html 0 → 100644
View file @ 2dbd8f1f
<!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="An example for how to use the HeightReference property on different geometry entities."
/>
<meta name="cesium-sandcastle-labels" content="Geometries" />
<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"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var cesiumTerrainProvider = Cesium.createWorldTerrain();
var ellipsoidTerrainProvider = new Cesium.EllipsoidTerrainProvider();
var viewer = new Cesium.Viewer("cesiumContainer", {
baseLayerPicker: false,
terrainProvider: cesiumTerrainProvider,
});
// depth test against terrain is required to make the polygons clamp to terrain
// instead of showing through it from underground
viewer.scene.globe.depthTestAgainstTerrain = true;
Sandcastle.addToolbarMenu([
{
text: "Polygons",
onselect: function () {
viewer.entities.removeAll();
addPolygons();
},
},
{
text: "Boxes, Cylinders and Ellipsoids",
onselect: function () {
viewer.entities.removeAll();
addGeometries();
},
},
]);
Sandcastle.addToolbarMenu([
{
text: "Terrain Enabled",
onselect: function () {
viewer.scene.terrainProvider = cesiumTerrainProvider;
},
},
{
text: "Terrain Disabled",
onselect: function () {
viewer.scene.terrainProvider = ellipsoidTerrainProvider;
},
},
]);
var longitude = 6.950615989890521;
var latitude = 45.79546589994886;
var delta = 0.001;
function addGeometry(i, j) {
var west = longitude + delta * i;
var north = latitude + delta * j + delta;
var type = Math.floor(Math.random() * 3);
if (type === 0) {
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(west, north, 0.0),
box: {
dimensions: new Cesium.Cartesian3(40.0, 30.0, 50.0),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
} else if (type === 1) {
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(west, north, 0.0),
cylinder: {
length: 50.0,
topRadius: 20.0,
bottomRadius: 20.0,
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
} else {
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(west, north, 0.0),
ellipsoid: {
radii: new Cesium.Cartesian3(20.0, 15.0, 25.0),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
}
}
function addGeometries() {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
addGeometry(i, j);
}
}
viewer.zoomTo(viewer.entities);
}
function addPolygon(i, j) {
var west = longitude + delta * i;
var east = longitude + delta * i + delta;
var south = latitude + delta * j;
var north = latitude + delta * j + delta;
var a = Cesium.Cartesian3.fromDegrees(west, south);
var b = Cesium.Cartesian3.fromDegrees(west, north);
var c = Cesium.Cartesian3.fromDegrees(east, north);
var d = Cesium.Cartesian3.fromDegrees(east, south);
var positions = [a, b, c, d];
viewer.entities.add({
polygon: {
hierarchy: positions,
material: Cesium.Color.fromRandom({ alpha: 1 }),
height: 40.0,
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
extrudedHeight: 0.0,
extrudedHeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
}
function addPolygons() {
// create 16 polygons that are side-by-side
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
addPolygon(i, j);
}
}
viewer.camera.lookAt(
Cesium.Cartesian3.fromDegrees(longitude, latitude, 1500),
new Cesium.HeadingPitchRange(
-Cesium.Math.PI / 2,
-Cesium.Math.PI_OVER_FOUR,
2000
)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
}
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Geometry and Appearances.html 0 → 100644
View file @ 2dbd8f1f
<!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="Demonstrates the wide variety of available geometry and appearances."
/>
<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"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
Cesium.Math.setRandomNumberSeed(1234);
var viewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });
var entities = viewer.entities;
var i;
var height;
var positions;
var stripeMaterial = new Cesium.StripeMaterialProperty({
evenColor: Cesium.Color.WHITE.withAlpha(0.5),
oddColor: Cesium.Color.BLUE.withAlpha(0.5),
repeat: 5.0,
});
entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-92.0, 20.0, -86.0, 27.0),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
stRotation: Cesium.Math.toRadians(45),
material: stripeMaterial,
},
});
entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
-107.0,
27.0,
-107.0,
22.0,
-102.0,
23.0,
-97.0,
21.0,
-97.0,
25.0,
])
),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
material: stripeMaterial,
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-80.0, 25.0),
ellipse: {
semiMinorAxis: 300000.0,
semiMajorAxis: 500000.0,
rotation: Cesium.Math.toRadians(-40.0),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
stRotation: Cesium.Math.toRadians(22),
material: stripeMaterial,
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-72.0, 25.0),
ellipse: {
semiMinorAxis: 250000.0,
semiMajorAxis: 250000.0,
rotation: Cesium.Math.toRadians(-40.0),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
stRotation: Cesium.Math.toRadians(90),
material: stripeMaterial,
},
});
entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-118.0,
38.0,
-116.0,
40.0
),
extrudedHeight: 500000.0,
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
stRotation: Cesium.Math.toRadians(45),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-117.0, 35.0),
ellipse: {
semiMinorAxis: 100000.0,
semiMajorAxis: 200000.0,
height: 100000.0,
extrudedHeight: 200000.0,
rotation: Cesium.Math.toRadians(90.0),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
-118.0,
30.0,
-115.0,
30.0,
-117.1,
31.1,
-118.0,
33.0,
])
),
height: 300000.0,
extrudedHeight: 700000.0,
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-70.0, 45.0, 100000.0),
cylinder: {
hierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
-118.0,
30.0,
-115.0,
30.0,
-117.1,
31.1,
-118.0,
33.0,
])
),
length: 200000.0,
topRadius: 150000.0,
bottomRadius: 150000.0,
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
for (i = 0; i < 5; ++i) {
height = 100000.0 + 200000.0 * i;
entities.add({
position: Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
box: {
dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2,
material: Cesium.Color.fromRandom({ alpha: 0.5 }),
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-102.0, 45.0, height),
ellipsoid: {
radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2,
material: Cesium.Color.fromRandom({ alpha: 0.5 }),
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-98.0, 45.0, height),
ellipsoid: {
radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2,
material: Cesium.Color.fromRandom({ alpha: 0.5 }),
},
});
}
entities.add({
wall: {
positions: Cesium.Cartesian3.fromDegreesArray([
-95.0,
50.0,
-85.0,
50.0,
-75.0,
50.0,
]),
maximumHeights: [500000, 1000000, 500000],
minimumHeights: [0, 500000, 0],
outline: true,
outlineColor: Cesium.Color.LIGHTGRAY,
outlineWidth: 4,
material: Cesium.Color.fromRandom({ alpha: 0.7 }),
},
});
entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -85.0, 40.0),
material: stripeMaterial,
},
});
entities.add({
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([
-109.0,
30.0,
-95.0,
30.0,
-95.0,
40.0,
-109.0,
40.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-107.0,
31.0,
-107.0,
39.0,
-97.0,
39.0,
-97.0,
31.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-105.0,
33.0,
-99.0,
33.0,
-99.0,
37.0,
-105.0,
37.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-103.0,
34.0,
-101.0,
34.0,
-101.0,
36.0,
-103.0,
36.0,
]),
},
],
},
],
},
],
},
material: stripeMaterial,
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-80.0, 35.0),
ellipse: {
semiMinorAxis: 200000.0,
semiMajorAxis: 500000.0,
rotation: Cesium.Math.toRadians(30.0),
material: stripeMaterial,
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-72.0, 35.0),
ellipse: {
semiMinorAxis: 200000.0,
semiMajorAxis: 200000.0,
rotation: Cesium.Math.toRadians(30.0),
material: stripeMaterial,
},
});
entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-110.0,
38.0,
-107.0,
40.0
),
height: 700000.0,
extrudedHeight: 1000000.0,
rotation: Cesium.Math.toRadians(45),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-110.0, 35.0),
ellipse: {
semiMinorAxis: 100000.0,
semiMajorAxis: 200000.0,
height: 300000.0,
extrudedHeight: 700000.0,
rotation: Cesium.Math.toRadians(-40.0),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
-113.0,
30.0,
-110.0,
30.0,
-110.0,
33.0,
-111.5,
31.0,
-113.0,
33.0,
])
),
extrudedHeight: 300000.0,
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-70.0, 40.0, 200000.0),
cylinder: {
hierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
-118.0,
30.0,
-115.0,
30.0,
-117.1,
31.1,
-118.0,
33.0,
])
),
length: 400000.0,
topRadius: 0.0,
bottomRadius: 200000.0,
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
for (i = 0; i < 5; ++i) {
height = 200000.0 * i;
entities.add({
position: Cesium.Cartesian3.fromDegrees(-65.0, 35.0),
ellipse: {
semiMinorAxis: 200000.0,
semiMajorAxis: 200000.0,
height: height,
material: Cesium.Color.fromRandom({ alpha: 0.5 }),
},
});
entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-67.0,
27.0,
-63.0,
32.0
),
height: height,
material: Cesium.Color.fromRandom({ alpha: 0.5 }),
},
});
}
for (i = 0; i < 5; ++i) {
height = 100000.0 + 200000.0 * i;
entities.add({
position: Cesium.Cartesian3.fromDegrees(-108.0, 45.0, height),
box: {
dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-104.0, 45.0, height),
ellipsoid: {
radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
position: Cesium.Cartesian3.fromDegrees(-100.0, 45.0, height),
ellipsoid: {
radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
}
positions = [];
for (i = 0; i < 40; ++i) {
positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 15.0));
}
entities.add({
polyline: {
positions: positions,
width: 10.0,
material: new Cesium.PolylineGlowMaterialProperty({
color: Cesium.Color.DEEPSKYBLUE,
glowPower: 0.25,
}),
},
});
positions = [];
for (i = 0; i < 40; ++i) {
positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 9.0));
}
entities.add({
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-90.0,
43.0,
100000.0,
-87.5,
45.0,
100000.0,
-85.0,
43.0,
100000.0,
-87.5,
41.0,
100000.0,
-90.0,
43.0,
100000.0,
]),
material: new Cesium.CheckerboardMaterialProperty({
repeat: new Cesium.Cartesian2(20.0, 6.0),
}),
},
});
entities.add({
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-120.0,
45.0,
-125.0,
50.0,
-125.0,
55.0,
]),
width: 100000,
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-120.0,
45.0,
-125.0,
50.0,
-125.0,
55.0,
]),
width: 100000,
height: 300000,
extrudedHeight: 400000,
material: Cesium.Color.fromRandom({ alpha: 0.7 }),
},
});
entities.add({
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-120.0,
45.0,
-125.0,
50.0,
-125.0,
55.0,
]),
width: 100000,
height: 700000,
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 4,
material: Cesium.Color.fromRandom({ alpha: 0.7 }),
},
});
function starPositions(arms, rOuter, rInner) {
var angle = Math.PI / arms;
var pos = [];
for (var i = 0; i < 2 * arms; i++) {
var r = i % 2 === 0 ? rOuter : rInner;
var p = new Cesium.Cartesian2(
Math.cos(i * angle) * r,
Math.sin(i * angle) * r
);
pos.push(p);
}
return pos;
}
entities.add({
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-102.0,
15.0,
100000.0,
-105.0,
20.0,
200000.0,
-110.0,
20.0,
100000.0,
]),
shape: starPositions(7, 30000.0, 20000.0),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 1,
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArray([
-102.0,
15.0,
-105.0,
20.0,
-110.0,
20.0,
]),
shape: starPositions(7, 30000.0, 20000.0),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
function computeCircle(radius) {
var positions = [];
for (var i = 0; i < 360; i++) {
var radians = Cesium.Math.toRadians(i);
positions.push(
new Cesium.Cartesian2(
radius * Math.cos(radians),
radius * Math.sin(radians)
)
);
}
return positions;
}
entities.add({
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArray([
-104.0,
13.0,
-107.0,
18.0,
-112.0,
18.0,
]),
shape: computeCircle(40000.0),
material: Cesium.Color.WHITE,
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Globe Materials.html 0 → 100644
View file @ 2dbd8f1f
<!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 materials 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);
.demo-container {
background-color: #303336;
border-radius: 5px;
padding: 5px;
margin: 5px 3px;
}
.demo-container input {
vertical-align: middle;
margin-top: 0;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<div id="zoomButtons"></div>
<div class="demo-container">
<label
><input
type="radio"
name="shadingMaterials"
value="none"
data-bind="checked: selectedShading"
/>
No shading</label
>
<label
><input
type="radio"
name="shadingMaterials"
value="elevation"
data-bind="checked: selectedShading"
/>
Elevation</label
>
<label
><input
type="radio"
name="shadingMaterials"
value="slope"
data-bind="checked: selectedShading"
/>
Slope</label
>
<label
><input
type="radio"
name="shadingMaterials"
value="aspect"
data-bind="checked: selectedShading"
/>
Aspect</label
>
</div>
<div class="demo-container">
<div>
<label
><input type="checkbox" data-bind="checked: enableContour" />Enable
Contour Lines</label
>
</div>
<div>
Spacing
<input
style="width: 136px;"
type="range"
min="1.0"
max="500.0"
step="1.0"
data-bind="value: contourSpacing, valueUpdate: 'input', enable: enableContour"
/>
<span data-bind="text: contourSpacing"></span>m
</div>
<div>
Line Width
<input
style="width: 125px;"
type="range"
min="1.0"
max="10.0"
step="1.0"
data-bind="value: contourWidth, valueUpdate: 'input', enable: enableContour"
/>
<span data-bind="text: contourWidth"></span>px
</div>
<div>
<button
type="button"
data-bind="click: changeColor, enable: enableContour"
>
Change contour color
</button>
</div>
</div>
</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.scene.globe.enableLighting = true;
function getElevationContourMaterial() {
// Creates a composite material with both elevation shading and contour lines
return new Cesium.Material({
fabric: {
type: "ElevationColorContour",
materials: {
contourMaterial: {
type: "ElevationContour",
},
elevationRampMaterial: {
type: "ElevationRamp",
},
},
components: {
diffuse:
"contourMaterial.alpha == 0.0 ? elevationRampMaterial.diffuse : contourMaterial.diffuse",
alpha:
"max(contourMaterial.alpha, elevationRampMaterial.alpha)",
},
},
translucent: false,
});
}
function getSlopeContourMaterial() {
// Creates a composite material with both slope shading and contour lines
return new Cesium.Material({
fabric: {
type: "SlopeColorContour",
materials: {
contourMaterial: {
type: "ElevationContour",
},
slopeRampMaterial: {
type: "SlopeRamp",
},
},
components: {
diffuse:
"contourMaterial.alpha == 0.0 ? slopeRampMaterial.diffuse : contourMaterial.diffuse",
alpha: "max(contourMaterial.alpha, slopeRampMaterial.alpha)",
},
},
translucent: false,
});
}
function getAspectContourMaterial() {
// Creates a composite material with both aspect shading and contour lines
return new Cesium.Material({
fabric: {
type: "AspectColorContour",
materials: {
contourMaterial: {
type: "ElevationContour",
},
aspectRampMaterial: {
type: "AspectRamp",
},
},
components: {
diffuse:
"contourMaterial.alpha == 0.0 ? aspectRampMaterial.diffuse : contourMaterial.diffuse",
alpha: "max(contourMaterial.alpha, aspectRampMaterial.alpha)",
},
},
translucent: false,
});
}
var elevationRamp = [0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0];
var slopeRamp = [0.0, 0.29, 0.5, Math.sqrt(2) / 2, 0.87, 0.91, 1.0];
var aspectRamp = [0.0, 0.2, 0.4, 0.6, 0.8, 0.9, 1.0];
function getColorRamp(selectedShading) {
var ramp = document.createElement("canvas");
ramp.width = 100;
ramp.height = 1;
var ctx = ramp.getContext("2d");
var values;
if (selectedShading === "elevation") {
values = elevationRamp;
} else if (selectedShading === "slope") {
values = slopeRamp;
} else if (selectedShading === "aspect") {
values = aspectRamp;
}
var grd = ctx.createLinearGradient(0, 0, 100, 0);
grd.addColorStop(values[0], "#000000"); //black
grd.addColorStop(values[1], "#2747E0"); //blue
grd.addColorStop(values[2], "#D33B7D"); //pink
grd.addColorStop(values[3], "#D33038"); //red
grd.addColorStop(values[4], "#FF9742"); //orange
grd.addColorStop(values[5], "#ffd700"); //yellow
grd.addColorStop(values[6], "#ffffff"); //white
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 100, 1);
return ramp;
}
var minHeight = -414.0; // approximate dead sea elevation
var maxHeight = 8777.0; // approximate everest elevation
var contourColor = Cesium.Color.RED.clone();
var contourUniforms = {};
var shadingUniforms = {};
// The viewModel tracks the state of our mini application.
var viewModel = {
enableContour: false,
contourSpacing: 150.0,
contourWidth: 2.0,
selectedShading: "elevation",
changeColor: function () {
contourUniforms.color = Cesium.Color.fromRandom(
{ alpha: 1.0 },
contourColor
);
},
};
// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);
// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
function updateMaterial() {
var hasContour = viewModel.enableContour;
var selectedShading = viewModel.selectedShading;
var globe = viewer.scene.globe;
var material;
if (hasContour) {
if (selectedShading === "elevation") {
material = getElevationContourMaterial();
shadingUniforms =
material.materials.elevationRampMaterial.uniforms;
shadingUniforms.minimumHeight = minHeight;
shadingUniforms.maximumHeight = maxHeight;
contourUniforms = material.materials.contourMaterial.uniforms;
} else if (selectedShading === "slope") {
material = getSlopeContourMaterial();
shadingUniforms = material.materials.slopeRampMaterial.uniforms;
contourUniforms = material.materials.contourMaterial.uniforms;
} else if (selectedShading === "aspect") {
material = getAspectContourMaterial();
shadingUniforms = material.materials.aspectRampMaterial.uniforms;
contourUniforms = material.materials.contourMaterial.uniforms;
} else {
material = Cesium.Material.fromType("ElevationContour");
contourUniforms = material.uniforms;
}
contourUniforms.width = viewModel.contourWidth;
contourUniforms.spacing = viewModel.contourSpacing;
contourUniforms.color = contourColor;
} else if (selectedShading === "elevation") {
material = Cesium.Material.fromType("ElevationRamp");
shadingUniforms = material.uniforms;
shadingUniforms.minimumHeight = minHeight;
shadingUniforms.maximumHeight = maxHeight;
} else if (selectedShading === "slope") {
material = Cesium.Material.fromType("SlopeRamp");
shadingUniforms = material.uniforms;
} else if (selectedShading === "aspect") {
material = Cesium.Material.fromType("AspectRamp");
shadingUniforms = material.uniforms;
}
if (selectedShading !== "none") {
shadingUniforms.image = getColorRamp(selectedShading);
}
globe.material = material;
}
updateMaterial();
Cesium.knockout
.getObservable(viewModel, "enableContour")
.subscribe(function (newValue) {
updateMaterial();
});
Cesium.knockout
.getObservable(viewModel, "contourWidth")
.subscribe(function (newValue) {
contourUniforms.width = parseFloat(newValue);
});
Cesium.knockout
.getObservable(viewModel, "contourSpacing")
.subscribe(function (newValue) {
contourUniforms.spacing = parseFloat(newValue);
});
Cesium.knockout
.getObservable(viewModel, "selectedShading")
.subscribe(function (value) {
updateMaterial();
});
Sandcastle.addToolbarMenu(
[
{
text: "Himalayas",
onselect: function () {
viewer.camera.setView({
destination: new Cesium.Cartesian3(
322100.7492728492,
5917960.047024654,
3077602.646977297
),
orientation: {
heading: 5.988151498702285,
pitch: -1.5614542839414822,
roll: 0,
},
});
viewer.clockViewModel.currentTime = Cesium.JulianDate.fromIso8601(
"2017-09-22T04:00:00Z"
);
},
},
{
text: "Half Dome",
onselect: function () {
viewer.camera.setView({
destination: new Cesium.Cartesian3(
-2495709.521843174,
-4391600.804712465,
3884463.7192916023
),
orientation: {
heading: 1.7183056487769202,
pitch: -0.06460370548034144,
roll: 0.0079181631783527,
},
});
viewer.clockViewModel.currentTime = Cesium.JulianDate.fromIso8601(
"2017-09-22T18:00:00Z"
);
},
},
{
text: "Vancouver",
onselect: function () {
viewer.camera.setView({
destination: new Cesium.Cartesian3(
-2301222.367751603,
-3485269.915771613,
4812080.961755785
),
orientation: {
heading: 0.11355958593902571,
pitch: -0.260011078090858,
roll: 0.00039019018274721873,
},
});
viewer.clockViewModel.currentTime = Cesium.JulianDate.fromIso8601(
"2017-09-22T18:00:00Z"
);
},
},
{
text: "Mount Everest",
onselect: function () {
viewer.camera.setView({
destination: new Cesium.Cartesian3(
282157.6960889096,
5638892.465594703,
2978736.186473513
),
orientation: {
heading: 4.747266966349747,
pitch: -0.2206998858596192,
roll: 6.280340554587955,
},
});
viewer.clockViewModel.currentTime = Cesium.JulianDate.fromIso8601(
"2017-09-22T04:00:00Z"
);
},
},
],
"zoomButtons"
);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Google Earth Enterprise.html 0 → 100644
View file @ 2dbd8f1f
<!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="Add imagery from a Web Map Service (WMS) server."
/>
<meta name="cesium-sandcastle-labels" content="Beginner" />
<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"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var geeMetadata = new Cesium.GoogleEarthEnterpriseMetadata(
new Cesium.Resource({
url: "http://www.earthenterprise.org/3d",
proxy: new Cesium.DefaultProxy("/proxy/"),
})
);
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.GoogleEarthEnterpriseImageryProvider({
metadata: geeMetadata,
}),
terrainProvider: new Cesium.GoogleEarthEnterpriseTerrainProvider({
metadata: geeMetadata,
}),
baseLayerPicker: false,
});
// Start off looking at San Francisco.
viewer.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-123.0, 36.0, -121.7, 39.0),
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Ground Atmosphere.html 0 → 100644
View file @ 2dbd8f1f
<!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="Adjust lighting on the globe as seen from space."
/>
<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;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td>Lighting Fade Out Distance</td>
<td>
<input
type="range"
min="1e6"
max="1e8"
step="1e6"
data-bind="value: lightingFadeOutDistance, valueUpdate: 'input'"
/>
<input
type="text"
size="10"
data-bind="value: lightingFadeOutDistance"
/>
</td>
</tr>
<tr>
<td>Lighting Fade In Distance</td>
<td>
<input
type="range"
min="1e6"
max="1e8"
step="1e6"
data-bind="value: lightingFadeInDistance, valueUpdate: 'input'"
/>
<input
type="text"
size="10"
data-bind="value: lightingFadeInDistance"
/>
</td>
</tr>
<tr>
<td>Night Fade Out Distance</td>
<td>
<input
type="range"
min="1e6"
max="1e8"
step="1e6"
data-bind="value: nightFadeOutDistance, valueUpdate: 'input'"
/>
<input
type="text"
size="10"
data-bind="value: nightFadeOutDistance"
/>
</td>
</tr>
<tr>
<td>Night Fade In Distance</td>
<td>
<input
type="range"
min="1e6"
max="1e8"
step="1e6"
data-bind="value: nightFadeInDistance, valueUpdate: 'input'"
/>
<input
type="text"
size="10"
data-bind="value: nightFadeInDistance"
/>
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
sceneModePicker: false,
});
var scene = viewer.scene;
var globe = scene.globe;
var defaultLightFadeOut = globe.lightingFadeOutDistance;
var defaultLightFadeIn = globe.lightingFadeInDistance;
var defaultNightFadeOut = globe.nightFadeOutDistance;
var defaultNightFadeIn = globe.nightFadeInDistance;
// The viewModel tracks the state of our mini application.
var viewModel = {
lightingFadeOutDistance: defaultLightFadeOut,
lightingFadeInDistance: defaultLightFadeIn,
nightFadeOutDistance: defaultNightFadeOut,
nightFadeInDistance: defaultNightFadeIn,
};
// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);
// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
function subscribeParameter(name) {
Cesium.knockout
.getObservable(viewModel, name)
.subscribe(function (newValue) {
globe[name] = newValue;
});
}
subscribeParameter("lightingFadeOutDistance");
subscribeParameter("lightingFadeInDistance");
subscribeParameter("nightFadeOutDistance");
subscribeParameter("nightFadeInDistance");
Sandcastle.addToggleButton(
"Ground atmosphere",
globe.showGroundAtmosphere,
function (checked) {
globe.showGroundAtmosphere = checked;
}
);
Sandcastle.addToggleButton("Lighting", globe.enableLighting, function (
checked
) {
globe.enableLighting = checked;
});
Sandcastle.addToolbarMenu([
{
text: "Cesium World Terrain - no effects",
onselect: function () {
viewer.terrainProvider = Cesium.createWorldTerrain();
},
},
{
text: "Cesium World Terrain w/ Vertex Normals",
onselect: function () {
viewer.terrainProvider = Cesium.createWorldTerrain({
requestVertexNormals: true,
});
},
},
{
text: "Cesium World Terrain w/ Water",
onselect: function () {
viewer.terrainProvider = Cesium.createWorldTerrain({
requestWaterMask: true,
});
},
},
{
text: "Cesium World Terrain w/ Vertex Normals and Water",
onselect: function () {
viewer.terrainProvider = Cesium.createWorldTerrain({
requestVertexNormals: true,
requestWaterMask: true,
});
},
},
{
text: "EllipsoidTerrainProvider",
onselect: function () {
viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
},
},
]);
Sandcastle.addToolbarButton("Reset Fade Distances", function () {
globe.lightingFadeOutDistance = defaultLightFadeOut;
globe.lightingFadeInDistance = defaultLightFadeIn;
globe.nightFadeOutDistance = defaultNightFadeOut;
globe.nightFadeInDistance = defaultNightFadeIn;
viewModel.lightingFadeOutDistance = defaultLightFadeOut;
viewModel.lightingFadeInDistance = defaultLightFadeIn;
viewModel.nightFadeOutDistance = defaultNightFadeOut;
viewModel.nightFadeInDistance = defaultNightFadeIn;
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal