借官方示例「ECharts-GL Hello World」学习一下 3D 地球

如图，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'是叠加模式，可以让数据集中的区域因为叠加而产生高亮的效果

后台回复「190523」获取示意代码，需要放到 IIS、TOMCAT 之类的 WEB 服务里使用，还需设置 .hdr 的 MIME 类型，如下图