<div style="color:darkorange; border:3px solid darkorange;padding:10px;text-align:center; margin-top:18px; margin-bottom:0px;">Interact with the world below by <strong>click-dragging</strong>. Zoom in/out with <strong>mouse-scroll</strong>. <strong>Click</strong> (or <strong>double-click to focus</strong>) on a satellite to report it's estimated position. Use the time-control bar to propagate satellite orbits over time.</em></div>
<div id="cesiumContainer" style="width:100%; height:600px"></div>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.53/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.53/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script>
// set home view (Australia)
let west = 112.0;
let south = -45.0;
let east = 155.0;
let north = -9.0;
let extent = Cesium.Rectangle.fromDegrees(west, south, east, north);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 1.7;
cesiumViewer = new Cesium.Viewer('cesiumContainer', {
shouldAnimate : true,
});
// remove geocoder
cesiumViewer.geocoder.destroy();
// if canvas less than... don't show lighting
let showLighting = true;
if (cesiumViewer.canvas.width <= 1000) {
showLighting = false;
}
// enable eclipse shadow
cesiumViewer.scene.globe.enableLighting = showLighting;
// add buttons
function getshowHideBtnHtml(show, appendText, functionName) {
value = ((show) ? 'Show':'Hide') + ' ' + appendText;
return '<button onclick="' + functionName + '()" class="cesium-button cesium-toolbar-button" style="width:auto;border-radius:3px;padding:0px 7px;font-size:15px;">' + value + '</button>';
}
let toggleEclipseBtn = document.createElement('span');
toggleEclipseBtn.innerHTML = getshowHideBtnHtml(!showLighting, 'Day / Night', 'toggleEclipse');
parent = document.getElementsByClassName('cesium-viewer-toolbar')[0];
parent.insertBefore(toggleEclipseBtn, parent.children[1]);
toggleEclipse = function() {
let state = cesiumViewer.scene.globe.enableLighting;
toggleEclipseBtn.innerHTML = getshowHideBtnHtml(state, 'Day / Night', 'toggleEclipse');
cesiumViewer.scene.globe.enableLighting = !state;
}
let showOrbits = true;
let toggleOrbitsBtn = document.createElement('span');
toggleOrbitsBtn.innerHTML = getshowHideBtnHtml(!showOrbits, 'Orbits', 'toggleOrbits');
parent.insertBefore(toggleOrbitsBtn, parent.children[1]);
toggleOrbits = function() {
showOrbits = !showOrbits;
// iterate through spacecrafts and hide path
for (let i = 0; i < spacecrafts.length; i++) {
let entity = spacecrafts[i];
entity.path.show = showOrbits;
}
toggleOrbitsBtn.innerHTML = getshowHideBtnHtml(!showOrbits, 'Orbits', 'toggleOrbits');
}
let showNames = true;
let toggleNamesBtn = document.createElement('span');
toggleNamesBtn.innerHTML = getshowHideBtnHtml(!showNames, 'Names', 'toggleNames');
parent.insertBefore(toggleNamesBtn, parent.children[1]);
toggleNames = function() {
showNames = !showNames;
// iterate through spacecrafts and hide label
for (let i = 0; i < spacecrafts.length; i++) {
let entity = spacecrafts[i];
entity.label.show = showNames;
}
toggleNamesBtn.innerHTML = getshowHideBtnHtml(!showNames, 'Names', 'toggleNames');
}
// load default layer picker
let baseLayerPickerViewModel = cesiumViewer.baseLayerPicker.viewModel;
// rarrange models (in picker)
let arrModels = baseLayerPickerViewModel.imageryProviderViewModels.slice();
let defaultModel = arrModels[6]; // ERSI world imagery
arrModels.splice(3,4) // remove mapbox models
arrModels.splice(0,0,defaultModel); // move defaultmodel to first one
arrModels = arrModels.filter((model) => model.category == "Other"); // filter out cesium ion
baseLayerPickerViewModel.imageryProviderViewModels = arrModels;
// set default model
baseLayerPickerViewModel.selectedImagery = defaultModel;
// global hander for load promise
spacecrafts = [];
czmlLoadPromise = function(url) {
let promise = cesiumViewer.dataSources.add(Cesium.CzmlDataSource.load(url));
promise.then(function(dataSource) {
spacecrafts = dataSource.entities.values;
for (let i = 0; i < spacecrafts.length; i++) {
let entity = spacecrafts[i];
entity.description = new Cesium.CallbackProperty(updateDescription.bind(undefined, entity), false);
}
})
}
// execute and load data
czmlLoadPromise('https://confluence.jaytaala.com/tle2czml');
cesiumViewer.camera.flyHome(0);
// update description to show when clicking on satellite.
function updateDescription(entity) {
try {
// Compute latitude, longitude (degrees) and altitude
let cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(cesiumViewer.clock.currentTime));
let latitude = Cesium.Math.toDegrees(cartographicPosition.latitude).toFixed(1);
let longitude = Cesium.Math.toDegrees(cartographicPosition.longitude).toFixed(1);
let altitude = (cartographicPosition.height / 1000).toFixed(1);
// Modify description
let description = '<table class="cesium-infoBox-defaultTable"><tbody>';
description += '<tr><th>' + "Latitude" + '</th><td>' + latitude + '\xB0</td></tr>';
description += '<tr><th>' + "Longitude" + '</th><td>' + longitude + '\xB0</td></tr>';
description += '<tr><th>' + "Altitude" + '</th><td>' + altitude + ' km</td></tr>';
description += '</tbody></table>';
return description;
} catch(err) {
return "";
}
}
</script> | 