echart多样实现

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

2019-12-26  本文已影响0人  你好赵大宝

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

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

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

上一篇下一篇

猜你喜欢

热点阅读