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/HTML Overlays.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 HTML overlay using canvas coordinates."
/>
<meta name="cesium-sandcastle-labels" content="Tutorials" />
<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>
<img
id="htmlOverlay"
style="position: absolute;"
src="../images/Cesium_Logo_overlay.png"
/>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
// To geographically place an HTML element on top of the Cesium canvas, we use
// scene.cartesianToCanvasCoordinates to map a world position to canvas x and y values.
// This example places and img element, but any element will work.
var htmlOverlay = document.getElementById("htmlOverlay");
var scratch = new Cesium.Cartesian2();
viewer.scene.preRender.addEventListener(function () {
var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
position,
scratch
);
if (Cesium.defined(canvasPosition)) {
htmlOverlay.style.top = canvasPosition.y + "px";
htmlOverlay.style.left = canvasPosition.x + "px";
}
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/HeadingPitchRoll.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="Use HeadingPitchRoll" />
<meta name="cesium-sandcastle-labels" content="Tutorials" />
<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 class="infoPanel">
<tbody>
<tr>
<td>
Click on the 3D window then use the keyboard to change settings.
</td>
</tr>
<tr>
<td>Heading: <span id="heading"></span>°</td>
</tr>
<tr>
<td>← to left/→ to right</td>
</tr>
<tr>
<td>Pitch: <span id="pitch"></span>°</td>
</tr>
<tr>
<td>↑ to up/↓ to down</td>
</tr>
<tr>
<td>roll: <span id="roll"></span>°</td>
</tr>
<tr>
<td>← + ⇧ left/→ + ⇧ right</td>
</tr>
<tr>
<td>Speed: <span id="speed"></span>m/s</td>
</tr>
<tr>
<td>↑ + ⇧ to speed up/↓ + ⇧ to speed down</td>
</tr>
<tr>
<td>
following aircraft
<input id="fromBehind" type="checkbox" />
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.addEventListener("click", function () {
canvas.focus();
});
canvas.focus();
var scene = viewer.scene;
var pathPosition = new Cesium.SampledPositionProperty();
var entityPath = viewer.entities.add({
position: pathPosition,
name: "path",
path: {
show: true,
leadTime: 0,
trailTime: 60,
width: 10,
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.3,
taperPower: 0.3,
color: Cesium.Color.PALEGOLDENROD,
}),
},
});
var camera = viewer.camera;
var controller = scene.screenSpaceCameraController;
var r = 0;
var center = new Cesium.Cartesian3();
var hpRoll = new Cesium.HeadingPitchRoll();
var hpRange = new Cesium.HeadingPitchRange();
var speed = 10;
var deltaRadians = Cesium.Math.toRadians(3.0);
var position = Cesium.Cartesian3.fromDegrees(
-123.0744619,
44.0503706,
5000.0
);
var speedVector = new Cesium.Cartesian3();
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
"north",
"west"
);
var planePrimitive = scene.primitives.add(
Cesium.Model.fromGltf({
url: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
position,
hpRoll,
Cesium.Ellipsoid.WGS84,
fixedFrameTransform
),
minimumPixelSize: 128,
})
);
planePrimitive.readyPromise.then(function (model) {
// Play and loop all animations at half-speed
model.activeAnimations.addAll({
multiplier: 0.5,
loop: Cesium.ModelAnimationLoop.REPEAT,
});
// Zoom to model
r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
controller.minimumZoomDistance = r * 0.5;
Cesium.Matrix4.multiplyByPoint(
model.modelMatrix,
model.boundingSphere.center,
center
);
var heading = Cesium.Math.toRadians(230.0);
var pitch = Cesium.Math.toRadians(-20.0);
hpRange.heading = heading;
hpRange.pitch = pitch;
hpRange.range = r * 50.0;
camera.lookAt(center, hpRange);
});
document.addEventListener("keydown", function (e) {
switch (e.keyCode) {
case 40:
if (e.shiftKey) {
// speed down
speed = Math.max(--speed, 1);
} else {
// pitch down
hpRoll.pitch -= deltaRadians;
if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
hpRoll.pitch += Cesium.Math.TWO_PI;
}
}
break;
case 38:
if (e.shiftKey) {
// speed up
speed = Math.min(++speed, 100);
} else {
// pitch up
hpRoll.pitch += deltaRadians;
if (hpRoll.pitch > Cesium.Math.TWO_PI) {
hpRoll.pitch -= Cesium.Math.TWO_PI;
}
}
break;
case 39:
if (e.shiftKey) {
// roll right
hpRoll.roll += deltaRadians;
if (hpRoll.roll > Cesium.Math.TWO_PI) {
hpRoll.roll -= Cesium.Math.TWO_PI;
}
} else {
// turn right
hpRoll.heading += deltaRadians;
if (hpRoll.heading > Cesium.Math.TWO_PI) {
hpRoll.heading -= Cesium.Math.TWO_PI;
}
}
break;
case 37:
if (e.shiftKey) {
// roll left until
hpRoll.roll -= deltaRadians;
if (hpRoll.roll < 0.0) {
hpRoll.roll += Cesium.Math.TWO_PI;
}
} else {
// turn left
hpRoll.heading -= deltaRadians;
if (hpRoll.heading < 0.0) {
hpRoll.heading += Cesium.Math.TWO_PI;
}
}
break;
default:
}
});
var headingSpan = document.getElementById("heading");
var pitchSpan = document.getElementById("pitch");
var rollSpan = document.getElementById("roll");
var speedSpan = document.getElementById("speed");
var fromBehind = document.getElementById("fromBehind");
viewer.scene.preUpdate.addEventListener(function (scene, time) {
speedVector = Cesium.Cartesian3.multiplyByScalar(
Cesium.Cartesian3.UNIT_X,
speed / 10,
speedVector
);
position = Cesium.Matrix4.multiplyByPoint(
planePrimitive.modelMatrix,
speedVector,
position
);
pathPosition.addSample(Cesium.JulianDate.now(), position);
Cesium.Transforms.headingPitchRollToFixedFrame(
position,
hpRoll,
Cesium.Ellipsoid.WGS84,
fixedFrameTransform,
planePrimitive.modelMatrix
);
if (fromBehind.checked) {
// Zoom to model
Cesium.Matrix4.multiplyByPoint(
planePrimitive.modelMatrix,
planePrimitive.boundingSphere.center,
center
);
hpRange.heading = hpRoll.heading;
hpRange.pitch = hpRoll.pitch;
camera.lookAt(center, hpRange);
}
});
viewer.scene.preRender.addEventListener(function (scene, time) {
headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(
1
);
pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
speedSpan.innerHTML = speed.toFixed(1);
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Hello World.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="Use Viewer to start building new applications or easily embed Cesium into existing applications."
/>
<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");
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/High Dynamic Range.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="Toggle High Dynamic Range (HDR)." />
<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(),
shadows: true,
});
if (!viewer.scene.highDynamicRangeSupported) {
window.alert("This browser does not support high dynamic range.");
}
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(
-1915097.7863741855,
-4783356.851539908,
3748887.43462683
),
orientation: new Cesium.HeadingPitchRoll(
6.166004548388564,
-0.043242401760068994,
0.002179961955988574
),
endTransform: Cesium.Matrix4.IDENTITY,
});
viewer.scene.highDynamicRange = true;
Sandcastle.addToggleButton("HDR", true, function (checked) {
viewer.scene.highDynamicRange = checked;
});
var url =
"../../SampleData/models/DracoCompressed/CesiumMilkTruck.gltf";
var position = Cesium.Cartesian3.fromRadians(
-1.9516424279517286,
0.6322397098422969,
1239.0006814631095
);
var heading = Cesium.Math.toRadians(-15.0);
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
var scale = 10.0;
var entity = viewer.entities.add({
name: url,
position: position,
orientation: orientation,
model: {
uri: url,
scale: scale,
},
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Image-Based Lighting.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="Use image-based lighting to light a model."
/>
<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>Luminance at Zenith</td>
<td>
<input
type="range"
min="0.0"
max="2.0"
step="0.01"
data-bind="value: luminanceAtZenith, valueUpdate: 'input'"
/>
<input
type="text"
size="4"
data-bind="value: luminanceAtZenith"
/>
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
if (!viewer.scene.specularEnvironmentMapsSupported) {
window.alert(
"This browser does not support specular environment maps."
);
}
var environmentMapURL =
"https://cesium.com/assets/kiara_6_afternoon_2k_ibl.ktx";
var modelURL = "../../SampleData/models/Pawns/Pawns.glb";
// This environment map was processed using Google's Filament project. To process your own:
// 1 - Download the Filament release (https://github.com/google/filament/releases).
// 2 - Run `cmgen --type=ktx --deploy=/path/to/output /path/to/image.hdr`. Other formats are also supported. Run `cmgen --help` for all options.
// 3 - Take the generated coefficients and the KTX file and load them in CesiumJS as shown below.
var L00 = new Cesium.Cartesian3(
0.170455150831422,
0.163151083190219,
0.196966760289763
);
var L1_1 = new Cesium.Cartesian3(
-0.066550267689383,
-0.022088055746048,
0.078835009246127
);
var L10 = new Cesium.Cartesian3(
0.038364097478591,
0.045714300098753,
0.063498904606215
);
var L11 = new Cesium.Cartesian3(
-0.01436536331281,
-0.026490613715151,
-0.05018940406602
);
var L2_2 = new Cesium.Cartesian3(
-0.05153278691789,
-0.050777795729986,
-0.056449044453032
);
var L2_1 = new Cesium.Cartesian3(
0.043454596136534,
0.046672590104157,
0.05753010764661
);
var L20 = new Cesium.Cartesian3(
-0.00164046627411,
0.001286638231156,
0.007228908989616
);
var L21 = new Cesium.Cartesian3(
-0.042260855700641,
-0.046394335094707,
-0.057562936365585
);
var L22 = new Cesium.Cartesian3(
-0.004953478914091,
-0.000479681664876,
0.008508150106928
);
var coefficients = [L00, L1_1, L10, L11, L2_2, L2_1, L20, L21, L22];
var height = 0.0;
var hpr = new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0);
var origin = Cesium.Cartesian3.fromDegrees(
-123.0744619,
44.0503706,
height
);
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
origin,
hpr
);
var model = viewer.scene.primitives.add(
Cesium.Model.fromGltf({
url: modelURL,
modelMatrix: modelMatrix,
minimumPixelSize: 128,
})
);
model.readyPromise
.then(function (model) {
var camera = viewer.camera;
// Zoom to model
var controller = viewer.scene.screenSpaceCameraController;
var r =
2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
controller.minimumZoomDistance = r * 0.5;
var center = Cesium.Matrix4.multiplyByPoint(
model.modelMatrix,
model.boundingSphere.center,
new Cesium.Cartesian3()
);
var heading = Cesium.Math.toRadians(230.0);
var pitch = Cesium.Math.toRadians(-20.0);
camera.lookAt(
center,
new Cesium.HeadingPitchRange(heading, pitch, r * 2.0)
);
camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
model.sphericalHarmonicCoefficients = coefficients;
model.specularEnvironmentMaps = environmentMapURL;
// The viewModel tracks the state of our mini application.
var viewModel = {
luminanceAtZenith: model.luminanceAtZenith,
};
// 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) {
model[name] = newValue;
});
}
subscribeParameter("luminanceAtZenith");
Sandcastle.addToggleButton(
"Use procedural environment lighting",
false,
function (checked) {
if (!checked) {
model.sphericalHarmonicCoefficients = coefficients;
model.specularEnvironmentMaps = environmentMapURL;
} else {
model.sphericalHarmonicCoefficients = undefined;
model.specularEnvironmentMaps = undefined;
}
}
);
})
.otherwise(function (error) {
window.alert(error);
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Imagery Adjustment.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 brightness, contrast, hue, saturation, and gamma of an imagery layer."
/>
<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>Brightness</td>
<td>
<input
type="range"
min="0"
max="3"
step="0.02"
data-bind="value: brightness, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: brightness" />
</td>
</tr>
<tr>
<td>Contrast</td>
<td>
<input
type="range"
min="0"
max="3"
step="0.02"
data-bind="value: contrast, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: contrast" />
</td>
</tr>
<tr>
<td>Hue</td>
<td>
<input
type="range"
min="0"
max="3"
step="0.02"
data-bind="value: hue, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: hue" />
</td>
</tr>
<tr>
<td>Saturation</td>
<td>
<input
type="range"
min="0"
max="3"
step="0.02"
data-bind="value: saturation, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: saturation" />
</td>
</tr>
<tr>
<td>Gamma</td>
<td>
<input
type="range"
min="0"
max="3"
step="0.02"
data-bind="value: gamma, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: gamma" />
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
var imageryLayers = viewer.imageryLayers;
// The viewModel tracks the state of our mini application.
var viewModel = {
brightness: 0,
contrast: 0,
hue: 0,
saturation: 0,
gamma: 0,
};
// 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);
// Make the active imagery layer a subscriber of the viewModel.
function subscribeLayerParameter(name) {
Cesium.knockout
.getObservable(viewModel, name)
.subscribe(function (newValue) {
if (imageryLayers.length > 0) {
var layer = imageryLayers.get(0);
layer[name] = newValue;
}
});
}
subscribeLayerParameter("brightness");
subscribeLayerParameter("contrast");
subscribeLayerParameter("hue");
subscribeLayerParameter("saturation");
subscribeLayerParameter("gamma");
// Make the viewModel react to base layer changes.
function updateViewModel() {
if (imageryLayers.length > 0) {
var layer = imageryLayers.get(0);
viewModel.brightness = layer.brightness;
viewModel.contrast = layer.contrast;
viewModel.hue = layer.hue;
viewModel.saturation = layer.saturation;
viewModel.gamma = layer.gamma;
}
}
imageryLayers.layerAdded.addEventListener(updateViewModel);
imageryLayers.layerRemoved.addEventListener(updateViewModel);
imageryLayers.layerMoved.addEventListener(updateViewModel);
updateViewModel();
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Imagery Color To Alpha.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 simple color-to-alpha on imagery layers."
/>
<meta name="cesium-sandcastle-labels" content="Beginner, Tutorials" />
<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;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td>Threshold</td>
<td>
<input
type="range"
min="0.0"
max="1.0"
step="0.01"
data-bind="value: threshold, 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");
var layers = viewer.scene.imageryLayers;
// Set oceans on Bing base layer to transparent
var baseLayer = layers.get(0);
baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.016, 0.059);
baseLayer.colorToAlphaThreshold = 0.2;
// Add a bump layer with adjustable threshold
var singleTileLayer = layers.addImageryProvider(
new Cesium.SingleTileImageryProvider({
url: "../images/earthbump1k.jpg",
rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
})
);
singleTileLayer.colorToAlpha = new Cesium.Color(0.0, 0.0, 0.0, 1.0);
singleTileLayer.colorToAlphaThreshold = 0.1;
var viewModel = {
threshold: singleTileLayer.colorToAlphaThreshold,
};
Cesium.knockout.track(viewModel);
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout
.getObservable(viewModel, "threshold")
.subscribe(function (newValue) {
singleTileLayer.colorToAlphaThreshold = parseFloat(
viewModel.threshold
);
}); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Imagery Cutout.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="Demonstration of imagery layers with rectangular cutouts."
/>
<meta name="cesium-sandcastle-labels" content="Tutorials" />
<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 class="infoPanel">
<tbody>
<tr>
<td>Click on the Cesium display to start.</td>
</tr>
<tr>
<td>w/s - move cutout north/south</td>
</tr>
<tr>
<td>a/d - move cutout west/east</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.TileMapServiceImageryProvider({
url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
}),
baseLayerPicker: false,
});
var canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.onclick = function () {
canvas.focus();
};
var scene = viewer.scene;
var defaultImageryLayerCutout = Cesium.Rectangle.fromDegrees(
-90,
20,
-70,
40
);
// Cut a rectangle out of the base layer
var layers = viewer.imageryLayers;
var imageryBaseLayer = layers.get(0);
imageryBaseLayer.cutoutRectangle = defaultImageryLayerCutout;
// Fit a SingleTileImageryProvider inside the cutout on the lowest layer
layers.addImageryProvider(
new Cesium.SingleTileImageryProvider({
url: "../images/Cesium_Logo_overlay.png",
rectangle: defaultImageryLayerCutout,
})
);
// Add an Earth at Night layer and a "traveling" cutout
var earthAtNight = layers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3812 })
);
earthAtNight.cutoutRectangle = Cesium.Rectangle.fromDegrees(
-100,
10,
-60,
50
);
earthAtNight.alpha = 0.9;
// "traveling" code
var flags = {
moveEast: false,
moveWest: false,
moveNorth: false,
moveSouth: false,
};
function getFlagForKeyCode(keyCode) {
switch (keyCode) {
case "W".charCodeAt(0):
return "moveNorth";
case "S".charCodeAt(0):
return "moveSouth";
case "D".charCodeAt(0):
return "moveEast";
case "A".charCodeAt(0):
return "moveWest";
default:
return undefined;
}
}
document.addEventListener(
"keydown",
function (e) {
var flagName = getFlagForKeyCode(e.keyCode);
if (typeof flagName !== "undefined") {
flags[flagName] = true;
}
},
false
);
document.addEventListener(
"keyup",
function (e) {
var flagName = getFlagForKeyCode(e.keyCode);
if (typeof flagName !== "undefined") {
flags[flagName] = false;
}
},
false
);
var moveIncrement = 0.05;
viewer.clock.onTick.addEventListener(function (clock) {
var travelingRectangle = earthAtNight.cutoutRectangle;
if (
flags.moveNorth &&
travelingRectangle.north + moveIncrement < Cesium.Math.PI_OVER_TWO
) {
travelingRectangle.north += moveIncrement;
travelingRectangle.south += moveIncrement;
}
if (
flags.moveSouth &&
travelingRectangle.south - moveIncrement > -Cesium.Math.PI_OVER_TWO
) {
travelingRectangle.north -= moveIncrement;
travelingRectangle.south -= moveIncrement;
}
if (flags.moveEast) {
travelingRectangle.east += moveIncrement;
travelingRectangle.west += moveIncrement;
}
if (flags.moveWest) {
travelingRectangle.east -= moveIncrement;
travelingRectangle.west -= moveIncrement;
}
travelingRectangle.east = wrapLongitude(travelingRectangle.east);
travelingRectangle.west = wrapLongitude(travelingRectangle.west);
});
function wrapLongitude(value) {
if (value < -Cesium.Math.PI) {
return value + Cesium.Math.TWO_PI;
}
if (value > Cesium.Math.PI) {
return value - Cesium.Math.TWO_PI;
}
return value;
}
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Imagery Layers Manipulation.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="Layer imagery from multiple sources, including WMS servers, Bing Maps, ArcGIS Online, OpenStreetMaps, and more, and adjust the alpha of each independently."
/>
<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 table tr {
transform: translateY(0);
transition: transform 0.4s ease-out;
}
#toolbar table tr.up {
transform: translateY(33px);
transition: none;
}
#toolbar table tr.down {
transform: translateY(-33px);
transition: none;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody data-bind="foreach: layers">
<tr
data-bind="css: { up: $parent.upLayer === $data, down: $parent.downLayer === $data }"
>
<td><input type="checkbox" data-bind="checked: show" /></td>
<td>
<span
data-bind="text: name, visible: !$parent.isSelectableLayer($data)"
></span>
<select
data-bind="visible: $parent.isSelectableLayer($data), options: $parent.baseLayers, optionsText: 'name', value: $parent.selectedLayer"
></select>
</td>
<td>
<input
type="range"
min="0"
max="1"
step="0.01"
data-bind="value: alpha, valueUpdate: 'input'"
/>
</td>
<td>
<button
type="button"
class="cesium-button"
data-bind="click: function() { $parent.raise($data, $index()); }, visible: $parent.canRaise($index())"
>
▲
</button>
</td>
<td>
<button
type="button"
class="cesium-button"
data-bind="click: function() { $parent.lower($data, $index()); }, visible: $parent.canLower($index())"
>
▼
</button>
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
baseLayerPicker: false,
});
var imageryLayers = viewer.imageryLayers;
var viewModel = {
layers: [],
baseLayers: [],
upLayer: null,
downLayer: null,
selectedLayer: null,
isSelectableLayer: function (layer) {
return this.baseLayers.indexOf(layer) >= 0;
},
raise: function (layer, index) {
imageryLayers.raise(layer);
viewModel.upLayer = layer;
viewModel.downLayer = viewModel.layers[Math.max(0, index - 1)];
updateLayerList();
window.setTimeout(function () {
viewModel.upLayer = viewModel.downLayer = null;
}, 10);
},
lower: function (layer, index) {
imageryLayers.lower(layer);
viewModel.upLayer =
viewModel.layers[
Math.min(viewModel.layers.length - 1, index + 1)
];
viewModel.downLayer = layer;
updateLayerList();
window.setTimeout(function () {
viewModel.upLayer = viewModel.downLayer = null;
}, 10);
},
canRaise: function (layerIndex) {
return layerIndex > 0;
},
canLower: function (layerIndex) {
return layerIndex >= 0 && layerIndex < imageryLayers.length - 1;
},
};
var baseLayers = viewModel.baseLayers;
Cesium.knockout.track(viewModel);
function setupLayers() {
// Create all the base layers that this example will support.
// These base layers aren't really special. It's possible to have multiple of them
// enabled at once, just like the other layers, but it doesn't make much sense because
// all of these layers cover the entire globe and are opaque.
addBaseLayerOption("Bing Maps Aerial", undefined); // the current base layer
addBaseLayerOption(
"Bing Maps Road",
new Cesium.BingMapsImageryProvider({
url: "https://dev.virtualearth.net",
mapStyle: Cesium.BingMapsStyle.ROAD,
})
);
addBaseLayerOption(
"ArcGIS World Street Maps",
new Cesium.ArcGisMapServerImageryProvider({
url:
"https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
})
);
addBaseLayerOption(
"OpenStreetMaps",
new Cesium.OpenStreetMapImageryProvider()
);
addBaseLayerOption(
"Stamen Maps",
new Cesium.OpenStreetMapImageryProvider({
url: "https://stamen-tiles.a.ssl.fastly.net/watercolor/",
fileExtension: "jpg",
credit:
"Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
})
);
addBaseLayerOption(
"Natural Earth II (local)",
new Cesium.TileMapServiceImageryProvider({
url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
})
);
addBaseLayerOption(
"USGS Shaded Relief (via WMTS)",
new Cesium.WebMapTileServiceImageryProvider({
url:
"http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS",
layer: "USGSShadedReliefOnly",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "default028mm",
maximumLevel: 19,
credit: "U. S. Geological Survey",
})
);
// Create the additional layers
addAdditionalLayerOption(
"United States GOES Infrared",
new Cesium.WebMapServiceImageryProvider({
url:
"https://mesonet.agron.iastate.edu/cgi-bin/wms/goes/conus_ir.cgi?",
layers: "goes_conus_ir",
credit: "Infrared data courtesy Iowa Environmental Mesonet",
parameters: {
transparent: "true",
format: "image/png",
},
})
);
addAdditionalLayerOption(
"United States Weather Radar",
new Cesium.WebMapServiceImageryProvider({
url:
"https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?",
layers: "nexrad-n0r",
credit: "Radar data courtesy Iowa Environmental Mesonet",
parameters: {
transparent: "true",
format: "image/png",
},
})
);
addAdditionalLayerOption(
"TileMapService Image",
new Cesium.TileMapServiceImageryProvider({
url: "../images/cesium_maptiler/Cesium_Logo_Color",
}),
0.2
);
addAdditionalLayerOption(
"Single Image",
new Cesium.SingleTileImageryProvider({
url: "../images/Cesium_Logo_overlay.png",
rectangle: Cesium.Rectangle.fromDegrees(
-115.0,
38.0,
-107,
39.75
),
}),
1.0
);
addAdditionalLayerOption(
"Grid",
new Cesium.GridImageryProvider(),
1.0,
false
);
addAdditionalLayerOption(
"Tile Coordinates",
new Cesium.TileCoordinatesImageryProvider(),
1.0,
false
);
}
function addBaseLayerOption(name, imageryProvider) {
var layer;
if (typeof imageryProvider === "undefined") {
layer = imageryLayers.get(0);
viewModel.selectedLayer = layer;
} else {
layer = new Cesium.ImageryLayer(imageryProvider);
}
layer.name = name;
baseLayers.push(layer);
}
function addAdditionalLayerOption(name, imageryProvider, alpha, show) {
var layer = imageryLayers.addImageryProvider(imageryProvider);
layer.alpha = Cesium.defaultValue(alpha, 0.5);
layer.show = Cesium.defaultValue(show, true);
layer.name = name;
Cesium.knockout.track(layer, ["alpha", "show", "name"]);
}
function updateLayerList() {
var numLayers = imageryLayers.length;
viewModel.layers.splice(0, viewModel.layers.length);
for (var i = numLayers - 1; i >= 0; --i) {
viewModel.layers.push(imageryLayers.get(i));
}
}
setupLayers();
updateLayerList();
//Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout
.getObservable(viewModel, "selectedLayer")
.subscribe(function (baseLayer) {
// Handle changes to the drop-down base layer selector.
var activeLayerIndex = 0;
var numLayers = viewModel.layers.length;
for (var i = 0; i < numLayers; ++i) {
if (viewModel.isSelectableLayer(viewModel.layers[i])) {
activeLayerIndex = i;
break;
}
}
var activeLayer = viewModel.layers[activeLayerIndex];
var show = activeLayer.show;
var alpha = activeLayer.alpha;
imageryLayers.remove(activeLayer, false);
imageryLayers.add(baseLayer, numLayers - activeLayerIndex - 1);
baseLayer.show = show;
baseLayer.alpha = alpha;
updateLayerList();
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Imagery Layers Split.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="Use the split property to only show layers on one side of a slider."
/>
<meta
name="cesium-sandcastle-labels"
content="Beginner, Tutorials, 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);
#slider {
position: absolute;
left: 50%;
top: 0px;
background-color: #d3d3d3;
width: 5px;
height: 100%;
z-index: 9999;
}
#slider:hover {
cursor: ew-resize;
}
</style>
<div id="cesiumContainer" class="fullSize">
<div id="slider"></div>
</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", {
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url:
"https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
}),
baseLayerPicker: false,
infoBox: false,
});
var layers = viewer.imageryLayers;
var earthAtNight = layers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3812 })
);
earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.
// Sync the position of the slider with the split position
var slider = document.getElementById("slider");
viewer.scene.imagerySplitPosition =
slider.offsetLeft / slider.parentElement.offsetWidth;
var handler = new Cesium.ScreenSpaceEventHandler(slider);
var moveActive = false;
function move(movement) {
if (!moveActive) {
return;
}
var relativeOffset = movement.endPosition.x;
var splitPosition =
(slider.offsetLeft + relativeOffset) /
slider.parentElement.offsetWidth;
slider.style.left = 100.0 * splitPosition + "%";
viewer.scene.imagerySplitPosition = splitPosition;
}
handler.setInputAction(function () {
moveActive = true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function () {
moveActive = true;
}, Cesium.ScreenSpaceEventType.PINCH_START);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
handler.setInputAction(function () {
moveActive = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function () {
moveActive = false;
}, Cesium.ScreenSpaceEventType.PINCH_END);
//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