1. CZML
CZML是一种用来描述动态场景的JSON架构的语言，主要用于Cesium在浏览器中的展示。它可以用来描述点、线、布告板、模型以及其他的图元，同时定义他们是怎样随时间变化的。
- CZML 是基于JSON的。
- CZML可以准确的描述值随时间变化的属性。
- CZML通过增量流的方式传送到客户端。
文件结构：
[{id: "document",name: "box",version: "1.0",},{id: "shape1",name: "Blue box",position: {cartographicDegrees: [-114.0, 40.0, 300000.0],},box: {dimensions: {cartesian: [400000.0, 300000.0, 500000.0],},material: {solidColor: {color: {rgba: [0, 0, 255, 255],},},},},},]
2. 加载czml
let czmlUrl = "./Assets/box.czml";// 加载czml数据let promiseData = Cesium.CzmlDataSource.load(czmlUrl);promiseData.then((dataSource) => {console.log(dataSource);viewer.dataSources.add(dataSource);viewer.flyTo(dataSource);});
3. 模拟飞机跨洋飞行
需要先导入模拟路径的JSON文件
import planeData from "@/assets/json/plane.json";
具体脚本
const positionProperty = new Cesium.SampledPositionProperty();// 时间间隔 30秒const timeStepInSeconds = 30;// 整个飞行花费的时间const totalSeconds = (planeData.length - 1) * timeStepInSeconds;// 设置起点时间const time = new Date("2023-10-17T18:37:00Z");// cesium，默认使用的是儒略日的时间// 所以需要起点时间转换成儒略日的时间const startJulianDate = Cesium.JulianDate.fromDate(time);// 设置终点时间const stopJulianDate = Cesium.JulianDate.addSeconds(startJulianDate,totalSeconds,new Cesium.JulianDate());// 将查看器的时间调整到起点和结束点的范围viewer.clock.startTime = startJulianDate.clone();viewer.clock.stopTime = stopJulianDate.clone();viewer.clock.currentTime = startJulianDate.clone();viewer.timeline.zoomTo(startJulianDate, stopJulianDate);planeData.forEach((dataPoint, i) => {// 当前点的时间const time = Cesium.JulianDate.addSeconds(startJulianDate,i * timeStepInSeconds,new Cesium.JulianDate());// 设置当前点的位置const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude,dataPoint.latitude,dataPoint.height);// 添加轨迹采样点positionProperty.addSample(time, position);// 添加点viewer.entities.add({position: position,point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,},});});// 创建飞机const planeEntity = viewer.entities.add({availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({start: startJulianDate,stop: stopJulianDate,}),]),name: "飞机",// 设置飞机的可用position: positionProperty,// VelocityOrientationProperty会自动根据采样点，计算出飞机的速度和方向orientation: new Cesium.VelocityOrientationProperty(positionProperty),model: {uri: "./model/Air.glb",// minimumPixelSize: 128,// maximumScale: 20000,},// 绘制轨迹线path: new Cesium.PathGraphics({width: 5,}),});// 相机追踪运动的问题viewer.trackedEntity = planeEntity;// 设置时间速率viewer.clock.multiplier = 60;
效果展示
