3D飞线地球

随着前端技术的飞速发展与日渐成熟，web3d应用已渗透到生活的方方面面，与传统的web应用相比，3D应用在页面的展示效果、可操作性上亦或是视觉体验上都有着不可比拟的优点。对于前端开发者来说，在网页上实现一个3D应用，需要掌握的技术不胜枚举，如图形学、web-gl基础知识、Threejs等。好在echarts官方基于web-gl技术，提供了echarts-gl开源js库，大大简化了web3d图表的开发方式，本文基于echarts和echarts-gl实现一个3D飞线地球，简单讲解一下具体的实现方法。

实现效果如下：

页面布局如下：

备注：这里有一个注意事项，echarts与echarts-gl的版本务必保持一致，这里分别采用了5.1.2和2.0.5的版本

样式如下： 

* {  margin: 0;  padding: 0;}html,body {  height: 100%;  width: 100%;}

具体实现逻辑： 

var dom = document.getElementById("earth")var myChart = echarts.init(dom);var baseTexture = nullvar option = nullvar geoJson = null// 加载世界地图function getGeoJsonData() {  var xhr = new XMLHttpRequest();  xhr.open('GET', './js/world.json', false);  xhr.onreadystatechange = function () {    if (xhr.readyState == 4) {      if (xhr.status == 200 || xhr.status == 304) { geoJson = JSON.parse(xhr.responseText) getBaseTexture()      }    }  }  xhr.send();}// 使用echarts生成贴图，用于创建球体表面纹理function getBaseTexture() {  echarts.registerMap("world", geoJson);  let canvas = document.createElement("canvas");  baseTexture = echarts.init(canvas, null, {    width: 4096,    height: 2048  });  baseTexture.setOption({    backgroundColor: "rgb(3,28,72)",    geo: {      type: "map",      map: "world",      left: 0,      top: 0,      right: 0,      bottom: 0,      boundingCoords: [ [-180, 90], [180, -90],      ],      zoom: 0,      roam: false,      itemStyle: { borderColor: "#000d2d", normal: {   areaColor: "#2455ad",   borderColor: "#000c2d", }, emphasis: {   areaColor: "#357cf8", },      },      label: { normal: {   fontSize: 20,   show: true,   textStyle: {     color: "#fff",   }, }, emphasis: {   fontSize: 30,   show: true,   textStyle: {     color: "yellow",   }, },      },    },  });  drawEarth()}// 绘制球体function drawEarth() {  option = {    backgroundColor: "#013954",    tooltip: {      trigger: "item",    },    globe: {      baseTexture: baseTexture,      globeRadius: 150,      environment: "#000",      //shading: "lambert",      shading: "color",      light: { // 光照阴影 main: {   color: "#fff", // 光照颜色   intensity: 1, // 光照强度   //shadowQuality: "high", //阴影亮度   //shadow: true, // 是否显示阴影   alpha: 40,   beta: -30, }, ambient: {   color: "#fff",   intensity: 1, },      },      viewControl: { alpha: 30, beta: 160, // targetCoord: [116.46, 39.92], autoRotate: true, autoRotateAfterStill: 10, distance: 240,      },    },    series: [      { name: "lines3D", type: "lines3D", coordinateSystem: "globe", effect: {   show: true, }, blendMode: "lighter", lineStyle: {   width: 2, }, data: [], silent: false,      },    ],  };  // 随机数据 i控制线数量  for (let i = 0; i < 100; i++) {    option.series[0].data = option.series[0].data.concat(randomData());  }  myChart.setOption(option, true);}// 随机生成起始及终点经纬度坐标function randomData() {  let name = "随机点" + Math.random().toFixed(5) * 100000;  // 起点经纬度-北京  let longitude = 116.2, latitude = 39.56;  // 随机终点经纬度  let longitude2 = Math.random() * 360 - 180;  let latitude2 = Math.random() * 180 - 90;  return {    coords: [      [longitude, latitude],      [longitude2, latitude2],    ],    value: (Math.random() * 3000).toFixed(2),  };}// 初始化入口getGeoJsonData()

是不是非常简单，短短的150行代码即可实现一个3D图表，如果小伙伴们有其它的实现方式，可以在评论区里面探讨一下😊

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系