Updated
This commit is contained in:
Éric Lemoine
226
master/examples/Simple CZML Demo.html
Normal file
226
master/examples/Simple CZML Demo.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<meta name="description" content="A simple CZML example showing four satellites in orbit around the Earth, and some ground objects.">
|
||||
<title>Cesium Demo</title>
|
||||
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
||||
<script data-dojo-config="async: 1, tlmSiblingOfDojo: 0" src="../../../ThirdParty/dojo-release-1.7.2-src/dojo/dojo.js"></script>
|
||||
<script type="text/javascript">
|
||||
require({
|
||||
baseUrl : '../../..',
|
||||
packages: [
|
||||
{ name: 'dojo', location: 'ThirdParty/dojo-release-1.7.2-src/dojo' },
|
||||
{ name: 'dijit', location: 'ThirdParty/dojo-release-1.7.2-src/dijit' },
|
||||
{ name: 'dojox', location: 'ThirdParty/dojo-release-1.7.2-src/dojox' },
|
||||
{ name: 'Assets', location: 'Source/Assets' },
|
||||
{ name: 'Core', location: 'Source/Core' },
|
||||
{ name: 'DynamicScene', location: 'Source/DynamicScene' },
|
||||
{ name: 'Renderer', location: 'Source/Renderer' },
|
||||
{ name: 'Scene', location: 'Source/Scene' },
|
||||
{ name: 'Shaders', location: 'Source/Shaders' },
|
||||
{ name: 'ThirdParty', location: 'Source/ThirdParty' },
|
||||
{ name: 'Widgets', location: 'Source/Widgets' },
|
||||
{ name: 'Workers', location: 'Source/Workers' }
|
||||
]
|
||||
});
|
||||
</script>
|
||||
<link rel="Stylesheet" href="../../../ThirdParty/dojo-release-1.7.2-src/dijit/themes/claro/claro.css" type="text/css">
|
||||
<link rel="Stylesheet" href="../../../Source/Widgets/Dojo/CesiumViewerWidget.css" type="text/css">
|
||||
</head>
|
||||
<body class="claro" data-sandcastle-bucket="bucket-dojo.html" data-sandcastle-title="Cesium + Dojo">
|
||||
<style>
|
||||
body {
|
||||
background: #000;
|
||||
color: #eee;
|
||||
font-family: sans-serif;
|
||||
font-size: 9pt;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fullSize {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#toolbar {
|
||||
margin: 5px;
|
||||
padding: 2px 5px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="cesiumContainer" class="fullSize"></div>
|
||||
<div id="toolbar">Loading...</div>
|
||||
<script id="cesium_sandcastle_script">
|
||||
require([
|
||||
'Source/Cesium', 'Widgets/Dojo/CesiumViewerWidget',
|
||||
'dojo/on', 'dojo/dom', 'dojo/io-query', 'dijit/form/Button'
|
||||
], function(
|
||||
Cesium, CesiumViewerWidget,
|
||||
on, dom, ioQuery, Button)
|
||||
{
|
||||
"use strict";
|
||||
|
||||
var gallery = '../../CesiumViewer/Gallery/';
|
||||
var endUserOptions = {
|
||||
'source' : gallery + 'simple.czml'
|
||||
};
|
||||
|
||||
function czmlSatellites(widget) {
|
||||
Sandcastle.declare(czmlSatellites); // For highlighting in Sandcastle.
|
||||
widget.removeAllCzml();
|
||||
widget.viewHome();
|
||||
widget.loadCzml(gallery + 'simple.czml');
|
||||
}
|
||||
|
||||
function czmlSensors(widget) {
|
||||
Sandcastle.declare(czmlSensors); // For highlighting in Sandcastle.
|
||||
widget.removeAllCzml();
|
||||
widget.viewHome();
|
||||
widget.loadCzml(gallery + 'LotsOfSensors.czml');
|
||||
}
|
||||
|
||||
function czmlVehicle(widget) {
|
||||
Sandcastle.declare(czmlVehicle); // For highlighting in Sandcastle.
|
||||
widget.removeAllCzml();
|
||||
widget.loadCzml(gallery + 'Vehicle.czml', 'Vehicle');
|
||||
}
|
||||
|
||||
var builtInCzml = [
|
||||
{
|
||||
"id" : "Vehicle",
|
||||
"availability" : "2012-08-04T16:00:00Z/2012-08-04T17:04:54.9962195740191Z",
|
||||
"billboard" : {
|
||||
"eyeOffset" : {
|
||||
"cartesian" : [0.0, 0.0, 0.0]
|
||||
},
|
||||
"horizontalOrigin" : "CENTER",
|
||||
"image" : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEISURBVEhLvVXBDYQwDOuojHKj8LhBbpTbpBCEkZsmIVTXq1RVQGrHiWlLmTTqPiZBlyLgy/KSZQ5JSHDQ/mCYCsC8106kDU0AdwRnvYZArWRcAl0dcYJq1hWCb3hBrumbDAVMwAC82WoRvgMnVMDBnB0nYZFTbE6BBvdUGqVqCbjBIk3PyFFR/NU7EKzru+qZsau3ryPwwCRLKYOzutZuCL6fUmWeJGzNzL/RxAMrUmASSCkkAayk2IxPlwhAAYGpsiHQjbLccfdOY5gKkCXAMi7SscAwbQpAnKyctWyUZ6z8ja3OGMepwD8asz+9FnSvbhU8uVOHFIwQsI3/p0CfhuqCSQuxLqsN6mu8SS+N42MAAAAASUVORK5CYII=",
|
||||
"pixelOffset" : {
|
||||
"cartesian2" : [0.0, 0.0]
|
||||
},
|
||||
"scale" : 0.8333333333333334,
|
||||
"show" : [{
|
||||
"interval" : "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
|
||||
"boolean" : true
|
||||
}],
|
||||
"verticalOrigin" : "BOTTOM"
|
||||
},
|
||||
"label" : {
|
||||
"fillColor" : [{
|
||||
"interval" : "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
|
||||
"rgba" : [255, 255, 0, 255]
|
||||
}],
|
||||
"font" : "bold 10pt Segoe UI Semibold",
|
||||
"horizontalOrigin" : "LEFT",
|
||||
"outlineColor" : {
|
||||
"rgba" : [0, 0, 0, 255]
|
||||
},
|
||||
"pixelOffset" : {
|
||||
"cartesian2" : [10.0, 0.0]
|
||||
},
|
||||
"scale" : 1.0,
|
||||
"show" : [{
|
||||
"interval" : "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
|
||||
"boolean" : true
|
||||
}],
|
||||
"style" : "FILL",
|
||||
"text" : "Vehicle",
|
||||
"verticalOrigin" : "CENTER"
|
||||
},
|
||||
"path" : {
|
||||
"color" : [{
|
||||
"interval" : "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
|
||||
"rgba" : [255, 255, 0, 255]
|
||||
}],
|
||||
"outlineWidth" : 0.0,
|
||||
"width" : [{
|
||||
"interval" : "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
|
||||
"number" : 5.0
|
||||
}],
|
||||
"show" : [{
|
||||
"interval" : "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
|
||||
"boolean" : true
|
||||
}]
|
||||
},
|
||||
"position" : {
|
||||
"interpolationAlgorithm" : "LAGRANGE",
|
||||
"interpolationDegree" : 1,
|
||||
"epoch" : "2012-08-04T16:00:00Z",
|
||||
// Trimmed to just 2 points
|
||||
"cartesian" : [0.0, -2379754.6637012, -4665332.88013588, 3628133.68924173,
|
||||
3894.996219574019, -2291336.52323822, -4682359.21232197, 3662718.52171165]
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
function useBuiltInCzml(widget) {
|
||||
Sandcastle.declare(useBuiltInCzml); // For highlighting in Sandcastle.
|
||||
widget.removeAllCzml();
|
||||
widget.viewHome();
|
||||
widget.addCzml(builtInCzml, 'Built-in CZML');
|
||||
|
||||
// Zoom in a little closer...
|
||||
var extent = new Cesium.Extent(-2.056, 0.587, -2.010, 0.633);
|
||||
widget.scene.getCamera().controller.viewExtent(extent);
|
||||
}
|
||||
|
||||
function createButtons(widget) {
|
||||
new Button({
|
||||
label: 'Satellites',
|
||||
onClick: function() {
|
||||
czmlSatellites(widget);
|
||||
Sandcastle.highlight(czmlSatellites);
|
||||
}
|
||||
}).placeAt('toolbar');
|
||||
|
||||
new Button({
|
||||
label: 'Sensors',
|
||||
onClick: function() {
|
||||
czmlSensors(widget);
|
||||
Sandcastle.highlight(czmlSensors);
|
||||
}
|
||||
}).placeAt('toolbar');
|
||||
|
||||
new Button({
|
||||
label: 'Vehicle',
|
||||
onClick: function() {
|
||||
czmlVehicle(widget);
|
||||
Sandcastle.highlight(czmlVehicle);
|
||||
}
|
||||
}).placeAt('toolbar');
|
||||
|
||||
new Button({
|
||||
label: 'Built-in CZML',
|
||||
onClick: function() {
|
||||
useBuiltInCzml(widget);
|
||||
Sandcastle.highlight(useBuiltInCzml);
|
||||
}
|
||||
}).placeAt('toolbar');
|
||||
}
|
||||
|
||||
// Initialize a viewer capable of drag-and-drop
|
||||
// and user customizations.
|
||||
var widget = new CesiumViewerWidget({
|
||||
endUserOptions : endUserOptions,
|
||||
enableDragDrop : true
|
||||
});
|
||||
widget.placeAt(dom.byId('cesiumContainer'));
|
||||
widget.startup();
|
||||
dom.byId('toolbar').innerHTML = '';
|
||||
|
||||
createButtons(widget);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user