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());

效果三：地球上覆蓋區域或平面地圖

如我在上上篇中所說，這裏不做贅述了。
因爲可以將平面貼在三維地球上，使得許多平面獨有的效果可以在地球上也出現，方便了許多特效的製作。