echart实现3d地图_3D飞线效果——让线“飞”起来的秘密

ECharts 是百度开源的一个非常强大的数据可视化库，可以用于制作各种类型的图表，包括 3D 地图。在 ECharts 中实现 3D 飞线效果需要使用 echarts-gl 这个扩展库。

具体实现过程如下：

1. 引入 echarts 和 echarts-gl 库：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/1.1.1/echarts-gl.min.js"></script>

2. 定义地图配置项：

var option = {
  globe: {
    baseTexture: 'img/earth.jpg',
    heightTexture: 'img/bathymetry_bw_composite_4k.jpg',
    displacementScale: 0.1,
    shading: 'realistic',
    environment: 'img/starfield.jpg',
    realisticMaterial: {
      roughness: 0.2
    },
    postEffect: {
      enable: true,
      SSAO: {
        enable: true,
        radius: 2,
        intensity: 1.5,
        quality: 'high'
      }
    },
    light: {
      ambient: {
        intensity: 0.1
      },
      main: {
        intensity: 1.5
      }
    },
    viewControl: {
      autoRotate: true,
      autoRotateAfterStill: 10,
      targetCoord: [116.46, 39.92],
      distance: 200,
      minDistance: 150,
      maxDistance: 300
    },
    layers: [{
      type: 'lines3D',
      coordinateSystem: 'globe',
      blendMode: 'lighter',
      polyline: true,
      lineStyle: {
        width: 1,
        color: '#00ffff',
        opacity: 1
      },
      data: []
    }]
  }
};

其中，globe 表示创建地球的配置项，baseTexture、heightTexture、environment、realisticMaterial 等属性用于设置地球的表面材质、高度图、环境光、反光度等参数。layers 表示在地球上添加的图层，这里使用 lines3D 表示添加飞线的效果。

3. 添加数据：

var data = [
  [{
    coord: [116.46, 39.92]
  }, {
    coord: [121.48, 31.22]
  }],
  [{
    coord: [116.46, 39.92]
  }, {
    coord: [113.40, 23.10]
  }],
  [{
    coord: [116.46, 39.92]
  }, {
    coord: [104.06, 30.67]
  }],
  ……
];

option.globe.layers[0].data = data;

其中，data 数组包含每条飞线的起点和终点坐标。

4. 渲染图表：

var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);

通过调整 viewControl 的参数，可以控制地球的初始位置、缩放比例等。

以上就是实现 ECharts 3D 飞线效果的全部过程。