如图，3D 地图是一个比较炫的组件，在这借官方示例「ECharts-GL Hello World」学习一下 3D 地图及飞线图的基本使用。

首先准备一个 3D 地球

option.globe= {
 baseTexture: "./earth/world.topo.bathy.200401.jpg",
 heightTexture: "./earth/world.topo.bathy.200401.jpg",
 displacementScale: 0.04,
 shading: 'realistic',
 environment: './earth/starfield.jpg',
 realisticMaterial: {
 roughness: 0.9
 },
 postEffect: {
 enable: true
 },
 light: {
 main: {
 intensity: 5,
 shadow: true
 },
 ambientCubemap: {
 texture: './earth/pisa.hdr',
 diffuseIntensity: 0.2
 }
 }
}

• option.globe.baseTexture：地球的纹理
• option.globe.heightTexture：地球的高度纹理
• option.globe.displacementScale：地球顶点位移的大小。默认为 0，数值越大地表起伏越明显
• option.globe.shading：地球中三维图形的着色效果，'realistic' 是真实感渲染，使用了基于物理的渲染（PBR） 来表现真实感材质
• option.globe.environment：背景环境贴图（用的是一个星空图）
• option.globe.realisticMaterial：真实感材质相关的配置项
• option.globe.realisticMaterial.roughness：roughness属性用于表示材质的粗糙度，0为完全光滑，1完全粗糙，中间的值则是介于这两者之间
• option.globe.postEffect：后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果
• option.globe.light.main：场景主光源的设置，在 globe 组件中就是太阳光
• option.globe.light.ambientCubemap：ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射
• option.globe.light.ambientCubemap.texture：环境光纹理的 url，支持使用.hdr格式的 HDR 贴图。可以从 http://www.hdrlabs.com/sibl/archive.html 等网站获取 .hdr 的资源
• option.globe.light.ambientCubemap.diffuseIntensity：漫反射的强度

加一点飞线

option.series = {
 type: 'lines3D',
 coordinateSystem: 'globe',
 lineStyle: {
 width: 1,
 color: 'rgb(100, 100, 150)',
 opacity: 0.8
 },
 blendMode: 'lighter',
 data: [
 [
 [116, 40], // 起点的经纬度和海拔坐标
 [0, 51] // 终点的经纬度和海拔坐标
 ],
 ...
 ]
};

• series[i]-lines3D.blendMode：混合模式，'lighter'是叠加模式，可以让数据集中的区域因为叠加而产生高亮的效果

点击扩展链接获取示意代码，提取码：w47i

需要放到 IIS、TOMCAT 之类的 WEB 服务里使用，还需设置 .hdr 的 MIME 类型，如下图