173 lines
5.7 KiB
HTML
173 lines
5.7 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="A starting point for creating Cesium applications (uses Bing imagery).">
|
|
<title>Cesium Demo</title>
|
|
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
|
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.2/require.js"></script>
|
|
<script type="text/javascript">
|
|
require({
|
|
baseUrl : '../../../Source'
|
|
});
|
|
</script>
|
|
</head>
|
|
<body data-sandcastle-bucket="bucket-requirejs.html" data-sandcastle-title="Cesium + require.js">
|
|
<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, please wait...</div>
|
|
<script id="cesium_sandcastle_script">
|
|
require([
|
|
'Cesium'
|
|
], function (
|
|
Cesium
|
|
) {
|
|
"use strict";
|
|
|
|
//A real application should require only the subset of modules that
|
|
//are actually used, instead of requiring the Cesium module, which
|
|
//includes everything.
|
|
|
|
var canvas = document.createElement('canvas');
|
|
canvas.className = 'fullSize';
|
|
document.getElementById('cesiumContainer').appendChild(canvas);
|
|
var ellipsoid = Cesium.Ellipsoid.WGS84;
|
|
var scene = new Cesium.Scene(canvas);
|
|
var primitives = scene.getPrimitives();
|
|
|
|
// Bing Maps
|
|
var bing = new Cesium.BingMapsImageryProvider({
|
|
url : 'http://dev.virtualearth.net',
|
|
mapStyle : Cesium.BingMapsStyle.AERIAL,
|
|
// Some versions of Safari support WebGL, but don't correctly implement
|
|
// cross-origin image loading, so we need to load Bing imagery using a proxy.
|
|
proxy : Cesium.FeatureDetection.supportsCrossOriginImagery() ? undefined : new Cesium.DefaultProxy('/proxy/')
|
|
});
|
|
|
|
var cb = new Cesium.CentralBody(ellipsoid);
|
|
cb.getImageryLayers().addImageryProvider(bing);
|
|
|
|
primitives.setCentralBody(cb);
|
|
scene.skyAtmosphere = new Cesium.SkyAtmosphere();
|
|
var imageryUrl = '../../../Source/Assets/Textures/';
|
|
scene.skyBox = new Cesium.SkyBox({
|
|
positiveX: imageryUrl + 'SkyBox/tycho8_px_80.jpg',
|
|
negativeX: imageryUrl + 'SkyBox/tycho8_mx_80.jpg',
|
|
positiveY: imageryUrl + 'SkyBox/tycho8_py_80.jpg',
|
|
negativeY: imageryUrl + 'SkyBox/tycho8_my_80.jpg',
|
|
positiveZ: imageryUrl + 'SkyBox/tycho8_pz_80.jpg',
|
|
negativeZ: imageryUrl + 'SkyBox/tycho8_mz_80.jpg'
|
|
});
|
|
|
|
var transitioner = new Cesium.SceneTransitioner(scene, ellipsoid);
|
|
|
|
///////////////////////////////////////////////////////////////////////////
|
|
// INSERT CODE HERE to create graphics primitives in the scene.
|
|
|
|
///////////////////////////////////////////////////////////////////////////
|
|
|
|
function animate() {
|
|
// INSERT CODE HERE to update primitives based on changes to animation time, camera parameters, etc.
|
|
}
|
|
|
|
function tick() {
|
|
scene.initializeFrame();
|
|
animate();
|
|
scene.render();
|
|
Cesium.requestAnimationFrame(tick);
|
|
}
|
|
tick();
|
|
|
|
///////////////////////////////////////////////////////////////////////////
|
|
// Example mouse & keyboard handlers
|
|
|
|
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
|
|
|
|
handler.setInputAction(function(movement) {
|
|
// INSERT CODE HERE: Handler for left-click
|
|
// ...
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
handler.setInputAction(function (movement) {
|
|
// INSERT CODE HERE: Handler for mouse move
|
|
// Use movement.startPosition, movement.endPosition
|
|
// ...
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
|
// To use this in Sandcastle, you must set focus manually,
|
|
// or click on a toolbar inside the iframe.
|
|
function keydownHandler(e) {
|
|
switch (e.keyCode) {
|
|
case '3'.charCodeAt(0): // '3' -> 3D globe
|
|
transitioner.morphTo3D();
|
|
break;
|
|
case '2'.charCodeAt(0): // '2' -> Columbus View
|
|
transitioner.morphToColumbusView();
|
|
break;
|
|
case '1'.charCodeAt(0): // '1' -> 2D map
|
|
transitioner.morphTo2D();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
document.addEventListener('keydown', keydownHandler, false);
|
|
|
|
// Prevent right-click from opening a context menu.
|
|
canvas.oncontextmenu = function() {
|
|
return false;
|
|
};
|
|
|
|
///////////////////////////////////////////////////////////////////////////
|
|
// Example resize handler
|
|
|
|
var onResize = function() {
|
|
var width = canvas.clientWidth;
|
|
var height = canvas.clientHeight;
|
|
|
|
if (canvas.width === width && canvas.height === height) {
|
|
return;
|
|
}
|
|
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
scene.getCamera().frustum.aspectRatio = width / height;
|
|
};
|
|
window.addEventListener('resize', onResize, false);
|
|
onResize();
|
|
|
|
document.getElementById("toolbar").innerHTML = '';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|