151 lines
5.2 KiB
HTML
151 lines
5.2 KiB
HTML
<!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="Create two widgets that share a single animation controller for synchronized visualization across views.">
|
|
<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;
|
|
}
|
|
.top {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border: none;
|
|
border-bottom: solid 2px #888;
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
.bottom {
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
border: none;
|
|
border-top: solid 2px #888;
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
#topbar {
|
|
margin: 5px;
|
|
padding: 2px 5px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
#bottombar {
|
|
margin: 5px;
|
|
padding: 2px 5px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
|
|
<div id="cesiumContainerTop" class="top"></div>
|
|
<div id="cesiumContainerBottom" class="bottom"></div>
|
|
<div id="topbar">Loading...</div>
|
|
<div id="bottombar"></div>
|
|
<script id="cesium_sandcastle_script">
|
|
require([
|
|
'Source/Cesium', 'Widgets/Dojo/CesiumViewerWidget',
|
|
'dojo/on', 'dojo/dom', 'Core/requestAnimationFrame'
|
|
], function(
|
|
Cesium, CesiumViewerWidget,
|
|
on, dom, requestAnimationFrame)
|
|
{
|
|
"use strict";
|
|
|
|
// This example shows two widgets that share a single
|
|
// animationController. It is also possible to use
|
|
// separate animationControllers to show a scene at
|
|
// different times.
|
|
|
|
var endUserOptions = {
|
|
'source' : '../../CesiumViewer/Gallery/simple.czml'
|
|
};
|
|
|
|
// First, create widget1 (the top widget).
|
|
var widget1 = new CesiumViewerWidget({
|
|
endUserOptions : endUserOptions,
|
|
autoStartRenderLoop : false
|
|
});
|
|
widget1.placeAt(dom.byId("cesiumContainerTop"));
|
|
widget1.startup();
|
|
dom.byId('topbar').innerHTML = '';
|
|
|
|
// Save off a copy of widget1's animationController
|
|
var animationController = widget1.animationController;
|
|
|
|
// Now create widget2, passing in the
|
|
// existing animationController to be shared.
|
|
var widget2 = new CesiumViewerWidget({
|
|
animationController : animationController,
|
|
endUserOptions : endUserOptions,
|
|
autoStartRenderLoop : false
|
|
});
|
|
widget2.placeAt(dom.byId("cesiumContainerBottom"));
|
|
widget2.startup();
|
|
|
|
// Switch widget2 to Columbus View.
|
|
widget2.viewColumbus.onClick();
|
|
|
|
// Now both widgets are created. A custom render loop is
|
|
// needed to drive them both from requestAnimationFrame.
|
|
function updateAndRender() {
|
|
// Get the time from the shared controller, then
|
|
// update and render both widgets.
|
|
var currentTime = animationController.update();
|
|
widget1.initializeFrame(currentTime);
|
|
widget2.initializeFrame(currentTime);
|
|
widget1.update(currentTime);
|
|
widget2.update(currentTime);
|
|
widget1.render();
|
|
widget2.render();
|
|
requestAnimationFrame(updateAndRender);
|
|
}
|
|
|
|
// Call the render loop once manually, to prime the pump.
|
|
updateAndRender();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|