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/Sentinel-2.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="Sentinel-2 cloudless by EOX IT Services GmbH (Contains modified Copernicus Sentinel data 2016 and 2017). Hosted by Cesium ion"
/>
<meta name="cesium-sandcastle-labels" content="ion Assets" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// Sentinel-2 (mostly) cloudless global imagery between 10 and 60 meter resolution.
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Shadows.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="Shadow maps." />
<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 .cesium-button {
display: block;
}
</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", {
infoBox: false,
selectionIndicator: false,
shadows: true,
terrainShadows: Cesium.ShadowMode.ENABLED,
shouldAnimate: true,
terrainProvider: Cesium.createWorldTerrain(),
});
var shadowMap = viewer.shadowMap;
shadowMap.maximumDistance = 10000.0;
var cesiumAir = viewer.entities.add({
name: "Cesium Air",
height: 20.0,
model: {
uri: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
},
});
var groundVehicle = viewer.entities.add({
name: "Ground Vehicle",
height: 0.0,
model: {
uri: "../../SampleData/models/GroundVehicle/GroundVehicle.glb",
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
var cesiumMan = viewer.entities.add({
name: "Cesium Man",
height: 0.0,
model: {
uri: "../../SampleData/models/CesiumMan/Cesium_Man.glb",
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
var woodTower = viewer.entities.add({
name: "Wood Tower",
height: 0.0,
model: {
uri: "../../SampleData/models/WoodTower/Wood_Tower.glb",
},
});
var simpleCity = viewer.entities.add({
name: "Simple City",
height: 0.0,
model: {
uri: "../../SampleData/models/ShadowTester/Shadow_Tester_4.glb",
},
});
var boxEntity = viewer.entities.add({
name: "Box",
height: 10.0,
box: {
dimensions: new Cesium.Cartesian3(10.0, 10.0, 10.0),
material: Cesium.Color.RED,
shadows: Cesium.ShadowMode.ENABLED,
},
});
var checkerMaterial = new Cesium.CheckerboardMaterialProperty({
evenColor: Cesium.Color.RED.withAlpha(0.5),
oddColor: Cesium.Color.RED.withAlpha(0.0),
repeat: new Cesium.Cartesian2(5.0, 10.0),
});
var checkerEntity = viewer.entities.add({
name: "Checkered Box",
height: 10.0,
box: {
dimensions: new Cesium.Cartesian3(10.0, 10.0, 10.0),
material: checkerMaterial,
outline: true,
outlineColor: Cesium.Color.RED,
shadows: Cesium.ShadowMode.ENABLED,
},
});
var sphereEntity = viewer.entities.add({
name: "Sphere",
height: 20.0,
ellipsoid: {
radii: new Cesium.Cartesian3(15.0, 15.0, 15.0),
material: Cesium.Color.BLUE.withAlpha(0.5),
slicePartitions: 24,
stackPartitions: 36,
shadows: Cesium.ShadowMode.ENABLED,
},
});
var locations = {
Exton: {
longitude: -1.31968,
latitude: 0.698874,
height: 74.14210186070714,
date: 2457522.154792,
},
HalfDome: {
longitude: -2.086267733294987,
latitude: 0.6587491773830219,
height: 2640.716312584986,
date: 2457507.247512,
},
Everest: {
longitude: 1.517132688,
latitude: 0.4884844964,
height: 8773.17824498951,
date: 2457507.620845,
},
PinnaclePA: {
longitude: -1.3324415110874286,
latitude: 0.6954224325279967,
height: 179.14276256241743,
date: 2457523.04162,
},
SenecaRocks: {
longitude: -1.3851775172879768,
latitude: 0.6778211831093554,
height: 682.5893300695776,
date: 2457522.097512,
},
Space: {
longitude: -1.31968,
latitude: 0.698874,
height: 2000000.0,
date: 2457522.154792,
},
};
var i;
var entities = viewer.entities.values;
var entitiesLength = entities.length;
function setLocation(location) {
var longitude = location.longitude;
var latitude = location.latitude;
var height = location.height;
for (i = 0; i < entitiesLength; ++i) {
var entity = entities[i];
entity.position = Cesium.Cartesian3.fromRadians(
longitude,
latitude,
height + entity.height
);
}
viewer.clock.currentTime = new Cesium.JulianDate(location.date);
viewer.clock.multiplier = 1.0;
}
function setLocationFunction(location) {
return function () {
setLocation(location);
};
}
var locationToolbarOptions = [];
for (var locationName in locations) {
if (locations.hasOwnProperty(locationName)) {
var location = locations[locationName];
locationToolbarOptions.push({
text: locationName,
onselect: setLocationFunction(location),
});
}
}
Sandcastle.addToolbarMenu(locationToolbarOptions);
function setEntity(entity) {
for (i = 0; i < entitiesLength; ++i) {
entities[i].show = false;
}
entity.show = true;
viewer.trackedEntity = entity;
}
function setEntityFunction(entity) {
return function () {
setEntity(entity);
};
}
var entityToolbarOptions = [];
for (i = 0; i < entitiesLength; ++i) {
var entity = entities[i];
entityToolbarOptions.push({
text: entity.name,
onselect: setEntityFunction(entity),
});
}
Sandcastle.addToolbarMenu(entityToolbarOptions);
Sandcastle.addToggleButton("Shadows", viewer.shadows, function (
checked
) {
viewer.shadows = checked;
});
Sandcastle.addToggleButton("Entity Shadows", true, function (checked) {
var entityShadows = checked
? Cesium.ShadowMode.ENABLED
: Cesium.ShadowMode.DISABLED;
for (i = 0; i < entitiesLength; ++i) {
var entity = entities[i];
var visual = entity.model || entity.box || entity.ellipsoid;
visual.shadows = entityShadows;
}
});
Sandcastle.addToggleButton(
"Terrain Shadows",
viewer.terrainShadows === Cesium.ShadowMode.ENABLED,
function (checked) {
viewer.terrainShadows = checked
? Cesium.ShadowMode.ENABLED
: Cesium.ShadowMode.DISABLED;
}
);
Sandcastle.addToggleButton(
"Soft Shadows",
shadowMap.softShadows,
function (checked) {
shadowMap.softShadows = checked;
}
);
Sandcastle.addToolbarMenu([
{
text: "Size : 2048",
onselect: function () {
shadowMap.size = 2048;
},
},
{
text: "Size : 1024",
onselect: function () {
shadowMap.size = 1024;
},
},
{
text: "Size : 512",
onselect: function () {
shadowMap.size = 512;
},
},
{
text: "Size : 256",
onselect: function () {
shadowMap.size = 256;
},
},
]);
setLocation(locations.Exton);
setEntity(cesiumAir);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Show or Hide Entities.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="Show or hide groups of entities." />
<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
//Set the random seed for reproducible random colors.
Cesium.Math.setRandomNumberSeed(1234);
var viewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });
var entities = viewer.entities;
//Create Entity "folders" to allow us to turn on/off entities as a group.
var spheres = entities.add(new Cesium.Entity());
var boxes = entities.add(new Cesium.Entity());
var ellipsoids = entities.add(new Cesium.Entity());
//Create the entities and assign each entity's parent to the group to which it belongs.
for (var i = 0; i < 5; ++i) {
var height = 100000.0 + 200000.0 * i;
entities.add({
parent: boxes,
position: Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
box: {
dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
parent: ellipsoids,
position: Cesium.Cartesian3.fromDegrees(-102.0, 45.0, height),
ellipsoid: {
radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
entities.add({
parent: spheres,
position: Cesium.Cartesian3.fromDegrees(-98.0, 45.0, height),
ellipsoid: {
radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
material: Cesium.Color.fromRandom({ alpha: 1.0 }),
},
});
}
viewer.zoomTo(viewer.entities);
Sandcastle.addToolbarButton("Toggle Boxes", function () {
boxes.show = !boxes.show;
});
Sandcastle.addToolbarButton("Toggle Ellipsoids", function () {
ellipsoids.show = !ellipsoids.show;
});
Sandcastle.addToolbarButton("Toggle Spheres", function () {
spheres.show = !spheres.show;
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Sky Atmosphere.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta
name="description"
content="Adjust hue, saturation, and brightness of the sky/atmosphere."
/>
<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>hueShift</td>
<td>
<input
type="range"
min="-1"
max="1"
step="0.01"
data-bind="value: hueShift, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: hueShift" />
</td>
</tr>
<tr>
<td>saturationShift</td>
<td>
<input
type="range"
min="-1"
max="1"
step="0.01"
data-bind="value: saturationShift, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: saturationShift" />
</td>
</tr>
<tr>
<td>brightnessShift</td>
<td>
<input
type="range"
min="-1"
max="1"
step="0.01"
data-bind="value: brightnessShift, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: brightnessShift" />
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
sceneModePicker: false,
});
var scene = viewer.scene;
var skyAtmosphere = scene.skyAtmosphere;
var globe = scene.globe;
// The viewModel tracks the state of our mini application.
var viewModel = {
hueShift: 0.0,
saturationShift: 0.0,
brightnessShift: 0.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 skyAtmosphere's HSB parameters subscribers of the viewModel.
function subscribeParameter(name, globeName) {
Cesium.knockout
.getObservable(viewModel, name)
.subscribe(function (newValue) {
skyAtmosphere[name] = newValue;
globe[globeName] = newValue;
});
}
subscribeParameter("hueShift", "atmosphereHueShift");
subscribeParameter("saturationShift", "atmosphereSaturationShift");
subscribeParameter("brightnessShift", "atmosphereBrightnessShift");
Sandcastle.addToggleButton("Lighting", globe.enableLighting, function (
checked
) {
globe.enableLighting = checked;
});
Sandcastle.addToggleButton("Fog", scene.fog.enabled, function (
checked
) {
scene.fog.enabled = checked;
});
var camera = viewer.camera;
camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),
orientation: {
heading: -Cesium.Math.PI_OVER_TWO,
pitch: 0.2,
roll: 0.0,
},
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/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="Draw spheres and ellipsoids." />
<meta name="cesium-sandcastle-labels" content="Geometries" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
var blueEllipsoid = viewer.entities.add({
name: "Blue ellipsoid",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
material: Cesium.Color.BLUE,
},
});
var redSphere = viewer.entities.add({
name: "Red sphere with black outline",
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
var outlineOnly = viewer.entities.add({
name: "Yellow ellipsoid outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
slicePartitions: 24,
stackPartitions: 36,
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Star Burst.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="Star burst overlapping billboards." />
<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="zoomButtons"></div>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
selectionIndicator: false,
});
// Add labels clustered at the same location
var numBillboards = 30;
for (var i = 0; i < numBillboards; ++i) {
var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
viewer.entities.add({
position: position,
billboard: {
image: "../images/facility.gif",
scale: 2.5,
},
label: {
text: "Label" + i,
show: false,
},
});
}
var scene = viewer.scene;
var camera = scene.camera;
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
// Star burst on left mouse click.
starBurst(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) {
// Remove the star burst when the mouse exits the circle or show the label of the billboard the mouse is hovering over.
updateStarBurst(movement.endPosition);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
camera.moveStart.addEventListener(function () {
// Reset the star burst on camera move because the lines from the center
// because the line end points rely on the screen space positions of the billboards.
undoStarBurst();
});
// State saved across mouse click and move events
var starBurstState = {
enabled: false,
pickedEntities: undefined,
billboardEyeOffsets: undefined,
labelEyeOffsets: undefined,
linePrimitive: undefined,
radius: undefined,
center: undefined,
pixelPadding: 10.0,
angleStart: 0.0,
angleEnd: Cesium.Math.PI,
maxDimension: undefined,
};
function offsetBillboard(
entity,
entityPosition,
angle,
magnitude,
lines,
billboardEyeOffsets,
labelEyeOffsets
) {
var x = magnitude * Math.cos(angle);
var y = magnitude * Math.sin(angle);
var offset = new Cesium.Cartesian2(x, y);
var drawingBufferWidth = scene.drawingBufferWidth;
var drawingBufferHeight = scene.drawingBufferHeight;
var pixelRatio = scene.pixelRatio;
var diff = Cesium.Cartesian3.subtract(
entityPosition,
camera.positionWC,
new Cesium.Cartesian3()
);
var distance = Cesium.Cartesian3.dot(camera.directionWC, diff);
var dimensions = camera.frustum.getPixelDimensions(
drawingBufferWidth,
drawingBufferHeight,
distance,
pixelRatio,
new Cesium.Cartesian2()
);
Cesium.Cartesian2.multiplyByScalar(
offset,
Cesium.Cartesian2.maximumComponent(dimensions),
offset
);
var labelOffset;
var billboardOffset = entity.billboard.eyeOffset;
var eyeOffset = new Cesium.Cartesian3(offset.x, offset.y, 0.0);
entity.billboard.eyeOffset = eyeOffset;
if (Cesium.defined(entity.label)) {
labelOffset = entity.label.eyeOffset;
entity.label.eyeOffset = new Cesium.Cartesian3(
offset.x,
offset.y,
-10.0
);
}
var endPoint = Cesium.Matrix4.multiplyByPoint(
camera.viewMatrix,
entityPosition,
new Cesium.Cartesian3()
);
Cesium.Cartesian3.add(eyeOffset, endPoint, endPoint);
Cesium.Matrix4.multiplyByPoint(
camera.inverseViewMatrix,
endPoint,
endPoint
);
lines.push(endPoint);
billboardEyeOffsets.push(billboardOffset);
labelEyeOffsets.push(labelOffset);
}
function starBurst(mousePosition) {
if (Cesium.defined(starBurstState.pickedEntities)) {
return;
}
var pickedObjects = scene.drillPick(mousePosition);
if (!Cesium.defined(pickedObjects) || pickedObjects.length < 2) {
return;
}
var billboardEntities = [];
var length = pickedObjects.length;
var i;
for (i = 0; i < length; ++i) {
var pickedObject = pickedObjects[i];
if (pickedObject.primitive instanceof Cesium.Billboard) {
billboardEntities.push(pickedObject);
}
}
if (billboardEntities.length === 0) {
return;
}
var pickedEntities = (starBurstState.pickedEntities = []);
var billboardEyeOffsets = (starBurstState.billboardEyeOffsets = []);
var labelEyeOffsets = (starBurstState.labelEyeOffsets = []);
var lines = [];
starBurstState.maxDimension = Number.NEGATIVE_INFINITY;
var angleStart = starBurstState.angleStart;
var angleEnd = starBurstState.angleEnd;
var angle = angleStart;
var angleIncrease;
var magnitude;
var magIncrease;
var maxDimension;
// Drill pick gets all of the entities under the mouse pointer.
// Find the billboards and set their pixel offsets in a circle pattern.
length = billboardEntities.length;
i = 0;
while (i < length) {
var object = billboardEntities[i];
if (pickedEntities.length === 0) {
starBurstState.center = Cesium.Cartesian3.clone(
object.primitive.position
);
}
if (!Cesium.defined(angleIncrease)) {
var width = object.primitive.width;
var height = object.primitive.height;
maxDimension =
Math.max(width, height) * object.primitive.scale +
starBurstState.pixelPadding;
magnitude = maxDimension + maxDimension * 0.5;
magIncrease = magnitude;
angleIncrease = maxDimension / magnitude;
}
offsetBillboard(
object.id,
object.primitive.position,
angle,
magnitude,
lines,
billboardEyeOffsets,
labelEyeOffsets
);
pickedEntities.push(object);
var reflectedAngle = angleEnd - angle;
if (
i + 1 < length &&
reflectedAngle - angleIncrease * 0.5 > angle + angleIncrease * 0.5
) {
object = billboardEntities[++i];
offsetBillboard(
object.id,
object.primitive.position,
reflectedAngle,
magnitude,
lines,
billboardEyeOffsets,
labelEyeOffsets
);
pickedEntities.push(object);
}
angle += angleIncrease;
if (
reflectedAngle - angleIncrease * 0.5 <
angle + angleIncrease * 0.5
) {
magnitude += magIncrease;
angle = angleStart;
angleIncrease = maxDimension / magnitude;
}
++i;
}
// Add lines from the pick center out to the translated billboard.
var instances = [];
length = lines.length;
for (i = 0; i < length; ++i) {
var pickedEntity = pickedEntities[i];
starBurstState.maxDimension = Math.max(
pickedEntity.primitive.width,
pickedEntity.primitive.height,
starBurstState.maxDimension
);
instances.push(
new Cesium.GeometryInstance({
geometry: new Cesium.SimplePolylineGeometry({
positions: [starBurstState.center, lines[i]],
arcType: Cesium.ArcType.NONE,
granularity: Cesium.Math.PI_OVER_FOUR,
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
Cesium.Color.WHITE
),
},
})
);
}
starBurstState.linePrimitive = scene.primitives.add(
new Cesium.Primitive({
geometryInstances: instances,
appearance: new Cesium.PerInstanceColorAppearance({
flat: true,
translucent: false,
}),
asynchronous: false,
})
);
viewer.selectedEntity = undefined;
starBurstState.radius = magnitude + magIncrease;
}
function updateStarBurst(mousePosition) {
if (!Cesium.defined(starBurstState.pickedEntities)) {
return;
}
if (!starBurstState.enabled) {
// For some reason we get a mousemove event on click, so
// do not show a label on the first event.
starBurstState.enabled = true;
return;
}
// Remove the star burst if the mouse exits the screen space circle.
// If the mouse is inside the circle, show the label of the billboard the mouse is hovering over.
var screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
scene,
starBurstState.center
);
var fromCenter = Cesium.Cartesian2.subtract(
mousePosition,
screenPosition,
new Cesium.Cartesian2()
);
var radius = starBurstState.radius;
if (
Cesium.Cartesian2.magnitudeSquared(fromCenter) > radius * radius ||
fromCenter.y >
3.0 * (starBurstState.maxDimension + starBurstState.pixelPadding)
) {
undoStarBurst();
} else {
showLabels(mousePosition);
}
}
function undoStarBurst() {
var pickedEntities = starBurstState.pickedEntities;
if (!Cesium.defined(pickedEntities)) {
return;
}
var billboardEyeOffsets = starBurstState.billboardEyeOffsets;
var labelEyeOffsets = starBurstState.labelEyeOffsets;
// Reset billboard and label pixel offsets.
// Hide overlapping labels.
for (var i = 0; i < pickedEntities.length; ++i) {
var entity = pickedEntities[i].id;
entity.billboard.eyeOffset = billboardEyeOffsets[i];
if (Cesium.defined(entity.label)) {
entity.label.eyeOffset = labelEyeOffsets[i];
entity.label.show = false;
}
}
// Remove lines from the scene.
// Free resources and reset state.
scene.primitives.remove(starBurstState.linePrimitive);
starBurstState.linePrimitive = undefined;
starBurstState.pickedEntities = undefined;
starBurstState.billboardEyeOffsets = undefined;
starBurstState.labelEyeOffsets = undefined;
starBurstState.radius = undefined;
starBurstState.enabled = false;
}
var currentObject;
function showLabels(mousePosition) {
var pickedObjects = scene.drillPick(mousePosition);
var pickedObject;
if (Cesium.defined(pickedObjects)) {
var length = pickedObjects.length;
for (var i = 0; i < length; ++i) {
if (pickedObjects[i].primitive instanceof Cesium.Billboard) {
pickedObject = pickedObjects[i];
break;
}
}
}
if (pickedObject !== currentObject) {
if (
Cesium.defined(pickedObject) &&
Cesium.defined(pickedObject.id.label)
) {
if (Cesium.defined(currentObject)) {
currentObject.id.label.show = false;
}
currentObject = pickedObject;
pickedObject.id.label.show = true;
} else if (Cesium.defined(currentObject)) {
currentObject.id.label.show = false;
currentObject = undefined;
}
}
}
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Terrain Clipping Planes.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="User-defined clipping planes applied to terrain."
/>
<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">
<select
data-bind="options: exampleTypes, value: currentExampleType"
></select>
<input
type="checkbox"
value="false"
data-bind="checked: clippingPlanesEnabled, valueUpdate: 'input'"
/>
Globe clipping planes enabled
<input
type="checkbox"
value="false"
data-bind="checked: edgeStylingEnabled, valueUpdate: 'input'"
/>
Edge styling enabled
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// Use clipping planes to selectively hide parts of the globe surface.
var viewer = new Cesium.Viewer("cesiumContainer", {
skyAtmosphere: false,
shouldAnimate: true,
terrainProvider: Cesium.createWorldTerrain(),
scene3DOnly: true,
});
var globe = viewer.scene.globe;
var exampleTypes = [
"Cesium Man",
"St. Helens",
"Grand Canyon Isolated",
];
var viewModel = {
exampleTypes: exampleTypes,
currentExampleType: exampleTypes[0],
clippingPlanesEnabled: true,
edgeStylingEnabled: true,
};
var toolbar = document.getElementById("toolbar");
Cesium.knockout.track(viewModel);
Cesium.knockout.applyBindings(viewModel, toolbar);
// For tracking state when switching exampleTypes
var clippingPlanesEnabled = true;
var edgeStylingEnabled = true;
var tileset;
loadCesiumMan();
function reset() {
viewer.entities.removeAll();
viewer.scene.primitives.remove(tileset);
}
function loadCesiumMan() {
var position = Cesium.Cartesian3.fromRadians(
-2.0862979473351286,
0.6586620013036164,
1400.0
);
var entity = viewer.entities.add({
position: position,
box: {
dimensions: new Cesium.Cartesian3(1400.0, 1400.0, 2800.0),
material: Cesium.Color.WHITE.withAlpha(0.3),
outline: true,
outlineColor: Cesium.Color.WHITE,
},
});
viewer.entities.add({
position: position,
model: {
uri: "../../SampleData/models/CesiumMan/Cesium_Man.glb",
minimumPixelSize: 128,
maximumScale: 800,
},
});
globe.depthTestAgainstTerrain = true;
globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
modelMatrix: entity.computeModelMatrix(Cesium.JulianDate.now()),
planes: [
new Cesium.ClippingPlane(
new Cesium.Cartesian3(1.0, 0.0, 0.0),
-700.0
),
new Cesium.ClippingPlane(
new Cesium.Cartesian3(-1.0, 0.0, 0.0),
-700.0
),
new Cesium.ClippingPlane(
new Cesium.Cartesian3(0.0, 1.0, 0.0),
-700.0
),
new Cesium.ClippingPlane(
new Cesium.Cartesian3(0.0, -1.0, 0.0),
-700.0
),
],
edgeWidth: edgeStylingEnabled ? 1.0 : 0.0,
edgeColor: Cesium.Color.WHITE,
enabled: clippingPlanesEnabled,
});
globe.backFaceCulling = true;
globe.showSkirts = true;
viewer.trackedEntity = entity;
}
function loadStHelens() {
// Create clipping planes for polygon around area to be clipped.
var points = [
new Cesium.Cartesian3(
-2358434.3501556474,
-3743554.5012105294,
4581080.771684084
),
new Cesium.Cartesian3(
-2357886.4482675144,
-3744467.562778789,
4581020.9199767085
),
new Cesium.Cartesian3(
-2357299.84353055,
-3744954.0879047974,
4581080.992360969
),
new Cesium.Cartesian3(
-2356412.05169956,
-3745385.3013702347,
4580893.4737207815
),
new Cesium.Cartesian3(
-2355472.889436636,
-3745256.5725702164,
4581252.3128526565
),
new Cesium.Cartesian3(
-2354385.7458722834,
-3744319.3823686405,
4582372.770031389
),
new Cesium.Cartesian3(
-2353758.788158616,
-3743051.0128084184,
4583356.453176038
),
new Cesium.Cartesian3(
-2353663.8128999653,
-3741847.9126874236,
4584079.428665509
),
new Cesium.Cartesian3(
-2354213.667592133,
-3740784.50946316,
4584502.428203525
),
new Cesium.Cartesian3(
-2355596.239450013,
-3739901.0226732804,
4584515.9652557485
),
new Cesium.Cartesian3(
-2356942.4170108805,
-3740342.454698685,
4583686.690694482
),
new Cesium.Cartesian3(
-2357529.554838029,
-3740766.995076834,
4583145.055348843
),
new Cesium.Cartesian3(
-2358106.017822064,
-3741439.438418052,
4582452.293605261
),
new Cesium.Cartesian3(
-2358539.5426236596,
-3742680.720902901,
4581692.0260975715
),
];
var pointsLength = points.length;
// Create center points for each clipping plane
var clippingPlanes = [];
for (var i = 0; i < pointsLength; ++i) {
var nextIndex = (i + 1) % pointsLength;
var midpoint = Cesium.Cartesian3.add(
points[i],
points[nextIndex],
new Cesium.Cartesian3()
);
midpoint = Cesium.Cartesian3.multiplyByScalar(
midpoint,
0.5,
midpoint
);
var up = Cesium.Cartesian3.normalize(
midpoint,
new Cesium.Cartesian3()
);
var right = Cesium.Cartesian3.subtract(
points[nextIndex],
midpoint,
new Cesium.Cartesian3()
);
right = Cesium.Cartesian3.normalize(right, right);
var normal = Cesium.Cartesian3.cross(
right,
up,
new Cesium.Cartesian3()
);
normal = Cesium.Cartesian3.normalize(normal, normal);
// Compute distance by pretending the plane is at the origin
var originCenteredPlane = new Cesium.Plane(normal, 0.0);
var distance = Cesium.Plane.getPointDistance(
originCenteredPlane,
midpoint
);
clippingPlanes.push(new Cesium.ClippingPlane(normal, distance));
}
globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
planes: clippingPlanes,
edgeWidth: edgeStylingEnabled ? 1.0 : 0.0,
edgeColor: Cesium.Color.WHITE,
enabled: clippingPlanesEnabled,
});
globe.backFaceCulling = true;
globe.showSkirts = true;
// Load tileset
tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(5713),
});
return tileset.readyPromise
.then(function () {
tileset.pointCloudShading.attenuation = true;
// Adjust height so tileset is in terrain
var cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
var surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0.0
);
var offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
-20.0
);
var translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
tileset.style = new Cesium.Cesium3DTileStyle({
color: "rgb(207, 255, 207)",
});
viewer.scene.primitives.add(tileset);
var boundingSphere = tileset.boundingSphere;
var radius = boundingSphere.radius;
viewer.camera.viewBoundingSphere(
boundingSphere,
new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
})
.otherwise(function (error) {
throw error;
});
}
function loadGrandCanyon() {
// Pick a position at the Grand Canyon
var position = Cesium.Cartographic.toCartesian(
new Cesium.Cartographic.fromDegrees(-113.2665534, 36.0939345, 100)
);
var distance = 3000.0;
var boundingSphere = new Cesium.BoundingSphere(position, distance);
globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
planes: [
new Cesium.ClippingPlane(
new Cesium.Cartesian3(1.0, 0.0, 0.0),
distance
),
new Cesium.ClippingPlane(
new Cesium.Cartesian3(-1.0, 0.0, 0.0),
distance
),
new Cesium.ClippingPlane(
new Cesium.Cartesian3(0.0, 1.0, 0.0),
distance
),
new Cesium.ClippingPlane(
new Cesium.Cartesian3(0.0, -1.0, 0.0),
distance
),
],
unionClippingRegions: true,
});
globe.backFaceCulling = false;
globe.showSkirts = false;
viewer.camera.viewBoundingSphere(
boundingSphere,
new Cesium.HeadingPitchRange(0.5, -0.5, boundingSphere.radius * 5.0)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
}
Cesium.knockout
.getObservable(viewModel, "clippingPlanesEnabled")
.subscribe(function (value) {
globe.clippingPlanes.enabled = value;
clippingPlanesEnabled = value;
});
Cesium.knockout
.getObservable(viewModel, "edgeStylingEnabled")
.subscribe(function (value) {
edgeStylingEnabled = value;
globe.clippingPlanes.edgeWidth = edgeStylingEnabled ? 1.0 : 0.0;
});
Cesium.knockout
.getObservable(viewModel, "currentExampleType")
.subscribe(function (newValue) {
reset();
if (newValue === exampleTypes[0]) {
loadCesiumMan();
} else if (newValue === exampleTypes[1]) {
loadStHelens();
} else if (newValue === exampleTypes[2]) {
loadGrandCanyon();
}
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Terrain Exaggeration.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="Exaggerate terrain." />
<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="zoomButtons"></div>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainExaggeration: 2.0,
terrainProvider: Cesium.createWorldTerrain(),
});
Sandcastle.addDefaultToolbarMenu(
[
{
text: "Mount Everest",
onselect: function () {
viewer.camera.setView({
destination: new Cesium.Cartesian3(
277096.634865404,
5647834.481964232,
2985563.7039122293
),
orientation: {
heading: 4.731089976107251,
pitch: -0.32003481981370063,
},
});
},
},
{
text: "Half Dome",
onselect: function () {
viewer.camera.setView({
destination: new Cesium.Cartesian3(
-2497565.707296549,
-4393815.215148996,
3886033.5140598584
),
orientation: {
heading: 1.6690385899673323,
pitch: -0.32086751043096884,
},
});
},
},
{
text: "San Francisco Bay",
onselect: function () {
viewer.camera.setView({
destination: new Cesium.Cartesian3(
-2696570.092794883,
-4276051.411224011,
3887257.288168422
),
orientation: {
heading: 5.193128432412409,
pitch: -0.3996479673257727,
},
});
var target = new Cesium.Cartesian3(
-2708814.85583248,
-4254159.450845907,
3891403.9457429945
);
var offset = new Cesium.Cartesian3(
70642.66030209465,
-31661.517948317807,
35505.179997143336
);
viewer.camera.lookAt(target, offset);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
},
},
],
"zoomButtons"
);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Terrain.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta
name="description"
content="Visualize worldwide, high-resolution terrain."
/>
<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">
<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 worldTerrain = Cesium.createWorldTerrain({
requestWaterMask: true,
requestVertexNormals: true,
});
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: worldTerrain,
});
// set lighting to true
viewer.scene.globe.enableLighting = true;
// setup alternative terrain providers
var ellipsoidProvider = new Cesium.EllipsoidTerrainProvider();
var vrTheWorldProvider = new Cesium.VRTheWorldTerrainProvider({
url: "http://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/",
credit: "Terrain data courtesy VT MÄK",
});
Sandcastle.addToolbarMenu(
[
{
text: "CesiumTerrainProvider - Cesium World Terrain",
onselect: function () {
viewer.terrainProvider = worldTerrain;
viewer.scene.globe.enableLighting = true;
},
},
{
text: "CesiumTerrainProvider - Cesium World Terrain - no effects",
onselect: function () {
viewer.terrainProvider = Cesium.createWorldTerrain();
},
},
{
text: "CesiumTerrainProvider - Cesium World Terrain w/ Lighting",
onselect: function () {
viewer.terrainProvider = Cesium.createWorldTerrain({
requestVertexNormals: true,
});
viewer.scene.globe.enableLighting = true;
},
},
{
text: "CesiumTerrainProvider - Cesium World Terrain w/ Water",
onselect: function () {
viewer.terrainProvider = Cesium.createWorldTerrain({
requestWaterMask: true,
});
},
},
{
text: "EllipsoidTerrainProvider",
onselect: function () {
viewer.terrainProvider = ellipsoidProvider;
},
},
{
text: "VRTheWorldTerrainProvider",
onselect: function () {
viewer.terrainProvider = vrTheWorldProvider;
},
},
],
"terrainMenu"
);
Sandcastle.addDefaultToolbarMenu(
[
{
text: "Mount Everest",
onselect: function () {
lookAtMtEverest();
},
},
{
text: "Half Dome",
onselect: function () {
var target = new Cesium.Cartesian3(
-2489625.0836225147,
-4393941.44443024,
3882535.9454173897
);
var offset = new Cesium.Cartesian3(
-6857.40902037546,
412.3284835694358,
2147.5545426812023
);
viewer.camera.lookAt(target, offset);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
},
},
{
text: "San Francisco Bay",
onselect: function () {
var target = new Cesium.Cartesian3(
-2708814.85583248,
-4254159.450845907,
3891403.9457429945
);
var offset = new Cesium.Cartesian3(
70642.66030209465,
-31661.517948317807,
35505.179997143336
);
viewer.camera.lookAt(target, offset);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
},
},
],
"zoomButtons"
);
var terrainSamplePositions;
function lookAtMtEverest() {
var target = new Cesium.Cartesian3(
300770.50872389384,
5634912.131394585,
2978152.2865545116
);
var offset = new Cesium.Cartesian3(
6344.974098678562,
-793.3419798081741,
2499.9508860763162
);
viewer.camera.lookAt(target, offset);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
}
function sampleTerrainSuccess(terrainSamplePositions) {
var ellipsoid = Cesium.Ellipsoid.WGS84;
//By default, Cesium does not obsure geometry
//behind terrain. Setting this flag enables that.
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.entities.suspendEvents();
viewer.entities.removeAll();
for (var i = 0; i < terrainSamplePositions.length; ++i) {
var position = terrainSamplePositions[i];
viewer.entities.add({
name: position.height.toFixed(1),
position: ellipsoid.cartographicToCartesian(position),
billboard: {
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scale: 0.7,
image: "../images/facility.gif",
},
label: {
text: position.height.toFixed(1),
font: "10pt monospace",
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
pixelOffset: new Cesium.Cartesian2(0, -14),
fillColor: Cesium.Color.BLACK,
outlineColor: Cesium.Color.BLACK,
showBackground: true,
backgroundColor: new Cesium.Color(0.9, 0.9, 0.9, 0.7),
backgroundPadding: new Cesium.Cartesian2(4, 3),
},
});
}
viewer.entities.resumeEvents();
}
function createGrid(rectangleHalfSize) {
var gridWidth = 41;
var gridHeight = 41;
var everestLatitude = Cesium.Math.toRadians(27.988257);
var everestLongitude = Cesium.Math.toRadians(86.925145);
var e = new Cesium.Rectangle(
everestLongitude - rectangleHalfSize,
everestLatitude - rectangleHalfSize,
everestLongitude + rectangleHalfSize,
everestLatitude + rectangleHalfSize
);
var terrainSamplePositions = [];
for (var y = 0; y < gridHeight; ++y) {
for (var x = 0; x < gridWidth; ++x) {
var longitude = Cesium.Math.lerp(
e.west,
e.east,
x / (gridWidth - 1)
);
var latitude = Cesium.Math.lerp(
e.south,
e.north,
y / (gridHeight - 1)
);
var position = new Cesium.Cartographic(longitude, latitude);
terrainSamplePositions.push(position);
}
}
return terrainSamplePositions;
}
Sandcastle.addToggleButton(
"Enable Lighting",
viewer.scene.globe.enableLighting,
function (checked) {
viewer.scene.globe.enableLighting = checked;
}
);
Sandcastle.addToggleButton(
"Enable fog",
viewer.scene.fog.enabled,
function (checked) {
viewer.scene.fog.enabled = checked;
}
);
Sandcastle.addToolbarButton(
"Sample Everest Terrain at Level 9",
function () {
var terrainSamplePositions = createGrid(0.005);
Cesium.when(
Cesium.sampleTerrain(
viewer.terrainProvider,
9,
terrainSamplePositions
),
sampleTerrainSuccess
);
lookAtMtEverest();
},
"sampleButtons"
);
Sandcastle.addToolbarButton(
"Sample Most Detailed Everest Terrain",
function () {
if (!Cesium.defined(viewer.terrainProvider.availability)) {
window.alert(
"sampleTerrainMostDetailed is not supported for the selected terrain provider"
);
return;
}
var terrainSamplePositions = createGrid(0.0005);
Cesium.when(
Cesium.sampleTerrainMostDetailed(
viewer.terrainProvider,
terrainSamplePositions
),
sampleTerrainSuccess
);
lookAtMtEverest();
},
"sampleButtons"
);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Time Dynamic Point Cloud.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="Render a time dynamic point cloud from a set of Point Cloud tiles and timestamps."
/>
<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", {
shouldAnimate: true,
});
var dates = [
"2018-07-19T15:18:00Z",
"2018-07-19T15:18:00.5Z",
"2018-07-19T15:18:01Z",
"2018-07-19T15:18:01.5Z",
"2018-07-19T15:18:02Z",
"2018-07-19T15:18:02.5Z",
];
var uris = [
"../../SampleData/Cesium3DTiles/PointCloud/PointCloudTimeDynamic/0.pnts",
"../../SampleData/Cesium3DTiles/PointCloud/PointCloudTimeDynamic/1.pnts",
"../../SampleData/Cesium3DTiles/PointCloud/PointCloudTimeDynamic/2.pnts",
"../../SampleData/Cesium3DTiles/PointCloud/PointCloudTimeDynamic/3.pnts",
"../../SampleData/Cesium3DTiles/PointCloud/PointCloudTimeDynamic/4.pnts",
];
function dataCallback(interval, index) {
return {
uri: uris[index],
};
}
var timeIntervalCollection = Cesium.TimeIntervalCollection.fromIso8601DateArray(
{
iso8601Dates: dates,
dataCallback: dataCallback,
}
);
var pointCloud = new Cesium.TimeDynamicPointCloud({
intervals: timeIntervalCollection,
clock: viewer.clock,
style: new Cesium.Cesium3DTileStyle({
pointSize: 5,
}),
});
viewer.scene.primitives.add(pointCloud);
var start = Cesium.JulianDate.fromIso8601(dates[0]);
var stop = Cesium.JulianDate.fromIso8601(dates[dates.length - 1]);
viewer.timeline.zoomTo(start, stop);
var clock = viewer.clock;
clock.startTime = start;
clock.currentTime = start;
clock.stopTime = stop;
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.zoomTo(
pointCloud,
new Cesium.HeadingPitchRange(0.0, -0.5, 50.0)
);
//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