iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >基于Cesium实现卫星在轨绕行动画
  • 862
分享到

基于Cesium实现卫星在轨绕行动画

2024-04-02 19:04:59 862人浏览 八月长安
摘要

目录资源网站绘制卫星绕轨动效初始化蓝星添加卫星模型方法相关方法这个效果其实网上很多案例了,本来不打算写了,但是做都做了,稍微来说一下吧,代码实测可用! 最后的效果就是这个样子的啦!

这个效果其实网上很多案例了,本来不打算写了,但是做都做了,稍微来说一下吧,代码实测可用!

最后的效果就是这个样子的啦!

就是很简单的一个卫星,放射信号,然后围着轨道转圈圈。

资源网站

首先呢,分享几个网站,尽管大家应该都有,但是还是分享一下子吧。

cesium api 中文网站

3D模型下载

其中这个下载3D模型的网站有很多3D模型,可以根据自己的需要搜索下载使用,尽管大部分是收费的,但是又免费的呀,自己测试或者是玩的话,我觉得够用了,我觉得还不错的呢!

绘制卫星绕轨动效

首先这个稍微说一下哈,其实就是用了 cesium 的时间轴,然后添加卫星模型,在距离地面的固定高度按照设置好的轨迹进行绕地旋转,关于下面的锥形信号覆盖区域,就是在卫星正下方,添加绘制了一个圆柱形的模型,使得上面的圆截面半径为0,下面的圆截面半径大一些,然后就是一个锥形了,具体锥形绘制案例看我 这篇博客【穿梭门】 哈,有好多绘制形状的案例。

接下来直接上代码!!!! 其实我也是看的别的博主发的文章,然后稍作修改出来的效果,但是大体实现方式就是我上面说的。

初始化蓝星

首先要实现这个功能,一定要开启时间轴的呀,不然不好使哈!

timeline: true, //是否显示时间线控件

上面这个得开起来!

    viewer = new Cesium.Viewer('map', {
      baseLayerPicker: false,  // 影像切换
      animation: true,  //是否显示动画控件
      infoBox: false, //是否显示点击要素之后显示的信息
      geocoder: false, //是否显示地名查找控件
      timeline: true, //是否显示时间线控件
      fullscreenButton: false,
      shouldAnimate: false,
      navigationHelpButton: false, //是否显示帮助信息控件
      terrainProvider: new Cesium.createWorldTerrain({
        requestWaterMask: true,
        requestVertexNORMals: true
      }),
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: "Http://mt1.Google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
      })
    })

添加卫星模型方法

主要是配置这个时间轴,然后就调用方法把卫星放进蓝星里面。

  // 卫星
  function satellite() {
    start = new Cesium.JulianDate.fromDate(new Date());  // 获取当前时间 这不是国内的时间
    start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());  // 添加八小时,得到我们东八区的北京时间
    stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());  // 设置一个结束时间,意思是360秒之后时间结束

     
    viewer.clock.startTime = start.clone();   // 给cesium时间轴设置开始的时间,也就是上边的东八区时间
    viewer.clock.stopTime = stop.clone();     // 设置cesium时间轴设置结束的时间
    viewer.clock.currentTime = start.clone(); // 设置cesium时间轴设置当前的时间
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;  // 时间结束了,再继续重复来一遍
    //时间变化来控制速度 // 时间速率,数字越大时间过的越快
    viewer.clock.multiplier = 2;
    //给时间线设置边界
    viewer.timeline.zoomTo(start, stop);

    rrStates = [];
    getRandState(arrStates, 1);
    startFunc();
  }

相关方法

一股脑直接把代码发过来了,然后网上其实都有,我不发你也找得到,然后这些也是网上拼凑起来的,然后嘞,应该能看懂,看不懂的直接找那个 Cesium API 中文版网站去查,应该没什么难的。加油!

function mySatePosition() {
    this.lon = 0;
    this.lat = 0;
    this.hei = 700000;          //卫星高度
    this.phei = 700000 / 2;     //轨道高度
    this.time = 0;
  }

  function computeCirclularFlight(source, panduan) {
    var property = new Cesium.SampledPositionProperty();
    if (panduan == 1) {         //卫星位置
      for (var i = 0; i < source.length; i++) {
        var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
        var position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, source[i].hei);
        // 添加位置,和时间对应
        property.addSample(time, position);
      }
    } else if (panduan == 2) {//轨道位置
      for (var i = 0; i < source.length; i++) {
        var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
        var position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, source[i].phei);
        // 添加位置,和时间对应
        property.addSample(time, position);
      }
    }
    return property;
  }

  function getRandState(brr, count) {
    for (var m = 0; m < count; m++) {
      var arr = [];
      var t1 = Math.floor(Math.random() * 360);
      var t2 = Math.floor(Math.random() * 360);
      for (var i = t1; i <= 360 + t1; i += 30) {
        var aaa = new mySatePosition();
        aaa.lon = t2;
        aaa.lat = i;
        aaa.time = i - t1;
        arr.push(aaa);
      }
      brr.push(arr);
    }
  }

  function getStatePath(aaa) {
    var entity_ty1p = computeCirclularFlight(aaa, 2);
    var entity_ty1 = viewer.entities.add({
      availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start: start,
        stop: stop
      })]),
      position: entity_ty1p,   //轨道高度
      orientation: new Cesium.VelocityOrientationProperty(entity_ty1p),
      cylinder: {
        HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        length: 700000,
        topRadius: 0,
        bottomRadius: 900000 / 2,
        // material: Cesium.Color.RED.withAlpha(.4),
        // outline: !0,
        numberOfVerticalLines: 0,
        // outlineColor: Cesium.Color.RED.withAlpha(.8),
        material: Cesium.Color.fromBytes(35, 170, 242, 80)
      },
    });

    entity_ty1.position.setInterpolationOptions({
      interpolationDegree: 5,
      interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
    });

    var entity1p = computeCirclularFlight(aaa, 1);
    //创建实体
    var entity1 = viewer.entities.add({
      // 将实体availability设置为与模拟时间相同的时间间隔。
      availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start: start,
        stop: stop
      })]),
      position: entity1p,//计算实体位置属性
      //基于位置移动自动计算方向.
      orientation: new Cesium.VelocityOrientationProperty(entity1p),
      //加载飞机模型
      model: {
        uri: './models/weixing/scene.gltf',
        scale: 1000
      },
      //路径
      path: {
        resolution: 1,
        material: new Cesium.PolylineGlowMaterialProperty({
          glowPower: 0.1,
          color: Cesium.Color.PINK
        }),
        width: 5
      }
    });

    //差值器
    entity1.position.setInterpolationOptions({
      interpolationDegree: 5,
      interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
    });
  }

  function startFunc() {
    for (var i = 0; i < arrStates.length; i++) {
      getStatePath(arrStates[i]);
    }
  }

到此这篇关于基于Cesium实现卫星在轨绕行动画的文章就介绍到这了,更多相关Cesium卫星在轨绕行动画内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 基于Cesium实现卫星在轨绕行动画

本文链接: https://www.lsjlt.com/news/152780.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 基于Cesium实现卫星在轨绕行动画
    目录资源网站绘制卫星绕轨动效初始化蓝星添加卫星模型方法相关方法这个效果其实网上很多案例了,本来不打算写了,但是做都做了,稍微来说一下吧,代码实测可用! 最后的效果就是这个样子的啦! ...
    99+
    2024-04-02
  • 基于WPF如何实现3D画廊动画效果
    本篇内容介绍了“基于WPF如何实现3D画廊动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!接下来想做一个图廊,所以并没有必要用立方体,...
    99+
    2023-07-05
  • 基于Vue实现卡片无限滚动动画
    目录概要设计详细设计进阶功能功能分析概要设计详细设计完整代码概要设计 设置css的animation在适当的时间点重置动画来现实视觉上无限滚动的效果。 详细设计 计算动画中所需预设的...
    99+
    2024-04-02
  • 基于Angular.js如何实现触摸滑动动画
    小编给大家分享一下基于Angular.js如何实现触摸滑动动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!先上图:这个主要用到...
    99+
    2024-04-02
  • 基于Vue3实现旋转木马动画效果
    做的比较丑 最后图片 本来打算用vue-carousel-3d这个组件的,但是这个组件一直报源码错误,修改了半天也没有解决 效果图 实现代码 使用了swiper组件 html部分...
    99+
    2024-04-02
  • 如何实现基于CSS动画的SVG按钮
    这篇文章给大家分享的是有关如何实现基于CSS动画的SVG按钮的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体代码如下所示:<a href="#&quo...
    99+
    2024-04-02
  • 基于Flutter实现爱心三连动画效果
    目录前言Animation 简介AnimationController 简介应用 - 爱心三连总结前言 我们开始 Flutter 动画相关篇章之旅,在应用中通过动效能够给用户带来更愉...
    99+
    2024-04-02
  • 怎么在css3中使用less实现一个星空动画
    这期内容当中小编将会给大家带来有关怎么在css3中使用less实现一个星空动画,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。首先html文件结构很简单,如下:<div>  ...
    99+
    2023-06-08
  • 基于WPF实现3D画廊动画效果的示例代码
    接下来想做一个图廊,所以并没有必要用立方体,只需做一些“墙壁”就行了。 而在一个平面上建起另一个矩形的平面,实则非常容易,只需输入墙角的两点和高度就可以了,这...
    99+
    2023-02-28
    WPF实现3D画廊效果 WPF 3D画廊 WPF 3D
  • Android基于reclyview实现列表回弹动画效果
    reclyview实现列表回弹动画效果,供大家参考,具体内容如下 1.reclyview列表布局文件 <com.example.demo1.ReboundLayout     ...
    99+
    2024-04-02
  • 如何基于Flutter实现爱心三连动画效果
    这篇文章主要为大家展示了“如何基于Flutter实现爱心三连动画效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何基于Flutter实现爱心三连动画效果”这篇文章吧。前言我们开始 Flutt...
    99+
    2023-06-29
  • 基于WPF实现控件轮廓跑马灯动画效果
    代码如下 一、创建EdgeLight.xaml代码如下。 <ResourceDictionary xmlns="http://schemas.microsoft.com/win...
    99+
    2022-11-13
    WPF 控件轮廓跑马灯动画 WPF轮廓动画 WPF跑马灯动画
  • 基于Python实现视频转字符画动漫小工具
    目录导语正文一、准备中二、原理简介三、代码演示四、效果展示导语 ​哈喽!boys and  girls 我是每天疯狂赶代码的木木子~ 今天带大家来点儿好玩儿的东西,我想你们肯定是喜欢...
    99+
    2024-04-02
  • vue基于websocket实现智能聊天及吸附动画效果
    目录前言:1.效果如下:2.主要功能:2.1.基于websocket实现聊天功能,封装了一个socket.js文件2.2使用Jwchat插件实现类似QQ、微信电脑端的功能2.3动画效...
    99+
    2024-04-02
  • Android基于AdapterViewFlipper实现的图片/文字轮播动画控件
    目录1. 问题/坑点 1.1 item宽高不生效问题 2. 常用方法 3. 文字/图片 轮播 Demo3.1 文字轮播:TextFlipperAdapter3.2 图片轮播:ImgF...
    99+
    2024-04-02
  • 基于SpringBoot实现代码在线运行工具
    目录说明基本思路后端实现前端说明 由于没有实现沙盒,所以这个运行只适合提交自己写的代码到服务器,不适合像 菜鸟工具 那样可以让人公开提交代码并访问。 基本思路 前...
    99+
    2024-04-02
  • 基于CSS3的animation动画属性如何实现轮播图效果
    这篇文章将为大家详细讲解有关基于CSS3的animation动画属性如何实现轮播图效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。animation简介:CSS3的an...
    99+
    2024-04-02
  • 基于Python如何实现视频转字符画动漫小工具
    本篇文章给大家分享的是有关基于Python如何实现视频转字符画动漫小工具,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。导语今天带大家来点儿好玩儿的东西,我想你们肯定是喜欢的!上...
    99+
    2023-06-22
  • 基于WPF实现一个简单的音频播放动画控件
    目录1.实现代码2.效果预览1.实现代码 一、创建AnimationAudio.xaml代码如下 <ResourceDictionary xmlns="http://schem...
    99+
    2024-04-02
  • 基于CSS实现MaterialUI按钮点击动画并封装成 React 组件
    前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作