<!DOCTYPE html><htmllang="en"><head><scriptsrc="https://cesiumjs.org/releases/1.75/Build/Cesium/Cesium.js"></script><linkhref="https://cesiumjs.org/releases/1.75/Build/Cesium/Widgets/widgets.css"rel="stylesheet"><linkhref="style.css"rel="stylesheet"></head><body><divid="cesiumContainer"></div><script>// Get your token from https://cesium.com/ion/tokens
Cesium.Ion.defaultAccessToken ='your_token_here';// STEP 4 CODE (replaces steps 2 and 3)// Keep your `Cesium.Ion.defaultAccessToken = 'your_token_here'` line from before here. const viewer =newCesium.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},//............................//此处省略多行坐标信息代码);/* 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");//结束时间=开始时间加上总时间,返回一个新的JulianDate对象:const stop = Cesium.JulianDate.addSeconds(start, totalSeconds,newCesium.JulianDate());
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.timeline.zoomTo(start, stop);//viewer.zoomTo(target, offset):异步设置摄像机来查看实体,此处是timeline.zoomTo,不知道有何区别// Speed up the playback speed 50x.
viewer.clock.multiplier =50;// Start playing the scene.
viewer.clock.shouldAnimate =true;//开始tick。The clock will only tick when both Clock.canAnimate and Clock.shouldAnimate are true. Clock.canAnimate 默认为true// The SampledPositionedProperty stores the position and timestamp for each sample along the radar sample series.const positionProperty =newCesium.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,newCesium.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)asyncfunctionloadModel(){// Load the glTF model from Cesium ion.const airplaneUri =await Cesium.IonResource.fromAssetId(your_asset_id);//封装资源const airplaneEntity = viewer.entities.add({//viewer.entities: Gets the collection of entities not tied to a particular data source.
availability:newCesium.TimeIntervalCollection([newCesium.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:newCesium.VelocityOrientationProperty(positionProperty),
path:newCesium.PathGraphics({ width:3})});
viewer.trackedEntity = airplaneEntity;}loadModel();</script></body></html>
Cesium.IonResource(endpoint, endpointResource):A Resource instance that encapsulates(封装) Cesium ion asset access. This object is normally not instantiated(实例化) directly.
viewer.entities:Gets the collection of entities not tied to(绑定) a particular data source.
new Cesium.TimeIntervalCollection(intervals):A non-overlapping collection of TimeInterval instances sorted by start time.
new Cesium.VelocityOrientationProperty(position, ellipsoid): A Property which evaluates to a Quaternion(四元数) rotation(旋转) based on the velocity of the provided PositionProperty.
new Cesium.PathGraphics(options): Describes a polyline(多段线) defined as the path made by an Entity as it moves over time.