ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated

Browse Source
This commit is contained in:
Éric Lemoine
2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
master/examples/Client CZML.html Normal file
View File

@@ -0,0 +1,203 @@
<!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="This example supplies custom CZML objects directly to the CesiumViewerWidget.">
<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'
], function(
Cesium, CesiumViewerWidget,
on, dom)
{
"use strict";
// This demo shows dynamically-generated CZML along
// with a custom visualizer and custom render loop.
// For a simpler example see the "Simple CZML Demo".
var czml = [
{
"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]
}
}
];
// Add CZML to the scene and set the clock range
function addCZML(czml, scene, clock) {
// Create a DynamicObjectCollection for handling the CZML
var dynamicObjectCollection = new Cesium.DynamicObjectCollection();
// Create the standard CZML visualizer collection
var visualizers = Cesium.VisualizerCollection.createCzmlStandardCollection(scene, dynamicObjectCollection);
// Process the CZML, which populates the collection with DynamicObjects
Cesium.processCzml(czml, dynamicObjectCollection);
// Figure out the time span of the data
var availability = dynamicObjectCollection.computeAvailability();
// Set the clock range
clock.startTime = availability.start.clone();
clock.currentTime = availability.start.clone();
clock.stopTime = availability.stop.clone();
clock.clockRange = Cesium.ClockRange.LOOP;
return visualizers;
}
var widget = new CesiumViewerWidget();
widget.placeAt(dom.byId('cesiumContainer'));
dom.byId('toolbar').innerHTML = '';
widget.autoStartRenderLoop = false; // We need a custom render loop
widget.startup();
var visualizers = addCZML(czml, widget.scene, widget.clock);
widget.timelineControl.zoomTo(widget.clock.startTime, widget.clock.stopTime);
// Let's make the playback speed faster
widget.clock.multiplier = 300.0;
// Custom render loop adapted from CesiumViewerWidget.startRenderLoop()
var animationController = widget.animationController;
function updateAndRender() {
var currentTime = animationController.update();
widget.initializeFrame(currentTime);
widget.update(currentTime);
// Update the visualizers...
visualizers.update(currentTime);
widget.render();
Cesium.requestAnimationFrame(updateAndRender);
}
Cesium.requestAnimationFrame(updateAndRender);
// Zoom in a little closer...
var extent = new Cesium.Extent(-2.056, 0.587, -2.010, 0.633);
widget.scene.getCamera().controller.viewExtent(extent);
});
</script>
</body>
</html>