Skip to content

GitLab

Commit 2dbd8f1f authored by Schaaf's avatar Schaaf
Browse files

Initial commit

parents
Hide whitespace changes
Inline Side-by-side
Sandcastle/gallery/Materials.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="Browse Cesium's built in materials and define new ones using the Fabric schema."
/>
<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 rectangle;
var worldRectangle;
var polyline;
function applyAlphaMapMaterial(primitive, scene) {
Sandcastle.declare(applyAlphaMapMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = new Cesium.Material({
fabric: {
materials: {
alphaMaterial: {
type: "AlphaMap",
uniforms: {
image: "../images/Cesium_Logo_Color.jpg",
channel: "r",
},
},
},
components: {
diffuse: "vec3(1.0)",
alpha: "alphaMaterial.alpha",
},
},
});
}
function applyBumpMapMaterial(primitive, scene) {
Sandcastle.declare(applyBumpMapMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = new Cesium.Material({
fabric: {
materials: {
diffuseMaterial: {
type: "DiffuseMap",
uniforms: {
image: "../images/bumpmap.png",
},
},
bumpMaterial: {
type: "BumpMap",
uniforms: {
image: "../images/bumpmap.png",
strength: 0.8,
},
},
},
components: {
diffuse: "diffuseMaterial.diffuse",
specular: 0.01,
normal: "bumpMaterial.normal",
},
},
});
}
function applyCheckerboardMaterial(primitive, scene) {
Sandcastle.declare(applyCheckerboardMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = Cesium.Material.fromType(
"Checkerboard"
);
}
function applyColorMaterial(primitive, scene) {
Sandcastle.declare(applyColorMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = Cesium.Material.fromType("Color");
}
function applyCompositeMaterial(primitive, scene) {
Sandcastle.declare(applyCompositeMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = new Cesium.Material({
fabric: {
uniforms: {
image: "../images/earthspec1k.jpg",
heightField: "../images/earthbump1k.jpg",
},
materials: {
bumpMap: {
type: "BumpMap",
uniforms: {
image: "../images/earthbump1k.jpg",
},
},
},
source:
"czm_material czm_getMaterial(czm_materialInput materialInput) { \n" +
" czm_material material = czm_getDefaultMaterial(materialInput); \n" +
" vec4 color; \n" +
" float heightValue = texture2D(heightField, materialInput.st).r; \n" +
" color.rgb = mix(vec3(0.2, 0.6, 0.2), vec3(1.0, 0.5, 0.2), heightValue); \n" +
" color.a = (1.0 - texture2D(image, materialInput.st).r) * 0.7; \n" +
" color = czm_gammaCorrect(color); \n" +
" material.diffuse = color.rgb; \n" +
" material.alpha = color.a; \n" +
" material.normal = bumpMap.normal; \n" +
" material.specular = step(0.1, heightValue); \n" + // Specular mountain tops
" material.shininess = 8.0; \n" + // Sharpen highlight
" return material; \n" +
"} \n",
},
});
}
function applyDotMaterial(primitive, scene) {
Sandcastle.declare(applyDotMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = Cesium.Material.fromType("Dot");
}
function applyDiffuseMaterial(primitive, scene) {
Sandcastle.declare(applyDiffuseMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = new Cesium.Material({
fabric: {
type: "DiffuseMap",
uniforms: {
image: "../images/Cesium_Logo_Color.jpg",
},
},
});
}
function applyEmissionMapMaterial(primitive, scene) {
Sandcastle.declare(applyEmissionMapMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = new Cesium.Material({
fabric: {
materials: {
diffuseMaterial: {
type: "DiffuseMap",
uniforms: {
image: "../images/Cesium_Logo_Color.jpg",
},
},
emissionMaterial: {
type: "EmissionMap",
uniforms: {
image: "../images/checkerboard.png",
repeat: {
x: 1,
y: 0.5,
},
},
},
},
components: {
diffuse: "diffuseMaterial.diffuse",
emission: "emissionMaterial.emission * 0.2",
},
},
});
}
function applyWaterMaterial(primitive, scene) {
Sandcastle.declare(applyWaterMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = new Cesium.Material({
fabric: {
type: "Water",
uniforms: {
specularMap: "../images/earthspec1k.jpg",
normalMap: Cesium.buildModuleUrl(
"Assets/Textures/waterNormals.jpg"
),
frequency: 10000.0,
animationSpeed: 0.01,
amplitude: 1.0,
},
},
});
}
function applyGridMaterial(primitive, scene) {
Sandcastle.declare(applyGridMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = Cesium.Material.fromType("Grid");
}
function applyImageMaterial(primitive, scene) {
Sandcastle.declare(applyImageMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = new Cesium.Material({
fabric: {
type: "Image",
uniforms: {
image: "../images/Cesium_Logo_Color.jpg",
},
},
});
}
function applyCompressedTextureMaterial(primitive, scene) {
Sandcastle.declare(applyCompressedTextureMaterial); // For highlighting in Sandcastle.
var compressedImageUrl;
if (scene.getCompressedTextureFormatSupported("s3tc")) {
compressedImageUrl = "../images/LogoDXT1.ktx";
} else if (scene.getCompressedTextureFormatSupported("etc1")) {
compressedImageUrl = "../images/LogoETC1.ktx";
} else if (scene.getCompressedTextureFormatSupported("pvrtc")) {
compressedImageUrl = "../images/LogoPVR.ktx";
}
primitive.appearance.material = new Cesium.Material({
fabric: {
type: "Image",
uniforms: {
image: compressedImageUrl,
},
},
});
}
function applyNormalMapMaterial(primitive, scene) {
Sandcastle.declare(applyNormalMapMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = new Cesium.Material({
fabric: {
materials: {
diffuseMaterial: {
type: "DiffuseMap",
uniforms: {
image: "../images/bumpmap.png",
},
},
normalMap: {
type: "NormalMap",
uniforms: {
image: "../images/normalmap.png",
strength: 0.6,
},
},
},
components: {
diffuse: "diffuseMaterial.diffuse",
specular: 0.01,
normal: "normalMap.normal",
},
},
});
}
function applySpecularMapMaterial(primitive, scene) {
Sandcastle.declare(applySpecularMapMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = new Cesium.Material({
fabric: {
type: "SpecularMap",
uniforms: {
image: "../images/Cesium_Logo_Color.jpg",
channel: "r",
},
},
});
}
function applyStripeMaterial(primitive, scene) {
Sandcastle.declare(applyStripeMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = Cesium.Material.fromType("Stripe");
}
function applyRimLightingMaterial(primitive, scene) {
Sandcastle.declare(applyRimLightingMaterial); // For highlighting in Sandcastle.
primitive.appearance.material = Cesium.Material.fromType(
"RimLighting"
);
}
function applyPolylineArrowMaterial(primitive, scene) {
Sandcastle.declare(applyPolylineArrowMaterial); // For highlighting in Sandcastle.
var material = Cesium.Material.fromType("PolylineArrow");
primitive.material = material;
}
function applyPolylineGlowMaterial(primitive, scene) {
Sandcastle.declare(applyPolylineGlowMaterial); // For highlighting in Sandcastle.
var material = Cesium.Material.fromType("PolylineGlow", {
color: Cesium.Color.CRIMSON,
glowPower: 0.2,
taperPower: 0.4,
});
primitive.material = material;
}
function applyPolylineOutlineMaterial(primitive, scene) {
Sandcastle.declare(applyPolylineOutlineMaterial); // For highlighting in Sandcastle.
var material = Cesium.Material.fromType("PolylineOutline", {
outlineWidth: primitive.width / 2.0,
});
primitive.material = material;
}
function createButtons(scene) {
function toggleRectangleVisibility() {
rectangle.show = true;
worldRectangle.show = false;
polyline.show = false;
}
function toggleWorldRectangleVisibility() {
worldRectangle.show = true;
rectangle.show = false;
polyline.show = false;
}
function togglePolylineVisibility() {
polyline.show = true;
worldRectangle.show = false;
rectangle.show = false;
}
Sandcastle.addToolbarMenu([
{
text: "Common materials",
},
{
text: "Color",
onselect: function () {
toggleRectangleVisibility();
applyColorMaterial(rectangle, scene);
Sandcastle.highlight(applyColorMaterial);
},
},
{
text: "Image",
onselect: function () {
toggleRectangleVisibility();
applyImageMaterial(rectangle, scene);
Sandcastle.highlight(applyImageMaterial);
},
},
{
text: "Compressed Image",
onselect: function () {
toggleRectangleVisibility();
applyCompressedTextureMaterial(rectangle, scene);
Sandcastle.highlight(applyCompressedTextureMaterial);
},
},
]);
Sandcastle.addToolbarMenu([
{
text: "Procedural textures",
},
{
text: "Checkerboard",
onselect: function () {
toggleRectangleVisibility();
applyCheckerboardMaterial(rectangle, scene);
Sandcastle.highlight(applyCheckerboardMaterial);
},
},
{
text: "Dot",
onselect: function () {
toggleRectangleVisibility();
applyDotMaterial(rectangle, scene);
Sandcastle.highlight(applyDotMaterial);
},
},
{
text: "Grid",
onselect: function () {
toggleRectangleVisibility(rectangle, worldRectangle);
applyGridMaterial(rectangle, scene);
Sandcastle.highlight(applyGridMaterial);
},
},
{
text: "Stripe",
onselect: function () {
toggleRectangleVisibility();
applyStripeMaterial(rectangle, scene);
Sandcastle.highlight(applyStripeMaterial);
},
},
]);
Sandcastle.addToolbarMenu([
{
text: "Base materials",
},
{
text: "Alpha Map",
onselect: function () {
toggleRectangleVisibility();
applyAlphaMapMaterial(rectangle, scene);
Sandcastle.highlight(applyAlphaMapMaterial);
},
},
{
text: "Bump Map",
onselect: function () {
toggleRectangleVisibility();
applyBumpMapMaterial(rectangle, scene);
Sandcastle.highlight(applyBumpMapMaterial);
},
},
{
text: "Diffuse",
onselect: function () {
toggleRectangleVisibility();
applyDiffuseMaterial(rectangle, scene);
Sandcastle.highlight(applyDiffuseMaterial);
},
},
{
text: "Emission Map",
onselect: function () {
toggleRectangleVisibility();
applyEmissionMapMaterial(rectangle, scene);
Sandcastle.highlight(applyEmissionMapMaterial);
},
},
{
text: "Normal Map",
onselect: function () {
toggleRectangleVisibility();
applyNormalMapMaterial(rectangle, scene);
Sandcastle.highlight(applyNormalMapMaterial);
},
},
{
text: "Specular Map",
onselect: function () {
toggleRectangleVisibility();
applySpecularMapMaterial(rectangle, scene);
Sandcastle.highlight(applySpecularMapMaterial);
},
},
]);
Sandcastle.addToolbarMenu([
{
text: "Misc materials",
},
{
text: "Rim Lighting",
onselect: function () {
toggleWorldRectangleVisibility();
applyRimLightingMaterial(worldRectangle, scene);
Sandcastle.highlight(applyRimLightingMaterial);
},
},
{
text: "Water",
onselect: function () {
toggleWorldRectangleVisibility();
applyWaterMaterial(worldRectangle, scene);
Sandcastle.highlight(applyWaterMaterial);
},
},
]);
Sandcastle.addToolbarMenu([
{
text: "Example composite materials",
},
{
text: "Composite Example",
onselect: function () {
toggleWorldRectangleVisibility();
applyCompositeMaterial(worldRectangle, scene);
Sandcastle.highlight(applyCompositeMaterial);
},
},
]);
Sandcastle.addToolbarMenu([
{
text: "Polyline materials",
},
{
text: "Polyline Arrow",
onselect: function () {
togglePolylineVisibility();
applyPolylineArrowMaterial(polyline, scene);
Sandcastle.highlight(applyPolylineArrowMaterial);
},
},
{
text: "Polyline Glow",
onselect: function () {
togglePolylineVisibility();
applyPolylineGlowMaterial(polyline, scene);
Sandcastle.highlight(applyPolylineGlowMaterial);
},
},
{
text: "Polyline Outline",
onselect: function () {
togglePolylineVisibility();
applyPolylineOutlineMaterial(polyline, scene);
Sandcastle.highlight(applyPolylineOutlineMaterial);
},
},
]);
document.getElementById("toolbar").style.width = "10%";
}
function createPrimitives(scene) {
rectangle = scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(
-120.0,
20.0,
-60.0,
40.0
),
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
}),
}),
appearance: new Cesium.EllipsoidSurfaceAppearance({
aboveGround: false,
}),
})
);
worldRectangle = scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(
-180.0,
-90.0,
180.0,
90.0
),
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
}),
}),
appearance: new Cesium.EllipsoidSurfaceAppearance({
aboveGround: false,
}),
show: false,
})
);
var polylines = scene.primitives.add(new Cesium.PolylineCollection());
polyline = polylines.add({
positions: Cesium.PolylinePipeline.generateCartesianArc({
positions: Cesium.Cartesian3.fromDegreesArray([
-110.0,
42.0,
-85.0,
36.0,
-100.0,
25.0,
-77.0,
12.0,
]),
}),
width: 10.0,
show: false,
});
}
var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
createPrimitives(scene);
createButtons(scene);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Montreal 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="Point cloud of the city of Montreal, Canada captured in 2015 with a resolution of 20 cm. Tiled and hosted by Cesium ion."
/>
<meta name="cesium-sandcastle-labels" content="ion Assets" />
<title>Montreal Point Cloud</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;
}
#toolbar .header {
font-weight: bold;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td class="header">Classification Types</td>
</tr>
<tr>
<td>Ground</td>
<td><input type="checkbox" data-bind="checked: ground" /></td>
</tr>
<tr>
<td>Low Vegetation</td>
<td>
<input type="checkbox" data-bind="checked: low_vegetation" />
</td>
</tr>
<tr>
<td>Medium Vegetation</td>
<td>
<input type="checkbox" data-bind="checked: medium_vegetation" />
</td>
</tr>
<tr>
<td>High Vegetation</td>
<td>
<input type="checkbox" data-bind="checked: high_vegetation" />
</td>
</tr>
<tr>
<td>Buildings</td>
<td><input type="checkbox" data-bind="checked: buildings" /></td>
</tr>
<tr>
<td>Other/Unclassified</td>
<td><input type="checkbox" data-bind="checked: other" /></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(),
});
// A ~10 billion point 3D Tileset of the city of Montreal, Canada captured in 2015 with a resolution of 20 cm. Tiled and hosted by Cesium ion.
var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(28945),
pointCloudShading: {
attenuation: true,
maximumAttenuation: 2,
},
})
);
// Fly to a nice overview of the city.
viewer.camera.flyTo({
destination: new Cesium.Cartesian3(
1223285.2286828577,
-4319476.080312792,
4562579.020145769
),
orientation: {
direction: new Cesium.Cartesian3(
0.63053223097472,
0.47519958296727743,
-0.6136892226931869
),
up: new Cesium.Cartesian3(
0.7699959023135587,
-0.4824455703743441,
0.41755548379407276
),
},
easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
});
// Add stored views around Montreal. You can add to this list by capturing camera.position, camera.direction and camera.up.
Sandcastle.addToolbarMenu([
{
text: "Overview",
onselect: function () {
viewer.camera.flyTo({
destination: new Cesium.Cartesian3(
1268112.9336926902,
-4347432.089579957,
4539129.813606778
),
orientation: {
direction: new Cesium.Cartesian3(
-0.23288147105081208,
0.9376599248561527,
-0.25799241415197466
),
up: new Cesium.Cartesian3(
-0.015748156073159988,
0.2616156268422992,
0.9650436567182887
),
},
easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
});
},
},
{
text: "Highway",
onselect: function () {
viewer.camera.flyTo({
destination: new Cesium.Cartesian3(
1266560.143870489,
-4278126.842199712,
4542690.264566619
),
orientation: {
direction: new Cesium.Cartesian3(
-0.3402460635871598,
-0.46669052711538217,
-0.8163532128400116
),
up: new Cesium.Cartesian3(
0.08964012922691329,
-0.8802940231336787,
0.46588311846138497
),
},
easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
});
},
},
{
text: "Olympic Stadium",
onselect: function () {
viewer.camera.flyTo({
destination: new Cesium.Cartesian3(
1267081.619536883,
-4290744.917138439,
4530941.041519919
),
orientation: {
direction: new Cesium.Cartesian3(
-0.735813047510908,
0.6294547560338262,
0.24973159435503312
),
up: new Cesium.Cartesian3(
-0.09796934684423217,
-0.4638476756625683,
0.88048131204549
),
},
easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
});
},
},
{
text: "Biosphere Museum",
onselect: function () {
viewer.camera.flyTo({
destination: new Cesium.Cartesian3(
1269319.8408991008,
-4293301.826913256,
4527724.561372451
),
orientation: {
direction: new Cesium.Cartesian3(
-0.742505030107832,
-0.3413204607149223,
-0.5763563336703441
),
up: new Cesium.Cartesian3(
-0.04655102331027917,
-0.8320643756800384,
0.5527222421370013
),
},
easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
});
},
},
{
text: "St. Joseph's Oratory of Mount Royal",
onselect: function () {
viewer.camera.flyTo({
destination: new Cesium.Cartesian3(
1263148.6745904868,
-4297262.506644816,
4525958.844284831
),
orientation: {
direction: new Cesium.Cartesian3(
0.6550952540993403,
0.7551122393690295,
0.025606913355780074
),
up: new Cesium.Cartesian3(
0.46670450470847263,
-0.4310758971098583,
0.7722437932516845
),
},
easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
});
},
},
]);
// Set up checkboxes for toggling the various classification settings.
var viewModel = {
ground: true,
other: true,
buildings: true,
low_vegetation: true,
medium_vegetation: true,
high_vegetation: true,
};
// Assign colors to each classification type.
var pointStyles = {
unclassified: {
color: "color('#808080')",
show: true,
},
not_awarded: {
color: "color('#FFDEAD')",
show: true,
},
ground: {
color: "color('#FFDEAD')",
show: true,
},
low_vegetation: {
color: "color('#63FF7E')",
show: true,
},
medium_vegetation: {
color: "color('#63FF7E')",
show: true,
},
high_vegetation: {
color: "color('#22B33A')",
show: true,
},
buildings: {
color: "color('#efefef')",
show: true,
},
low_point: {
color: "color('#808080')",
show: true,
},
reserved_city_diffusion: {
color: "color('#808080')",
show: true,
},
};
var classificationDictionary = {
not_awarded: 1,
ground: 2,
low_vegetation: 3,
medium_vegetation: 4,
high_vegetation: 5,
buildings: 6,
low_point: 7,
reserved_city_diffusion: 8,
unclassified: -1,
};
// This is a helper function to re-apply the styles each time the UI/checkboxes are updated.
function applyStyle(tileset, styles) {
var styleObject = {};
var styleKeys = Object.keys(styles);
styleObject.color = {
conditions: [],
};
styleObject.show = {
conditions: [],
};
var finalCondition;
for (var i = 0; i < styleKeys.length; ++i) {
var key = styleKeys[i];
var id = classificationDictionary[key];
var colorCondition = [
"${Classification} === " + id,
styles[key].color,
];
var showCondition = [
"${Classification} === " + id,
styles[key].show,
];
if (id === -1) {
colorCondition[0] = true;
showCondition[0] = true;
finalCondition = {
colorCondition: colorCondition,
showCondition: showCondition,
};
} else {
styleObject.color.conditions.push(colorCondition);
styleObject.show.conditions.push(showCondition);
}
}
if (Cesium.defined(finalCondition)) {
styleObject.color.conditions.push(finalCondition.colorCondition);
styleObject.show.conditions.push(finalCondition.showCondition);
}
tileset.style = new Cesium.Cesium3DTileStyle(styleObject);
}
// Apply an initial style.
applyStyle(tileset, pointStyles);
Cesium.knockout.track(viewModel);
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
// Set up the checkboxes.
Cesium.knockout
.getObservable(viewModel, "ground")
.subscribe(function (show) {
pointStyles.ground.show = show;
pointStyles.not_awarded.show = show;
applyStyle(tileset, pointStyles);
});
Cesium.knockout
.getObservable(viewModel, "low_vegetation")
.subscribe(function (show) {
pointStyles.low_vegetation.show = show;
applyStyle(tileset, pointStyles);
});
Cesium.knockout
.getObservable(viewModel, "medium_vegetation")
.subscribe(function (show) {
pointStyles.medium_vegetation.show = show;
applyStyle(tileset, pointStyles);
});
Cesium.knockout
.getObservable(viewModel, "high_vegetation")
.subscribe(function (show) {
pointStyles.high_vegetation.show = show;
applyStyle(tileset, pointStyles);
});
Cesium.knockout
.getObservable(viewModel, "buildings")
.subscribe(function (show) {
pointStyles.buildings.show = show;
applyStyle(tileset, pointStyles);
});
Cesium.knockout
.getObservable(viewModel, "other")
.subscribe(function (show) {
pointStyles.low_point.show = show;
pointStyles.reserved_city_diffusion.show = show;
pointStyles.unclassified.show = show;
applyStyle(tileset, pointStyles);
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Multi-part CZML.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta
name="description"
content="A CZML example showing a single entity path split across multiple CZML streams."
/>
<meta
name="cesium-sandcastle-labels"
content="Showcases, DataSources, CZML"
/>
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var statusDisplay = document.createElement("div");
var fuelDisplay = document.createElement("div");
var czmlPath = "../../SampleData/";
var vehicleEntity;
// Add a blank CzmlDataSource to hold our multi-part entity/entities.
var dataSource = new Cesium.CzmlDataSource();
viewer.dataSources.add(dataSource);
// This demo shows how a single path can be broken up into several CZML streams.
var partsToLoad = [
{
url: "MultipartVehicle_part1.czml",
range: [0, 1500],
requested: false,
loaded: false,
},
{
url: "MultipartVehicle_part2.czml",
range: [1500, 3000],
requested: false,
loaded: false,
},
{
url: "MultipartVehicle_part3.czml",
range: [3000, 4500],
requested: false,
loaded: false,
},
];
function updateStatusDisplay() {
var msg = "";
partsToLoad.forEach(function (part) {
msg += part.url + " - ";
if (part.loaded) {
msg += "Loaded.<br/>";
} else if (part.requested) {
msg += "Loading now...<br/>";
} else {
msg += "Not needed yet.<br/>";
}
});
statusDisplay.innerHTML = msg;
}
// Helper function to mark a part as requested, and process it into the dataSource.
function processPart(part) {
part.requested = true;
updateStatusDisplay();
dataSource.process(czmlPath + part.url).then(function () {
part.loaded = true;
updateStatusDisplay();
// Follow the vehicle with the camera.
if (!viewer.trackedEntity) {
viewer.trackedEntity = vehicleEntity = dataSource.entities.getById(
"Vehicle"
);
}
});
}
// Load the first part up front.
processPart(partsToLoad[0]);
// Load a new section before the clock naturally gets there.
// Note this can't predict when a user may fast-forward to it.
var preloadTimeInSeconds = 100;
viewer.clock.onTick.addEventListener(function (clock) {
// This example uses time offsets from the start to identify which parts need loading.
var timeOffset = Cesium.JulianDate.secondsDifference(
clock.currentTime,
clock.startTime
);
// Filter the list of parts to just the ones that need loading right now.
// Then, process each part that needs loading.
partsToLoad
.filter(function (part) {
return (
!part.requested &&
timeOffset >= part.range[0] - preloadTimeInSeconds &&
timeOffset <= part.range[1]
);
})
.forEach(function (part) {
processPart(part);
});
if (vehicleEntity) {
var fuel = vehicleEntity.properties.fuel_remaining.getValue(
clock.currentTime
);
if (Cesium.defined(fuel)) {
fuelDisplay.textContent = "Fuel: " + fuel.toFixed(2) + " gal";
}
}
});
// Add a reset button, for convenience.
Sandcastle.addToolbarButton("Reset demo", function () {
// Put things back to the starting position.
viewer.clock.currentTime = viewer.clock.startTime;
viewer.clock.shouldAnimate = true;
partsToLoad.forEach(function (part) {
part.requested = false;
part.loaded = false;
});
dataSource.entities.removeAll();
processPart(partsToLoad[0]);
});
// Show the status display below the reset button.
statusDisplay.style.background = "rgba(42, 42, 42, 0.7)";
statusDisplay.style.padding = "5px 10px";
document.getElementById("toolbar").appendChild(statusDisplay);
// Show a multi-part custom property being read from CZML.
fuelDisplay.style.background = "rgba(42, 42, 42, 0.7)";
fuelDisplay.style.padding = "5px 10px";
fuelDisplay.style.marginTop = "5px";
document.getElementById("toolbar").appendChild(fuelDisplay);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Multiple Synced Views.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="Multiple views synced across time and space."
/>
<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);
#cesiumContainer {
display: flex;
width: 100%;
height: 100%;
}
#view3D {
display: inline-block;
width: 100%;
}
#view2D {
display: inline-block;
width: 100%;
}
</style>
<div id="cesiumContainer" class="fullSize">
<div id="view3D"></div>
<div id="view2D"></div>
</div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// We want our two views to be synced across time, so we create
// a shared clock object that both views share
var clockViewModel = new Cesium.ClockViewModel();
var options3D = {
fullscreenButton: false,
sceneModePicker: false,
clockViewModel: clockViewModel,
};
var options2D = {
homeButton: false,
fullscreenButton: false,
sceneModePicker: false,
clockViewModel: clockViewModel,
infoBox: false,
geocoder: false,
sceneMode: Cesium.SceneMode.SCENE2D,
navigationHelpButton: false,
animation: false,
};
// We create two viewers, a 2D and a 3D one
// The CSS is set up to place them side by side
var view3D = new Cesium.Viewer("view3D", options3D);
var view2D = new Cesium.Viewer("view2D", options2D);
var worldPosition;
var distance;
function sync2DView() {
// The center of the view is the point that the 3D camera is focusing on
var viewCenter = new Cesium.Cartesian2(
Math.floor(view3D.canvas.clientWidth / 2),
Math.floor(view3D.canvas.clientHeight / 2)
);
// Given the pixel in the center, get the world position
var newWorldPosition = view3D.scene.camera.pickEllipsoid(viewCenter);
if (Cesium.defined(newWorldPosition)) {
// Guard against the case where the center of the screen
// does not fall on a position on the globe
worldPosition = newWorldPosition;
}
// Get the distance between the world position of the point the camera is focusing on, and the camera's world position
distance = Cesium.Cartesian3.distance(
worldPosition,
view3D.scene.camera.positionWC
);
// Tell the 2D camera to look at the point of focus. The distance controls how zoomed in the 2D view is
// (try replacing `distance` in the line below with `1e7`. The view will still sync, but will have a constant zoom)
view2D.scene.camera.lookAt(
worldPosition,
new Cesium.Cartesian3(0.0, 0.0, distance)
);
}
// Apply our sync function every time the 3D camera view changes
view3D.camera.changed.addEventListener(sync2DView);
// By default, the `camera.changed` event will trigger when the camera has changed by 50%
// To make it more sensitive, we can bring down this sensitivity
view3D.camera.percentageChanged = 0.01;
// Since the 2D view follows the 3D view, we disable any
// camera movement on the 2D view
view2D.scene.screenSpaceCameraController.enableRotate = false;
view2D.scene.screenSpaceCameraController.enableTranslate = false;
view2D.scene.screenSpaceCameraController.enableZoom = false;
view2D.scene.screenSpaceCameraController.enableTilt = false;
view2D.scene.screenSpaceCameraController.enableLook = false;
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Natural Earth II.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="Natural Earth II with Shaded Relief, Water, and Drainages 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
// Natural Earth II with Shaded Relief, Water, and Drainages from http://www.naturalearthdata.com
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3813 }),
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Offline.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="Demo the minimum set of options needed to remove all external dependencies, for offline operation."
/>
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// This is an example of using Cesium "Offline", meaning disconnected from the
// external Internet. It must still be served from a local web server, but
// does not rely on any outside resources or services. For more info, see:
// https://github.com/CesiumGS/cesium/wiki/Offline-Guide
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.TileMapServiceImageryProvider({
url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
}),
baseLayerPicker: false,
geocoder: false,
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/PAMAP 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 terrain of Pennsylvania curated by PASDA and hosted on 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
// High resolution terrain of Pennsylvania curated by Pennsylvania Spatial Data Access (PASDA)
// http://www.pasda.psu.edu/
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(3957),
}),
});
// Add PA locations
Sandcastle.addDefaultToolbarMenu(
[
{
text: "Pinnacle",
onselect: function () {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromRadians(
-1.3324415110874286,
0.6954224325279967,
236.6770689945084
),
orientation: {
heading: Cesium.Math.toRadians(310),
pitch: Cesium.Math.toRadians(-15),
roll: 0.0,
},
});
},
},
{
text: "Mount Nittany",
onselect: function () {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromRadians(
-1.358985133937573,
0.7123252393978314,
451.05748252867375
),
orientation: {
heading: Cesium.Math.toRadians(85),
pitch: Cesium.Math.toRadians(0),
roll: 0.0,
},
});
},
},
{
text: "Horseshoe Curve",
onselect: function () {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromRadians(
-1.3700147546199826,
0.706808606166025,
993.7916313325215
),
orientation: {
heading: Cesium.Math.toRadians(90),
pitch: Cesium.Math.toRadians(-15),
roll: 0.0,
},
});
},
},
{
text: "Jim Thorpe",
onselect: function () {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromRadians(
-1.3218297501066052,
0.713358272291525,
240.87968743408845
),
orientation: {
heading: Cesium.Math.toRadians(200),
pitch: Cesium.Math.toRadians(-5),
roll: 0.0,
},
});
},
},
{
text: "Grand Canyon of PA",
onselect: function () {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromRadians(
-1.349379633251472,
0.720297672225785,
656.268309953562
),
orientation: {
heading: Cesium.Math.toRadians(200),
pitch: Cesium.Math.toRadians(-5),
roll: 0.0,
},
});
},
},
],
"toolbar"
);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Parallels and Meridians.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 polylines to draw parallels and meridians on 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 toDegrees = Cesium.Math.toDegrees;
function parallel(latitude, color, granularity) {
var name = "Parallel " + latitude;
return viewer.entities.add({
name: name,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
-180,
latitude,
-90,
latitude,
0,
latitude,
90,
latitude,
180,
latitude,
]),
width: 2,
arcType: Cesium.ArcType.RHUMB,
material: color,
granularity: granularity,
},
});
}
function meridian(longitude, color, granularity) {
var name = "Meridian " + longitude;
return viewer.entities.add({
name: name,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
longitude,
90,
longitude,
0,
longitude,
-90,
]),
width: 2,
arcType: Cesium.ArcType.RHUMB,
material: color,
granularity: granularity,
},
});
}
function labelCoordinates(cartographic) {
var position = Cesium.Cartographic.toCartesian(cartographic);
var latitude = toDegrees(cartographic.latitude).toFixed(4);
var longitude = toDegrees(cartographic.longitude).toFixed(4);
var label = "lat: " + latitude + "°\nlon: " + longitude + "°";
return viewer.entities.add({
position: position,
label: {
text: label,
showBackground: true,
font: "14px monospace",
},
});
}
function makeGrid(numberOfDivisions, color, show) {
var parallels = makeParallelsRecursive(
-90,
90,
numberOfDivisions,
color
);
var meridians = makeMeridiansRecursive(
-180,
180,
numberOfDivisions,
color
);
meridians.push(meridian(180, color));
var allLines = parallels.concat(meridians);
allLines.forEach(function (line) {
line.show = show;
});
return allLines;
}
function makeParallelsRecursive(
minLatitude,
maxLatitude,
depth,
color
) {
var result = [];
var midpoint = (minLatitude + maxLatitude) / 2;
result.push(parallel(midpoint, color));
if (depth > 0) {
var southernLines = makeParallelsRecursive(
minLatitude,
midpoint,
depth - 1,
color
);
var northernLines = makeParallelsRecursive(
midpoint,
maxLatitude,
depth - 1,
color
);
result = southernLines.concat(result, northernLines);
}
return result;
}
function makeMeridiansRecursive(
minLongitude,
maxLongitude,
depth,
color
) {
var result = [];
var midpoint = (minLongitude + maxLongitude) / 2;
result.push(meridian(midpoint, color));
if (depth > 0) {
var westernLines = makeMeridiansRecursive(
minLongitude,
midpoint,
depth - 1,
color
);
var easternLines = makeMeridiansRecursive(
midpoint,
maxLongitude,
depth - 1,
color
);
result = westernLines.concat(result, easternLines);
}
return result;
}
var showAntipodalPoint = false;
var primitives = {
equator: parallel(0, Cesium.Color.BLUE),
primeMeridian: meridian(0, Cesium.Color.BLUE),
selectedPoint: {
meridian: undefined,
parallel: undefined,
label: undefined,
},
antipodalPoint: {
meridian: undefined,
parallel: undefined,
label: undefined,
},
lowResolutionGrid: makeGrid(2, Cesium.Color.PALEGREEN, false),
higherResolutionGrid: makeGrid(5, Cesium.Color.DARKORANGE, false),
};
function updateCrosshairs(cartographic) {
var selectedPoint = primitives.selectedPoint;
var antipodalPoint = primitives.antipodalPoint;
if (Cesium.defined(selectedPoint.parallel)) {
viewer.entities.remove(selectedPoint.parallel);
viewer.entities.remove(selectedPoint.meridian);
viewer.entities.remove(selectedPoint.label);
viewer.entities.remove(antipodalPoint.parallel);
viewer.entities.remove(antipodalPoint.meridian);
viewer.entities.remove(antipodalPoint.label);
}
var pointLatitude = toDegrees(cartographic.latitude);
var antipodeLatitude = -pointLatitude;
var pointLongitude = toDegrees(cartographic.longitude);
var antipodeLongitude = (pointLongitude + 180) % 360;
// Increase the granularity to improve accuracy when zoomed in
var finerGranularity = 0.001;
var red = Cesium.Color.RED;
selectedPoint.parallel = parallel(
toDegrees(cartographic.latitude),
red,
finerGranularity
);
selectedPoint.meridian = meridian(
toDegrees(cartographic.longitude),
red,
finerGranularity
);
selectedPoint.label = labelCoordinates(cartographic);
var cyan = Cesium.Color.CYAN;
var antipode = new Cesium.Cartographic.fromDegrees(
antipodeLongitude,
antipodeLatitude,
0
);
antipodalPoint.parallel = parallel(
antipodeLatitude,
cyan,
finerGranularity
);
antipodalPoint.meridian = meridian(
antipodeLongitude,
cyan,
finerGranularity
);
antipodalPoint.label = labelCoordinates(antipode);
antipodalPoint.parallel.show = showAntipodalPoint;
antipodalPoint.meridian.show = showAntipodalPoint;
antipodalPoint.label.show = showAntipodalPoint;
}
// Click to shift the cross-hairs
viewer.screenSpaceEventHandler.setInputAction(function (mouse) {
viewer.scene.pick(mouse.position);
var ray = viewer.camera.getPickRay(mouse.position);
var globe = viewer.scene.globe;
var cartesian = globe.pick(ray, viewer.scene);
if (!Cesium.defined(cartesian)) {
return;
}
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
updateCrosshairs(cartographic);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Sandcastle.addToggleButton("Show equator", true, function (checked) {
primitives.equator.show = checked;
});
Sandcastle.addToggleButton("Show prime meridian", true, function (
checked
) {
primitives.primeMeridian.show = checked;
});
Sandcastle.addToggleButton("Show low-resolution grid", false, function (
checked
) {
primitives.lowResolutionGrid.forEach(function (line) {
line.show = checked;
});
});
Sandcastle.addToggleButton(
"Show higher-resolution grid",
false,
function (checked) {
primitives.higherResolutionGrid.forEach(function (line) {
line.show = checked;
});
}
);
Sandcastle.addToggleButton("Show antipodal point", false, function (
checked
) {
showAntipodalPoint = checked;
var antipodalPoint = primitives.antipodalPoint;
if (Cesium.defined(antipodalPoint.parallel)) {
antipodalPoint.parallel.show = showAntipodalPoint;
antipodalPoint.meridian.show = showAntipodalPoint;
antipodalPoint.label.show = showAntipodalPoint;
}
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Partial 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 whole/partial 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 saturnPosition = Cesium.Cartesian3.fromDegrees(
-95.0,
45.0,
300000.0
);
viewer.entities.add({
name: "Saturn",
position: saturnPosition,
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
material: new Cesium.Color(0.95, 0.82, 0.49),
},
});
viewer.entities.add({
name: "Saturn's inner ring",
position: saturnPosition,
orientation: Cesium.Transforms.headingPitchRollQuaternion(
saturnPosition,
new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(30.0),
Cesium.Math.toRadians(30.0),
0.0
)
),
ellipsoid: {
radii: new Cesium.Cartesian3(400000.0, 400000.0, 400000.0),
innerRadii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
minimumCone: Cesium.Math.toRadians(89.8),
maximumCone: Cesium.Math.toRadians(90.2),
material: new Cesium.Color(0.95, 0.82, 0.49, 0.5),
},
});
viewer.entities.add({
name: "Saturn's outer ring",
position: saturnPosition,
orientation: Cesium.Transforms.headingPitchRollQuaternion(
saturnPosition,
new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(30.0),
Cesium.Math.toRadians(30.0),
0.0
)
),
ellipsoid: {
radii: new Cesium.Cartesian3(460000.0, 460000.0, 460000.0),
innerRadii: new Cesium.Cartesian3(415000.0, 415000.0, 415000.0),
minimumCone: Cesium.Math.toRadians(89.8),
maximumCone: Cesium.Math.toRadians(90.2),
material: new Cesium.Color(0.95, 0.82, 0.49, 0.5),
},
});
viewer.entities.add({
name: "Dome",
position: Cesium.Cartesian3.fromDegrees(-120.0, 40.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
maximumCone: Cesium.Math.PI_OVER_TWO,
material: Cesium.Color.BLUE.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Dome with inner radius",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0),
ellipsoid: {
radii: new Cesium.Cartesian3(250000.0, 200000.0, 150000.0),
innerRadii: new Cesium.Cartesian3(100000.0, 80000.0, 60000.0),
maximumCone: Cesium.Math.PI_OVER_TWO,
material: Cesium.Color.RED.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Dome with top cut out",
position: Cesium.Cartesian3.fromDegrees(-108.0, 40.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new Cesium.Cartesian3(100000.0, 100000.0, 100000.0),
minimumCone: Cesium.Math.toRadians(20.0),
maximumCone: Cesium.Math.PI_OVER_TWO,
material: Cesium.Color.YELLOW.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Top and bottom cut out",
position: Cesium.Cartesian3.fromDegrees(-102.0, 40.0, 140000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new Cesium.Cartesian3(100000.0, 100000.0, 100000.0),
minimumCone: Cesium.Math.toRadians(60.0),
maximumCone: Cesium.Math.toRadians(140.0),
material: Cesium.Color.DARKCYAN.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Bowl",
position: Cesium.Cartesian3.fromDegrees(-96.0, 39.5, 200000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new Cesium.Cartesian3(180000.0, 180000.0, 180000.0),
minimumCone: Cesium.Math.toRadians(110.0),
material: Cesium.Color.GREEN.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Clock cutout",
position: Cesium.Cartesian3.fromDegrees(-90.0, 39.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new Cesium.Cartesian3(150000.0, 150000.0, 150000.0),
minimumClock: Cesium.Math.toRadians(-90.0),
maximumClock: Cesium.Math.toRadians(180.0),
minimumCone: Cesium.Math.toRadians(20.0),
maximumCone: Cesium.Math.toRadians(70.0),
material: Cesium.Color.BLUE.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Partial dome",
position: Cesium.Cartesian3.fromDegrees(-84.0, 38.5),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
minimumClock: Cesium.Math.toRadians(-90.0),
maximumClock: Cesium.Math.toRadians(180.0),
maximumCone: Cesium.Math.toRadians(90.0),
material: Cesium.Color.RED.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Wedge",
position: Cesium.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
orientation: Cesium.Transforms.headingPitchRollQuaternion(
Cesium.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
new Cesium.HeadingPitchRoll(Cesium.Math.PI / 1.5, 0, 0.0)
),
ellipsoid: {
radii: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0),
innerRadii: new Cesium.Cartesian3(10000.0, 10000.0, 10000.0),
minimumClock: Cesium.Math.toRadians(-15.0),
maximumClock: Cesium.Math.toRadians(15.0),
minimumCone: Cesium.Math.toRadians(75.0),
maximumCone: Cesium.Math.toRadians(105.0),
material: Cesium.Color.DARKCYAN.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Partial ellipsoid",
position: Cesium.Cartesian3.fromDegrees(-95.0, 34.0),
ellipsoid: {
radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
innerRadii: new Cesium.Cartesian3(70000.0, 70000.0, 70000.0),
minimumClock: Cesium.Math.toRadians(180.0),
maximumClock: Cesium.Math.toRadians(400.0),
maximumCone: Cesium.Math.toRadians(90.0),
material: Cesium.Color.DARKCYAN.withAlpha(0.3),
outline: true,
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Particle System Fireworks.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="Particle system fireworks." />
<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", {
shouldAnimate: true,
});
var scene = viewer.scene;
scene.debugShowFramesPerSecond = true;
Cesium.Math.setRandomNumberSeed(315);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)
);
var emitterInitialLocation = new Cesium.Cartesian3(0.0, 0.0, 100.0);
var particleCanvas;
function getImage() {
if (!Cesium.defined(particleCanvas)) {
particleCanvas = document.createElement("canvas");
particleCanvas.width = 20;
particleCanvas.height = 20;
var context2D = particleCanvas.getContext("2d");
context2D.beginPath();
context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
context2D.closePath();
context2D.fillStyle = "rgb(255, 255, 255)";
context2D.fill();
}
return particleCanvas;
}
var minimumExplosionSize = 30.0;
var maximumExplosionSize = 100.0;
var particlePixelSize = new Cesium.Cartesian2(7.0, 7.0);
var burstSize = 400.0;
var lifetime = 10.0;
var numberOfFireworks = 20.0;
var emitterModelMatrixScratch = new Cesium.Matrix4();
function createFirework(offset, color, bursts) {
var position = Cesium.Cartesian3.add(
emitterInitialLocation,
offset,
new Cesium.Cartesian3()
);
var emitterModelMatrix = Cesium.Matrix4.fromTranslation(
position,
emitterModelMatrixScratch
);
var particleToWorld = Cesium.Matrix4.multiply(
modelMatrix,
emitterModelMatrix,
new Cesium.Matrix4()
);
var worldToParticle = Cesium.Matrix4.inverseTransformation(
particleToWorld,
particleToWorld
);
var size = Cesium.Math.randomBetween(
minimumExplosionSize,
maximumExplosionSize
);
var particlePositionScratch = new Cesium.Cartesian3();
var force = function (particle) {
var position = Cesium.Matrix4.multiplyByPoint(
worldToParticle,
particle.position,
particlePositionScratch
);
if (Cesium.Cartesian3.magnitudeSquared(position) >= size * size) {
Cesium.Cartesian3.clone(
Cesium.Cartesian3.ZERO,
particle.velocity
);
}
};
var normalSize =
(size - minimumExplosionSize) /
(maximumExplosionSize - minimumExplosionSize);
var minLife = 0.3;
var maxLife = 1.0;
var life = normalSize * (maxLife - minLife) + minLife;
scene.primitives.add(
new Cesium.ParticleSystem({
image: getImage(),
startColor: color,
endColor: color.withAlpha(0.0),
particleLife: life,
speed: 100.0,
imageSize: particlePixelSize,
emissionRate: 0,
emitter: new Cesium.SphereEmitter(0.1),
bursts: bursts,
lifetime: lifetime,
updateCallback: force,
modelMatrix: modelMatrix,
emitterModelMatrix: emitterModelMatrix,
})
);
}
var xMin = -100.0;
var xMax = 100.0;
var yMin = -80.0;
var yMax = 100.0;
var zMin = -50.0;
var zMax = 50.0;
var colorOptions = [
{
minimumRed: 0.75,
green: 0.0,
minimumBlue: 0.8,
alpha: 1.0,
},
{
red: 0.0,
minimumGreen: 0.75,
minimumBlue: 0.8,
alpha: 1.0,
},
{
red: 0.0,
green: 0.0,
minimumBlue: 0.8,
alpha: 1.0,
},
{
minimumRed: 0.75,
minimumGreen: 0.75,
blue: 0.0,
alpha: 1.0,
},
];
for (var i = 0; i < numberOfFireworks; ++i) {
var x = Cesium.Math.randomBetween(xMin, xMax);
var y = Cesium.Math.randomBetween(yMin, yMax);
var z = Cesium.Math.randomBetween(zMin, zMax);
var offset = new Cesium.Cartesian3(x, y, z);
var color = Cesium.Color.fromRandom(
colorOptions[i % colorOptions.length]
);
var bursts = [];
for (var j = 0; j < 3; ++j) {
bursts.push(
new Cesium.ParticleBurst({
time: Cesium.Math.nextRandomNumber() * lifetime,
minimum: burstSize,
maximum: burstSize,
})
);
}
createFirework(offset, color, bursts);
}
var camera = viewer.scene.camera;
var cameraOffset = new Cesium.Cartesian3(-300.0, 0.0, 0.0);
camera.lookAtTransform(modelMatrix, cameraOffset);
camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
var toFireworks = Cesium.Cartesian3.subtract(
emitterInitialLocation,
cameraOffset,
new Cesium.Cartesian3()
);
Cesium.Cartesian3.normalize(toFireworks, toFireworks);
var angle =
Cesium.Math.PI_OVER_TWO -
Math.acos(
Cesium.Cartesian3.dot(toFireworks, Cesium.Cartesian3.UNIT_Z)
);
camera.lookUp(angle);
//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