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

目录
  • 资源网站
  • 绘制卫星绕轨动效
    • 初始化蓝星
    • 添加卫星模型方法
    • 相关方法

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

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

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

资源网站

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

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卫星在轨绕行动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 基于Cesium绘制栅栏的示例代码

    目录 最终效果 创建 dynamicWallMaterialProperty.js 文件 网上的资料要不收费,要不代码不全,很多跟绘制墙体有关的案例要不缺放法要不干嘛的,我自己根据网上的方法又加上自己百度改,最后实现了一个效果,和我想实现的效果差不多,分享一下子. 最终效果 反正这篇博文最后实现的效果就是上面动图的效果,如果你想实现的效果不是这个样子的话就不要看了,浪费时间了就. 创建 dynamicWallMaterialProperty.js 文件 首先需要一个 dynamicWallMat

  • 基于Cesium绘制抛物弧线

    Cesium绘制抛物弧线,供大家参考,具体内容如下 在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录 思路 两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p> 取n个点,依次画线,得到近似的抛物线,点越多越光滑 JS代码 // 两点之间抛物线绘制函数,twoPoints是一个数组:[lon1,lat1,lon2,lat2] function animatedParabola(twoPoints) { //动态抛物线绘制 let startPoint = [two

  • 基于Cesium实现加载显示热力图

    目录 CesiumHeatmap 编写案例 我是一个小白,到目前为止对于3D方面的东西不是特别的懂,所以说,对于cesium使用的并不是特别的好,可以说根本不会吧,所以说也是在一点一点摸索,一点一点学习的过程中,所以说有些博文写的可能不是准确的,只是用来记录一下学习过程,错了别喷我啊!! CesiumHeatmap 首先嘞,绘制热力图需要有一个工具,就是使用 CesiumHeatmap 这个工具,然后呢,下面是他的一个github的地址. CesiumHeatmap [时空门~ 嗖~] 下载下来

  • 基于Cesium实现拖拽3D模型的示例代码

    目录 添加基站模型 拖拽 这个地方是想实现一个什么效果呢?就是使用 cesium 在地图上添加一个3D模型,然后实现拖拽效果. 添加基站模型 然后这篇博文介绍的主要不是添加模型,但是也简单把代码直接粘贴过来吧,就不详细说了. // 添加基站模型 function addSite() { let position = Cesium.Cartesian3.fromDegrees(116.236393, 40.075119, 0); // 设置模型方向 let hpRoll = new Cesium.

  • 基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注

    目录 官方案例 绘制矩形 绘制多边形 绘制椭圆 绘制圆形 绘制立方体 绘制椭圆柱体 绘制多边柱体 绘制圆柱体 立体串串 好难形容 又平面又立体的板板 “回”字 绘制立方体,扭转一定角度的 在天上飘着的椭圆柱体 绘制椎体 平面图形的串串 这个是啥子嘞,就是向cesium上面添加圆形.正方形啥的. 官方案例 https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html 官网写的很好了,但是有一些没有注释,所以说刚入门的小可爱

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

    目录 资源网站 绘制卫星绕轨动效 初始化蓝星 添加卫星模型方法 相关方法 这个效果其实网上很多案例了,本来不打算写了,但是做都做了,稍微来说一下吧,代码实测可用! 最后的效果就是这个样子的啦! 就是很简单的一个卫星,放射信号,然后围着轨道转圈圈. 资源网站 首先呢,分享几个网站,尽管大家应该都有,但是还是分享一下子吧. cesium API 中文网站 3D模型下载 其中这个下载3D模型的网站有很多3D模型,可以根据自己的需要搜索下载使用,尽管大部分是收费的,但是又免费的呀,自己测试或者是玩的话,

  • 基于Angular.js实现的触摸滑动动画实例代码

    先上图: 这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right,向左或向右的触摸事件.结合css3的transition实现的动画.ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="

  • vue基于websocket实现智能聊天及吸附动画效果

    目录 前言: 1.效果如下: 2.主要功能: 2.1.基于websocket实现聊天功能,封装了一个socket.js文件 2.2使用Jwchat插件实现类似QQ.微信电脑端的功能 2.3动画效果(如关闭打开时动画.吸附效果及其他效果) 3.实现步骤: 3.1.实现websocket聊天功能 3.2.在页面中的使用方法: 关闭连接 发送给后端的方法 4.使用Jwchat插件实现类似QQ.微信电脑端的功能 4.1步骤 5.动画效果 前言: 发现这篇文章写的有点多,我总结一下整体思路: 首先这个功能

  • 基于CSS实现MaterialUI按钮点击动画并封装成 React 组件

    前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue, iView等成熟的UI框架, react生态的ant-design, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和复杂度,使开发者更专注于实现业务逻辑和服务化. 但随着对用户体验的越来越重视,对交互体验要求的提高以及css3等新标准的出现,使得web更加

  • 基于JS实现Android,iOS一个手势动画效果

    废话不多说了,先给大家展示下效果图: 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果,还支持声音效果. 下面是主要的代码 //index.ui.js var do_Animator1 = mm("do_Animator"); do_Animator1.append(500, { y: -1334, curve:

  • 基于javascript实现漂亮的页面过渡动画效果附源码下载

    用户通过点击页面左侧的菜单,对应的页面加载时伴随着滑动过滤动画,并带有进度条效果.当然页面的加载是Ajax驱动的,整个加载过渡过程非常流畅,非常好的用户体验. HTML HTML结构中,.cd-main包含页面主体内容,.cd-side-navigation包含着侧边导航条,#cd-loading-bar则是用来做进度条动画用的. <nav class="cd-side-navigation"> <ul> <li> <a href="

随机推荐