/
Circles and Ellipses.html
133 lines (123 loc) · 5.06 KB
/
Circles and Ellipses.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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="Draw circles and ellipses contoured to the globe.">
<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: 'Core', location: 'Source/Core' },
{ name: 'DynamicScene', location: 'Source/DynamicScene' },
{ name: 'Renderer', location: 'Source/Renderer' },
{ name: 'Resources', location: 'Source/Resources' },
{ 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%;
z-index: -1;
}
#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";
function createPrimitives(widget) {
var scene = widget.scene;
var ellipsoid = widget.ellipsoid;
var primitives = scene.getPrimitives();
var polylines = new Cesium.PolylineCollection();
// Fill circle
var circle = new Cesium.Polygon();
Sandcastle.declare(circle); // For highlighting on mouseover in Sandcastle.
circle.setPositions(Cesium.Shapes.computeCircleBoundary(
ellipsoid, ellipsoid.cartographicToCartesian(
new Cesium.Cartographic.fromDegrees(-75.0, 40.0)), 300000.0));
primitives.add(circle);
// Outline circle
var outline = polylines.add();
Sandcastle.declare(outline); // For highlighting on mouseover in Sandcastle.
outline.setPositions(Cesium.Shapes.computeCircleBoundary(
ellipsoid, ellipsoid.cartographicToCartesian(
new Cesium.Cartographic.fromDegrees(-82.0, 37.0)), 300000.0));
primitives.add(polylines);
// Apply a material to a filled circle
var circle2 = new Cesium.Polygon();
Sandcastle.declare(circle2); // For highlighting on mouseover in Sandcastle.
circle2.setPositions(Cesium.Shapes.computeCircleBoundary(
ellipsoid, ellipsoid.cartographicToCartesian(
new Cesium.Cartographic.fromDegrees(-90.0, 35.0)), 400000.0));
// Any polygon-compatible material can be used
circle2.material = Cesium.Material.fromType(scene.getContext(), Cesium.Material.TyeDyeType);
primitives.add(circle2);
// Fill an ellipse
var ellipse = new Cesium.Polygon();
Sandcastle.declare(ellipse); // For highlighting on mouseover in Sandcastle.
ellipse.setPositions(Cesium.Shapes.computeEllipseBoundary(
ellipsoid, ellipsoid.cartographicToCartesian(
new Cesium.Cartographic.fromDegrees(-78.0, 32.5)), 500000.0,
250000.0, Cesium.Math.toRadians(60)));
primitives.add(ellipse);
}
var widget = new CesiumViewerWidget({
onObjectMousedOver : function(mousedOverObject) {
widget.highlightObject(mousedOverObject);
Sandcastle.highlight(mousedOverObject);
}
});
widget.placeAt(dom.byId('cesiumContainer'));
widget.startup();
dom.byId('toolbar').innerHTML = '';
createPrimitives(widget);
});
</script>
</body>
</html>