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/CZML Spheres and Ellipsoids.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 Spheres and Ellipsoids" />
<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: "CZML Geometries: Spheres and Ellipsoids",
version: "1.0",
},
{
id: "blueEllipsoid",
name: "blue ellipsoid",
position: {
cartographicDegrees: [-114.0, 40.0, 300000.0],
},
ellipsoid: {
radii: {
cartesian: [200000.0, 200000.0, 300000.0],
},
fill: true,
material: {
solidColor: {
color: {
rgba: [0, 0, 255, 255],
},
},
},
},
},
{
id: "redSphere",
name: "Red sphere with black outline",
position: {
cartographicDegrees: [-107.0, 40.0, 300000.0],
},
ellipsoid: {
radii: {
cartesian: [300000.0, 300000.0, 300000.0],
},
fill: true,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 100],
},
},
},
outline: true,
outlineColor: {
rgbaf: [0, 0, 0, 1],
},
},
},
{
id: "yellowEllipsoid",
name: "ellipsoid with yellow outline",
position: {
cartographicDegrees: [-100.0, 40.0, 300000.0],
},
ellipsoid: {
radii: {
cartesian: [200000.0, 200000.0, 300000.0],
},
fill: false,
outline: true,
outlineColor: {
rgba: [255, 255, 0, 255],
},
slicePartitions: 24,
stackPartitions: 36,
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer");
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Wall.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 Wall" />
<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: "CZML Wall",
version: "1.0",
},
{
id: "wall",
wall: {
positions: {
cartographicDegrees: [
-115.0,
50.0,
1500000,
-112.5,
50.0,
500000,
-110.0,
50.0,
1500000,
-107.5,
50.0,
500000,
-105.0,
50.0,
1500000,
-102.5,
50.0,
500000,
-100.0,
50.0,
1500000,
-97.5,
50.0,
500000,
-95.0,
50.0,
1500000,
-92.5,
50.0,
500000,
-90.0,
50.0,
1500000,
],
},
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 150],
},
},
},
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer");
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML ZIndex.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 Z-indexing" />
<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: "CZML zIndex",
version: "1.0",
},
{
id: "shape1",
name: "Blue circle",
position: {
cartographicDegrees: [-105.0, 40.0, 0.0],
},
ellipse: {
semiMinorAxis: 300000.0,
semiMajorAxis: 300000.0,
zIndex: 3,
material: {
solidColor: {
color: {
rgba: [0, 0, 255, 255],
},
},
},
},
},
{
id: "shape2",
name: "Green corridor",
corridor: {
positions: {
cartographicDegrees: [
-90.0,
43.0,
0,
-95.0,
43.0,
0,
-95.0,
38.0,
0,
],
},
width: 200000.0,
zIndex: 3,
material: {
solidColor: {
color: {
rgba: [0, 255, 0, 255],
},
},
},
},
},
{
id: "shape3",
name: "Red polygon",
polygon: {
positions: {
cartographicDegrees: [
-115.0,
47.0,
0,
-115.0,
42.0,
0,
-107.0,
43.0,
0,
-102.0,
41.0,
0,
-102.0,
45.0,
0,
],
},
zIndex: 1,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 255],
},
},
},
},
},
{
id: "shape4",
name: "Striped rectangle",
rectangle: {
coordinates: {
wsenDegrees: [-105, 40, -95, 50],
},
zIndex: 2,
fill: true,
material: {
stripe: {
orientation: "VERTICAL",
evenColor: { rgba: [255, 255, 0, 255] },
oddColor: { rgba: [255, 0, 255, 255] },
repeat: 5,
},
},
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer");
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML.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 CZML example showing four satellites in orbit around the Earth, and some ground objects."
/>
<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", {
shouldAnimate: true,
});
Sandcastle.addDefaultToolbarButton("Satellites", function () {
viewer.dataSources.add(
Cesium.CzmlDataSource.load("../../SampleData/simple.czml")
);
viewer.camera.flyHome(0);
});
Sandcastle.addToolbarButton("Vehicle", function () {
viewer.dataSources.add(
Cesium.CzmlDataSource.load("../../SampleData/Vehicle.czml")
);
viewer.scene.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-116.52, 35.02, 95000),
orientation: {
heading: 6,
},
});
});
Sandcastle.reset = function () {
viewer.dataSources.removeAll();
};
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Callback Property.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
// This example illustrates a Callback Property, a property whose
// value is lazily evaluated by a callback function.
// Use a CallbackProperty when your data can't be pre-computed
// or needs to be derived from other properties at runtime.
var viewer = new Cesium.Viewer("cesiumContainer");
viewer.clock.shouldAnimate = true;
var startLatitude = 35;
var startLongitude = -120;
var endLongitude;
var startTime = Cesium.JulianDate.now();
// Add a polyline to the scene. Positions are dynamic.
var isConstant = false;
var redLine = viewer.entities.add({
polyline: {
// This callback updates positions each frame.
positions: new Cesium.CallbackProperty(function (time, result) {
endLongitude =
startLongitude +
0.001 * Cesium.JulianDate.secondsDifference(time, startTime);
return Cesium.Cartesian3.fromDegreesArray(
[startLongitude, startLatitude, endLongitude, startLatitude],
Cesium.Ellipsoid.WGS84,
result
);
}, isConstant),
width: 5,
material: Cesium.Color.RED,
},
});
var startCartographic = Cesium.Cartographic.fromDegrees(
startLongitude,
startLatitude
);
// use scratch object to avoid new allocations per frame.
var endCartographic = new Cesium.Cartographic();
var scratch = new Cesium.Cartographic();
var geodesic = new Cesium.EllipsoidGeodesic();
// Calculate the length of the line
function getLength(time, result) {
// Get the end position from the polyLine's callback.
var endPoint = redLine.polyline.positions.getValue(time, result)[1];
endCartographic = Cesium.Cartographic.fromCartesian(endPoint);
geodesic.setEndPoints(startCartographic, endCartographic);
var lengthInMeters = Math.round(geodesic.surfaceDistance);
return (lengthInMeters / 1000).toFixed(1) + " km";
}
function getMidpoint(time, result) {
// Get the end position from the polyLine's callback.
var endPoint = redLine.polyline.positions.getValue(time, result)[1];
endCartographic = Cesium.Cartographic.fromCartesian(endPoint);
geodesic.setEndPoints(startCartographic, endCartographic);
var midpointCartographic = geodesic.interpolateUsingFraction(
0.5,
scratch
);
return Cesium.Cartesian3.fromRadians(
midpointCartographic.longitude,
midpointCartographic.latitude
);
}
// Label the polyline with calculated length.
var label = viewer.entities.add({
position: new Cesium.CallbackProperty(getMidpoint, isConstant),
label: {
// This callback updates the length to print each frame.
text: new Cesium.CallbackProperty(getLength, isConstant),
font: "20px sans-serif",
pixelOffset: new Cesium.Cartesian2(0.0, 20),
},
});
// Keep the view centered.
viewer.trackedEntity = label;
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Camera Tutorial.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 camera to control the view, and create custom event handlers for input."
/>
<meta name="cesium-sandcastle-labels" content="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">
<table class="infoPanel">
<tbody>
<tr>
<td>Click on the Cesium display to start.</td>
</tr>
<tr>
<td>w/s - move forward/backward</td>
</tr>
<tr>
<td>a/d - move left/right</td>
</tr>
<tr>
<td>q/e - move up/down</td>
</tr>
<tr>
<td>
left mouse button down plus mouse move changes the look direction
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.onclick = function () {
canvas.focus();
};
var ellipsoid = scene.globe.ellipsoid;
// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;
var startMousePosition;
var mousePosition;
var flags = {
looking: false,
moveForward: false,
moveBackward: false,
moveUp: false,
moveDown: false,
moveLeft: false,
moveRight: false,
};
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(function (movement) {
flags.looking = true;
mousePosition = startMousePosition = Cesium.Cartesian3.clone(
movement.position
);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function (movement) {
mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function (position) {
flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
function getFlagForKeyCode(keyCode) {
switch (keyCode) {
case "W".charCodeAt(0):
return "moveForward";
case "S".charCodeAt(0):
return "moveBackward";
case "Q".charCodeAt(0):
return "moveUp";
case "E".charCodeAt(0):
return "moveDown";
case "D".charCodeAt(0):
return "moveRight";
case "A".charCodeAt(0):
return "moveLeft";
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
);
viewer.clock.onTick.addEventListener(function (clock) {
var camera = viewer.camera;
if (flags.looking) {
var width = canvas.clientWidth;
var height = canvas.clientHeight;
// Coordinate (0.0, 0.0) will be where the mouse was clicked.
var x = (mousePosition.x - startMousePosition.x) / width;
var y = -(mousePosition.y - startMousePosition.y) / height;
var lookFactor = 0.05;
camera.lookRight(x * lookFactor);
camera.lookUp(y * lookFactor);
}
// Change movement speed based on the distance of the camera to the surface of the ellipsoid.
var cameraHeight = ellipsoid.cartesianToCartographic(camera.position)
.height;
var moveRate = cameraHeight / 100.0;
if (flags.moveForward) {
camera.moveForward(moveRate);
}
if (flags.moveBackward) {
camera.moveBackward(moveRate);
}
if (flags.moveUp) {
camera.moveUp(moveRate);
}
if (flags.moveDown) {
camera.moveDown(moveRate);
}
if (flags.moveLeft) {
camera.moveLeft(moveRate);
}
if (flags.moveRight) {
camera.moveRight(moveRate);
}
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Camera.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="Fly to a specified location or view a geographic rectangle."
/>
<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);
#viewChanged,
#cameraChanged {
display: none;
background-color: red;
color: white;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<div id="viewChanged">View Changed</div>
<div id="cameraChanged">Camera Changed</div>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var clock = viewer.clock;
var referenceFramePrimitive;
function flyToSanDiego() {
Sandcastle.declare(flyToSanDiego);
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
});
}
function flyToHeadingPitchRoll() {
Sandcastle.declare(flyToHeadingPitchRoll);
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-122.22, 46.12, 5000.0),
orientation: {
heading: Cesium.Math.toRadians(20.0),
pitch: Cesium.Math.toRadians(-35.0),
roll: 0.0,
},
});
}
function flyToLocation() {
Sandcastle.declare(flyToLocation);
// Create callback for browser's geolocation
function fly(position) {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
position.coords.longitude,
position.coords.latitude,
1000.0
),
});
}
// Ask browser for location, and fly there.
navigator.geolocation.getCurrentPosition(fly);
}
function viewRectangle() {
Sandcastle.declare(viewRectangle);
var west = -77.0;
var south = 38.0;
var east = -72.0;
var north = 42.0;
var rectangle = Cesium.Rectangle.fromDegrees(
west,
south,
east,
north
);
viewer.camera.setView({
destination: rectangle,
});
// Show the rectangle. Not required; just for show.
viewer.entities.add({
rectangle: {
coordinates: rectangle,
fill: false,
outline: true,
outlineColor: Cesium.Color.WHITE,
},
});
}
function flyToRectangle() {
Sandcastle.declare(flyToRectangle);
var west = -90.0;
var south = 38.0;
var east = -87.0;
var north = 40.0;
var rectangle = Cesium.Rectangle.fromDegrees(
west,
south,
east,
north
);
viewer.camera.flyTo({
destination: rectangle,
});
// Show the rectangle. Not required; just for show.
viewer.entities.add({
rectangle: {
coordinates: rectangle,
fill: false,
outline: true,
outlineColor: Cesium.Color.WHITE,
},
});
}
function setReferenceFrame() {
Sandcastle.declare(setReferenceFrame);
var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
// View in east-north-up frame
var camera = viewer.camera;
camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
camera.lookAtTransform(
transform,
new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0)
);
// Show reference frame. Not required.
referenceFramePrimitive = scene.primitives.add(
new Cesium.DebugModelMatrixPrimitive({
modelMatrix: transform,
length: 100000.0,
})
);
}
function setHeadingPitchRoll() {
Sandcastle.declare(setHeadingPitchRoll);
var camera = viewer.camera;
camera.setView({
destination: Cesium.Cartesian3.fromDegrees(
-75.5847,
40.0397,
1000.0
),
orientation: {
heading: -Cesium.Math.PI_OVER_TWO,
pitch: -Cesium.Math.PI_OVER_FOUR,
roll: 0.0,
},
});
}
function icrf(scene, time) {
if (scene.mode !== Cesium.SceneMode.SCENE3D) {
return;
}
var icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
if (Cesium.defined(icrfToFixed)) {
var camera = viewer.camera;
var offset = Cesium.Cartesian3.clone(camera.position);
var transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
camera.lookAtTransform(transform, offset);
}
}
function viewInICRF() {
Sandcastle.declare(viewInICRF);
viewer.camera.flyHome(0);
clock.multiplier = 3 * 60 * 60;
scene.postUpdate.addEventListener(icrf);
scene.globe.enableLighting = true;
}
var viewChanged = document.getElementById("viewChanged");
var removeStart;
var removeEnd;
function cameraEvents() {
Sandcastle.declare(cameraEvents);
var camera = viewer.camera;
removeStart = camera.moveStart.addEventListener(function () {
viewChanged.style.display = "block";
});
removeEnd = camera.moveEnd.addEventListener(function () {
viewChanged.style.display = "none";
});
}
var cameraChanged = document.getElementById("cameraChanged");
var removeChanged;
function cameraChanges() {
Sandcastle.declare(cameraChanges);
var i = 0;
removeChanged = viewer.camera.changed.addEventListener(function (
percentage
) {
++i;
cameraChanged.innerText =
"Camera Changed: " + i + ", " + percentage.toFixed(6);
cameraChanged.style.display = "block";
});
}
function flyInACity() {
Sandcastle.declare(flyInACity);
var camera = scene.camera;
camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
-73.98580932617188,
40.74843406689482,
363.34038727246224
),
complete: function () {
setTimeout(function () {
camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
-73.98585975679403,
40.75759944127251,
186.50838555841779
),
orientation: {
heading: Cesium.Math.toRadians(200.0),
pitch: Cesium.Math.toRadians(-50.0),
},
easingFunction: Cesium.EasingFunction.LINEAR_NONE,
});
}, 1000);
},
});
}
function losAngelesToTokyo(adjustPitch) {
var camera = scene.camera;
var tokyoOptions = {
destination: Cesium.Cartesian3.fromDegrees(
139.8148,
35.7142,
20000.0
),
orientation: {
heading: Cesium.Math.toRadians(15.0),
pitch: Cesium.Math.toRadians(-60),
roll: 0.0,
},
duration: 20,
flyOverLongitude: Cesium.Math.toRadians(60.0),
};
var laOptions = {
destination: Cesium.Cartesian3.fromDegrees(
-117.729,
34.457,
10000.0
),
duration: 5,
orientation: {
heading: Cesium.Math.toRadians(-15.0),
pitch: -Cesium.Math.PI_OVER_FOUR,
roll: 0.0,
},
};
laOptions.complete = function () {
setTimeout(function () {
camera.flyTo(tokyoOptions);
}, 1000);
};
if (adjustPitch) {
tokyoOptions.pitchAdjustHeight = 1000;
laOptions.pitchAdjustHeight = 1000;
}
camera.flyTo(laOptions);
}
function flyOverLongitude(adjustPitch) {
Sandcastle.declare(flyOverLongitude);
losAngelesToTokyo();
}
function flyOverLongitudeWithPitch() {
Sandcastle.declare(flyOverLongitudeWithPitch);
losAngelesToTokyo(true);
}
Sandcastle.addToolbarMenu([
{
text: "Camera Options",
},
{
text: "Fly in a city",
onselect: function () {
flyInACity();
Sandcastle.highlight(flyInACity);
},
},
{
text: "Fly to San Diego",
onselect: function () {
flyToSanDiego();
Sandcastle.highlight(flyToSanDiego);
},
},
{
text: "Fly to Location with heading, pitch and roll",
onselect: function () {
flyToHeadingPitchRoll();
Sandcastle.highlight(flyToHeadingPitchRoll);
},
},
{
text: "Fly to My Location",
onselect: function () {
flyToLocation();
Sandcastle.highlight(flyToLocation);
},
},
{
text: "Fly to Rectangle",
onselect: function () {
flyToRectangle();
Sandcastle.highlight(flyToRectangle);
},
},
{
text: "View a Rectangle",
onselect: function () {
viewRectangle();
Sandcastle.highlight(viewRectangle);
},
},
{
text: "Set camera reference frame",
onselect: function () {
setReferenceFrame();
Sandcastle.highlight(setReferenceFrame);
},
},
{
text: "Set camera with heading, pitch, and roll",
onselect: function () {
setHeadingPitchRoll();
Sandcastle.highlight(setHeadingPitchRoll);
},
},
{
text: "View in ICRF",
onselect: function () {
viewInICRF();
Sandcastle.highlight(viewInICRF);
},
},
{
text: "Move events",
onselect: function () {
cameraEvents();
Sandcastle.highlight(cameraEvents);
},
},
{
text: "Camera changed event",
onselect: function () {
cameraChanges();
Sandcastle.highlight(cameraChanges);
},
},
{
text: "Fly from Los Angeles to Tokyo via Europe",
onselect: function () {
flyOverLongitude();
Sandcastle.highlight(flyOverLongitude);
},
},
{
text: "Look down during exaggerated flight",
onselect: function () {
flyOverLongitudeWithPitch();
Sandcastle.highlight(flyOverLongitudeWithPitch);
},
},
]);
Sandcastle.reset = function () {
scene.completeMorph();
viewer.entities.removeAll();
scene.primitives.remove(referenceFramePrimitive);
scene.tweens.removeAll();
if (Cesium.defined(removeStart)) {
removeStart();
removeEnd();
viewChanged.style.display = "none";
removeStart = undefined;
removeEnd = undefined;
}
if (Cesium.defined(removeChanged)) {
removeChanged();
removeChanged = undefined;
cameraChanged.style.display = "none";
}
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
clock.multiplier = 1.0;
scene.postUpdate.removeEventListener(icrf);
scene.globe.enableLighting = false;
};
scene.morphComplete.addEventListener(function () {
Sandcastle.reset();
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Cardboard.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="Configure viewer to add a button enabling look at a mobile device with cardboard."
/>
<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", {
vrButton: true,
terrainProvider: Cesium.createWorldTerrain(),
});
// Click the VR button in the bottom right of the screen to switch to VR mode.
viewer.scene.globe.enableLighting = true;
viewer.scene.globe.depthTestAgainstTerrain = true;
// Follow the path of a plane. See the interpolation Sandcastle example.
Cesium.Math.setRandomNumberSeed(3);
var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(
start,
360,
new Cesium.JulianDate()
);
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 1.0;
viewer.clock.shouldAnimate = true;
function computeCirclularFlight(lon, lat, radius) {
var property = new Cesium.SampledPositionProperty();
var startAngle = Cesium.Math.nextRandomNumber() * 360.0;
var endAngle = startAngle + 360.0;
var increment =
(Cesium.Math.nextRandomNumber() * 2.0 - 1.0) * 10.0 + 45.0;
for (var i = startAngle; i < endAngle; i += increment) {
var radians = Cesium.Math.toRadians(i);
var timeIncrement = i - startAngle;
var time = Cesium.JulianDate.addSeconds(
start,
timeIncrement,
new Cesium.JulianDate()
);
var position = Cesium.Cartesian3.fromDegrees(
lon + radius * 1.5 * Math.cos(radians),
lat + radius * Math.sin(radians),
Cesium.Math.nextRandomNumber() * 500 + 1800
);
property.addSample(time, position);
}
return property;
}
var longitude = -112.110693;
var latitude = 36.0994841;
var radius = 0.03;
var modelURI =
"../../SampleData/models/CesiumBalloon/CesiumBalloon.glb";
var entity = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
position: computeCirclularFlight(longitude, latitude, radius),
model: {
uri: modelURI,
minimumPixelSize: 64,
},
});
entity.position.setInterpolationOptions({
interpolationDegree: 2,
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
});
// Set initial camera position and orientation to be when in the model's reference frame.
var camera = viewer.camera;
camera.position = new Cesium.Cartesian3(0.25, 0.0, 0.0);
camera.direction = new Cesium.Cartesian3(1.0, 0.0, 0.0);
camera.up = new Cesium.Cartesian3(0.0, 0.0, 1.0);
camera.right = new Cesium.Cartesian3(0.0, -1.0, 0.0);
viewer.scene.postUpdate.addEventListener(function (scene, time) {
var position = entity.position.getValue(time);
if (!Cesium.defined(position)) {
return;
}
var transform;
if (!Cesium.defined(entity.orientation)) {
transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
} else {
var orientation = entity.orientation.getValue(time);
if (!Cesium.defined(orientation)) {
return;
}
transform = Cesium.Matrix4.fromRotationTranslation(
Cesium.Matrix3.fromQuaternion(orientation),
position
);
}
// Save camera state
var offset = Cesium.Cartesian3.clone(camera.position);
var direction = Cesium.Cartesian3.clone(camera.direction);
var up = Cesium.Cartesian3.clone(camera.up);
// Set camera to be in model's reference frame.
camera.lookAtTransform(transform);
// Reset the camera state to the saved state so it appears fixed in the model's frame.
Cesium.Cartesian3.clone(offset, camera.position);
Cesium.Cartesian3.clone(direction, camera.direction);
Cesium.Cartesian3.clone(up, camera.up);
Cesium.Cartesian3.cross(direction, up, camera.right);
});
// Add a few more balloons flying with the one the viewer is in.
var numBalloons = 12;
for (var i = 0; i < numBalloons; ++i) {
var balloonRadius =
(Cesium.Math.nextRandomNumber() * 2.0 - 1.0) * 0.01 + radius;
var balloon = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
position: computeCirclularFlight(
longitude,
latitude,
balloonRadius
),
model: {
uri: modelURI,
minimumPixelSize: 64,
},
});
balloon.position.setInterpolationOptions({
interpolationDegree: 2,
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
});
}
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Cartographic Limit Rectangle.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="Limit terrain and imagery to a cartographic Rectangle area."
/>
<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(),
});
// Tropics of Cancer and Capricorn
var coffeeBeltRectangle = Cesium.Rectangle.fromDegrees(
-180.0,
-23.43687,
180.0,
23.43687
);
viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
viewer.scene.globe.showSkirts = false;
viewer.scene.skyAtmosphere.show = false;
// Add rectangles to show bounds
var rectangles = [];
for (var i = 0; i < 10; i++) {
rectangles.push(
viewer.entities.add({
rectangle: {
coordinates: coffeeBeltRectangle,
material: Cesium.Color.WHITE.withAlpha(0.0),
height: i * 5000.0,
outline: true,
outlineWidth: 4.0,
outlineColor: Cesium.Color.WHITE,
},
})
);
}
Sandcastle.addToggleButton("Limit Enabled", true, function (checked) {
if (checked) {
viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
} else {
viewer.scene.globe.cartographicLimitRectangle = undefined;
}
});
Sandcastle.addToggleButton("Show Bounds", true, function (checked) {
var rectanglesLength = rectangles.length;
for (var i = 0; i < rectanglesLength; i++) {
var rectangleEntity = rectangles[i];
rectangleEntity.show = checked;
}
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Cesium Inspector.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 cesium inspector as a debugging tool for different primitives."
/>
<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="terrainMenu"></div>
<div id="zoomButtons"></div>
<div id="sampleButtons"></div>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
var scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;
//Add Cesium Inspector
viewer.extend(Cesium.viewerCesiumInspectorMixin);
//Add Primitives
scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: Cesium.BoxGeometry.fromDimensions({
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
}),
modelMatrix: Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(-105.0, 45.0)
),
new Cesium.Cartesian3(0.0, 0.0, 250000),
new Cesium.Matrix4()
),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
Cesium.Color.RED.withAlpha(0.5)
),
},
}),
appearance: new Cesium.PerInstanceColorAppearance({
closed: true,
}),
})
);
scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(
-100.0,
30.0,
-93.0,
37.0
),
height: 100000,
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
Cesium.Color.BLUE
),
},
}),
appearance: new Cesium.PerInstanceColorAppearance(),
})
);
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 150000),
image: "../images/Cesium_Logo_overlay.png",
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Supports Markdown
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