110 lines
42 KiB
HTML
110 lines
42 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<script src="https://cesium.com/downloads/cesiumjs/releases/1.90/Build/Cesium/Cesium.js"></script>
|
||
|
|
|
||
|
|
<link
|
||
|
|
href="https://cesium.com/downloads/cesiumjs/releases/1.90/Build/Cesium/Widgets/widgets.css"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
<link href="style.css" rel="stylesheet" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="cesiumContainer"></div>
|
||
|
|
<script>
|
||
|
|
// Your access token can be found at: https://cesium.com/ion/tokens.
|
||
|
|
// This is the default access token from your ion account
|
||
|
|
|
||
|
|
Cesium.Ion.defaultAccessToken =
|
||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjI2ZjVjMS0zZTFjLTQ3MDAtYTZlZC02YWFjOWQwNzBjNjIiLCJpZCI6ODM1NTQsImlhdCI6MTY0NTY1NzYzM30.IPqS_sM-s_vzNnK0EAiTy6kpYP5RBYkuMgbqJtKQkPw";
|
||
|
|
|
||
|
|
// STEP 4 CODE (replaces steps 2 and 3)
|
||
|
|
// Keep your `Cesium.Ion.defaultAccessToken = 'your_token_here'` line from before here.
|
||
|
|
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||
|
|
terrainProvider: Cesium.createWorldTerrain(),
|
||
|
|
});
|
||
|
|
const osmBuildings = viewer.scene.primitives.add(
|
||
|
|
Cesium.createOsmBuildings()
|
||
|
|
);
|
||
|
|
|
||
|
|
const flightData = JSON.parse(
|
||
|
|
'[{"longitude":-122.39053,"latitude":37.61779,"height":-27.32},{"longitude":-122.39035,"latitude":37.61803,"height":-27.32},{"longitude":-122.39019,"latitude":37.61826,"height":-27.32},{"longitude":-122.39006,"latitude":37.6185,"height":-27.32},{"longitude":-122.38985,"latitude":37.61864,"height":-27.32},{"longitude":-122.39005,"latitude":37.61874,"height":-27.32},{"longitude":-122.39027,"latitude":37.61884,"height":-27.32},{"longitude":-122.39057,"latitude":37.61898,"height":-27.32},{"longitude":-122.39091,"latitude":37.61912,"height":-27.32},{"longitude":-122.39121,"latitude":37.61926,"height":-27.32},{"longitude":-122.39153,"latitude":37.61937,"height":-27.32},{"longitude":-122.39175,"latitude":37.61948,"height":-27.32},{"longitude":-122.39207,"latitude":37.6196,"height":-27.32},{"longitude":-122.39247,"latitude":37.61983,"height":-27.32},{"longitude":-122.39253,"latitude":37.62005,"height":-27.32},{"longitude":-122.39226,"latitude":37.62048,"height":-27.32},{"longitude":-122.39207,"latitude":37.62075,"height":-27.32},{"longitude":-122.39186,"latitude":37.62106,"height":-27.32},{"longitude":-122.39172,"latitude":37.62127,"height":-27.32},{"longitude":-122.39141,"latitude":37.62174,"height":-27.32},{"longitude":-122.39097,"latitude":37.62227,"height":-27.32},{"longitude":-122.39061,"latitude":37.6224,"height":-27.31},{"longitude":-122.39027,"latitude":37.62249,"height":-27.31},{"longitude":-122.38993,"latitude":37.62256,"height":-27.31},{"longitude":-122.3895,"latitude":37.62267,"height":-27.31},{"longitude":-122.3889,"latitude":37.62256,"height":-27.31},{"longitude":-122.38854,"latitude":37.62242,"height":-27.31},{"longitude":-122.38814,"latitude":37.62225,"height":-27.31},{"longitude":-122.38778,"latitude":37.62209,"height":-27.31},{"longitude":-122.38744,"latitude":37.62195,"height":-27.31},{"longitude":-122.38671,"latitude":37.62164,"height":-27.31},{"longitude":-122.38638,"latitude":37.62151,"height":-27.31},{"longitude":-122.38604,"latitude":37.62136,"height":-27.31},{"longitude":-122.38571,"latitude":37.62123,"height":-27.31},{"longitude":-122.38512,"latitude":37.62098,"height":-27.31},{"longitude":-122.3848,"latitude":37.62084,"height":-27.31},{"longitude":-122.38453,"latitude":37.62074,"height":-27.31},{"longitude":-122.38425,"latitude":37.62062,"height":-27.3},{"longitude":-122.38397,"latitude":37.62049,"height":-27.3},{"longitude":-122.38372,"latitude":37.62039,"height":-27.3},{"longitude":-122.3835,"latitude":37.6203,"height":-27.3},{"longitude":-122.38324,"latitude":37.62019,"height":-27.3},{"longitude":-122.38271,"latitude":37.61996,"height":-27.3},{"longitude":-122.38248,"latitude":37.61986,"height":-27.3},{"longitude":-122.38191,"latitude":37.61962,"height":-27.3},{"longitude":-122.38159,"latitude":37.6195,"height":-27.3},{"longitude":-122.38126,"latitude":37.61935,"height":-27.3},{"longitude":-122.38058,"latitude":37.61906,"height":-27.3},{"longitude":-122.38026,"latitude":37.61894,"height":-27.3},{"longitude":-122.37955,"latitude":37.61863,"height":-27.3},{"longitude":-122.37913,"latitude":37.61847,"height":-27.3},{"longitude":-122.3781,"latitude":37.61813,"height":-27.3},{"longitude":-122.37763,"latitude":37.61799,"height":-27.29},{"longitude":-122.37663,"latitude":37.61768,"height":-27.29},{"longitude":-122.37617,"latitude":37.61753,"height":-27.29},{"longitude":-122.37561,"latitude":37.61736,"height":-27.29},{"longitude":-122.37532,"latitude":37.61727,"height":-27.29},{"longitude":-122.37506,"latitude":37.61718,"height":-27.29},{"longitude":-122.37468,"latitude":37.61704,"height":-27.29},{"longitude":-122.37436,"latitude":37.61689,"height":-27.29},{"longitude":-122.37402,"latitude":37.61674,"height":-27.29},{"longitude":-122.37362,"latitude":37.61657,"height":-27.29},{"longitude":-122.3732,"latitude":37.6164,"height":-27.29},{"longitude":-122.37235,"latitude":37.61604,"height":-27.29},{"longitude":-122.37198,"latitude":37.61588,"height":-27.29},{"longitude":-122.3716,"latitude":37.61573,"height":-27.28},{"longitude":-122.3712,"latitude":37.61555,"height":-27.28},{"longitude":-122.37032,"la
|
||
|
|
);
|
||
|
|
|
||
|
|
/* Initialize the viewer clock:
|
||
|
|
Assume the radar samples are 30 seconds apart, and calculate the entire flight duration based on that assumption.
|
||
|
|
Get the start and stop date times of the flight, where the start is the known flight departure time (converted from PST
|
||
|
|
to UTC) and the stop is the start plus the calculated duration. (Note that Cesium uses Julian dates. See
|
||
|
|
https://simple.wikipedia.org/wiki/Julian_day.)
|
||
|
|
Initialize the viewer's clock by setting its start and stop to the flight start and stop times we just calculated.
|
||
|
|
Also, set the viewer's current time to the start time and take the user to that time.
|
||
|
|
*/
|
||
|
|
const timeStepInSeconds = 30;
|
||
|
|
const totalSeconds = timeStepInSeconds * (flightData.length - 1);
|
||
|
|
const start = Cesium.JulianDate.fromIso8601("2020-03-09T23:10:00Z");
|
||
|
|
const stop = Cesium.JulianDate.addSeconds(
|
||
|
|
start,
|
||
|
|
totalSeconds,
|
||
|
|
new Cesium.JulianDate()
|
||
|
|
);
|
||
|
|
viewer.clock.startTime = start.clone();
|
||
|
|
viewer.clock.stopTime = stop.clone();
|
||
|
|
viewer.clock.currentTime = start.clone();
|
||
|
|
viewer.timeline.zoomTo(start, stop);
|
||
|
|
// Speed up the playback speed 50x.
|
||
|
|
viewer.clock.multiplier = 50;
|
||
|
|
// Start playing the scene.
|
||
|
|
viewer.clock.shouldAnimate = true;
|
||
|
|
|
||
|
|
// The SampledPositionedProperty stores the position and timestamp for each sample along the radar sample series.
|
||
|
|
const positionProperty = new Cesium.SampledPositionProperty();
|
||
|
|
|
||
|
|
for (let i = 0; i < flightData.length; i++) {
|
||
|
|
const dataPoint = flightData[i];
|
||
|
|
|
||
|
|
// Declare the time for this individual sample and store it in a new JulianDate instance.
|
||
|
|
const time = Cesium.JulianDate.addSeconds(
|
||
|
|
start,
|
||
|
|
i * timeStepInSeconds,
|
||
|
|
new Cesium.JulianDate()
|
||
|
|
);
|
||
|
|
const position = Cesium.Cartesian3.fromDegrees(
|
||
|
|
dataPoint.longitude,
|
||
|
|
dataPoint.latitude,
|
||
|
|
dataPoint.height
|
||
|
|
);
|
||
|
|
// Store the position along with its timestamp.
|
||
|
|
// Here we add the positions all upfront, but these can be added at run-time as samples are received from a server.
|
||
|
|
positionProperty.addSample(time, position);
|
||
|
|
|
||
|
|
viewer.entities.add({
|
||
|
|
description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
|
||
|
|
position: position,
|
||
|
|
point: { pixelSize: 10, color: Cesium.Color.RED },
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// STEP 6 CODE (airplane entity)
|
||
|
|
async function loadModel() {
|
||
|
|
// Load the glTF model from Cesium ion.
|
||
|
|
const airplaneUri = await Cesium.IonResource.fromAssetId(your_asset_id);
|
||
|
|
const airplaneEntity = viewer.entities.add({
|
||
|
|
availability: new Cesium.TimeIntervalCollection([
|
||
|
|
new Cesium.TimeInterval({ start: start, stop: stop }),
|
||
|
|
]),
|
||
|
|
position: positionProperty,
|
||
|
|
// Attach the 3D model instead of the green point.
|
||
|
|
model: { uri: airplaneUri },
|
||
|
|
// Automatically compute the orientation from the position.
|
||
|
|
orientation: new Cesium.VelocityOrientationProperty(positionProperty),
|
||
|
|
path: new Cesium.PathGraphics({ width: 3 }),
|
||
|
|
});
|
||
|
|
|
||
|
|
viewer.trackedEntity = airplaneEntity;
|
||
|
|
}
|
||
|
|
|
||
|
|
loadModel();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|