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/Imagery Layers Texture Filters.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="Set the texture minification and magnification filters of an imagery layer."
/>
<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: 2px;
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");
viewer.camera.flyTo({
destination: new Cesium.Rectangle.fromDegrees(-84, 43, -80, 47),
});
var layers = viewer.imageryLayers;
layers.removeAll();
var layerLinear = layers.addImageryProvider(
new Cesium.TileMapServiceImageryProvider({
url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
})
);
var layerNearest = layers.addImageryProvider(
new Cesium.TileMapServiceImageryProvider({
url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
})
);
// Set the texture minification and magnification filters of layerNearest. Default is LINEAR.
layerNearest.minificationFilter =
Cesium.TextureMinificationFilter.NEAREST;
layerNearest.magnificationFilter =
Cesium.TextureMagnificationFilter.NEAREST;
// The remaining code installs a split layer so the effect of the texture filters becomes apparent.
layerNearest.splitDirection = Cesium.ImagerySplitDirection.RIGHT;
var slider = document.getElementById("slider");
viewer.scene.imagerySplitPosition =
slider.offsetLeft / slider.parentElement.offsetWidth;
var dragStartX = 0;
document
.getElementById("slider")
.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup", mouseUp, false);
function mouseUp() {
window.removeEventListener("mousemove", sliderMove, true);
}
function mouseDown(e) {
var slider = document.getElementById("slider");
dragStartX = e.clientX - slider.offsetLeft;
window.addEventListener("mousemove", sliderMove, true);
}
function sliderMove(e) {
var slider = document.getElementById("slider");
var splitPosition =
(e.clientX - dragStartX) / slider.parentElement.offsetWidth;
slider.style.left = 100.0 * splitPosition + "%";
viewer.scene.imagerySplitPosition = splitPosition;
}
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Imagery Layers.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="Create imagery layers from multiple sources."
/>
<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);
</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", {
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS,
}),
baseLayerPicker: false,
});
var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3812 })
);
blackMarble.alpha = 0.5;
blackMarble.brightness = 2.0;
layers.addImageryProvider(
new Cesium.SingleTileImageryProvider({
url: "../images/Cesium_Logo_overlay.png",
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
})
); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Interpolation.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="Construct new data points within the range of a discrete set of known data points."
/>
<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 id="interpolationMenu"></div>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, //Disable InfoBox widget
selectionIndicator: false, //Disable selection indicator
shouldAnimate: true, // Enable animations
terrainProvider: Cesium.createWorldTerrain(),
});
//Enable lighting based on the sun position
viewer.scene.globe.enableLighting = true;
//Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;
//Set the random number seed for consistent results.
Cesium.Math.setRandomNumberSeed(3);
//Set bounds of our simulation time
var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(
start,
360,
new Cesium.JulianDate()
);
//Make sure viewer is at the desired time.
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
viewer.clock.multiplier = 10;
//Set timeline to simulation bounds
viewer.timeline.zoomTo(start, stop);
//Generate a random circular pattern with varying heights.
function computeCirclularFlight(lon, lat, radius) {
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i <= 360; i += 45) {
var radians = Cesium.Math.toRadians(i);
var time = Cesium.JulianDate.addSeconds(
start,
i,
new Cesium.JulianDate()
);
var position = Cesium.Cartesian3.fromDegrees(
lon + radius * 1.5 * Math.cos(radians),
lat + radius * Math.sin(radians),
Cesium.Math.nextRandomNumber() * 500 + 1750
);
property.addSample(time, position);
//Also create a point for each sample we generate.
viewer.entities.add({
position: position,
point: {
pixelSize: 8,
color: Cesium.Color.TRANSPARENT,
outlineColor: Cesium.Color.YELLOW,
outlineWidth: 3,
},
});
}
return property;
}
//Compute the entity position property.
var position = computeCirclularFlight(-112.110693, 36.0994841, 0.03);
//Actually create the entity
var entity = viewer.entities.add({
//Set the entity availability to the same interval as the simulation time.
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
//Use our computed positions
position: position,
//Automatically compute orientation based on position movement.
orientation: new Cesium.VelocityOrientationProperty(position),
//Load the Cesium plane model to represent the entity
model: {
uri: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
minimumPixelSize: 64,
},
//Show the path as a pink line sampled in 1 second increments.
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.YELLOW,
}),
width: 10,
},
});
//Add button to view the path from the top down
Sandcastle.addDefaultToolbarButton("View Top Down", function () {
viewer.trackedEntity = undefined;
viewer.zoomTo(
viewer.entities,
new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90))
);
});
//Add button to view the path from the side
Sandcastle.addToolbarButton("View Side", function () {
viewer.trackedEntity = undefined;
viewer.zoomTo(
viewer.entities,
new Cesium.HeadingPitchRange(
Cesium.Math.toRadians(-90),
Cesium.Math.toRadians(-15),
7500
)
);
});
//Add button to track the entity as it moves
Sandcastle.addToolbarButton("View Aircraft", function () {
viewer.trackedEntity = entity;
});
//Add a combo box for selecting each interpolation mode.
Sandcastle.addToolbarMenu(
[
{
text: "Interpolation: Linear Approximation",
onselect: function () {
entity.position.setInterpolationOptions({
interpolationDegree: 1,
interpolationAlgorithm: Cesium.LinearApproximation,
});
},
},
{
text: "Interpolation: Lagrange Polynomial Approximation",
onselect: function () {
entity.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm:
Cesium.LagrangePolynomialApproximation,
});
},
},
{
text: "Interpolation: Hermite Polynomial Approximation",
onselect: function () {
entity.position.setInterpolationOptions({
interpolationDegree: 2,
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
});
},
},
],
"interpolationMenu"
);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/KML Tours.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="A simple KML example." />
<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
var viewer = new Cesium.Viewer("cesiumContainer");
var options = {
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
};
var tour = null;
viewer.dataSources
.add(
Cesium.KmlDataSource.load(
"../../SampleData/kml/eiffel-tower-flyto.kml",
options
)
)
.then(function (dataSource) {
tour = dataSource.kmlTours[0];
tour.tourStart.addEventListener(function () {
console.log("Start tour");
});
tour.tourEnd.addEventListener(function (terminated) {
console.log((terminated ? "Terminate" : "End") + " tour");
});
tour.entryStart.addEventListener(function (entry) {
console.log("Play " + entry.type + " (" + entry.duration + ")");
});
tour.entryEnd.addEventListener(function (entry, terminated) {
console.log(
(terminated ? "Terminate" : "End") + " " + entry.type
);
});
});
Sandcastle.addToolbarButton("Play", function () {
tour.play(viewer);
});
Sandcastle.addToolbarButton("Terminate", function () {
tour.stop();
});
Sandcastle.reset = function () {
viewer.dataSources.removeAll();
viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
};
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/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="A simple KML example." />
<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
var viewer = new Cesium.Viewer("cesiumContainer");
var options = {
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
};
Sandcastle.addToolbarMenu(
[
{
text: "KML - Global Science Facilities",
onselect: function () {
viewer.camera.flyHome(0);
viewer.dataSources.add(
Cesium.KmlDataSource.load(
"../../SampleData/kml/facilities/facilities.kml",
options
)
);
},
},
{
text: "KMZ with embedded data - GDP per capita",
onselect: function () {
viewer.camera.flyHome(0);
viewer.dataSources.add(
Cesium.KmlDataSource.load(
"../../SampleData/kml/gdpPerCapita2008.kmz",
options
)
);
},
},
{
text: "gx KML extensions - Bike Ride",
onselect: function () {
viewer.dataSources
.add(
Cesium.KmlDataSource.load(
"../../SampleData/kml/bikeRide.kml",
options
)
)
.then(function (dataSource) {
viewer.clock.shouldAnimate = false;
var rider = dataSource.entities.getById("tour");
viewer.flyTo(rider).then(function () {
viewer.trackedEntity = rider;
viewer.selectedEntity = viewer.trackedEntity;
viewer.clock.multiplier = 30;
viewer.clock.shouldAnimate = true;
});
});
},
},
],
"toolbar"
);
Sandcastle.reset = function () {
viewer.dataSources.removeAll();
viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
};
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Labels.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="Create and style textual labels." />
<meta name="cesium-sandcastle-labels" content="Showcases, 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");
var labelListenerCallback;
function addLabel() {
Sandcastle.declare(addLabel);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
label: {
text: "Philadelphia",
},
});
}
function setFont() {
Sandcastle.declare(setFont);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
label: {
text: "Philadelphia",
font: "24px Helvetica",
fillColor: Cesium.Color.SKYBLUE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
},
});
}
function setProperties() {
Sandcastle.declare(setProperties);
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
-75.1641667,
39.9522222,
300000.0
),
label: {
text: "Philadelphia",
},
});
entity.label.scale = 2.0;
entity.label.showBackground = true;
}
function offsetByDistance() {
Sandcastle.declare(offsetByDistance);
var image = new Image();
image.onload = function () {
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
billboard: {
position: Cesium.Cartesian3.fromDegrees(
-75.1641667,
39.9522222
),
scaleByDistance: new Cesium.NearFarScalar(
1.5e2,
5.0,
1.5e7,
0.5
),
image: image,
},
label: {
text: "Label on top of scaling billboard",
font: "20px sans-serif",
showBackground: true,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
pixelOffset: new Cesium.Cartesian2(0.0, -image.height),
pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
1.5e2,
3.0,
1.5e7,
0.5
),
},
});
};
image.src = "../images/facility.gif";
}
function fadeByDistance() {
Sandcastle.declare(fadeByDistance);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-73.94, 40.67),
label: {
text: "New York",
translucencyByDistance: new Cesium.NearFarScalar(
1.5e2,
1.0,
1.5e8,
0.0
),
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-84.39, 33.75),
label: {
text: "Atlanta",
translucencyByDistance: new Cesium.NearFarScalar(
1.5e5,
1.0,
1.5e7,
0.0
),
},
});
}
function scaleByDistance() {
Sandcastle.declare(scaleByDistance);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
label: {
text: "Philadelphia",
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),
},
});
}
function setRightToLeft() {
Sandcastle.declare(setRightToLeft);
Cesium.Label.enableRightToLeftDetection = true; //Only needs to be set once at the beginning of the application.
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
label: {
text: "Master (אדון): Hello\nתלמיד (student): שלום",
},
});
}
function animateLabel() {
Sandcastle.declare(animateLabel);
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
label: {
text: "Philadelphia",
outlineColor: Cesium.Color.BLACK,
outlineWidth: 0,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
},
});
var outlineDelta = 0.1;
var fontDelta = -1.0;
var fontSize = 20.0;
var minFontSize = 1.0;
var maxFontSize = 48.0;
labelListenerCallback = viewer.scene.preUpdate.addEventListener(
function (scene, time) {
entity.label.outlineWidth += outlineDelta;
if (
entity.label.outlineWidth >= 4.0 ||
entity.label.outlineWidth <= 0.0
) {
outlineDelta *= -1.0;
}
fontSize += fontDelta;
if (fontSize >= maxFontSize || fontSize <= minFontSize) {
fontDelta *= -1.0;
}
entity.label.font = fontSize + "px Calibri";
}
);
}
Sandcastle.addToolbarMenu([
{
text: "Add label",
onselect: function () {
addLabel();
Sandcastle.highlight(addLabel);
},
},
{
text: "Set font",
onselect: function () {
setFont();
Sandcastle.highlight(setFont);
},
},
{
text: "Set properties",
onselect: function () {
setProperties();
Sandcastle.highlight(setProperties);
},
},
{
text: "Offset label by distance",
onselect: function () {
offsetByDistance();
Sandcastle.highlight(offsetByDistance);
},
},
{
text: "Fade label by distance",
onselect: function () {
fadeByDistance();
Sandcastle.highlight(fadeByDistance);
},
},
{
text: "Scale label by distance",
onselect: function () {
scaleByDistance();
Sandcastle.highlight(scaleByDistance);
},
},
{
text: "Set label with right-to-left language",
onselect: function () {
setRightToLeft();
Sandcastle.highlight(setRightToLeft);
},
},
{
text: "Animate Label",
onselect: function () {
animateLabel();
Sandcastle.highlight(animateLabel);
},
},
]);
Sandcastle.reset = function () {
viewer.entities.removeAll();
if (Cesium.defined(labelListenerCallback)) {
labelListenerCallback();
}
};
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/LensFlare.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="Lens Flare." />
<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>Lens Flare</td>
<td><input type="checkbox" data-bind="checked: show" /></td>
</tr>
<tr>
<td>Intensity</td>
<td>
<input
type="range"
min="0"
max="10"
step="0.01"
data-bind="value: intensity, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Distortion</td>
<td>
<input
type="range"
min="1"
max="20"
step="0.01"
data-bind="value: distortion, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Dispersion</td>
<td>
<input
type="range"
min="0"
max="1"
step="0.01"
data-bind="value: dispersion, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Halo Width</td>
<td>
<input
type="range"
min="0"
max="1"
step="0.01"
data-bind="value: haloWidth, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Dirt Amount</td>
<td>
<input
type="range"
min="0"
max="1"
step="0.01"
data-bind="value: dirtAmount, 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 viewModel = {
show: true,
intensity: 2.0,
distortion: 10.0,
dispersion: 0.4,
haloWidth: 0.4,
dirtAmount: 0.4,
};
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);
}
}
var lensFlare = viewer.scene.postProcessStages.add(
Cesium.PostProcessStageLibrary.createLensFlareStage()
);
function updatePostProcess() {
lensFlare.enabled = Boolean(viewModel.show);
lensFlare.uniforms.intensity = Number(viewModel.intensity);
lensFlare.uniforms.distortion = Number(viewModel.distortion);
lensFlare.uniforms.ghostDispersal = Number(viewModel.dispersion);
lensFlare.uniforms.haloWidth = Number(viewModel.haloWidth);
lensFlare.uniforms.dirtAmount = Number(viewModel.dirtAmount);
lensFlare.uniforms.earthRadius = Cesium.Ellipsoid.WGS84.maximumRadius;
}
updatePostProcess();
var camera = viewer.scene.camera;
camera.position = new Cesium.Cartesian3(
40010447.97500168,
56238683.46406788,
20776576.752223067
);
camera.direction = new Cesium.Cartesian3(
-0.5549701431494752,
-0.7801872010801355,
-0.2886452346452218
);
camera.up = new Cesium.Cartesian3(
-0.3016252360948521,
-0.13464820558887716,
0.9438707950150912
);
camera.right = Cesium.Cartesian3.cross(
camera.direction,
camera.up,
new Cesium.Cartesian3()
);
viewer.clock.currentTime = new Cesium.JulianDate(
2458047,
27399.860215000022
);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/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="Set custom light direction and color." />
<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
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain({
requestWaterMask: true,
requestVertexNormals: true,
}),
});
var scene = viewer.scene;
scene.globe.enableLighting = true;
var scratchIcrfToFixed = new Cesium.Matrix3();
var scratchMoonPosition = new Cesium.Cartesian3();
var scratchMoonDirection = new Cesium.Cartesian3();
function getMoonDirection(result) {
result = Cesium.defined(result) ? result : new Cesium.Cartesian3();
var icrfToFixed = scratchIcrfToFixed;
var date = viewer.clock.currentTime;
if (
!Cesium.defined(
Cesium.Transforms.computeIcrfToFixedMatrix(date, icrfToFixed)
)
) {
Cesium.Transforms.computeTemeToPseudoFixedMatrix(date, icrfToFixed);
}
var moonPosition = Cesium.Simon1994PlanetaryPositions.computeMoonPositionInEarthInertialFrame(
date,
scratchMoonPosition
);
Cesium.Matrix3.multiplyByVector(
icrfToFixed,
moonPosition,
moonPosition
);
var moonDirection = Cesium.Cartesian3.normalize(
moonPosition,
scratchMoonDirection
);
return Cesium.Cartesian3.negate(moonDirection, result);
}
var directionalLight = new Cesium.DirectionalLight({
direction: new Cesium.Cartesian3(
0.2454278300540191,
0.8842635425193919,
0.39729481195458805
),
});
var flashlight = new Cesium.DirectionalLight({
direction: scene.camera.directionWC, // Updated every frame
});
var moonLight = new Cesium.DirectionalLight({
direction: getMoonDirection(), // Updated every frame
color: new Cesium.Color(0.9, 0.925, 1.0),
intensity: 0.5,
});
var sunLight = new Cesium.SunLight();
var customColorLight = new Cesium.DirectionalLight({
direction: new Cesium.Cartesian3(
-0.2454278300540191,
0.8842635425193919,
0.39729481195458805
),
color: Cesium.Color.fromCssColorString("#deca7c"),
});
scene.preRender.addEventListener(function (scene, time) {
if (scene.light === flashlight) {
scene.light.direction = Cesium.Cartesian3.clone(
scene.camera.directionWC,
scene.light.direction
);
} else if (scene.light === moonLight) {
scene.light.direction = getMoonDirection(scene.light.direction);
}
});
viewer.entities.add({
position: Cesium.Cartesian3.fromRadians(
-2.1463338399937277,
0.6677959688982861,
32.18991401746337
),
model: {
uri: "../../SampleData/models/CesiumBalloon/CesiumBalloon.glb",
scale: 7.0,
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromRadians(
-2.14633449752228,
0.667796065242357,
24.47647034111423
),
cylinder: {
length: 8.0,
topRadius: 2.0,
bottomRadius: 2.0,
material: Cesium.Color.WHITE,
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromRadians(
-2.1463332294173365,
0.6677959755384729,
26.2876064083145
),
ellipsoid: {
radii: new Cesium.Cartesian3(2.5, 2.5, 2.5),
material: Cesium.Color.WHITE.withAlpha(0.5),
},
});
function setTime(iso8601) {
var currentTime = Cesium.JulianDate.fromIso8601(iso8601);
var endTime = Cesium.JulianDate.addDays(
currentTime,
2,
new Cesium.JulianDate()
);
viewer.clock.currentTime = currentTime;
viewer.timeline.zoomTo(currentTime, endTime);
}
function reset() {
// Set scene defaults
scene.light = sunLight;
scene.globe.dynamicAtmosphereLighting = true;
scene.globe.dynamicAtmosphereLightingFromSun = false;
setTime("2020-01-09T23:00:39.018261982600961346Z");
}
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(
-2729490.8390059783,
-4206389.878855597,
3928671.2763356343
),
orientation: new Cesium.HeadingPitchRoll(
2.2482480507178426,
-0.20084951548781982,
0.002593933673552762
),
endTransform: Cesium.Matrix4.IDENTITY,
});
var options = [
{
text: "Fixed lighting",
onselect: function () {
reset();
scene.light = directionalLight;
},
},
{
text: "Flashlight",
onselect: function () {
reset();
scene.light = flashlight;
scene.globe.dynamicAtmosphereLighting = false;
},
},
{
text: "Moonlight",
onselect: function () {
reset();
scene.light = moonLight;
scene.globe.dynamicAtmosphereLightingFromSun = true;
setTime("2020-01-10T05:29:41.17946898164518643Z");
},
},
{
text: "Sunlight",
onselect: function () {
reset();
},
},
{
text: "Custom color",
onselect: function () {
reset();
scene.light = customColorLight;
},
},
];
Sandcastle.addToolbarMenu(options);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/LocalToFixedFrame.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 localFrameToFixedFrameGenerator for adequate rotation."
/>
<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>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
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 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 deltaRadians = Cesium.Math.toRadians(1.0);
var localFrames = [
{
pos: Cesium.Cartesian3.fromDegrees(-123.075, 44.045, 5000.0),
converter: Cesium.Transforms.eastNorthUpToFixedFrame,
comments: "Classical East North Up\nlocal Frame",
},
{
pos: Cesium.Cartesian3.fromDegrees(-123.075, 44.05, 5500.0),
converter: Cesium.Transforms.localFrameToFixedFrameGenerator(
"north",
"west"
),
comments: "North West Up\nlocal Frame",
},
{
pos: Cesium.Cartesian3.fromDegrees(-123.075, 44.04, 4500.0),
converter: Cesium.Transforms.localFrameToFixedFrameGenerator(
"south",
"up"
),
comments: "South Up West\nlocal Frame",
},
{
pos: Cesium.Cartesian3.fromDegrees(-123.075, 44.05, 4500.0),
converter: Cesium.Transforms.localFrameToFixedFrameGenerator(
"up",
"east"
),
comments: "Up East North\nlocal Frame",
},
{
pos: Cesium.Cartesian3.fromDegrees(-123.075, 44.04, 5500.0),
converter: Cesium.Transforms.localFrameToFixedFrameGenerator(
"down",
"east"
),
comments: "Down East South\nlocal Frame",
},
];
var primitives = [];
var hprRollZero = new Cesium.HeadingPitchRoll();
for (var i = 0; i < localFrames.length; i++) {
var position = localFrames[i].pos;
var converter = localFrames[i].converter;
var comments = localFrames[i].comments;
var planePrimitive = scene.primitives.add(
Cesium.Model.fromGltf({
url: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
position,
hpRoll,
Cesium.Ellipsoid.WGS84,
converter
),
minimumPixelSize: 128,
})
);
primitives.push({
primitive: planePrimitive,
converter: converter,
position: position,
});
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
position,
hprRollZero,
Cesium.Ellipsoid.WGS84,
converter
);
scene.primitives.add(
new Cesium.DebugModelMatrixPrimitive({
modelMatrix: modelMatrix,
length: 300.0,
width: 10.0,
})
);
var positionLabel = position.clone();
positionLabel.z = position.z + 300.0;
viewer.entities.add({
position: positionLabel,
label: {
text: comments,
font: "18px Helvetica",
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.CENTER,
HorizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
},
});
}
primitives[0].primitive.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(90.0);
var pitch = Cesium.Math.toRadians(0.0);
hpRange.heading = heading;
hpRange.pitch = pitch;
hpRange.range = r * 100.0;
camera.lookAt(center, hpRange);
});
document.addEventListener("keydown", function (e) {
switch (e.keyCode) {
case 40:
// pitch down
hpRoll.pitch -= deltaRadians;
if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
hpRoll.pitch += Cesium.Math.TWO_PI;
}
break;
case 38:
// 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");
viewer.scene.preUpdate.addEventListener(function (scene, time) {
for (var i = 0; i < primitives.length; i++) {
var primitive = primitives[i].primitive;
var converter = primitives[i].converter;
var position = primitives[i].position;
Cesium.Transforms.headingPitchRollToFixedFrame(
position,
hpRoll,
Cesium.Ellipsoid.WGS84,
converter,
primitive.modelMatrix
);
}
});
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);
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Map Pins.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="Create and display map pins." />
<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", {
timeline: false,
animation: false,
});
var pinBuilder = new Cesium.PinBuilder();
var bluePin = viewer.entities.add({
name: "Blank blue pin",
position: Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),
billboard: {
image: pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
var questionPin = viewer.entities.add({
name: "Question mark",
position: Cesium.Cartesian3.fromDegrees(-75.1698529, 39.9220071),
billboard: {
image: pinBuilder.fromText("?", Cesium.Color.BLACK, 48).toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
var url = Cesium.buildModuleUrl("Assets/Textures/maki/grocery.png");
var groceryPin = Cesium.when(
pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48),
function (canvas) {
return viewer.entities.add({
name: "Grocery store",
position: Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
billboard: {
image: canvas.toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
}
);
//Create a red pin representing a hospital from the maki icon set.
var hospitalPin = Cesium.when(
pinBuilder.fromMakiIconId("hospital", Cesium.Color.RED, 48),
function (canvas) {
return viewer.entities.add({
name: "Hospital",
position: Cesium.Cartesian3.fromDegrees(-75.1698606, 39.9211275),
billboard: {
image: canvas.toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
}
);
//Since some of the pins are created asynchronously, wait for them all to load before zooming/
Cesium.when.all(
[bluePin, questionPin, groceryPin, hospitalPin],
function (pins) {
viewer.zoomTo(pins);
}
);
//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