153 lines
4.3 KiB
HTML
153 lines
4.3 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 canvases on the same page for visualizing different scenes.">
|
|
<title>Cesium Demo</title>
|
|
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
|
<script type="text/javascript" src="../../../Build/Unminified/Cesium.js"></script>
|
|
<script type="text/javascript" src="../Sandcastle-warn.js"></script>
|
|
</head>
|
|
<body data-sandcastle-bucket="bucket-plain.html" data-sandcastle-title="Cesium (standalone)">
|
|
<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"></div>
|
|
<div id="cesiumContainerBottom"></div>
|
|
<div id="topbar">Loading...</div>
|
|
<div id="bottombar"></div>
|
|
<script id="cesium_sandcastle_script">
|
|
(function () {
|
|
"use strict";
|
|
|
|
var canvas3D = document.createElement('canvas');
|
|
canvas3D.className = "top";
|
|
document.getElementById('cesiumContainerTop').appendChild(canvas3D);
|
|
|
|
var canvas2D = document.createElement('canvas');
|
|
canvas2D.className = "bottom";
|
|
document.getElementById('cesiumContainerBottom').appendChild(canvas2D);
|
|
|
|
var ellipsoid = Cesium.Ellipsoid.WGS84;
|
|
|
|
function createScene(canvas) {
|
|
var scene = new Cesium.Scene(canvas);
|
|
var primitives = scene.getPrimitives();
|
|
|
|
var imageryUrl = '../../../Source/Assets/Textures/';
|
|
var imageryProvider = new Cesium.SingleTileImageryProvider({
|
|
url : imageryUrl + 'NE2_LR_LC_SR_W_DR_2048.jpg'
|
|
});
|
|
|
|
var cb = new Cesium.CentralBody(ellipsoid);
|
|
cb.getImageryLayers().addImageryProvider(imageryProvider);
|
|
|
|
primitives.setCentralBody(cb);
|
|
|
|
// Prevent right-click from opening a context menu.
|
|
canvas.oncontextmenu = function () {
|
|
return false;
|
|
};
|
|
|
|
return scene;
|
|
}
|
|
|
|
var scene3D = createScene(canvas3D);
|
|
var scene2D = createScene(canvas2D);
|
|
|
|
scene3D.skyAtmosphere = new Cesium.SkyAtmosphere();
|
|
|
|
var transitioner = new Cesium.SceneTransitioner(scene2D);
|
|
transitioner.to2D();
|
|
|
|
function render3D() {
|
|
scene3D.initializeFrame();
|
|
scene3D.render();
|
|
}
|
|
|
|
function render2D() {
|
|
scene2D.initializeFrame();
|
|
scene2D.render();
|
|
}
|
|
|
|
function tick() {
|
|
render3D();
|
|
render2D();
|
|
Cesium.requestAnimationFrame(tick);
|
|
}
|
|
tick();
|
|
|
|
// Resize handler
|
|
var onResizeScene = function (canvas, scene) {
|
|
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;
|
|
};
|
|
var onResize = function () {
|
|
onResizeScene(canvas3D, scene3D);
|
|
onResizeScene(canvas2D, scene2D);
|
|
};
|
|
window.addEventListener('resize', onResize, false);
|
|
window.setTimeout(onResize, 60);
|
|
|
|
document.getElementById('topbar').innerHTML = '3D';
|
|
document.getElementById('bottombar').innerHTML = '2D';
|
|
}());
|
|
</script>
|
|
</body>
|
|
</html>
|