echarts 3D地球绘制及画线

安装

从npm中获取

npm install echarts --save
npm install echarts-gl --save
复制代码

注意：如果echarts版本在5.0以下，请安装echarts-gl2.0以下版本，否则可能会报错（not Found echarts/lib/label/labelStyle）

引入

const echarts = require("echarts/lib/echarts");
require('echarts-gl');
复制代码

用法

html:

  <div id="globe"></div>
复制代码

准备一张地球的贴图，类似这样：

js:

var chartDom = document.getElementById('globe');
var myChart = echarts.init(chartDom);
 myChart.setOption({
    backgroundColor: '#000',//背景颜色
    globe: {
      baseTexture: url,//地球的纹理。支持图片路径的字符串，图片或者 Canvas 的对象
      heightTexture:url,//地球的高度纹理
      shading: 'lambert',//地球中三维图形的着色效果
      light: {
        ambient: {
          intensity: 0.2,//环境光源强度
        },//环境光
        main: {
          intensity: 0.8//光源强度
        }//主光源
      },//光照设置
    },
    series: {
          type: 'lines3D',
          coordinateSystem: 'globe',
          blendMode: 'source-over',
          effect:{
             show:true,
          },
          lineStyle: {
            width: 1,
            color: 'rgb(255, 255,255)',
            opacity: 1,
            trailWidth:4,
            trailLength:0.01,
          },//3D飞线图
      data:[     
            [
              [112, 40, 2],  // 终点的经纬度和海拔坐标
              [120, 20, 1], // 起点的经纬度和海拔坐标
            ] ,
            [
              [112, 40, 2],  
              [20, -40, 1],
            ] ,
            [
              [112, 40, 2], 
              [-60, 60, 1], 
            ] ,
            [
              [112, 40, 2],  
              [40, 0, 1], 
            ] ,
            [
              [112, 40, 2], 
              [-20, 20, 1], 
            ] ,
            [
              [112, 40, 2], 
              [-39, -40, 1], 
            ] ,
            [
              [112, 40, 2],  
              [67, 43, 1], 
            ] ,
            [
              [112, 40, 2],  
              [160, -18, 1], 
            ] ,
            [
              [112, 40, 2],  
              [145, 66, 1], 
            ] ,
            [
              [112, 40, 2],  
              [1790, 42, 1], 
            ] ,
      ]
    }
  });
});

option && myChart.setOption(option);

复制代码

地球更多设置参考官方文档：globe

3D射线更多设置参考官方文档：lines3D atmosphere

效果

总结

• 地球的样式取决于皮肤，也就是baseTexture和heightTexture；
• 如果周围设置星云效果，设置layers；
• 实时攻击的线路在series，data中设置起点和终点的经纬度；
• 各种光效光晕在light
• 外发光效果在atmosphere

          atmosphere: {
            show: true,
            offset: 0.5,
            color: "rgba(255,255,255,0.2)",
            glowPower: 2,
            innerGlowPower: 1.5,
          },
复制代码