记录--Cesium封装轨道轨迹运行的类

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

根据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; }

}

本文转载于：

https://juejin.cn/post/7037104897539440670

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。