Cesium 一个时间轴绑定多个模型

 let data = [];

        data[0] = [{

            longitude: 116.405419,

            latitude: 39.918034,

            height: 0,

            time: 0

        }, {

            longitude: 116.405419,

            latitude: 39.918034,

            height: 0,

            time: 40

        }, {

            longitude: 116.2821,

            latitude: 39.918145,

            height: 0,

            time: 70

        }, {

            longitude: 115.497402,

            latitude: 39.344641,

            height: 70000,

            time: 100

        }, {

            longitude: 107.942392,

            latitude: 29.559967,

            height: 70000,

            time: 280

        }, {

            longitude: 106.549265,

            latitude: 29.559967,

            height: 0,

            time: 360

        }];

        data[1] = [{

            longitude: 115.497402,

            latitude: 39.918034,

            height: 0,

            time: 0

        }, {

            longitude: 115.497402,

            latitude: 39.918034,

            height: 0,

            time: 100

        }, {

            longitude: 115.497402,

            latitude: 39.918034,

            height: 10,

            time: 120

        }, {

            longitude: 117.034586,

            latitude: 39.881202,

            height: 0,

            time: 140

        }, {

            longitude: 116.340088,

            latitude: 38.842224,

            height: 70000,

            time: 200

        }, {

            longitude: 113.489176,

            latitude: 23.464017,

            height: 70000,

            time: 280

        }, {

            longitude: 113.262084,

            latitude: 23.13901,

            height: 0,

            time: 360

        }];

        data[2] = [{

            longitude: 118.838979,

            latitude: 32.073514,

            height: 0,

            time: 0

        }, {

            longitude: 118.838979,

            latitude: 32.073514,

            height: 0,

            time: 20

        }, {

            longitude: 118.838979,

            latitude: 32.073514,

            height: 0,

            time: 200

        }, {

            longitude: 118.438838,

            latitude: 32.03777,

            height: 0,

            time: 240

        }, {

            longitude: 117.802406,

            latitude: 31.91231,

            height: 70000,

            time: 280

        }, {

            longitude: 104.043645,

            latitude: 35.993845,

            height: 70000,

            time: 300

        }, {

            longitude: 101.807224,

            latitude: 36.660972,

            height: 0,

            time: 320

        }];


 

        for (let i = 0; i < data.length; i++) {

            let property = cm.computeFlight(data[i]);

            var pos = { longitude: data[i][0].longitude, latitude: data[i][0].latitude, height: data[i][0].height }

            let planeModel = cm.CreateSingleModel(pos, "model" + i, '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb', 64);

            planeModel.position = property;

            planeModel.orientation = new Cesium.VelocityOrientationProperty(property);

        }

 //创建model

        this.CreateSingleModel = function (position, id, modelurl, minimumPixelSize) {

            let mode = this.viewer.entities.add({

                position: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.height),

                id: id,

                model: {

                    uri: modelurl,

                    minimumPixelSize: minimumPixelSize,

                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000000),

                },

                availability:new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({

                    start: viewer.clock.startTime,

                    stop: viewer.clock.stopTime

                })]),

                path: {

                    leadTime: 0,

                    trailTime: 360,

                    resolution: 1,

                    material: new Cesium.PolylineGlowMaterialProperty({

                        glowPower: 1,

                        color: Cesium.Color.YELLOW,

                    }),

                    width: 1,

                    show: true

                },

            })

            //console.log("点:", point.label);

            return mode;

        }

        //计算飞行

        //@param source 数据坐标

        //@returns {SampledPositionProperty}

        this.computeFlight= function (source) {

            // 取样位置 相当于一个集合

            let property = new Cesium.SampledPositionProperty();

            for (let i = 0; i < source.length; i++) {

                let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate());

                let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].latitude, source[i].height);

                // 添加位置,和时间对应

                property.addSample(time, position);

            }

            return property;

        }

        //清除单个模型

        this.ClearModel = function (mode) {

            this.viewer.entities.remove(mode);//清除所有

            //var de = viewer.entities.getById("point001");

            //viewer.entities.remove(de);

        }

在Vue2中使用Cesium库创建雷达扫描效果,首先需要确保已安装了Cesium库及其Vue相关的插件,例如`@czml.vuejs/adapter-vue`。以下是步骤概述: 1. **安装依赖**: - 安装Cesium库:`npm install cesium @czml.vuejs/adapter-vue` - 如果还需要Vue CLI项目模板,可以加上`@vue/cli-plugin-czml` 2. **设置环境**: - 在`main.js`中引入并配置Cesium Vue插件: ```javascript import { CesiumApp } from '@czml.vuejs/adapter-vue' Vue.use(CesiumApp) ``` 3. **创建组件**: 创建一个新的Vue组件,比如`RadarScanner.vue`,然后在其中编写HTML部分展示Cesium视图: ```html <template> <div id="cesiumContainer"> <cesium-view :czml="czmlData" ref="cesiumView"></cesium-view> </div> </template> ``` 4. **数据绑定**: 在`script`标签中,定义雷达扫描的数据模型`czmlData`,它可以包含CZML(ColladaZip Markup Language)文件,描述地球、轨道等元素,并添加雷达扫描数据: ```javascript export default { data() { return { czmlData: `<czml ... radar-scanning-data ... />` } }, // 更多的生命周期钩子和事件处理... } ``` 5. **雷达扫描逻辑**: - 可能需要用到Cesium的`PolylineGraphics`或者`Path`来绘制雷达扫描线,结合`TimeIntervalCollection`更新时间间隔内的数据。 - 要考虑如何控制扫描的速度、方向和范围。 ```javascript export default { // 添加一个方法来更新雷达扫描数据 methods: { updateRadarScan(newData) { this.czmlData = `<czml ... updated-radar-scanning-data="${newData}" />`; // 触发视图的更新 this.$refs.cesiumView.update(); } } } ``` 6. **触发雷达扫描**: 在Vue实例中或者外部通过调用`updateRadarScan`方法,传递新的雷达扫描数据来动态改变显示效果。 注意:这只是一个基础示例,实际应用中可能需要处理更复杂的场景,如用户交互、实时数据流等。此外,详细CZML语法和雷达扫描的实现取决于你的具体需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值