echart实现地球外环绕卫星效果

  • 时间:2020-04-24 14:01 作者:ZZH涵哥 来源: 阅读:144
  • 扫一扫,手机访问
摘要:在一个echart组件中生成两个及以上地球:globe:[{ globeRadius:180},{ globeRadius:250}],在globe中使用数组,将每个地球的属性分别设置。效果一:地球套地球代码如上。效果二:地球外环绕卫星将外面的地区设置为不可见,而后使用lines图表,将折现设置

在一个echart组件中生成两个及以上地球:

globe:[{  globeRadius:180},{  globeRadius:250}],

在globe中使用数组,将每个地球的属性分别设置。

效果一:地球套地球

代码如上。

效果二:地球外环绕卫星

将外面的地区设置为不可见,而后使用lines图表,将折现设置成多点连接的曲线,其上设置symbol形状为卫星就可。

var option={  globe:[    {      show:true,      globeRadius:180,      baseTexture:" ``` ",      environement:" ```"    },    {      show:false,      globeRadius:240,      baseTexture:" ``` ",      environement:" ```"    }  ],}

卫星的轨迹实际上是贴在外面地球上的圆环,但是因为外面地球不可见,只有其上的图形可见,所以造成卫星圆环环绕地球的效果。

series:{  type:"lines",  polyline: true,  data: linesData  //省略其余属性}

lines的数据linesData使得曲线围绕地球旋转,就是这里的satelliteLines

var satelliteLines = [];function getSatellite() {  var start = 0;  var gap = 2;  var arrays = [];  arrays.push([start, 0]);  for (var i = 1; i <= (180 - start) / gap; i++) {          arrays.push([start - i * gap, 0]);   }  for (var i = (180 - start) / gap - 1; i >= 0; i--) {         arrays.push([start + i * gap, 0]);  }   return arrays;}satelliteLines.push(getSatellite());

效果三:地球上覆盖区域或者平面地图

如我在上上篇中所说,这里不做赘述了。
由于可以将平面贴在三维地球上,使得许多平面独有的效果可以在地球上也出现,方便了许多特效的制作。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部