美文网首页echart多样实现
echart实现地球外环绕卫星效果

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

作者: 你好赵大宝 | 来源:发表于2019-12-26 23: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());
    

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

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

    相关文章

      网友评论

        本文标题:echart实现地球外环绕卫星效果

        本文链接:https://www.haomeiwen.com/subject/oaxroctx.html