echarts 3D地球绘制及画线

7,152 阅读2分钟

安装

从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>

准备一张地球的贴图,类似这样:

earth.jpeg

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

效果

屏幕录制2021-10-20 14.47.02.gif

总结

  • 地球的样式取决于皮肤,也就是baseTextureheightTexture
  • 如果周围设置星云效果,设置layers
  • 实时攻击的线路在seriesdata中设置起点和终点的经纬度;
  • 各种光效光晕在light
  • 外发光效果在atmosphere
          atmosphere: {
            show: true,
            offset: 0.5,
            color: "rgba(255,255,255,0.2)",
            glowPower: 2,
            innerGlowPower: 1.5,
          },