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

在一个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());

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

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

来源：CSDN

作者：安逸IT仔赵大宝

链接：https://blog.csdn.net/zhao_66/article/details/103743986

标签

卫星

航空航天

var