添加效果图
一、添加航线
const polylineEntity = this.viewer.entities.add({ polyline: { positions: points, // 线的坐标数组 width: 2 // 线的宽度 } }); this.lineEntities.push(polylineEntity);
二、添加模型
this.viewer.entities.add({ id: 'drone', name: "Cesium_Air", position: positionProperty, model: { uri: "/test/Cesium_Air.glb", minimumPixelSize: 60, maximumScale: 100 }, orientation: new Cesium.VelocityOrientationProperty(positionProperty) // 设置方向与采样属性一致 });
我使用的是官网下载的模型,附上下载模型网址
https://sandcastle.cesium.com/SampleData/models/CesiumAir/Cesium_Air.glb
如果想下载其他模型,换模型名称即可。
三、完整代码
drawLine(points) { // 删除现有模型 this.viewer.entities.removeById('drone') const polylineEntity = this.viewer.entities.add({ polyline: { positions: points, // 线的坐标数组 width: 2 // 线的宽度 } }); this.lineEntities.push(polylineEntity); // 创建一个SampledPositionProperty对象来处理动画 const positionProperty = new Cesium.SampledPositionProperty(); const startTime = Cesium.JulianDate.now(); points.forEach((position, index) => { const time = Cesium.JulianDate.addSeconds(startTime, index * 5, new Cesium.JulianDate()); // 处理动画时间 positionProperty.addSample(time, position); }); // 创建模型实体 this.viewer.entities.add({ id: 'drone', name: "Cesium_Air", position: positionProperty, model: { uri: "/test/Cesium_Air.glb", minimumPixelSize: 60, maximumScale: 100 }, orientation: new Cesium.VelocityOrientationProperty(positionProperty) // 设置方向与采样属性一致 }); // 设置动画时间 this.viewer.clock.startTime = startTime; this.viewer.clock.currentTime = startTime; this.viewer.clock.stopTime = Cesium.JulianDate.addSeconds(startTime, points.length * 3.5, new Cesium.JulianDate()); this.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; this.viewer.clock.multiplier = 2; // 可以调整速度 this.viewer.clock.shouldAnimate = true; // 设置视角 this.viewer.zoomTo(this.viewer.entities); return polylineEntity; }
this.viewer.entities.removeById('drone')这行代码作用是在画新的航线时,将之前画的航线上的模型去除,只在当前航线展示模型。this.viewer.clock.shouldAnimate = true;可以使动画自动播放。orientation: new Cesium.VelocityOrientationProperty(positionProperty)这行代码可以使得模型沿着航线的方向,效果非常好。