-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
128 lines (113 loc) · 4.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Cesium Server</title>
<script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script>
<style>
@import url(./node_modules/cesium/Build/Cesium/Widgets/widgets.css);
html, body, #cesium-container {
height:100%;
margin:0;
overflow:hidden;
padding:0;
}
</style>
</head>
<body>
<div id="cesium-container"></div>
<script>
var imageryProvider = new Cesium.MapboxImageryProvider({
mapId: 'mapbox.satellite',
accessToken: 'YOUR_KEY_HERE'
});
var viewer = new Cesium.Viewer('cesium-container', {
terrainProvider : Cesium.createWorldTerrain(),
imageryProvider : imageryProvider,
baseLayerPicker : false,
});
viewer.camera.frustum.fov = 0.35;
/*
Define an event we will use to know when the scene is fully rendered.
Cesium provides no built-in event to do this.
Much of the following code is an ugly hack to get this event to fire at
the right time when the scene is ready.
*/
var sceneRenderedEvent = new CustomEvent('scene-rendered', {
detail: 'All data sources have been loaded and scene has been rendered.'
});
/*
Indicates whether or not there is an active request.
We need this because our scene-rendered event might fire many times and
we really only need it when a request is being processed.
*/
var requestActive = false;
/*
We need to ignore the first time all data sources are loaded.
Not sure why but it works.
*/
var ignoredEventCount = 0;
/*
Replace the original dataSourceDisplay.update function with a modified
implementation that fires an event when all data sources are loaded and
the scene is rendered.
Cesium provides no built-in event to do this so this is a bit of a hack.
*/
var originalUpdateFunction = viewer.dataSourceDisplay.update;
viewer.dataSourceDisplay.update = function(time) {
// Call the original update function
var dataSourcesLoaded = originalUpdateFunction.apply(viewer.dataSourceDisplay, [time]);
// This additional logic determines whether the scene is fully loaded and rendered.
if (requestActive && dataSourcesLoaded &&
viewer.scene.globe._surface._tileLoadQueueHigh.length == 0 &&
viewer.scene.globe._surface._tileLoadQueueMedium.length == 0 &&
viewer.scene.globe._surface._tileLoadQueueLow.length == 0) {
if (ignoredEventCount++ > 0) { // Skip the first time this code is reached.
document.dispatchEvent(sceneRenderedEvent); // Fire our scene-rendered event.
ignoredEventCount = 0;
}
}
return dataSourcesLoaded;
};
/*
The getImg() function is called from Electron's main.js.
Its purpose is to manipulate Cesium and return the resulting image
displayed in Cesium.
You may add input parameters to suit your needs but the calling script
must be updated accordingly in main.js.
*/
function getImg(latitude, longitude, altitude, heading, pitch, roll) {
return new Promise((resolve, reject) => {
// Update Cesium camera and other settings here
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude),
orientation: {
heading : Cesium.Math.toRadians(heading),
pitch : Cesium.Math.toRadians(pitch),
roll : Cesium.Math.toRadians(roll)
}
});
requestActive = true;
// Wait for the scene-rendered event.
document.addEventListener('scene-rendered', function(e) {
/*
Detach our event listener so we don't repeatedly attach a new
handler with every request. This would eventually bog down the app.
*/
e.target.removeEventListener(e.type, arguments.callee);
/* Set our flag false so the update function will stop trying to
trigger the scene-rendered event.
*/
requestActive = false;
// Force a fresh render and capture the canvas image.
viewer.render();
var img = viewer.scene.canvas.toDataURL();
// Resolve this Promise and return the image data.
resolve(img);
});
});
}
</script>
</body>
</html>