欢迎转载,转载需带着文章出处链接~~,希望我的经验能帮到你,有问题可以点我头像加我微信
本文章仅对遇到的问题提供一个解决思路,对于迫切想要实现功能效果的人来说,希望能稍微沉下心观看,或者直接观看思路部分,或者直接观看完整代码
本文章的代码并不能直接拿来使用,完整代码只是本篇文章解决的问题需要用到的代码,如果直接使用可能会有报错,只要修改一下代码既可使用~~~
根据Cesium封装了一个轨道轨迹运行的类
该方法可以生成一条运行轨迹,默认轨迹运行过的为红色,轨迹即将运行的为绿色
效果图如下
代码如下
/**
* Cesium封装插件
* 创建轨道坐标因为轨道创建需要线段表示
* 轨道坐标请使用数组格式的Cartesian3存放,如下所示
* pos.push(new Cesium.Cartesian3.fromDegrees(0, 0, 4000000))
* 配置项配置如下:
{
viewer: cesium的viewer,
lineWidth: 线宽,
postype: 坐标点类型,默认可以不传,
out: { 轨道行驶完毕配置项
name: 名称,
positions: 坐标点,
color: 颜色 Cesium.Color.GREEN || new Cesium.Color(0,255,0,1),
},
in: { 轨道即将行驶配置项
同上...
}
}
*/
class GuiDao {
constructor(args) {
this.viewer = args.viewer; // cesium的viewer
this.lineWidth = args.lineWidth || 5; // 轨道线宽
this.optionOut = args.out; // 轨道行驶完毕配置项
this.optionIn = args.in; // 轨道即将行驶配置项
this.postype = args.postype; // 判断传入轨道坐标点的类型
// 轨道行驶完毕坐标点传数组类型
if (this.postype == "array") {
let pos = this.optionOut.positions.slice();
this.guidaoOut = [];
for (let i = 0; i < pos.length; i++) {
this.guidaoOut.push(new Cesium.Cartesian3.fromDegrees(pos[i][0], pos[i][1], pos[i][2]));
}
}else{
this.guidaoOut = this.optionOut.positions.slice() || []; // 轨道行驶完毕坐标点,默认为空
}
// 轨道即将行驶坐标点传数组类型
if (this.postype == "array") {
let pos = this.optionIn.positions.slice();
this.guidaoIn = [];
for (let i = 0; i < pos.length; i++) {
this.guidaoIn.push(new Cesium.Cartesian3.fromDegrees(pos[i][0], pos[i][1], pos[i][2]));
}
}else{
this.guidaoIn = this.optionIn.positions.slice() || []; // 轨道即将行驶坐标点,默认为空
}
this.entityOut = null; // 轨道行驶完毕的entity
this.entityIn = null; // 轨道即将行驶的entity
this.guidaoInterval = null; // 测试用来存放定时器的,可以删除
this.init(); // 初始化,注释掉使用test方法可以测试
}
// 测试方法
test() {
let ci = 0;
for (var i = 0; i < 2; i++) {
this.guidaoOut.push(new Cesium.Cartesian3.fromDegrees(ci, 0, 4000000))
ci += 0.01
}
for (var i = 0; i < 100; i++) {
this.guidaoIn.push(new Cesium.Cartesian3.fromDegrees(ci, 0, 4000000))
ci += 0.01
}
this.init();
this.guidaoInterval = setInterval(() => {
this.next();
}, 33)
}
// 初始化轨道
init() {
// 判断,当轨道行驶完毕的坐标点大于2个,新增
if (this.guidaoOut.length >= 2) {
this.entityOut = this.createGuiDaoOut();
}
// 轨道即将行驶,新增
this.entityIn = this.createGuiDaoIn();
}
// 进入下一个轨道点
next() {
// 当轨道的即将行驶点为空时,直接返回
if (!this.guidaoIn.length) return;
// 将一个点从即将行驶的点移入行驶完毕的点
this.guidaoOut.push(this.guidaoIn.shift());
// 判断,当轨道行驶完毕的坐标点等于2个,新增
if (this.guidaoOut.length == 2) {
this.entityOut = this.createGuiDaoOut();
}
// 判断,当轨道即将行驶的坐标点小于2个,删除
if (this.guidaoIn.length < 2) {
this.viewer.entities.remove(this.entityIn)
}
}
// 重置
reset(args) {
this.destroy();
this.viewer = args.viewer; // cesium的viewer
this.lineWidth = args.lineWidth || 5; // 轨道线宽
this.optionOut = args.out; // 轨道行驶完毕配置项
this.optionIn = args.in; // 轨道即将行驶配置项
this.guidaoOut = this.optionOut.positions || []; // 轨道行驶完毕坐标点,默认为空
this.guidaoIn = this.optionIn.positions || []; // 轨道即将行驶坐标点,默认为空
this.entityOut = null; // 轨道行驶完毕的entity
this.entityIn = null; // 轨道即将行驶的entity
this.guidaoInterval = null;
this.init(); // 初始化,注释掉使用test方法可以测试
}
// 销毁
destroy() {
// 测试用的,不测试的话,这条可以删除
if (this.guidaoInterval) {
clearInterval(this.guidaoInterval);
this.guidaoInterval = null;
}
// 移除entity,重新添加
this.viewer.entities.remove(this.entityOut)
this.viewer.entities.remove(this.entityIn)
}
// 创建行驶完毕的轨道
createGuiDaoOut() {
return this.viewer.entities.add({
name: this.optionOut.name || "轨道线-行驶完毕",
polyline: {
positions: new Cesium.CallbackProperty(() => { return this.getOutPos(); }, false),
material: this.optionOut.color || new Cesium.Color(1, 0, 0, 1),
width: this.lineWidth,
},
});
}
// 创建即将行驶的轨道
createGuiDaoIn() {
return this.viewer.entities.add({
name: this.optionIn.name || "轨道线-即将行驶",
polyline: {
positions: new Cesium.CallbackProperty(() => { return this.getInPos(); }, false),
material: this.optionIn.color || new Cesium.Color(0, 1, 0, 1),
width: this.lineWidth,
},
});
}
// 获取行驶完毕的轨道,回调函数
getOutPos() { return this.guidaoOut; }
// 获取即将行驶的轨道,回调函数
getInPos() { return this.guidaoIn; }
// 获取行驶完毕的轨道,回调函数
setOutPos(pos) { this.guidaoOut = pos; }
// 获取即将行驶的轨道,回调函数
setInPos(pos) { this.guidaoIn = pos; }
// 获取行驶完毕的轨道entity
getOutEntity() { return this.entityOut; }
// 获取即将行驶的轨道entity
getInEntity() { return this.entityIn; }
}