|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE --> |
| 6 | + <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> |
| 7 | + <meta name="description" content="Visualize worldwide, high-resolution terrain."> |
| 8 | + <title>Cesium Demo</title> |
| 9 | + <script type="text/javascript" src="../Sandcastle-header.js"></script> |
| 10 | + <script type="text/javascript"> |
| 11 | + var dojoConfig = { |
| 12 | + baseUrl : '../../../Source', |
| 13 | + packages: [ |
| 14 | + { name: 'dojo', location: '../ThirdParty/dojo-release-1.8.3-src/dojo' }, |
| 15 | + { name: 'dijit', location: '../ThirdParty/dojo-release-1.8.3-src/dijit' }, |
| 16 | + { name: 'dojox', location: '../ThirdParty/dojo-release-1.8.3-src/dojox' } |
| 17 | + ] |
| 18 | + }; |
| 19 | + </script> |
| 20 | + <script data-dojo-config="async: 1, tlmSiblingOfDojo: 0" src="../../../ThirdParty/dojo-release-1.8.3-src/dojo/dojo.js"></script> |
| 21 | + <link rel="stylesheet" href="../../../ThirdParty/dojo-release-1.8.3-src/dijit/themes/claro/claro.css" type="text/css"> |
| 22 | + <link rel="stylesheet" href="../../../Source/Widgets/Dojo/CesiumViewerWidget.css" type="text/css"> |
| 23 | +</head> |
| 24 | +<body class="claro sandcastle-loading" data-sandcastle-bucket="bucket-dojo.html" data-sandcastle-title="Cesium + Dojo"> |
| 25 | +<style> |
| 26 | + @import url(../templates/bucket.css); |
| 27 | +</style> |
| 28 | +<div id="cesiumContainer" class="fullSize"></div> |
| 29 | +<div id="loadingOverlay"><h1>Loading...</h1></div> |
| 30 | +<div id="toolbar"> |
| 31 | +<div id="terrainMenu"></div> |
| 32 | +<div id="zoomButtons"></div> |
| 33 | +</div> |
| 34 | +<script id="cesium_sandcastle_script"> |
| 35 | +require([ |
| 36 | + 'Cesium', |
| 37 | + 'Widgets/Dojo/CesiumViewerWidget', |
| 38 | + 'dijit/DropDownMenu', |
| 39 | + 'dijit/MenuItem', |
| 40 | + 'dijit/form/Button', |
| 41 | + 'dijit/form/DropDownButton' |
| 42 | +], function( |
| 43 | + Cesium, |
| 44 | + CesiumViewerWidget, |
| 45 | + DropDownMenu, |
| 46 | + MenuItem, |
| 47 | + Button, |
| 48 | + DropDownButton) { |
| 49 | + "use strict"; |
| 50 | + |
| 51 | + function createTerrainMenu(terrainProviders) { |
| 52 | + var menu = new DropDownMenu(); |
| 53 | + var button = new DropDownButton({ |
| 54 | + label : terrainProviders[0].name, |
| 55 | + dropDown : menu |
| 56 | + }); |
| 57 | + |
| 58 | + function createTerrainMenuItem(button, providerInfo) { |
| 59 | + return new MenuItem({ |
| 60 | + label : providerInfo.name, |
| 61 | + onClick : function() { |
| 62 | + centralBody.terrainProvider = providerInfo.provider; |
| 63 | + button.set('label', providerInfo.name); |
| 64 | + } |
| 65 | + }); |
| 66 | + } |
| 67 | + |
| 68 | + for (var i = 0, len = terrainProviders.length; i < len; ++i) { |
| 69 | + menu.addChild(createTerrainMenuItem(button, terrainProviders[i])); |
| 70 | + } |
| 71 | + |
| 72 | + button.placeAt('terrainMenu'); |
| 73 | + |
| 74 | + new Button({ |
| 75 | + label: 'Mount Everest', |
| 76 | + onClick: function() { |
| 77 | + var eye, target, up; |
| 78 | + |
| 79 | + if (scene.mode === Cesium.SceneMode.SCENE3D) { |
| 80 | + eye = new Cesium.Cartesian3(294572.0645397696, 5637826.573008351, 2978624.6868285); |
| 81 | + target = eye.add(new Cesium.Cartesian3(0.9028130862217908, -0.42449297750082904, -0.06880583840911567)); |
| 82 | + up = new Cesium.Cartesian3(0.40668971896562117, 0.790807045510862, 0.45741413322152297); |
| 83 | + scene.getCamera().controller.lookAt(eye, target, up); |
| 84 | + } else if (scene.mode === Cesium.SceneMode.COLUMBUS_VIEW) { |
| 85 | + eye = new Cesium.Cartesian3(9684590.891310014, 3114799.076252769, 9849.375792522824); |
| 86 | + target = eye.add(new Cesium.Cartesian3(-0.8929328433855669, -0.00005779973945286486, -0.45018988645076763)); |
| 87 | + up = new Cesium.Cartesian3(-0.4501898855076042, -0.0000291369789812141, 0.8929328452557279); |
| 88 | + scene.getCamera().controller.lookAt(eye, target, up); |
| 89 | + } else { |
| 90 | + scene.getCamera().controller.viewExtent(new Cesium.Extent(1.516102969, 0.48744464, 1.518102969, 0.48944464)); |
| 91 | + } |
| 92 | + } |
| 93 | + }).placeAt('zoomButtons'); |
| 94 | + |
| 95 | + new Button({ |
| 96 | + label: 'Half Dome', |
| 97 | + onClick: function() { |
| 98 | + var eye, target, up; |
| 99 | + |
| 100 | + if (scene.mode === Cesium.SceneMode.SCENE3D) { |
| 101 | + eye = new Cesium.Cartesian3(-2496304.1498512086, -4391818.97382059, 3884176.4503971986); |
| 102 | + target = eye.add(new Cesium.Cartesian3(0.9279518715011381, -0.29488412129953234, -0.22792252890604328)); |
| 103 | + up = new Cesium.Cartesian3(-0.11836693744723503, -0.8130611584421428, 0.5700182635106171); |
| 104 | + scene.getCamera().controller.lookAt(eye, target, up); |
| 105 | + } else if (scene.mode === Cesium.SceneMode.COLUMBUS_VIEW) { |
| 106 | + eye = new Cesium.Cartesian3(-13314946.646404704, 4200941.442507448, 2468.225945515426); |
| 107 | + target = eye.add(new Cesium.Cartesian3(0.9624895834866811, 0.04124314776883213, -0.26816562874787864)); |
| 108 | + up = new Cesium.Cartesian3(0.2679197697914868, 0.011480478929947842, 0.9633728227203466); |
| 109 | + scene.getCamera().controller.lookAt(eye, target, up); |
| 110 | + } else { |
| 111 | + scene.getCamera().controller.viewExtent(new Cesium.Extent(-2.08724538, 0.6577939, -2.08524538, 0.6597939)); |
| 112 | + } |
| 113 | + } |
| 114 | + }).placeAt('zoomButtons'); |
| 115 | + |
| 116 | + new Button({ |
| 117 | + label: 'San Francisco Bay', |
| 118 | + onClick: function() { |
| 119 | + var eye, target, up; |
| 120 | + |
| 121 | + if (scene.mode === Cesium.SceneMode.SCENE3D) { |
| 122 | + eye = new Cesium.Cartesian3(-2674718.9291375633, -4332137.224608461, 3888180.6614196445); |
| 123 | + target = eye.add(new Cesium.Cartesian3(-0.40034097132786534, 0.9155843741828319, 0.03784653786617176)); |
| 124 | + up = new Cesium.Cartesian3(-0.6502679490649945, -0.3129458646313862, 0.6922546353438556); |
| 125 | + scene.getCamera().controller.lookAt(eye, target, up); |
| 126 | + } else if (scene.mode === Cesium.SceneMode.COLUMBUS_VIEW) { |
| 127 | + eye = new Cesium.Cartesian3(-13562569.113918452, 4176598.9965795614, 37656.37201701476); |
| 128 | + target = eye.add(new Cesium.Cartesian3(-0.8108519561707095, 0.4023795334200999, -0.42498213639958615)); |
| 129 | + up = new Cesium.Cartesian3(-0.3806859699462094, 0.18891270085627615, 0.905201736488051); |
| 130 | + scene.getCamera().controller.lookAt(eye, target, up); |
| 131 | + } else { |
| 132 | + scene.getCamera().controller.viewExtent(new Cesium.Extent(-2.147621889, 0.64829691, -2.125621889, 0.67029691)); |
| 133 | + } |
| 134 | + } |
| 135 | + }).placeAt('zoomButtons'); |
| 136 | + } |
| 137 | + |
| 138 | + var widget = new CesiumViewerWidget(); |
| 139 | + widget.placeAt('cesiumContainer'); |
| 140 | + widget.fullscreenElement = document.body; |
| 141 | + widget.startup(); |
| 142 | + |
| 143 | + var scene = widget.scene; |
| 144 | + var centralBody = scene.getPrimitives().getCentralBody(); |
| 145 | + |
| 146 | + var terrainProvider = new Cesium.CesiumTerrainProvider({ |
| 147 | + url : 'http://cesium.agi.com/smallterrain' |
| 148 | + }); |
| 149 | + |
| 150 | + centralBody.terrainProvider = terrainProvider; |
| 151 | + |
| 152 | + var ellipsoidProvider = new Cesium.EllipsoidTerrainProvider(); |
| 153 | + |
| 154 | + var terrainProviders = [ |
| 155 | + { name : 'CesiumTerrainProvider', provider : terrainProvider }, |
| 156 | + { name : 'EllipsoidTerrainProvider', provider : ellipsoidProvider } |
| 157 | + ]; |
| 158 | + |
| 159 | + createTerrainMenu(terrainProviders); |
| 160 | + |
| 161 | + Sandcastle.finishedLoading(); |
| 162 | +}); |
| 163 | +</script> |
| 164 | +</body> |
| 165 | +</html> |
0 commit comments