forked from leforthomas/cesium-drawhelper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (144 loc) · 5.83 KB
/
index.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<title>DrawHelper - a shape editor plugin for Cesium</title>
<script src="Cesium/Cesium.js"></script>
<script src="DrawHelper.js"></script>
<style>
@import url(Cesium/Widgets/CesiumWidget/CesiumWidget.css);
@import url(DrawHelper.css);
#cesiumContainer {
position: absolute;
top: 0px;
left: 0;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
font-family: sans-serif;
}
#toolbar {
position: absolute;
top: 0px;
left: 0;
display: inline;
margin: 10px;
padding: 0px;
background: white;
}
#logging {
position: absolute;
bottom: 0px;
right: 0;
display: inline;
margin: 10px;
padding: 10px;
background: white;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body onload="start()">
<div id="cesiumContainer"></div>
<div id="toolbar">
</div>
<div id="logging">
</div>
<script>
function start() {
// create the almighty cesium widget
var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer', {scene3DOnly: true});
var scene = cesiumWidget.scene;
// add terrain elevation
var cesiumTerrainProviderHeightmaps = new Cesium.CesiumTerrainProvider({
url : 'https://cesiumjs.org/tilesets/terrain/smallterrain',
credit : 'Terrain data courtesy Analytical Graphics, Inc.'
});
scene.terrainProvider = cesiumTerrainProviderHeightmaps;
// start the draw helper to enable shape creation and editing
var drawHelper = new DrawHelper(cesiumWidget);
var toolbar = drawHelper.addToolbar(document.getElementById("toolbar"), {
buttons: ['marker', 'polyline', 'polygon', 'circle', 'extent']
});
toolbar.addListener('markerCreated', function(event) {
loggingMessage('Marker created at ' + event.position.toString());
// create one common billboard collection for all billboards
var b = new Cesium.BillboardCollection();
scene.primitives.add(b);
var billboard = b.add({
show : true,
position : event.position,
pixelOffset : new Cesium.Cartesian2(0, 0),
eyeOffset : new Cesium.Cartesian3(0.0, 0.0, 0.0),
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
verticalOrigin : Cesium.VerticalOrigin.CENTER,
scale : 1.0,
image: './img/glyphicons_242_google_maps.png',
color : new Cesium.Color(1.0, 1.0, 1.0, 1.0)
});
billboard.setEditable();
});
toolbar.addListener('polylineCreated', function(event) {
loggingMessage('Polyline created with ' + event.positions.length + ' points');
var polyline = new DrawHelper.PolylinePrimitive({
positions: event.positions,
width: 5,
geodesic: true
});
scene.primitives.add(polyline);
polyline.setEditable();
polyline.addListener('onEdited', function(event) {
loggingMessage('Polyline edited, ' + event.positions.length + ' points');
});
});
toolbar.addListener('polygonCreated', function(event) {
loggingMessage('Polygon created with ' + event.positions.length + ' points');
var polygon = new DrawHelper.PolygonPrimitive({
positions: event.positions,
material : Cesium.Material.fromType('Checkerboard')
});
scene.primitives.add(polygon);
polygon.setEditable();
polygon.addListener('onEdited', function(event) {
loggingMessage('Polygon edited, ' + event.positions.length + ' points');
});
});
toolbar.addListener('circleCreated', function(event) {
loggingMessage('Circle created: center is ' + event.center.toString() + ' and radius is ' + event.radius.toFixed(1) + ' meters');
var circle = new DrawHelper.CirclePrimitive({
center: event.center,
radius: event.radius,
material: Cesium.Material.fromType(Cesium.Material.RimLightingType)
});
scene.primitives.add(circle);
circle.setEditable();
circle.addListener('onEdited', function(event) {
loggingMessage('Circle edited: radius is ' + event.radius.toFixed(1) + ' meters');
});
});
toolbar.addListener('extentCreated', function(event) {
var extent = event.extent;
loggingMessage('Extent created (N: ' + extent.north.toFixed(3) + ', E: ' + extent.east.toFixed(3) + ', S: ' + extent.south.toFixed(3) + ', W: ' + extent.west.toFixed(3) + ')');
var extentPrimitive = new DrawHelper.ExtentPrimitive({
extent: extent,
material: Cesium.Material.fromType(Cesium.Material.StripeType)
});
scene.primitives.add(extentPrimitive);
extentPrimitive.setEditable();
extentPrimitive.addListener('onEdited', function(event) {
loggingMessage('Extent edited: extent is (N: ' + event.extent.north.toFixed(3) + ', E: ' + event.extent.east.toFixed(3) + ', S: ' + event.extent.south.toFixed(3) + ', W: ' + event.extent.west.toFixed(3) + ')');
});
});
var logging = document.getElementById('logging');
function loggingMessage(message) {
logging.innerHTML = message;
}
}
</script>
</body>
</html>