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/Corridor.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="Draw a corridor." />
<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 redCorridor = viewer.entities.add({
name: "Red corridor on surface with rounded corners",
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-100.0,
40.0,
-105.0,
40.0,
-105.0,
35.0,
]),
width: 200000.0,
material: Cesium.Color.RED.withAlpha(0.5),
},
});
var greenCorridor = viewer.entities.add({
name: "Green corridor at height with mitered corners and outline",
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-90.0,
40.0,
-95.0,
40.0,
-95.0,
35.0,
]),
height: 100000.0,
width: 200000.0,
cornerType: Cesium.CornerType.MITERED,
material: Cesium.Color.GREEN,
outline: true, // height required for outlines to display
},
});
var blueCorridor = viewer.entities.add({
name: "Blue extruded corridor with beveled corners and outline",
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-80.0,
40.0,
-85.0,
40.0,
-85.0,
35.0,
]),
height: 200000.0,
extrudedHeight: 100000.0,
width: 200000.0,
cornerType: Cesium.CornerType.BEVELED,
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true, // height or extrudedHeight must be set for outlines to display
outlineColor: Cesium.Color.WHITE,
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Custom DataSource.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 custom DataSource implementation." />
<meta
name="cesium-sandcastle-labels"
content="Showcases, DataSources, Tutorials"
/>
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</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 class is an example of a custom DataSource. It loads JSON data as
* defined by Google's WebGL Globe, https://github.com/dataarts/webgl-globe.
* @alias WebGLGlobeDataSource
* @constructor
*
* @param {String} [name] The name of this data source. If undefined, a name
* will be derived from the url.
*
* @example
* var dataSource = new Cesium.WebGLGlobeDataSource();
* dataSource.loadUrl('sample.json');
* viewer.dataSources.add(dataSource);
*/
function WebGLGlobeDataSource(name) {
//All public configuration is defined as ES5 properties
//These are just the "private" variables and their defaults.
this._name = name;
this._changed = new Cesium.Event();
this._error = new Cesium.Event();
this._isLoading = false;
this._loading = new Cesium.Event();
this._entityCollection = new Cesium.EntityCollection();
this._seriesNames = [];
this._seriesToDisplay = undefined;
this._heightScale = 10000000;
this._entityCluster = new Cesium.EntityCluster();
}
Object.defineProperties(WebGLGlobeDataSource.prototype, {
//The below properties must be implemented by all DataSource instances
/**
* Gets a human-readable name for this instance.
* @memberof WebGLGlobeDataSource.prototype
* @type {String}
*/
name: {
get: function () {
return this._name;
},
},
/**
* Since WebGL Globe JSON is not time-dynamic, this property is always undefined.
* @memberof WebGLGlobeDataSource.prototype
* @type {DataSourceClock}
*/
clock: {
value: undefined,
writable: false,
},
/**
* Gets the collection of Entity instances.
* @memberof WebGLGlobeDataSource.prototype
* @type {EntityCollection}
*/
entities: {
get: function () {
return this._entityCollection;
},
},
/**
* Gets a value indicating if the data source is currently loading data.
* @memberof WebGLGlobeDataSource.prototype
* @type {Boolean}
*/
isLoading: {
get: function () {
return this._isLoading;
},
},
/**
* Gets an event that will be raised when the underlying data changes.
* @memberof WebGLGlobeDataSource.prototype
* @type {Event}
*/
changedEvent: {
get: function () {
return this._changed;
},
},
/**
* Gets an event that will be raised if an error is encountered during
* processing.
* @memberof WebGLGlobeDataSource.prototype
* @type {Event}
*/
errorEvent: {
get: function () {
return this._error;
},
},
/**
* Gets an event that will be raised when the data source either starts or
* stops loading.
* @memberof WebGLGlobeDataSource.prototype
* @type {Event}
*/
loadingEvent: {
get: function () {
return this._loading;
},
},
//These properties are specific to this DataSource.
/**
* Gets the array of series names.
* @memberof WebGLGlobeDataSource.prototype
* @type {String[]}
*/
seriesNames: {
get: function () {
return this._seriesNames;
},
},
/**
* Gets or sets the name of the series to display. WebGL JSON is designed
* so that only one series is viewed at a time. Valid values are defined
* in the seriesNames property.
* @memberof WebGLGlobeDataSource.prototype
* @type {String}
*/
seriesToDisplay: {
get: function () {
return this._seriesToDisplay;
},
set: function (value) {
this._seriesToDisplay = value;
//Iterate over all entities and set their show property
//to true only if they are part of the current series.
var collection = this._entityCollection;
var entities = collection.values;
collection.suspendEvents();
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
entity.show = value === entity.seriesName;
}
collection.resumeEvents();
},
},
/**
* Gets or sets the scale factor applied to the height of each line.
* @memberof WebGLGlobeDataSource.prototype
* @type {Number}
*/
heightScale: {
get: function () {
return this._heightScale;
},
set: function (value) {
if (value > 0) {
throw new Cesium.DeveloperError("value must be greater than 0");
}
this._heightScale = value;
},
},
/**
* Gets whether or not this data source should be displayed.
* @memberof WebGLGlobeDataSource.prototype
* @type {Boolean}
*/
show: {
get: function () {
return this._entityCollection;
},
set: function (value) {
this._entityCollection = value;
},
},
/**
* Gets or sets the clustering options for this data source. This object can be shared between multiple data sources.
* @memberof WebGLGlobeDataSource.prototype
* @type {EntityCluster}
*/
clustering: {
get: function () {
return this._entityCluster;
},
set: function (value) {
if (!Cesium.defined(value)) {
throw new Cesium.DeveloperError("value must be defined.");
}
this._entityCluster = value;
},
},
});
/**
* Asynchronously loads the GeoJSON at the provided url, replacing any existing data.
* @param {Object} url The url to be processed.
* @returns {Promise} a promise that will resolve when the GeoJSON is loaded.
*/
WebGLGlobeDataSource.prototype.loadUrl = function (url) {
if (!Cesium.defined(url)) {
throw new Cesium.DeveloperError("url is required.");
}
//Create a name based on the url
var name = Cesium.getFilenameFromUri(url);
//Set the name if it is different than the current name.
if (this._name !== name) {
this._name = name;
this._changed.raiseEvent(this);
}
//Use 'when' to load the URL into a json object
//and then process is with the `load` function.
var that = this;
return Cesium.Resource.fetchJson(url)
.then(function (json) {
return that.load(json, url);
})
.otherwise(function (error) {
//Otherwise will catch any errors or exceptions that occur
//during the promise processing. When this happens,
//we raise the error event and reject the promise.
this._setLoading(false);
that._error.raiseEvent(that, error);
return Cesium.when.reject(error);
});
};
/**
* Loads the provided data, replacing any existing data.
* @param {Array} data The object to be processed.
*/
WebGLGlobeDataSource.prototype.load = function (data) {
//>>includeStart('debug', pragmas.debug);
if (!Cesium.defined(data)) {
throw new Cesium.DeveloperError("data is required.");
}
//>>includeEnd('debug');
//Clear out any data that might already exist.
this._setLoading(true);
this._seriesNames.length = 0;
this._seriesToDisplay = undefined;
var heightScale = this.heightScale;
var entities = this._entityCollection;
//It's a good idea to suspend events when making changes to a
//large amount of entities. This will cause events to be batched up
//into the minimal amount of function calls and all take place at the
//end of processing (when resumeEvents is called).
entities.suspendEvents();
entities.removeAll();
//WebGL Globe JSON is an array of series, where each series itself is an
//array of two items, the first containing the series name and the second
//being an array of repeating latitude, longitude, height values.
//
//Here's a more visual example.
//[["series1",[latitude, longitude, height, ... ]
// ["series2",[latitude, longitude, height, ... ]]
// Loop over each series
for (var x = 0; x < data.length; x++) {
var series = data[x];
var seriesName = series[0];
var coordinates = series[1];
//Add the name of the series to our list of possible values.
this._seriesNames.push(seriesName);
//Make the first series the visible one by default
var show = x === 0;
if (show) {
this._seriesToDisplay = seriesName;
}
//Now loop over each coordinate in the series and create
// our entities from the data.
for (var i = 0; i < coordinates.length; i += 3) {
var latitude = coordinates[i];
var longitude = coordinates[i + 1];
var height = coordinates[i + 2];
//Ignore lines of zero height.
if (height === 0) {
continue;
}
var color = Cesium.Color.fromHsl(0.6 - height * 0.5, 1.0, 0.5);
var surfacePosition = Cesium.Cartesian3.fromDegrees(
longitude,
latitude,
0
);
var heightPosition = Cesium.Cartesian3.fromDegrees(
longitude,
latitude,
height * heightScale
);
//WebGL Globe only contains lines, so that's the only graphics we create.
var polyline = new Cesium.PolylineGraphics();
polyline.material = new Cesium.ColorMaterialProperty(color);
polyline.width = new Cesium.ConstantProperty(2);
polyline.arcType = new Cesium.ConstantProperty(
Cesium.ArcType.NONE
);
polyline.positions = new Cesium.ConstantProperty([
surfacePosition,
heightPosition,
]);
//The polyline instance itself needs to be on an entity.
var entity = new Cesium.Entity({
id: seriesName + " index " + i.toString(),
show: show,
polyline: polyline,
seriesName: seriesName, //Custom property to indicate series name
});
//Add the entity to the collection.
entities.add(entity);
}
}
//Once all data is processed, call resumeEvents and raise the changed event.
entities.resumeEvents();
this._changed.raiseEvent(this);
this._setLoading(false);
};
WebGLGlobeDataSource.prototype._setLoading = function (isLoading) {
if (this._isLoading !== isLoading) {
this._isLoading = isLoading;
this._loading.raiseEvent(this, isLoading);
}
};
//Now that we've defined our own DataSource, we can use it to load
//any JSON data formatted for WebGL Globe.
var dataSource = new WebGLGlobeDataSource();
dataSource
.loadUrl("../../SampleData/population909500.json")
.then(function () {
//After the initial load, create buttons to let the user switch among series.
function createSeriesSetter(seriesName) {
return function () {
dataSource.seriesToDisplay = seriesName;
};
}
for (var i = 0; i < dataSource.seriesNames.length; i++) {
var seriesName = dataSource.seriesNames[i];
Sandcastle.addToolbarButton(
seriesName,
createSeriesSetter(seriesName)
);
}
});
//Create a Viewer instances and add the DataSource.
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false,
timeline: false,
});
viewer.clock.shouldAnimate = false;
viewer.dataSources.add(dataSource);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Custom Geocoder.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="Attach a custom data source to the geocoder widget."
/>
<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"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
/**
* This class is an example of a custom geocoder. It provides geocoding through the OpenStreetMap Nominatim service.
* @alias OpenStreetMapNominatimGeocoder
* @constructor
*/
function OpenStreetMapNominatimGeocoder() {}
/**
* The function called to geocode using this geocoder service.
*
* @param {String} input The query to be sent to the geocoder service
* @returns {Promise<GeocoderService~Result[]>}
*/
OpenStreetMapNominatimGeocoder.prototype.geocode = function (input) {
var endpoint = "https://nominatim.openstreetmap.org/search";
var resource = new Cesium.Resource({
url: endpoint,
queryParameters: {
format: "json",
q: input,
},
});
return resource.fetchJson().then(function (results) {
var bboxDegrees;
return results.map(function (resultObject) {
bboxDegrees = resultObject.boundingbox;
return {
displayName: resultObject.display_name,
destination: Cesium.Rectangle.fromDegrees(
bboxDegrees[2],
bboxDegrees[0],
bboxDegrees[3],
bboxDegrees[1]
),
};
});
});
};
var viewer = new Cesium.Viewer("cesiumContainer", {
geocoder: new OpenStreetMapNominatimGeocoder(),
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Custom Per-Feature Post Process.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="Custom per-feature post processing effect."
/>
<meta
name="cesium-sandcastle-labels"
content="Showcases, Post Processing"
/>
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></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;
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var url = "../../SampleData/models/CesiumMan/Cesium_Man.glb";
var entity = (viewer.trackedEntity = viewer.entities.add({
name: url,
position: position,
model: {
uri: url,
},
}));
// Shade selected model with highlight.
var fragmentShaderSource =
"uniform sampler2D colorTexture;\n" +
"varying vec2 v_textureCoordinates;\n" +
"uniform vec4 highlight;\n" +
"void main() {\n" +
" vec4 color = texture2D(colorTexture, v_textureCoordinates);\n" +
" if (czm_selected()) {\n" +
" vec3 highlighted = highlight.a * highlight.rgb + (1.0 - highlight.a) * color.rgb;\n" +
" gl_FragColor = vec4(highlighted, 1.0);\n" +
" } else { \n" +
" gl_FragColor = color;\n" +
" }\n" +
"}\n";
var stage = scene.postProcessStages.add(
new Cesium.PostProcessStage({
fragmentShader: fragmentShaderSource,
uniforms: {
highlight: function () {
return new Cesium.Color(1.0, 0.0, 0.0, 0.5);
},
},
})
);
stage.selected = [];
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
var pickedObject = viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject)) {
stage.selected = [pickedObject.primitive];
} else {
stage.selected = [];
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Custom Post Process.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="Custom post processing effect." />
<meta
name="cesium-sandcastle-labels"
content="Showcases, Post Processing"
/>
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var url = "../../SampleData/models/CesiumMan/Cesium_Man.glb";
viewer.trackedEntity = viewer.entities.add({
name: url,
position: position,
model: {
uri: url,
},
});
var fragmentShaderSource =
"uniform sampler2D colorTexture; \n" +
"varying vec2 v_textureCoordinates; \n" +
"const int KERNEL_WIDTH = 16; \n" +
"void main(void) \n" +
"{ \n" +
" vec2 step = czm_pixelRatio / czm_viewport.zw; \n" +
" vec2 integralPos = v_textureCoordinates - mod(v_textureCoordinates, 8.0 * step); \n" +
" vec3 averageValue = vec3(0.0); \n" +
" for (int i = 0; i < KERNEL_WIDTH; i++) \n" +
" { \n" +
" for (int j = 0; j < KERNEL_WIDTH; j++) \n" +
" { \n" +
" averageValue += texture2D(colorTexture, integralPos + step * vec2(i, j)).rgb; \n" +
" } \n" +
" } \n" +
" averageValue /= float(KERNEL_WIDTH * KERNEL_WIDTH); \n" +
" gl_FragColor = vec4(averageValue, 1.0); \n" +
"} \n";
viewer.scene.postProcessStages.add(
new Cesium.PostProcessStage({
fragmentShader: fragmentShaderSource,
})
);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Cylinders and Cones.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="Draw a cylinder or cone." />
<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 greenCylinder = viewer.entities.add({
name: "Green cylinder with black outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
cylinder: {
length: 400000.0,
topRadius: 200000.0,
bottomRadius: 200000.0,
material: Cesium.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.DARK_GREEN,
},
});
var redCone = viewer.entities.add({
name: "Red cone",
position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
cylinder: {
length: 400000.0,
topRadius: 0.0,
bottomRadius: 200000.0,
material: Cesium.Color.RED,
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/DataSource Ordering.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta
name="description"
content="Change the order in which DataSources draw ground primitives"
/>
<meta name="cesium-sandcastle-labels" content="DataSources" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var czml1 = [
{
id: "document",
name: "CZML Geometries: Rectangle",
version: "1.0",
},
{
rectangle: {
coordinates: {
wsenDegrees: [-120, 40, -110, 50],
},
fill: true,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 255],
},
},
},
},
},
{
rectangle: {
coordinates: {
wsenDegrees: [-110, 40, -100, 50],
},
fill: true,
material: {
solidColor: {
color: {
rgba: [0, 0, 255, 255],
},
},
},
},
},
];
var czml2 = [
{
id: "document",
name: "CZML Geometries: Rectangle",
version: "1.0",
},
{
rectangle: {
coordinates: {
wsenDegrees: [-120, 45, -110, 55],
},
fill: true,
material: {
solidColor: {
color: {
rgba: [255, 255, 0, 255],
},
},
},
},
},
{
rectangle: {
coordinates: {
wsenDegrees: [-110, 45, -100, 55],
},
fill: true,
material: {
solidColor: {
color: {
rgba: [0, 255, 255, 255],
},
},
},
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer");
var promise1 = Cesium.CzmlDataSource.load(czml1);
viewer.dataSources.add(promise1);
var promise2 = Cesium.CzmlDataSource.load(czml2);
viewer.dataSources.add(promise2);
Sandcastle.addToolbarButton("Swap", function () {
Cesium.when.all([promise1, promise2]).then(function (results) {
var ds1 = results[0];
var ds2 = results[1];
if (viewer.dataSources.indexOf(ds1) === 0) {
viewer.dataSources.raise(ds1);
} else {
viewer.dataSources.lower(ds1);
}
});
}); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Depth of Field.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="Depth of field." />
<meta
name="cesium-sandcastle-labels"
content="Showcases, Post Processing"
/>
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td>Depth Of Field</td>
<td><input type="checkbox" data-bind="checked: show" /></td>
</tr>
<tr>
<td>Focal Distance</td>
<td>
<input
type="range"
min="0.0"
max="500.0"
step="1"
data-bind="value: focalDistance, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Delta</td>
<td>
<input
type="range"
min="0.1"
max="2"
step="0.01"
data-bind="value: delta, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Sigma</td>
<td>
<input
type="range"
min="0.5"
max="5"
step="0.01"
data-bind="value: sigma, valueUpdate: 'input'"
/>
</td>
</tr>
<tr>
<td>Step Size</td>
<td>
<input
type="range"
min="0"
max="7"
step="0.01"
data-bind="value: stepSize, valueUpdate: 'input'"
/>
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
function createModel(url, x, y, height) {
var position = Cesium.Cartesian3.fromDegrees(x, y, height);
viewer.entities.add({
name: url,
position: position,
model: {
uri: url,
},
});
}
var numberOfBalloons = 13;
var lonIncrement = 0.00025;
var initialLon = -122.99875;
var lat = 44.0503706;
var height = 100.0;
var url = "../../SampleData/models/CesiumBalloon/CesiumBalloon.glb";
for (var i = 0; i < numberOfBalloons; ++i) {
var lon = initialLon + i * lonIncrement;
createModel(url, lon, lat, height);
}
var viewModel = {
show: true,
focalDistance: 87,
delta: 1,
sigma: 3.78,
stepSize: 2.46,
};
Cesium.knockout.track(viewModel);
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
for (var name in viewModel) {
if (viewModel.hasOwnProperty(name)) {
Cesium.knockout
.getObservable(viewModel, name)
.subscribe(updatePostProcess);
}
}
if (
!Cesium.PostProcessStageLibrary.isDepthOfFieldSupported(viewer.scene)
) {
window.alert(
"This browser does not support the depth of field post process."
);
}
var depthOfField = viewer.scene.postProcessStages.add(
Cesium.PostProcessStageLibrary.createDepthOfFieldStage()
);
function updatePostProcess() {
depthOfField.enabled = Boolean(viewModel.show);
depthOfField.uniforms.focalDistance = Number(viewModel.focalDistance);
depthOfField.uniforms.delta = Number(viewModel.delta);
depthOfField.uniforms.sigma = Number(viewModel.sigma);
depthOfField.uniforms.stepSize = Number(viewModel.stepSize);
}
updatePostProcess();
var target = Cesium.Cartesian3.fromDegrees(
initialLon + lonIncrement,
lat,
height + 7.5
);
var offset = new Cesium.Cartesian3(
-37.048378684557974,
-24.852967044804245,
4.352023653686047
);
viewer.scene.camera.lookAt(target, offset);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Distance Display Conditions.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="Distance display conditions" />
<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");
function addBillboardAndRectangle() {
Sandcastle.declare(addBillboardAndRectangle);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-77, 40.5),
billboard: {
image: "../images/facility.gif",
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
5.5e6
),
},
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-80.5,
39.7,
-75.1,
42.0
),
height: 0.0,
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0.0,
5.5e6
),
},
});
}
function addPointAndModel() {
Sandcastle.declare(addPointAndModel);
var position = Cesium.Cartesian3.fromDegrees(
-75.59777,
40.03883,
0.0
);
var heading = Cesium.Math.toRadians(135);
var hpr = new Cesium.HeadingPitchRoll(heading, 0.0, 0.0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
viewer.entities.add({
position: position,
orientation: orientation,
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
250.5
),
},
model: {
uri: "../../SampleData/models/GroundVehicle/GroundVehicle.glb",
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0.0,
250.5
),
},
});
}
Sandcastle.addToolbarMenu([
{
text: "Billboard and Primitive",
onselect: function () {
addBillboardAndRectangle();
Sandcastle.highlight(addBillboardAndRectangle);
},
},
{
text: "Point and Model",
onselect: function () {
addPointAndModel();
Sandcastle.highlight(addPointAndModel);
},
},
]);
Sandcastle.reset = function () {
viewer.camera.flyHome(0);
viewer.entities.removeAll();
};
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Drawing on 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="Draw lines and polygons on terrain with mouse clicks."
/>
<meta name="cesium-sandcastle-labels" content="Showcases" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table class="infoPanel">
<tbody>
<tr>
<td>Left click to add a vertex.</td>
</tr>
<tr>
<td>Right click to start new shape.</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
selectionIndicator: false,
infoBox: false,
terrainProvider: Cesium.createWorldTerrain(),
});
if (!viewer.scene.pickPositionSupported) {
window.alert("This browser does not support pickPosition.");
}
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
function createPoint(worldPosition) {
var point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.WHITE,
pixelSize: 5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
return point;
}
var drawingMode = "line";
function drawShape(positionData) {
var shape;
if (drawingMode === "line") {
shape = viewer.entities.add({
polyline: {
positions: positionData,
clampToGround: true,
width: 3,
},
});
} else if (drawingMode === "polygon") {
shape = viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(
Cesium.Color.WHITE.withAlpha(0.7)
),
},
});
}
return shape;
}
var activeShapePoints = [];
var activeShape;
var floatingPoint;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
// We use `viewer.scene.pickPosition` here instead of `viewer.camera.pickEllipsoid` so that
// we get the correct point when mousing over terrain.
var earthPosition = viewer.scene.pickPosition(event.position);
// `earthPosition` will be undefined if our mouse is not over the globe.
if (Cesium.defined(earthPosition)) {
if (activeShapePoints.length === 0) {
floatingPoint = createPoint(earthPosition);
activeShapePoints.push(earthPosition);
var dynamicPositions = new Cesium.CallbackProperty(function () {
if (drawingMode === "polygon") {
return new Cesium.PolygonHierarchy(activeShapePoints);
}
return activeShapePoints;
}, false);
activeShape = drawShape(dynamicPositions);
}
activeShapePoints.push(earthPosition);
createPoint(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (event) {
if (Cesium.defined(floatingPoint)) {
var newPosition = viewer.scene.pickPosition(event.endPosition);
if (Cesium.defined(newPosition)) {
floatingPoint.position.setValue(newPosition);
activeShapePoints.pop();
activeShapePoints.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Redraw the shape so it's not dynamic and remove the dynamic shape.
function terminateShape() {
activeShapePoints.pop();
drawShape(activeShapePoints);
viewer.entities.remove(floatingPoint);
viewer.entities.remove(activeShape);
floatingPoint = undefined;
activeShape = undefined;
activeShapePoints = [];
}
handler.setInputAction(function (event) {
terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
var options = [
{
text: "Draw Lines",
onselect: function () {
if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
window.alert(
"This browser does not support polylines on terrain."
);
}
terminateShape();
drawingMode = "line";
},
},
{
text: "Draw Polygons",
onselect: function () {
terminateShape();
drawingMode = "polygon";
},
},
];
Sandcastle.addToolbarMenu(options);
// Zoom in to an area with mountains
viewer.camera.lookAt(
Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000.0),
new Cesium.Cartesian3(5000.0, 5000.0, 5000.0)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
//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