echarts3d地图option实例写法

echarts 3D 地图 option 写法总结

本文是自己在用到 echarts3D的时候，写的实例。有需要的自取

具体代码如下

import * as echarts from 'echarts';
import 'echarts-gl';

// 此处data 是数据 须符合echarts给得示例得数据结构
const data = getValueByName({name:'bar_option',type:'var'})
function getAirportCoord(idx) {
      console.log()
    return [data.airports[idx][3], data.airports[idx][4]];
  }
  var routes = data.routes.map(function (airline) {
    return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
  });

// console.log(222, three.)
const image = new Image()
image.src = 'http://xxx.jpg' // 本地底图的地址
// image.src = 'https://echarts.apache.org/examples/data-gl/asset/bathymetry_bw_composite_4k.jpg'
// https://echarts.apache.org/examples/data-gl/asset/bathymetry_bw_composite_4k.jpg
image.setAttribute("crossOrigin", 'Anonymous')

const  option = {
    backgroundColor: '#000',
    globe: {
      baseTexture: image,
      heightTexture:image,
      shading: 'lambert',
    //   environment:image1,
      light: {
        ambient: {
          intensity: 0.4
        },
        main: {
          intensity: 0.4
        }
      },
      viewControl: {
        autoRotate: false
      }
    },
    series: {
      type: 'lines3D',
      coordinateSystem: 'globe',
      blendMode: 'lighter',
      lineStyle: {
        width: 1,
        color: 'rgb(50, 50, 150)',
        opacity: 0.1
      },
      data: routes
    }
  };
// 初始化echarts容器  可用 refs，也可以 id(dom的id) 
 const charts = echarts.init(this.$refs.rlbrcict) 
 // let charts = echarts.init(document.getElementById('accountchart'));
 charts.setOption(option)

示例地图

附录：
参考资料：https://echarts.apache.org/examples/zh/editor.html?c=lines3d-airline-on-globe&gl=1