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/Polyline Volume.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta
name="description"
content="Draw a polyline volume, which is a shape extruded along a polyline."
/>
<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");
function computeCircle(radius) {
var positions = [];
for (var i = 0; i < 360; i++) {
var radians = Cesium.Math.toRadians(i);
positions.push(
new Cesium.Cartesian2(
radius * Math.cos(radians),
radius * Math.sin(radians)
)
);
}
return positions;
}
function computeStar(arms, rOuter, rInner) {
var angle = Math.PI / arms;
var length = 2 * arms;
var positions = new Array(length);
for (var i = 0; i < length; i++) {
var r = i % 2 === 0 ? rOuter : rInner;
positions[i] = new Cesium.Cartesian2(
Math.cos(i * angle) * r,
Math.sin(i * angle) * r
);
}
return positions;
}
var redTube = viewer.entities.add({
name: "Red tube with rounded corners",
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArray([
-85.0,
32.0,
-85.0,
36.0,
-89.0,
36.0,
]),
shape: computeCircle(60000.0),
material: Cesium.Color.RED,
},
});
var greenBox = viewer.entities.add({
name: "Green box with beveled corners and outline",
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-90.0,
32.0,
0.0,
-90.0,
36.0,
100000.0,
-94.0,
36.0,
0.0,
]),
shape: [
new Cesium.Cartesian2(-50000, -50000),
new Cesium.Cartesian2(50000, -50000),
new Cesium.Cartesian2(50000, 50000),
new Cesium.Cartesian2(-50000, 50000),
],
cornerType: Cesium.CornerType.BEVELED,
material: Cesium.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
var blueStar = viewer.entities.add({
name: "Blue star with mitered corners and outline",
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-95.0,
32.0,
0.0,
-95.0,
36.0,
100000.0,
-99.0,
36.0,
200000.0,
]),
shape: computeStar(7, 70000, 50000),
cornerType: Cesium.CornerType.MITERED,
material: Cesium.Color.BLUE,
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Polyline.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 polylines with various widths and materials."
/>
<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 redLine = viewer.entities.add({
name: "Red line on terrain",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
material: Cesium.Color.RED,
clampToGround: true,
},
});
var greenRhumbLine = viewer.entities.add({
name: "Green rhumb line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
arcType: Cesium.ArcType.RHUMB,
material: Cesium.Color.GREEN,
},
});
var glowingLine = viewer.entities.add({
name: "Glowing blue line on the surface",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
width: 10,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.2,
taperPower: 0.5,
color: Cesium.Color.CORNFLOWERBLUE,
}),
},
});
var orangeOutlined = viewer.entities.add({
name:
"Orange line with black outline at height and following the surface",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
39,
250000,
-125,
39,
250000,
]),
width: 5,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.ORANGE,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}),
},
});
var purpleArrow = viewer.entities.add({
name: "Purple straight arrow at height",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
43,
500000,
-125,
43,
500000,
]),
width: 10,
arcType: Cesium.ArcType.NONE,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.PURPLE
),
},
});
var dashedLine = viewer.entities.add({
name: "Blue dashed line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
45,
500000,
-125,
45,
500000,
]),
width: 4,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN,
}),
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Polylines on 3D Tiles.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta
name="description"
content="Display polylines on BIM and Photogrammetry 3D Tiles"
/>
<meta name="cesium-sandcastle-labels" content="3D Tiles" />
<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
// Power Plant design model provided by Bentley Systems
var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var powerplant = scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(8564),
show: false,
})
);
var pipes = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
-76.36053390920833,
34.949935893493596,
-76.36055481641581,
34.94993589886988,
-76.36055477047704,
34.94992280693651,
]),
width: 6,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.YELLOW,
dashLength: 20.0,
}),
show: false,
clampToGround: true,
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
},
});
var building = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(40866),
})
);
var route = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
-75.59604807301078,
40.03948512841901,
-75.59644577413066,
40.039316280505446,
-75.59584544997564,
40.03846271524258,
-75.59661425371488,
40.03814087821916,
-75.59664726332451,
40.03818297772907,
]),
width: 6,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.YELLOW,
}),
show: false,
clampToGround: true,
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
},
});
Sandcastle.addToolbarMenu([
{
text: "BIM",
onselect: function () {
building.show = false;
route.polyline.show = false;
powerplant.show = true;
pipes.polyline.show = true;
scene.camera.setView({
destination: new Cesium.Cartesian3(
1234151.4883992162,
-5086036.79436967,
3633328.4278331124
),
orientation: {
heading: 5.593695742186853,
pitch: -1.0786797635545216,
roll: 6.27892466154778,
},
});
},
},
{
text: "Photogrammetry",
onselect: function () {
building.show = true;
route.polyline.show = true;
powerplant.show = false;
pipes.polyline.show = false;
scene.camera.setView({
destination: new Cesium.Cartesian3(
1216596.5376729995,
-4736445.416889214,
4081406.990364228
),
orientation: {
heading: 5.153176564030707,
pitch: -0.9701972964526693,
roll: 6.277883257569513,
},
});
},
},
]); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Post Processing.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="Post processing effects." />
<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>Silhouette</td>
<td><input type="checkbox" data-bind="checked: silhouette" /></td>
</tr>
<tr>
<td>Black and White</td>
<td>
<input type="checkbox" data-bind="checked: blackAndWhiteShow" />
</td>
<td>
<input
type="range"
min="1"
max="10"
step="1"
data-bind="value: blackAndWhiteGradations, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Brightness</td>
<td>
<input type="checkbox" data-bind="checked: brightnessShow" />
</td>
<td>
<input
type="range"
min="0"
max="1"
step="0.01"
data-bind="value: brightnessValue, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Night Vision</td>
<td>
<input type="checkbox" data-bind="checked: nightVisionShow" />
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var url = "../../SampleData/models/CesiumMan/Cesium_Man.glb";
viewer.trackedEntity = viewer.entities.add({
name: url,
position: position,
model: {
uri: url,
},
});
var viewModel = {
blackAndWhiteShow: false,
blackAndWhiteGradations: 5.0,
brightnessShow: false,
brightnessValue: 0.5,
nightVisionShow: false,
silhouette: true,
};
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);
}
}
if (
!Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)
) {
window.alert(
"This browser does not support the silhouette post process."
);
}
var stages = viewer.scene.postProcessStages;
var silhouette = stages.add(
Cesium.PostProcessStageLibrary.createSilhouetteStage()
);
var blackAndWhite = stages.add(
Cesium.PostProcessStageLibrary.createBlackAndWhiteStage()
);
var brightness = stages.add(
Cesium.PostProcessStageLibrary.createBrightnessStage()
);
var nightVision = stages.add(
Cesium.PostProcessStageLibrary.createNightVisionStage()
);
function updatePostProcess() {
silhouette.enabled = Boolean(viewModel.silhouette);
silhouette.uniforms.color = Cesium.Color.YELLOW;
blackAndWhite.enabled = Boolean(viewModel.blackAndWhiteShow);
blackAndWhite.uniforms.gradations = Number(
viewModel.blackAndWhiteGradations
);
brightness.enabled = Boolean(viewModel.brightnessShow);
brightness.uniforms.brightness = Number(viewModel.brightnessValue);
nightVision.enabled = Boolean(viewModel.nightVisionShow);
}
updatePostProcess();
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Projection.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="Change the projection between perspective and orthographic."
/>
<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
// Click the projection picker to switch between orthographic and perspective projections.
var viewer = new Cesium.Viewer("cesiumContainer", {
projectionPicker: true,
});
// start with orthographic projection
viewer.projectionPicker.viewModel.switchToOrthographic();
var position = Cesium.Cartesian3.fromDegrees(
-123.0744619,
44.0503706,
0.0
);
var hpr = new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(135),
0.0,
0.0
);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
var entity = viewer.entities.add({
position: position,
orientation: orientation,
model: {
uri: "../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
minimumPixelSize: 128,
maximumScale: 20000,
},
});
viewer.trackedEntity = entity;
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/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="Draw a rectangle or extruded rectangle that conforms to the surface of the globe."
/>
<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 redRectangle = viewer.entities.add({
name: "Red translucent rectangle",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-110.0,
20.0,
-80.0,
25.0
),
material: Cesium.Color.RED.withAlpha(0.5),
},
});
var greenRectangle = viewer.entities.add({
name:
"Green translucent, rotated, and extruded rectangle at height with outline",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-110.0,
30.0,
-100.0,
40.0
),
material: Cesium.Color.GREEN.withAlpha(0.5),
rotation: Cesium.Math.toRadians(45),
extrudedHeight: 300000.0,
height: 100000.0,
outline: true, // height must be set for outline to display
outlineColor: Cesium.Color.BLACK,
},
});
var rotation = Cesium.Math.toRadians(30);
function getRotationValue() {
rotation += 0.005;
return rotation;
}
viewer.entities.add({
name: "Rotating rectangle with rotating texture coordinate",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0),
material: "../images/Cesium_Logo_Color.jpg",
rotation: new Cesium.CallbackProperty(getRotationValue, false),
stRotation: new Cesium.CallbackProperty(getRotationValue, false),
classificationType: Cesium.ClassificationType.TERRAIN,
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Resolution Scaling.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 a custom resolution scale and/or toggle the browser's recommended resolution."
/>
<meta name="cesium-sandcastle-labels" content="Showcases" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td>Use Browser Recommended Resolution</td>
<td>
<input
type="checkbox"
data-bind="checked: useBrowserRecommendedResolution"
/>
</td>
</tr>
<tr>
<td>Resolution Scale</td>
<td>
<input
type="range"
min="0.1"
max="2.0"
step="0.1"
data-bind="value: resolutionScale, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: resolutionScale" />
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// When browser recommended resolution is enabled, the viewer renders at
// CSS pixel resolution (96 dpi). Otherwise, the viewer renders at the
// screen's native resolution.
//
// Resolution scale applies an additional scaling factor to the
// WebGL canvas.
//
// For example, if the cesium container div is 500x500 pixels,
// window.devicePixelRatio is 2.0, and useBrowserRecommendedResolution
// is false, the WebGL canvas will be 1000x1000 pixels. Then if
// the resolutionScale is 0.25, the canvas will be scaled
// down to 250x250 pixels.
var viewer = new Cesium.Viewer("cesiumContainer");
var viewModel = {
useBrowserRecommendedResolution: false,
resolutionScale: 0.25,
};
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(update);
}
}
function update() {
viewer.useBrowserRecommendedResolution =
viewModel.useBrowserRecommendedResolution;
var resolutionScale = Number(viewModel.resolutionScale);
resolutionScale = !isNaN(resolutionScale) ? resolutionScale : 1.0;
resolutionScale = Cesium.Math.clamp(resolutionScale, 0.1, 2.0);
viewer.resolutionScale = resolutionScale;
}
update();
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Rotatable 2D Map.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 make the 2D map rotatable."
/>
<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", {
sceneMode: Cesium.SceneMode.SCENE2D,
mapMode2D: Cesium.MapMode2D.ROTATE,
});
viewer.scene.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-73.0, 42.0, 50000000.0),
orientation: {
heading: Cesium.Math.toRadians(-45.0),
},
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Sample Height from 3D Tiles.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta
name="description"
content="Sample the most detailed heights of a 3D Tileset."
/>
<meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles" />
<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(),
});
var scene = viewer.scene;
if (!scene.clampToHeightSupported) {
window.alert(
"This browser does not support clampToHeightMostDetailed."
);
}
var tileset = scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(40866),
})
);
scene.camera.setView({
destination: new Cesium.Cartesian3(
1216411.0748779264,
-4736313.10747583,
4081359.5125561724
),
orientation: new Cesium.HeadingPitchRoll(
4.239925103568368,
-0.4911293834802475,
6.279849292088564
),
endTransform: Cesium.Matrix4.IDENTITY,
});
Sandcastle.addToolbarButton("Sample heights", function () {
sampleHeights();
});
function sampleHeights() {
viewer.entities.removeAll();
var cartesian1 = new Cesium.Cartesian3(
1216390.063324395,
-4736314.814479433,
4081341.9787972216
);
var cartesian2 = new Cesium.Cartesian3(
1216329.5413318684,
-4736272.029009798,
4081407.9342479417
);
var count = 30;
var cartesians = new Array(count);
for (var i = 0; i < count; ++i) {
var offset = i / (count - 1);
cartesians[i] = Cesium.Cartesian3.lerp(
cartesian1,
cartesian2,
offset,
new Cesium.Cartesian3()
);
}
scene
.clampToHeightMostDetailed(cartesians)
.then(function (clampedCartesians) {
for (var i = 0; i < count; ++i) {
viewer.entities.add({
position: clampedCartesians[i],
ellipsoid: {
radii: new Cesium.Cartesian3(0.2, 0.2, 0.2),
material: Cesium.Color.RED,
},
});
}
viewer.entities.add({
polyline: {
positions: clampedCartesians,
arcType: Cesium.ArcType.NONE,
width: 2,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.YELLOW,
}),
depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty(
{
color: Cesium.Color.YELLOW,
}
),
},
});
});
}
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Scene Rendering Performance.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 explicit rendering to improve app performance."
/>
<meta name="cesium-sandcastle-labels" content="Showcases, Tutorials" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
#toolbar {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar h3,
h4 {
margin: 0 0 2px 0;
}
#toolbar i {
font-size: 85%;
}
#toolbar table {
margin: 2px 3px;
max-width: 280px;
}
#toolbar td {
padding-bottom: 10px;
}
#toolbar .cesium-button {
margin: 6px 0 0;
}
#toolbar input {
vertical-align: middle;
}
#toolbar input:disabled {
color: darkgray;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td>
<h3>
<code><span data-bind="text: lastRenderTime"></span></code>
</h3>
Simulation time at last render frame
<button
type="button"
class="cesium-button"
data-bind="click: requestRender"
>
Render new frame
</button>
</td>
</tr>
<tr>
<td>
<h3>
<input
value="true"
data-bind="checked: requestRenderMode, valueUpdate: 'input'"
type="checkbox"
/>
<code>requestRenderMode</code> enabled
</h3>
<i
>When enabled, a new frame is only rendered when scene updates
occur, or a new frame is explicitly rendered.</i
>
</td>
</tr>
<tr data-bind="visible: showTimeOptions">
<td>
<h4>
<input
value="true"
data-bind="checked: timeChangeEnabled, valueUpdate: 'input'"
type="checkbox"
/>
Render when simulation time changes
</h4>
<i
>Automatically render when the simulation time changes by "Max
delta time". Adjust the simulation time on the animation widget
and "Max delta time" value to see their relationship.</i
>
</td>
</tr>
<tr data-bind="visible: showTimeOptions">
<td>
<h4>Max delta time</h4>
<input
min="0"
max="20"
step="0.1"
data-bind="value: maximumRenderTimeChange, valueUpdate: 'input', enable: timeChangeEnabled"
type="range"
/>
<input
size="2"
data-bind="value: maximumRenderTimeChange, valueUpdate: 'input', enable: timeChangeEnabled"
type="text"
/>
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// Create a viewer that won't render a new frame unless
// updates to the scene require it to reduce overall CPU usage.
var viewer = new Cesium.Viewer("cesiumContainer", {
requestRenderMode: true,
maximumRenderTimeChange: Infinity,
terrainProvider: Cesium.createWorldTerrain(),
});
var scene = viewer.scene;
scene.debugShowFramesPerSecond = true;
var tileset;
var viewModel = {
requestRenderMode: true,
showTimeOptions: false,
timeChangeEnabled: false,
maximumRenderTimeChange: 0.0,
lastRenderTime: "",
requestRender: function () {
scene.requestRender();
},
};
// Clear scene and set default view.
var handler;
function resetScene() {
viewer.trackedEntity = undefined;
viewer.dataSources.removeAll();
viewer.entities.removeAll();
viewer.scene.primitives.remove(tileset);
viewer.clock.shouldAnimate = false;
handler = handler && handler.destroy();
scene.skyBox.show = true;
scene.camera.flyHome(0.0);
scene.requestRender();
viewModel.showTimeOptions = false;
viewModel.timeChangeEnabled = false;
viewModel.maximumRenderTimeChange = 0;
}
// Load a tileset and set the view.
// No need to call scene.requestRender()
function loadTilesetScenario() {
resetScene();
tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(40866),
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
}
// Load an animated model and set the view.
// No need to call scene.requestRender()
// Enable and adjust maximum simulation time change to see
// animations at desired speed.
function loadModelScenario() {
resetScene();
viewModel.timeChangeEnabled = true;
viewModel.showTimeOptions = true;
var entity = viewer.entities.add({
name: "Aircraft",
position: Cesium.Cartesian3.fromDegrees(
-123.0744619,
44.0503706,
5000.0
),
model: {
uri: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
minimumPixelSize: 128,
maximumScale: 20000,
},
});
viewer.trackedEntity = entity;
viewer.clock.shouldAnimate = true;
}
// Load CZML DataSource with a model and set the trackedEntity.
// No need to call scene.requestRender()
// Enable and adjust maximum simulation time change to see
// animations at desired speed.
function loadCzmlScenario() {
resetScene();
viewModel.showTimeOptions = true;
viewModel.timeChangeEnabled = true;
viewModel.maximumRenderTimeChange = 10.0;
viewer.dataSources.add(
Cesium.CzmlDataSource.load("../../SampleData/simple.czml")
);
viewer.clock.shouldAnimate = true;
}
// Pick an entity, only rendering when needed.
function pickingScenario() {
resetScene();
var color = Cesium.Color.CORNFLOWERBLUE;
var colorProperty = new Cesium.CallbackProperty(function () {
return color;
}, false);
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
box: {
dimensions: new Cesium.Cartesian3(1000000.0, 1000000.0, 30000.0),
material: new Cesium.ColorMaterialProperty(colorProperty),
},
});
scene.requestRender();
// If the mouse is over the box, change its scale and color,
// then request a new render frame.
var lastPicked;
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
var pickedObject = scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
if (Cesium.defined(lastPicked)) {
return;
}
color = Cesium.Color.YELLOW;
scene.requestRender();
lastPicked = pickedObject;
} else if (Cesium.defined(lastPicked)) {
color = Cesium.Color.CORNFLOWERBLUE;
scene.requestRender();
lastPicked = undefined;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
// Changes to the scene with the API will require
// calling requestRender() on change.
function setScenePropertiesScenario() {
resetScene();
scene.skyBox.show = false;
scene.backgroundColor = Cesium.Color.CORNFLOWERBLUE;
scene.requestRender();
}
// BEGIN SANDCASTLE EXAMPLE UI SETUP
var toolbar = document.getElementById("toolbar");
Cesium.knockout.track(viewModel);
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout
.getObservable(viewModel, "requestRenderMode")
.subscribe(function (value) {
scene.requestRenderMode = value;
});
Cesium.knockout
.getObservable(viewModel, "timeChangeEnabled")
.subscribe(function (value) {
scene.maximumRenderTimeChange = value
? viewModel.maximumRenderTimeChange
: Infinity;
});
Cesium.knockout
.getObservable(viewModel, "maximumRenderTimeChange")
.subscribe(function (value) {
scene.maximumRenderTimeChange = value;
});
scene.postRender.addEventListener(function () {
var time = Cesium.JulianDate.toGregorianDate(scene.lastRenderTime);
var value =
time.hour +
":" +
time.minute +
":" +
time.second +
":" +
time.millisecond.toFixed(0);
Cesium.knockout.getObservable(viewModel, "lastRenderTime")(value);
});
var scenarios = [
{
text: "Default view",
onselect: resetScene,
},
{
text: "Load a 3D tileset and set the view",
onselect: loadTilesetScenario,
},
{
text: "Mouseover picking",
onselect: pickingScenario,
},
{
text: "Load time-dynamic CZML",
onselect: loadCzmlScenario,
},
{
text: "Animated model",
onselect: loadModelScenario,
},
{
text: "Scene changes with API",
onselect: setScenePropertiesScenario,
},
];
Sandcastle.addToolbarMenu(scenarios);
//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