Skip to content

GitLab

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

Initial commit

parents
Hide whitespace changes
Inline Side-by-side
Sandcastle/gallery/Ambient Occlusion.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="Ambient Occlusion." />
<meta
name="cesium-sandcastle-labels"
content="Showcases, 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">
<table>
<tbody>
<tr>
<td>Ambient Occlusion</td>
<td><input type="checkbox" data-bind="checked: show" /></td>
</tr>
<tr>
<td>Ambient Occlusion Only</td>
<td>
<input
type="checkbox"
data-bind="checked: ambientOcclusionOnly"
/>
</td>
</tr>
<tr>
<td>Intensity</td>
<td>
<input
type="range"
min="1"
max="10"
step="1"
data-bind="value: intensity, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Length Cap</td>
<td>
<input
type="range"
min="0"
max="1"
step="0.01"
data-bind="value: lengthCap, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Step Size</td>
<td>
<input
type="range"
min="1"
max="10"
step="0.01"
data-bind="value: stepSize, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Bias</td>
<td>
<input
type="range"
min="0"
max="1"
step="0.01"
data-bind="value: bias, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Blur Step Size</td>
<td>
<input
type="range"
min="0"
max="4"
step="0.01"
data-bind="value: blurStepSize, valueUpdate: 'input'"
/>
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
if (
!Cesium.PostProcessStageLibrary.isAmbientOcclusionSupported(
viewer.scene
)
) {
window.alert(
"This browser does not support the ambient occlusion post process."
);
}
// Power Plant design model provided by Bentley Systems
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(8564),
});
tileset.readyPromise
.then(function (tileset) {
viewer.scene.primitives.add(tileset);
})
.otherwise(function (error) {
console.log(error);
});
var viewModel = {
show: true,
ambientOcclusionOnly: false,
intensity: 3.0,
bias: 0.1,
lengthCap: 0.03,
stepSize: 1.0,
blurStepSize: 0.86,
};
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(updatePostProcess);
}
}
function updatePostProcess() {
var ambientOcclusion =
viewer.scene.postProcessStages.ambientOcclusion;
ambientOcclusion.enabled =
Boolean(viewModel.show) || Boolean(viewModel.ambientOcclusionOnly);
ambientOcclusion.uniforms.ambientOcclusionOnly = Boolean(
viewModel.ambientOcclusionOnly
);
ambientOcclusion.uniforms.intensity = Number(viewModel.intensity);
ambientOcclusion.uniforms.bias = Number(viewModel.bias);
ambientOcclusion.uniforms.lengthCap = Number(viewModel.lengthCap);
ambientOcclusion.uniforms.stepSize = Number(viewModel.stepSize);
ambientOcclusion.uniforms.blurStepSize = Number(
viewModel.blurStepSize
);
}
updatePostProcess();
var camera = viewer.scene.camera;
camera.position = new Cesium.Cartesian3(
1234127.2294710164,
-5086011.666443127,
3633337.0413351045
);
camera.direction = new Cesium.Cartesian3(
-0.5310064396211631,
-0.30299013818088416,
-0.7913464078682514
);
camera.right = new Cesium.Cartesian3(
-0.8468592075426076,
0.1574051185945647,
0.507989282604011
);
camera.up = Cesium.Cartesian3.cross(
camera.right,
camera.direction,
new Cesium.Cartesian3()
);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/ArcGIS MapServer.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 an ArcGIS MapServer." />
<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 viewer = new Cesium.Viewer("cesiumContainer");
// Add an ArcGIS MapServer imagery layer
var imageryLayers = viewer.imageryLayers;
imageryLayers.addImageryProvider(
new Cesium.ArcGisMapServerImageryProvider({
url:
"https://nationalmap.gov.au/proxy/http://services.ga.gov.au/site_3/rest/services/Electricity_Infrastructure/MapServer",
})
);
// Start off looking at Australia.
viewer.camera.setView({
destination: Cesium.Rectangle.fromDegrees(
114.591,
-45.837,
148.97,
-5.73
),
}); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/ArcGIS Tiled Elevation Terrain.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 terrain from an ArcGIS 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 viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: new Cesium.ArcGISTiledElevationTerrainProvider({
url:
"https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
}),
}); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/ArcticDEM.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="High-resolution arctic terrain from the Arctic DEM project (Release 4) and hosted by Cesium ion."
/>
<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
// High-resolution arctic terrain from the Arctic DEM project (Release 4), tiled and hosted by Cesium ion.
// https://www.pgc.umn.edu/data/arcticdem/
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(3956),
}),
});
// Add Alaskan locations
Sandcastle.addDefaultToolbarMenu(
[
{
text: "Denali",
onselect: function () {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromRadians(
-2.6399828792482234,
1.0993550795541742,
5795
),
orientation: {
heading: 3.8455,
pitch: -0.4535,
roll: 0.0,
},
});
},
},
{
text: "Anchorage Area",
onselect: function () {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromRadians(
-2.610708034601548,
1.0671172431736584,
1900
),
orientation: {
heading: 4.6,
pitch: -0.341,
roll: 0.0,
},
});
},
},
{
text: "Peaks",
onselect: function () {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromRadians(
-2.6928866820212813,
1.072394255273859,
3700
),
orientation: {
heading: 1.6308222948889464,
pitch: -0.6473480165020193,
roll: 0.0,
},
});
},
},
{
text: "Riverbed",
onselect: function () {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromRadians(
-2.6395623497608596,
1.0976443174490356,
2070
),
orientation: {
heading: 6.068794108659519,
pitch: -0.08514161789475816,
roll: 0.0,
},
});
},
},
],
"toolbar"
);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Billboards.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 billboard images and markers to the scene."
/>
<meta name="cesium-sandcastle-labels" content="Beginner, 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
var viewer = new Cesium.Viewer("cesiumContainer");
function addBillboard() {
Sandcastle.declare(addBillboard);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/Cesium_Logo_overlay.png",
},
});
}
function setBillboardProperties() {
Sandcastle.declare(setBillboardProperties);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/Cesium_Logo_overlay.png", // default: undefined
show: true, // default
pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
scale: 2.0, // default: 1.0
color: Cesium.Color.LIME, // default: WHITE
rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
alignedAxis: Cesium.Cartesian3.ZERO, // default
width: 100, // default: undefined
height: 25, // default: undefined
},
});
}
function changeBillboardProperties() {
Sandcastle.declare(changeBillboardProperties);
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
-75.59777,
40.03883,
300000.0
),
billboard: {
image: "../images/Cesium_Logo_overlay.png",
},
});
var billboard = entity.billboard;
billboard.scale = 3.0;
billboard.color = Cesium.Color.WHITE.withAlpha(0.25);
}
function sizeBillboardInMeters() {
Sandcastle.declare(sizeBillboardInMeters);
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/Cesium_Logo_overlay.png",
sizeInMeters: true,
},
});
viewer.zoomTo(entity);
}
function addMultipleBillboards() {
Sandcastle.declare(addMultipleBillboards);
var logoUrl = "../images/Cesium_Logo_overlay.png";
var facilityUrl = "../images/facility.gif";
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: logoUrl,
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-80.5, 35.14),
billboard: {
image: facilityUrl,
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
billboard: {
image: facilityUrl,
},
});
}
function scaleByDistance() {
Sandcastle.declare(scaleByDistance);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/facility.gif",
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),
},
});
}
function fadeByDistance() {
Sandcastle.declare(fadeByDistance);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/Cesium_Logo_overlay.png",
translucencyByDistance: new Cesium.NearFarScalar(
1.5e2,
2.0,
1.5e7,
0.5
),
},
});
}
function offsetByDistance() {
Sandcastle.declare(offsetByDistance);
Cesium.when.all(
[
Cesium.Resource.fetchImage("../images/Cesium_Logo_overlay.png"),
Cesium.Resource.fetchImage("../images/facility.gif"),
],
function (images) {
// As viewer zooms closer to facility billboard,
// increase pixelOffset on CesiumLogo billboard to this height
var facilityHeight = images[1].height;
// colocated billboards, separate as viewer gets closer
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: images[1],
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: images[0],
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0.0, -facilityHeight),
pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
1.0e3,
1.0,
1.5e6,
0.0
),
translucencyByDistance: new Cesium.NearFarScalar(
1.0e3,
1.0,
1.5e6,
0.1
),
},
});
}
);
}
function addMarkerBillboards() {
Sandcastle.declare(addMarkerBillboards);
// Add several billboards based on the above image in the atlas.
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/whiteShapes.png",
imageSubRegion: new Cesium.BoundingRectangle(49, 43, 18, 18),
color: Cesium.Color.LIME,
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-84.0, 39.0),
billboard: {
image: "../images/whiteShapes.png",
imageSubRegion: new Cesium.BoundingRectangle(61, 23, 18, 18),
color: new Cesium.Color(0, 0.5, 1.0, 1.0),
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-70.0, 41.0),
billboard: {
image: "../images/whiteShapes.png",
imageSubRegion: new Cesium.BoundingRectangle(67, 80, 14, 14),
color: new Cesium.Color(0.5, 0.9, 1.0, 1.0),
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-73.0, 37.0),
billboard: {
image: "../images/whiteShapes.png",
imageSubRegion: new Cesium.BoundingRectangle(27, 103, 22, 22),
color: Cesium.Color.RED,
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-79.0, 35.0),
billboard: {
image: "../images/whiteShapes.png",
imageSubRegion: new Cesium.BoundingRectangle(105, 105, 18, 18),
color: Cesium.Color.YELLOW,
},
});
}
var terrainProvider;
function disableDepthTest() {
Sandcastle.declare(disableDepthTest);
terrainProvider = viewer.terrainProvider;
viewer.terrainProvider = Cesium.createWorldTerrain();
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
billboard: {
image: "../images/facility.gif",
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
viewer.zoomTo(viewer.entities);
}
Sandcastle.addToolbarMenu([
{
text: "Add billboard",
onselect: function () {
addBillboard();
Sandcastle.highlight(addBillboard);
},
},
{
text: "Set billboard properties at creation",
onselect: function () {
setBillboardProperties();
Sandcastle.highlight(setBillboardProperties);
},
},
{
text: "Change billboard properties",
onselect: function () {
changeBillboardProperties();
Sandcastle.highlight(changeBillboardProperties);
},
},
{
text: "Size billboard in meters",
onselect: function () {
sizeBillboardInMeters();
Sandcastle.highlight(sizeBillboardInMeters);
},
},
{
text: "Add multiple billboards",
onselect: function () {
addMultipleBillboards();
Sandcastle.highlight(addMultipleBillboards);
},
},
{
text: "Scale by viewer distance",
onselect: function () {
scaleByDistance();
Sandcastle.highlight(scaleByDistance);
},
},
{
text: "Fade by viewer distance",
onselect: function () {
fadeByDistance();
Sandcastle.highlight(fadeByDistance);
},
},
{
text: "Offset by viewer distance",
onselect: function () {
offsetByDistance();
Sandcastle.highlight(offsetByDistance);
},
},
{
text: "Add marker billboards",
onselect: function () {
addMarkerBillboards();
Sandcastle.highlight(addMarkerBillboards);
},
},
{
text: "Disable the depth test when clamped to ground",
onselect: function () {
disableDepthTest();
Sandcastle.highlight(disableDepthTest);
},
},
]);
Sandcastle.reset = function () {
viewer.camera.flyHome(0);
viewer.entities.removeAll();
if (Cesium.defined(terrainProvider)) {
viewer.terrainProvider = terrainProvider;
terrainProvider = undefined;
viewer.scene.globe.depthTestAgainstTerrain = false;
}
};
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Bloom.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 bloom effect to the scene." />
<meta
name="cesium-sandcastle-labels"
content="Showcases, 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">
<table>
<tbody>
<tr>
<td>Bloom</td>
<td><input type="checkbox" data-bind="checked: show" /></td>
</tr>
<tr>
<td>Glow only</td>
<td><input type="checkbox" data-bind="checked: glowOnly" /></td>
</tr>
<tr>
<td>Contrast</td>
<td>
<input
type="range"
min="-255.0"
max="255.0"
step="0.01"
data-bind="value: contrast, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Brightness</td>
<td>
<input
type="range"
min="-1.0"
max="1.0"
step="0.01"
data-bind="value: brightness, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Delta</td>
<td>
<input
type="range"
min="1"
max="5"
step="0.01"
data-bind="value: delta, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Sigma</td>
<td>
<input
type="range"
min="1"
max="10"
step="0.01"
data-bind="value: sigma, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Step Size</td>
<td>
<input
type="range"
min="0"
max="7"
step="0.01"
data-bind="value: stepSize, valueUpdate: 'input'"
/>
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
function createModel(url, x, y, height) {
var position = Cesium.Cartesian3.fromDegrees(x, y, height);
viewer.entities.add({
name: url,
position: position,
model: {
uri: url,
},
});
}
var numberOfBalloons = 13;
var lonIncrement = 0.00025;
var initialLon = -122.99875;
var lat = 44.0503706;
var height = 100.0;
var url = "../../SampleData/models/CesiumBalloon/CesiumBalloon.glb";
for (var i = 0; i < numberOfBalloons; ++i) {
var lon = initialLon + i * lonIncrement;
createModel(url, lon, lat, height);
}
var viewModel = {
show: true,
glowOnly: false,
contrast: 128,
brightness: -0.3,
delta: 1.0,
sigma: 3.78,
stepSize: 5.0,
};
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(updatePostProcess);
}
}
function updatePostProcess() {
var bloom = viewer.scene.postProcessStages.bloom;
bloom.enabled = Boolean(viewModel.show);
bloom.uniforms.glowOnly = Boolean(viewModel.glowOnly);
bloom.uniforms.contrast = Number(viewModel.contrast);
bloom.uniforms.brightness = Number(viewModel.brightness);
bloom.uniforms.delta = Number(viewModel.delta);
bloom.uniforms.sigma = Number(viewModel.sigma);
bloom.uniforms.stepSize = Number(viewModel.stepSize);
}
updatePostProcess();
var target = Cesium.Cartesian3.fromDegrees(
initialLon + lonIncrement,
lat,
height + 7.5
);
var offset = new Cesium.Cartesian3(
-37.048378684557974,
-24.852967044804245,
4.352023653686047
);
viewer.scene.camera.lookAt(target, offset);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Blue Marble.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="Blue Marble Next Generation July, 2004 imagery from NASA and hosted by Cesium ion."
/>
<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
// Blue Marble Next Generation July, 2004 imagery from NASA
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3845 }),
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Box.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="Draw a box." />
<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 viewer = new Cesium.Viewer("cesiumContainer");
var blueBox = viewer.entities.add({
name: "Blue box",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE,
},
});
var redBox = viewer.entities.add({
name: "Red box with black outline",
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
var outlineOnly = viewer.entities.add({
name: "Yellow box outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML 3D Tiles.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="CZML Model" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<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 czml = [
{
id: "document",
version: "1.0",
},
{
id: "BatchedColors",
name: "BatchedColors",
tileset: {
uri:
"../../SampleData/Cesium3DTiles/Batched/BatchedColors/tileset.json",
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var dataSourcePromise = viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise
.then(function (dataSource) {
viewer.flyTo(dataSource.entities.getById("BatchedColors"));
})
.otherwise(function (error) {
window.alert(error);
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Billboard and Label.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="Basic CZML billboard and label." />
<meta name="cesium-sandcastle-labels" content="CZML" />
<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 czml = [
{
id: "document",
name: "Basic CZML billboard and label",
version: "1.0",
},
{
id: "some-unique-id",
name: "AGI",
description:
"<p><a href='http://www.agi.com' target='_blank'>Analytical Graphics, Inc.</a> (AGI) founded Cesium.</p>",
billboard: {
image:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACvSURBVDhPrZDRDcMgDAU9GqN0lIzijw6SUbJJygUeNQgSqepJTyHG91LVVpwDdfxM3T9TSl1EXZvDwii471fivK73cBFFQNTT/d2KoGpfGOpSIkhUpgUMxq9DFEsWv4IXhlyCnhBFnZcFEEuYqbiUlNwWgMTdrZ3JbQFoEVG53rd8ztG9aPJMnBUQf/VFraBJeWnLS0RfjbKyLJA8FkT5seDYS1Qwyv8t0B/5C2ZmH2/eTGNNBgMmAAAAAElFTkSuQmCC",
scale: 1.5,
},
label: {
fillColor: {
rgba: [255, 255, 255, 255],
},
font: "12pt Lucida Console",
horizontalOrigin: "LEFT",
pixelOffset: {
cartesian2: [8, 0],
},
style: "FILL",
text: "AGI",
showBackground: true,
backgroundColor: {
rgba: [112, 89, 57, 200],
},
},
position: {
cartesian: [
1216361.4096947117,
-4736253.175342511,
4081267.4865667094,
],
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer");
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
//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