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/Cesium Widget.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 CesiumWidget to create a simple 3D globe."
/>
<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
// Cesium.CesiumWidget is similar to Cesium.Viewer, but
// is trimmed down. It is just a widget for the 3D globe;
// it does not include the animation, imagery selection,
// and other widgets, nor does it depend on the third-party
// Knockout library.
var widget = new Cesium.CesiumWidget("cesiumContainer");
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Cesium World 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="High-resolution global terrain tileset curated from several datasources and 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
// For more information on Cesium World Terrain, see https://cesium.com/content/cesiumworldterrain
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Circles and Ellipses.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 circles, ellipses, and extruded volumes that conform 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 greenCircle = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),
name: "Green circle at height with outline",
ellipse: {
semiMinorAxis: 300000.0,
semiMajorAxis: 300000.0,
height: 200000.0,
material: Cesium.Color.GREEN,
outline: true, // height must be set for outline to display
},
});
var redEllipse = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
name: "Red ellipse on surface",
ellipse: {
semiMinorAxis: 250000.0,
semiMajorAxis: 400000.0,
material: Cesium.Color.RED.withAlpha(0.5),
},
});
var blueEllipse = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
name: "Blue translucent, rotated, and extruded ellipse with outline",
ellipse: {
semiMinorAxis: 150000.0,
semiMajorAxis: 300000.0,
extrudedHeight: 200000.0,
rotation: Cesium.Math.toRadians(45),
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Clamp to 3D Model.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="Clamp a point and label to a model using the sampleHeight function."
/>
<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", {
infoBox: false,
selectionIndicator: false,
shadows: true,
shouldAnimate: true,
});
var scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;
if (!scene.sampleHeightSupported) {
window.alert("This browser does not support sampleHeight.");
}
var longitude = -2.1480545852753163;
var latitude = 0.7688240036937101;
var range = 0.000002;
var duration = 4.0;
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromRadians(longitude, latitude),
model: {
uri: "../../SampleData/models/GroundVehicle/GroundVehicle.glb",
},
});
var point = viewer.entities.add({
position: new Cesium.CallbackProperty(updatePosition, false),
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
label: {
show: false,
showBackground: true,
font: "14px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(5, 5),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
var objectsToExclude = [point];
var cartographic = new Cesium.Cartographic();
function updatePosition(time, result) {
var offset = (time.secondsOfDay % duration) / duration;
cartographic.longitude = longitude - range + offset * range * 2.0;
cartographic.latitude = latitude;
var height;
if (scene.sampleHeightSupported) {
height = scene.sampleHeight(cartographic, objectsToExclude);
}
if (Cesium.defined(height)) {
cartographic.height = height;
point.label.text = Math.abs(height).toFixed(2).toString() + " m";
point.label.show = true;
} else {
cartographic.height = 0.0;
point.label.show = false;
}
return Cesium.Cartographic.toCartesian(
cartographic,
Cesium.Ellipsoid.WGS84,
result
);
}
viewer.trackedEntity = entity;
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Clamp to 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="Clamp a model to a 3D Tileset using the clampToHeight function."
/>
<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;
var clock = viewer.clock;
var entity;
var positionProperty;
var dataSourcePromise = Cesium.CzmlDataSource.load(
"../../SampleData/ClampToGround.czml"
);
viewer.dataSources.add(dataSourcePromise).then(function (dataSource) {
entity = dataSource.entities.getById("CesiumMilkTruck");
positionProperty = entity.position;
});
var tileset = scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(40866),
})
);
viewer.camera.setView({
destination: new Cesium.Cartesian3(
1216403.8845586285,
-4736357.493351395,
4081299.715698949
),
orientation: new Cesium.HeadingPitchRoll(
4.2892217081808806,
-0.4799070147502502,
6.279789177843313
),
endTransform: Cesium.Matrix4.IDENTITY,
});
if (scene.clampToHeightSupported) {
tileset.initialTilesLoaded.addEventListener(start);
} else {
window.alert("This browser does not support clampToHeight.");
}
function start() {
clock.shouldAnimate = true;
var objectsToExclude = [entity];
scene.postRender.addEventListener(function () {
var position = positionProperty.getValue(clock.currentTime);
entity.position = scene.clampToHeight(position, objectsToExclude);
});
}
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Clamp to 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="Clamp primitives to the 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="toggleLighting"></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(),
});
viewer.scene.globe.depthTestAgainstTerrain = true;
Sandcastle.addDefaultToolbarMenu(
[
{
//
// To clamp points or billboards set the heightReference to CLAMP_TO_GROUND or RELATIVE_TO_GROUND
//
text: "Draw Point with Label",
onselect: function () {
var e = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
point: {
color: Cesium.Color.SKYBLUE,
pixelSize: 10,
outlineColor: Cesium.Color.YELLOW,
outlineWidth: 3,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
label: {
text: "Clamped to ground",
font: "14pt sans-serif",
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BASELINE,
fillColor: Cesium.Color.BLACK,
showBackground: true,
backgroundColor: new Cesium.Color(1, 1, 1, 0.7),
backgroundPadding: new Cesium.Cartesian2(8, 4),
disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain
},
});
viewer.trackedEntity = e;
},
},
{
text: "Draw Billboard",
onselect: function () {
var e = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
billboard: {
image: "../images/facility.gif",
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
viewer.trackedEntity = e;
},
},
{
//
// Corridors, polygons and rectangles will be clamped automatically if they are filled with a constant color and
// has no height or extruded height.
// NOTE: Setting height to 0 will disable clamping.
//
text: "Draw Corridor",
onselect: function () {
var e = viewer.entities.add({
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-122.19,
46.1914,
-122.21,
46.21,
-122.23,
46.21,
]),
width: 2000.0,
material: Cesium.Color.GREEN.withAlpha(0.5),
},
});
viewer.zoomTo(e);
},
},
{
text: "Draw Polygon",
onselect: function () {
var e = viewer.entities.add({
polygon: {
hierarchy: {
positions: [
new Cesium.Cartesian3(
-2358138.847340281,
-3744072.459541374,
4581158.5714175375
),
new Cesium.Cartesian3(
-2357231.4925370603,
-3745103.7886602185,
4580702.9757762635
),
new Cesium.Cartesian3(
-2355912.902205431,
-3744249.029778454,
4582402.154378103
),
new Cesium.Cartesian3(
-2357208.0209552636,
-3743553.4420488174,
4581961.863286629
),
],
},
material: Cesium.Color.BLUE.withAlpha(0.5),
},
});
viewer.zoomTo(e);
},
},
{
text: "Draw Textured Polygon",
onselect: function () {
if (
!Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(
viewer.scene
)
) {
window.alert(
"Terrain Entity materials are not supported on this platform"
);
return;
}
var e = viewer.entities.add({
polygon: {
hierarchy: {
positions: [
new Cesium.Cartesian3(
-2358138.847340281,
-3744072.459541374,
4581158.5714175375
),
new Cesium.Cartesian3(
-2357231.4925370603,
-3745103.7886602185,
4580702.9757762635
),
new Cesium.Cartesian3(
-2355912.902205431,
-3744249.029778454,
4582402.154378103
),
new Cesium.Cartesian3(
-2357208.0209552636,
-3743553.4420488174,
4581961.863286629
),
],
},
material: "../images/Cesium_Logo_Color.jpg",
classificationType: Cesium.ClassificationType.TERRAIN,
stRotation: Cesium.Math.toRadians(45),
},
});
viewer.zoomTo(e);
},
},
{
text: "Draw Rectangle",
onselect: function () {
var e = viewer.entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-122.3,
46.0,
-122.0,
46.3
),
material: Cesium.Color.RED.withAlpha(0.5),
},
});
viewer.zoomTo(e);
},
},
{
text: "Draw Model",
onselect: function () {
var e = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
model: {
uri: "../../SampleData/models/CesiumMan/Cesium_Man.glb",
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
minimumPixelSize: 128,
maximumScale: 100,
},
});
viewer.trackedEntity = e;
},
},
{
text: "Sample line positions and draw with depth test disabled",
onselect: function () {
var length = 1000;
var startLon = Cesium.Math.toRadians(86.953793);
var endLon = Cesium.Math.toRadians(86.896497);
var lat = Cesium.Math.toRadians(27.988257);
var terrainSamplePositions = [];
for (var i = 0; i < length; ++i) {
var lon = Cesium.Math.lerp(
endLon,
startLon,
i / (length - 1)
);
var position = new Cesium.Cartographic(lon, lat);
terrainSamplePositions.push(position);
}
Cesium.when(
Cesium.sampleTerrainMostDetailed(
viewer.terrainProvider,
terrainSamplePositions
),
function (samples) {
var offset = 10.0;
for (var i = 0; i < samples.length; ++i) {
samples[i].height += offset;
}
viewer.entities.add({
polyline: {
positions: Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(
samples
),
arcType: Cesium.ArcType.NONE,
width: 5,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.ORANGE,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}),
depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty(
{
color: Cesium.Color.RED,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}
),
},
});
var target = new Cesium.Cartesian3(
300770.50872389384,
5634912.131394585,
2978152.2865545116
);
offset = new Cesium.Cartesian3(
6344.974098678562,
-793.3419798081741,
2499.9508860763162
);
viewer.camera.lookAt(target, offset);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
}
);
},
},
{
text: "Draw polyline on terrain",
onselect: function () {
if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
window.alert(
"Polylines on terrain are not supported on this platform"
);
}
viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
86.953793,
27.928257,
86.953793,
27.988257,
86.896497,
27.988257,
]),
clampToGround: true,
width: 5,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.ORANGE,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}),
},
});
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);
},
},
],
"zoomButtons"
);
Sandcastle.reset = function () {
viewer.entities.removeAll();
};
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Classification Types.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 the intersection of a volume and a photgrammetry dataset and 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>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(40866),
});
viewer.scene.primitives.add(tileset);
tileset.readyPromise.then(function () {
var boundingSphere = tileset.boundingSphere;
viewer.camera.viewBoundingSphere(
boundingSphere,
new Cesium.HeadingPitchRange(
0.0,
-0.5,
boundingSphere.radius + 500.0
)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
});
var polygon = viewer.entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromRadiansArray([
-1.3194369277314022,
0.6988062530900625,
-1.3193955980204217,
0.6988091578771254,
-1.3193931220959367,
0.698743632490865,
-1.3194358224045408,
0.6987471965556998,
])
),
material: Cesium.Color.RED.withAlpha(0.5),
classificationType: Cesium.ClassificationType.BOTH,
},
});
var polyline = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
-75.60217330403601,
40.04102882709425,
-75.59968252414251,
40.04093615560871,
-75.598020153828,
40.04079437042357,
-75.59674934074435,
40.040816173283304,
-75.59630042791713,
40.03986900370842,
-75.59563636849978,
40.03930996506271,
-75.59492397899098,
40.03873932846581,
-75.59457991226778,
40.038392701955786,
-75.59424838652453,
40.03775403572295,
-75.59387104290336,
40.03677022167725,
-75.59355000490342,
40.03588760913535,
]),
width: 8,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.YELLOW,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}),
clampToGround: true,
},
});
var classificationOptions = [
{
text: "Classify Both",
onselect: function () {
polygon.polygon.classificationType =
Cesium.ClassificationType.BOTH;
polyline.polyline.classificationType =
Cesium.ClassificationType.BOTH;
},
},
{
text: "Classify Terrain",
onselect: function () {
polygon.polygon.classificationType =
Cesium.ClassificationType.TERRAIN;
polyline.polyline.classificationType =
Cesium.ClassificationType.TERRAIN;
},
},
{
text: "Classify 3D Tiles",
onselect: function () {
polygon.polygon.classificationType =
Cesium.ClassificationType.CESIUM_3D_TILE;
polyline.polyline.classificationType =
Cesium.ClassificationType.CESIUM_3D_TILE;
},
},
];
var materialOptions = [
{
text: "Red Material",
onselect: function () {
polygon.polygon.material = Cesium.Color.RED.withAlpha(0.5);
},
},
{
text: "Textured Material",
onselect: function () {
polygon.polygon.material = "../images/Cesium_Logo_Color.jpg";
},
},
];
Sandcastle.addToolbarMenu(classificationOptions);
Sandcastle.addToolbarMenu(materialOptions);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Classification.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 the intersection of a volume and a photgrammetry dataset."
/>
<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);
#toolbar {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td>
<button class="cesium-button" data-bind="click: highlightTrees">
Highlight trees
</button>
</td>
</tr>
<tr>
<td>
<button
class="cesium-button"
data-bind="click: highlightBuilding"
>
Highlight building face
</button>
</td>
</tr>
<tr>
<td>invert classification</td>
<td><input type="checkbox" data-bind="checked: inverted" /></td>
</tr>
<tr>
<td>inverted color alpha</td>
<td>
<input
type="range"
min="0.0"
max="1.0"
step="0.01"
data-bind="value: invertedAlpha, valueUpdate: 'input'"
/>
<input type="text" size="3" data-bind="value: invertedAlpha" />
</td>
</tr>
</tbody>
</table>
</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;
var camera = scene.camera;
var center = new Cesium.Cartesian3(
1216389.3637977627,
-4736323.641980423,
4081321.7428341154
);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
var hprRotation = Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(2.619728786416368, 0.0, 0.0)
);
var hpr = Cesium.Matrix4.fromRotationTranslation(
hprRotation,
new Cesium.Cartesian3(0.0, 0.0, -2.0)
);
Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);
var buildingHighlight = scene.primitives.add(
new Cesium.ClassificationPrimitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: Cesium.BoxGeometry.fromDimensions({
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
dimensions: new Cesium.Cartesian3(8.0, 5.0, 8.0),
}),
modelMatrix: modelMatrix,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
new Cesium.Color(1.0, 0.0, 0.0, 0.5)
),
show: new Cesium.ShowGeometryInstanceAttribute(true),
},
id: "volume",
}),
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
})
);
center = new Cesium.Cartesian3(
1216409.0189737265,
-4736252.144235287,
4081393.6027081604
);
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
hprRotation = Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(5.785339046755887, 0.0, 0.0)
);
hpr = Cesium.Matrix4.fromRotationTranslation(
hprRotation,
new Cesium.Cartesian3(0.4, 0.0, -2.0)
);
Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);
var treeHighlight1 = scene.primitives.add(
new Cesium.ClassificationPrimitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.EllipsoidGeometry({
radii: new Cesium.Cartesian3(3.25, 5.0, 4.0),
}),
modelMatrix: modelMatrix,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
Cesium.Color.fromCssColorString("#F26419").withAlpha(0.5)
),
show: new Cesium.ShowGeometryInstanceAttribute(true),
},
id: "volume 1",
}),
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
})
);
center = new Cesium.Cartesian3(
1216404.8844045496,
-4736255.287065536,
4081392.010192471
);
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
hprRotation = Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(5.785339046755887, 0.0, 0.0)
);
hpr = Cesium.Matrix4.fromRotationTranslation(
hprRotation,
new Cesium.Cartesian3(-0.25, 0.0, -2.0)
);
Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);
var treeHighlight2 = scene.primitives.add(
new Cesium.ClassificationPrimitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.EllipsoidGeometry({
radii: new Cesium.Cartesian3(3.25, 5.0, 4.0),
}),
modelMatrix: modelMatrix,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
Cesium.Color.fromCssColorString("#F03A47").withAlpha(0.5)
),
show: new Cesium.ShowGeometryInstanceAttribute(true),
},
id: "volume 2",
}),
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
})
);
center = new Cesium.Cartesian3(
1216398.813990024,
-4736258.039875737,
4081387.9562678365
);
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
var translation = Cesium.Matrix4.fromTranslation(
new Cesium.Cartesian3(0.0, 0.0, -2.0)
);
Cesium.Matrix4.multiply(modelMatrix, translation, modelMatrix);
var treeHighlight3 = scene.primitives.add(
new Cesium.ClassificationPrimitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.EllipsoidGeometry({
radii: new Cesium.Cartesian3(2.45, 2.45, 3.0),
}),
modelMatrix: modelMatrix,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
Cesium.Color.fromCssColorString("#004FFF").withAlpha(0.5)
),
show: new Cesium.ShowGeometryInstanceAttribute(true),
},
id: "volume 3",
}),
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
})
);
center = new Cesium.Cartesian3(
1216393.6257790313,
-4736259.809075361,
4081384.4858198245
);
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
translation = Cesium.Matrix4.fromTranslation(
new Cesium.Cartesian3(0.0, 0.0, -1.0)
);
Cesium.Matrix4.multiply(modelMatrix, translation, modelMatrix);
var treeHighlight4 = scene.primitives.add(
new Cesium.ClassificationPrimitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.SphereGeometry({
radius: 2.0,
}),
modelMatrix: modelMatrix,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
Cesium.Color.fromCssColorString("#55DDE0").withAlpha(0.5)
),
show: new Cesium.ShowGeometryInstanceAttribute(true),
},
id: "volume 4",
}),
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
})
);
function highlightBuilding() {
camera.setView({
destination: new Cesium.Cartesian3(
1216394.1392207467,
-4736348.59346919,
4081293.9160685353
),
orientation: {
heading: 0.018509338875732695,
pitch: -0.09272999615872646,
},
});
}
function highlightTrees() {
camera.setView({
destination: new Cesium.Cartesian3(
1216435.0352745096,
-4736283.144192113,
4081368.0920420634
),
orientation: {
heading: 5.718380792746039,
pitch: -0.3087010195266797,
},
});
}
function invertClassification(checked) {
if (checked && !scene.invertClassificationSupported) {
window.alert("This browser does not support invert classification");
}
scene.invertClassification = checked;
scene.invertClassificationColor = new Cesium.Color(
0.25,
0.25,
0.25,
1.0
);
buildingHighlight.getGeometryInstanceAttributes(
"volume"
).show = Cesium.ShowGeometryInstanceAttribute.toValue(!checked);
treeHighlight1.getGeometryInstanceAttributes(
"volume 1"
).show = Cesium.ShowGeometryInstanceAttribute.toValue(!checked);
treeHighlight2.getGeometryInstanceAttributes(
"volume 2"
).show = Cesium.ShowGeometryInstanceAttribute.toValue(!checked);
treeHighlight3.getGeometryInstanceAttributes(
"volume 3"
).show = Cesium.ShowGeometryInstanceAttribute.toValue(!checked);
treeHighlight4.getGeometryInstanceAttributes(
"volume 4"
).show = Cesium.ShowGeometryInstanceAttribute.toValue(!checked);
}
function updateAlpha(value) {
scene.invertClassificationColor.alpha = parseFloat(value);
}
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(40866),
});
scene.primitives.add(tileset);
var viewModel = {
inverted: viewer.scene.invertClassification,
invertedAlpha: viewer.scene.invertClassificationColor.alpha,
highlightBuilding: highlightBuilding,
highlightTrees: highlightTrees,
};
Cesium.knockout.track(viewModel);
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout
.getObservable(viewModel, "inverted")
.subscribe(invertClassification);
Cesium.knockout
.getObservable(viewModel, "invertedAlpha")
.subscribe(updateAlpha);
highlightTrees();
var currentObjectId;
var currentPrimitive;
var currentColor;
var currentShow;
var attributes;
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
var pickedObject = scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
if (pickedObject.id === currentObjectId) {
return;
}
if (Cesium.defined(currentObjectId)) {
attributes = currentPrimitive.getGeometryInstanceAttributes(
currentObjectId
);
attributes.color = currentColor;
attributes.show = currentShow;
currentObjectId = undefined;
currentPrimitive = undefined;
currentColor = undefined;
currentShow = undefined;
}
}
if (
Cesium.defined(pickedObject) &&
Cesium.defined(pickedObject.primitive) &&
Cesium.defined(pickedObject.id) &&
Cesium.defined(pickedObject.primitive.getGeometryInstanceAttributes)
) {
currentObjectId = pickedObject.id;
currentPrimitive = pickedObject.primitive;
attributes = currentPrimitive.getGeometryInstanceAttributes(
currentObjectId
);
currentColor = attributes.color;
currentShow = attributes.show;
if (!scene.invertClassification) {
attributes.color = [255, 0, 255, 128];
}
attributes.show = [1];
} else if (Cesium.defined(currentObjectId)) {
attributes = currentPrimitive.getGeometryInstanceAttributes(
currentObjectId
);
attributes.color = currentColor;
attributes.show = currentShow;
currentObjectId = undefined;
currentPrimitive = undefined;
currentColor = undefined;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Clock.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 the Viewer clock." />
<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
// Create a clock that loops on Christmas day 2013 and runs in 4000x real time.
var clock = new Cesium.Clock({
startTime: Cesium.JulianDate.fromIso8601("2013-12-25"),
currentTime: Cesium.JulianDate.fromIso8601("2013-12-25"),
stopTime: Cesium.JulianDate.fromIso8601("2013-12-26"),
clockRange: Cesium.ClockRange.LOOP_STOP, // loop when we hit the end time
clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
multiplier: 4000, // how much time to advance each tick
shouldAnimate: true, // Animation on by default
});
var viewer = new Cesium.Viewer("cesiumContainer", {
clockViewModel: new Cesium.ClockViewModel(clock),
});
viewer.scene.globe.enableLighting = true;
Sandcastle.addToolbarButton("Reset Current Time", function () {
var resetTime = viewer.clockViewModel.startTime;
viewer.clockViewModel.currentTime = resetTime;
viewer.timeline.updateFromClock();
});
Sandcastle.addToolbarButton("Slow Down Clock", function () {
viewer.clockViewModel.multiplier /= 2;
});
Sandcastle.addToolbarButton("Speed Up Clock", function () {
viewer.clockViewModel.multiplier *= 2;
}); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Clustering.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="Cluster labels, billboards and points." />
<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);
#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>Pixel Range</td>
<td>
<input
type="range"
min="1"
max="200"
step="1"
data-bind="value: pixelRange, valueUpdate: 'input'"
/>
<input type="text" size="2" data-bind="value: pixelRange" />
</td>
</tr>
<tr>
<td>Minimum Cluster Size</td>
<td>
<input
type="range"
min="2"
max="20"
step="1"
data-bind="value: minimumClusterSize, valueUpdate: 'input'"
/>
<input
type="text"
size="2"
data-bind="value: minimumClusterSize"
/>
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
var options = {
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
};
var dataSourcePromise = viewer.dataSources.add(
Cesium.KmlDataSource.load(
"../../SampleData/kml/facilities/facilities.kml",
options
)
);
dataSourcePromise.then(function (dataSource) {
var pixelRange = 15;
var minimumClusterSize = 3;
var enabled = true;
dataSource.clustering.enabled = enabled;
dataSource.clustering.pixelRange = pixelRange;
dataSource.clustering.minimumClusterSize = minimumClusterSize;
var removeListener;
var pinBuilder = new Cesium.PinBuilder();
var pin50 = pinBuilder
.fromText("50+", Cesium.Color.RED, 48)
.toDataURL();
var pin40 = pinBuilder
.fromText("40+", Cesium.Color.ORANGE, 48)
.toDataURL();
var pin30 = pinBuilder
.fromText("30+", Cesium.Color.YELLOW, 48)
.toDataURL();
var pin20 = pinBuilder
.fromText("20+", Cesium.Color.GREEN, 48)
.toDataURL();
var pin10 = pinBuilder
.fromText("10+", Cesium.Color.BLUE, 48)
.toDataURL();
var singleDigitPins = new Array(8);
for (var i = 0; i < singleDigitPins.length; ++i) {
singleDigitPins[i] = pinBuilder
.fromText("" + (i + 2), Cesium.Color.VIOLET, 48)
.toDataURL();
}
function customStyle() {
if (Cesium.defined(removeListener)) {
removeListener();
removeListener = undefined;
} else {
removeListener = dataSource.clustering.clusterEvent.addEventListener(
function (clusteredEntities, cluster) {
cluster.label.show = false;
cluster.billboard.show = true;
cluster.billboard.id = cluster.label.id;
cluster.billboard.verticalOrigin =
Cesium.VerticalOrigin.BOTTOM;
if (clusteredEntities.length >= 50) {
cluster.billboard.image = pin50;
} else if (clusteredEntities.length >= 40) {
cluster.billboard.image = pin40;
} else if (clusteredEntities.length >= 30) {
cluster.billboard.image = pin30;
} else if (clusteredEntities.length >= 20) {
cluster.billboard.image = pin20;
} else if (clusteredEntities.length >= 10) {
cluster.billboard.image = pin10;
} else {
cluster.billboard.image =
singleDigitPins[clusteredEntities.length - 2];
}
}
);
}
// force a re-cluster with the new styling
var pixelRange = dataSource.clustering.pixelRange;
dataSource.clustering.pixelRange = 0;
dataSource.clustering.pixelRange = pixelRange;
}
// start with custom style
customStyle();
var viewModel = {
pixelRange: pixelRange,
minimumClusterSize: minimumClusterSize,
};
Cesium.knockout.track(viewModel);
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
function subscribeParameter(name) {
Cesium.knockout
.getObservable(viewModel, name)
.subscribe(function (newValue) {
dataSource.clustering[name] = newValue;
});
}
subscribeParameter("pixelRange");
subscribeParameter("minimumClusterSize");
Sandcastle.addToggleButton("Enabled", true, function (checked) {
dataSource.clustering.enabled = checked;
});
Sandcastle.addToggleButton("Custom Styling", true, function (
checked
) {
customStyle();
});
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
var pickedLabel = viewer.scene.pick(movement.position);
if (Cesium.defined(pickedLabel)) {
var ids = pickedLabel.id;
if (Array.isArray(ids)) {
for (var i = 0; i < ids.length; ++i) {
ids[i].billboard.color = Cesium.Color.RED;
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});
//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