Cesium开发实践（二）模拟多架飞机飞行

最新推荐文章于 2024-03-05 15:55:29 发布
最新推荐文章于 2024-03-05 15:55:29 发布
阅读量9.9k 收藏 33
点赞数 4
分类专栏： GIS三维 文章标签： cesiumjs开发实践
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hobhunter/article/details/74987709
版权

今天在看官网Demo的时候，看到一个关于时间轴的例子，正巧之前一直想做一个飞机飞行的例子，正愁不知道弄，现在有思路，赶紧乘热打铁。

先看下实现的效果图:

这里写图片描述

虽然有点瑕疵，但是效果还是可以的。核心就是利用之前说的时间轴来实现，理解掌握这个后就好办了。

初始化

<body>
    <div id="cesiumDemo"></div>
    <script type="text/javascript">
        let view = new Cesium.Viewer('cesiumDemo', {
            baseLayerPicker: false,
            imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
            }),
            // 阴影是否被太阳投射
            shadows: true
        });
        // 启用地球照明
        view.scene.globe.enableLighting = true;
        // 数据
        let data = [];

        data[0] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:116.2821, dimension:39.918145, height:0, time:40},{longitude:115.497402, dimension:39.344641, height:70000, time:100},{longitude:107.942392, dimension:29.559967, height:70000, time:280}, {longitude:106.549265, dimension:29.559967, height:0, time:360}];

        data[1] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:117.034586, dimension:39.881202, height:0, time:40},{longitude:116.340088, dimension:38.842224, height:70000, time:100},{longitude:113.489176, dimension:23.464017, height:70000, time:280}, {longitude:113.262084, dimension:23.13901, height:0, time:360}];

        data[2] = [{longitude:118.838979, dimension:32.073514, height:0, time:0},{longitude:118.438838, dimension:32.03777, height:0, time:40},{longitude:117.802406, dimension:31.91231, height:70000, time:100},{longitude:104.043645, dimension:35.993845, height:70000, time:280}, {longitude:101.807224, dimension:36.660972, height:0, time:360}];
   </script>
</body>

因为没有真实数据，就用假的来代替了，坐标点是从百度地图上拾取的。

设置时间轴时间

        // 起始时间
        let start = Cesium.JulianDate.fromDate(new Date(2017,7,11));
        // 结束时间
        let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

        // 设置始时钟始时间
        view.clock.startTime = start.clone();
        // 设置时钟当前时间
        view.clock.currentTime = start.clone();
        // 设置始终停止时间
        view.clock.stopTime  = stop.clone();
        // 时间速率，数字越大时间过的越快
        view.clock.multiplier = 10;
        // 时间轴
        view.timeline.zoomTo(start,stop);
        // 循环执行
        view.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

添加坐标到时间轴

        /**
         * 计算飞行
         * @param source 数据坐标
         * @returns {SampledPositionProperty|*}
         */
        function computeFlight(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].dimension, source[i].height);
                // 添加位置，和时间对应
                property.addSample(time, position);
            }
            return property;
        }

添加模型

        for(let j=0; j<data.length; j++){
            let property = computeFlight(data[j]);
            // 添加模型
            let planeModel = view.entities.add({
                // 和时间轴关联
                availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                    start : start,
                    stop : stop
                })]),
                position: property,
                // 根据所提供的速度计算点
                orientation: new Cesium.VelocityOrientationProperty(property),
                // 模型数据
                model: {
                    uri: '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
                    minimumPixelSize:128
                }
            });
        }

完整代码

<body>
    <div id="cesiumDemo"></div>
    <script type="text/javascript">
        let view = new Cesium.Viewer('cesiumDemo', {
            baseLayerPicker: false,
            imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
            }),
            // 阴影是否被太阳投射
            shadows: true
        });
        // 启用地球照明
        view.scene.globe.enableLighting = true;

        let data = [];

        data[0] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:116.2821, dimension:39.918145, height:0, time:40},{longitude:115.497402, dimension:39.344641, height:70000, time:100},{longitude:107.942392, dimension:29.559967, height:70000, time:280}, {longitude:106.549265, dimension:29.559967, height:0, time:360}];

        data[1] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:117.034586, dimension:39.881202, height:0, time:40},{longitude:116.340088, dimension:38.842224, height:70000, time:100},{longitude:113.489176, dimension:23.464017, height:70000, time:280}, {longitude:113.262084, dimension:23.13901, height:0, time:360}];

        data[2] = [{longitude:118.838979, dimension:32.073514, height:0, time:0},{longitude:118.438838, dimension:32.03777, height:0, time:40},{longitude:117.802406, dimension:31.91231, height:70000, time:100},{longitude:104.043645, dimension:35.993845, height:70000, time:280}, {longitude:101.807224, dimension:36.660972, height:0, time:360}];

        // 起始时间
        let start = Cesium.JulianDate.fromDate(new Date(2017,7,11));
        // 结束时间
        let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

        // 设置始时钟始时间
        view.clock.startTime = start.clone();
        // 设置时钟当前时间
        view.clock.currentTime = start.clone();
        // 设置始终停止时间
        view.clock.stopTime  = stop.clone();
        // 时间速率，数字越大时间过的越快
        view.clock.multiplier = 10;
        // 时间轴
        view.timeline.zoomTo(start,stop);
        // 循环执行
        view.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

        for(let j=0; j<data.length; j++){
            let property = computeFlight(data[j]);
            // 添加模型
            let planeModel = view.entities.add({
                // 和时间轴关联
                availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                    start : start,
                    stop : stop
                })]),
                position: property,
                // 根据所提供的速度计算点
                orientation: new Cesium.VelocityOrientationProperty(property),
                // 模型数据
                model: {
                    uri: '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
                    minimumPixelSize:128
                }
            });
        }


            /**
             * 计算飞行
             * @param source 数据坐标
             * @returns {SampledPositionProperty|*}
             */
            function computeFlight(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].dimension, source[i].height);
                    // 添加位置，和时间对应
                    property.addSample(time, position);
                }
                return property;
            }
    </script>
</body>

可能刚开始会有点不理解，把点和时间添加到时间轴当成补间动画的话，这样就会很好理解了。总得来说，还是很简单的~~多看demo，多看demo，多看demo。。

_Royal
关注
  • 4
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Cesium自定义路径飞行漫游
01-20
基于Cesium1.62开发的三维场景漫游，动态移动视角，采集运动节点信息，自动漫游回放
cesium.rar
12-28
cesiumcesiumcesiumcesiumcesiumcesiumcesiumcesiumcesiumcesium
Cesium实战三：飞行航线动画
菜鸟的博客
03-05 1018
在地图上添加飞行点位：循环遍历点位数据，利用Entity直接添加点至地图上。可视化从旧金山到哥本哈根的真实航班。
cesium+vue实现飞机模型按照预定航线飞行
01-17
cesium+vue实现飞机模型按照预定航线飞行
Cesium模拟飞机飞行路线
07-27
飞机根据路线进行轨迹飞行，利用Cesium，适用于新手操作
cesium飞机飞行和轨迹
10-12
cesium飞机飞行和轨迹
基于cesium 开发的 3d 模型 飞行模拟
12-22
基于cesium 开发的 3d 模型 飞行模拟，完美模拟飞行装备的各种姿态展示
cesium 飞机模型、汽车模型
08-24
Cesium官方模型，飞机模型gltf文件，汽车模型.
Cesium Vue（九）— 模拟飞机飞行
qq_40120946的博客
10-23 684
CZML是一种用来描述动态场景的JSON架构的语言，主要用于Cesium在浏览器中的展示。它可以用来描述点、线、布告板、模型以及其他的图元，同时定义他们是怎样随时间变化的。
Cesium 模拟卫星扫描_设置飞行坐标串
一碗老面的博客
10-09 1003
1.效果图 2.代码实现 <!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" conten
Cesium飞行漫游 Cesium飞行漫游
06-16
Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游
viewShed3d-cesium.js
07-28
// 初始化 let viewer = new Cesium.Viewer("viewerContainer") // 分析参数 var viewModel = { verticalAngle: 90, horizontalAngle: 120, distance: 10 }; // 添加可视域 var viewshed = new Cesium.ViewShed3D(viewer, { horizontalAngle: Number(viewModel.horizontalAngle), verticalAngle: Number(viewModel.verticalAngle), distance: Number(viewModel.distance), calback: function () { viewModel.distance = viewshed.distance } });
cesium 卫星轨迹模拟 czml
03-04
详细原理及代码解释：https://mp.csdn.net/postedit/86620777
Cesium飞行漫游
03-13
参考网上代码实现了漫游飞行，简单的飞行。 包括开始飞行、暂停飞行、向前飞行、向后飞行、设定路线、保存路线、清空路线、退出飞行
基于Cesium的无人机飞行模拟
最新发布
04-11
基于Cesium的无人机飞行模拟2.1 安装node.js环境。2.2 下载离线地图包。2.3 在sourceConfig.js中配置离线地图地址。2.4 在cesium-min文件夹下进命令行使用：npm install 下载包，然后使用npm start启动。项目支持两...
Cesium开发实践（一）移动小车
热门推荐
Royal
07-11 1万+
接触Cesium这个框架也有一周的时间了吧，学到了不少东西，网上关于这个框架的教程也比较少，总之，连滚带爬，也能凑合写出来一个demo把。下面就是一个根据官网几个Demo学习后自己写的一个demo。东西比较简陋，还有很多可以扩展的地方~~比如动态设置小车速度，视角跟随等等 效果图 通过键盘上的方向键来控制小车方向，前进，退后。大概思路如下： 1、添加数据模型 2、监听键盘按键 3
Cesium学习笔记（四）Camera
Royal
07-10 1万+
Cesium 相机控制场景中的视野。操作相机的方法有很多，如旋转，缩放，平移和飞到目的地。Cesium具有默认的鼠标和触摸事件处理程序与相机进行交互，还有一个API以编程方式操纵相机。 我们可以使用该setView功能设置相机的位置和方向。目的地可以是一个实例Cartesian3或Rectangle，方向可以是航向/俯仰/卷或方向/向上 setViewCartesian 方式... <body>
Cesium学习笔记（一）添加实体
Royal
07-06 8970
可以选实体对象： 名称 类型 备注 box BoxGraphics 盒子实体 corridor CorridorGraphics 走廊实体 cylinder CylinderGraphics 椎体实体 ellipse EllipseGraphics 圆和椭圆实体 ellipsoid EllipsoidGraphics 球体和椭圆体
cesium开发实践(二)模拟多架飞机飞行
05-08
本文将介绍cesium开发实践(二)模拟多架飞机飞行。 在cesium中模拟多架飞机飞行，可以利用模拟飞行的三维飞行接口模拟多架飞机的飞行轨迹，以实现更加真实的效果。 首先，要在cesium中创建一个地球场景。可以使用Cesium.Viewer对象为其添加地球，设置更改地球旋转，以及地球的物理属性。随后，可以使用cesium.js库中的各种工具来模拟多架飞机的飞行。 要模拟多架飞机的飞行，可以使用模拟飞行的三维飞行接口。此接口可以创建多个飞机实例，执行模拟飞行并获取每个飞机的各种实时数据（例如当前位置，速度和高度等）。 使用三维飞行接口时，需要为每架飞机定义模型和位置。飞机模型可以使用已有的模型或使用自定义模型。之后，为每个飞机指定起点和终点位置，并定义飞行路径。可以使用模拟器，将每个飞机的位置和飞行方向模拟出来，并在cesium中显示出来。飞行轨迹的飞行方向和速度可以通过修改cesium.js库中的参数或自定义代码。 最后，要模拟多架飞机的飞行，需要在cesium中设置好各种管理器。管理器可以控制参与地球场景中的各个对象，从而完成实时的统计工作。此外，也可通过模拟器可以轻松地模拟多架飞机的飞行。 以上所述即为cesium开发实践(二)模拟多架飞机飞行的全部内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值