在 ECharts GL 中绘制三维地图

ECharts 前段时间发布了超亮眼的 GL，相对于以前已经圈粉无数的 ECharst-X 而言，ECharst GL更是帅到爆，不管是性能、颜值、类型都有了巨大的飞跃。可是对于小编这样的设计师来讲是否是更易上手呢？答案是确定的，咱们除了可以根据数据画出诸如三维地图等三维的可视化图以外，只须要在项目中加入几个简单的配置项，就能配制出想要的风格的高质量画面效果。

本文源地址：echarts.baidu.com/blog/2017/0…

这篇教程就但愿经过在 Gallery里绘制一个有丰富的光效、阴影的写实风格的三维地图的例子，简单介绍一些ECharts GL与画质相关的配置项，最终效果见 gallery.echartsjs.com/editor.html…
（下图为最后的效果）。涉及到过高深专业的算法、代码、什么什么的小设计师我实在是不会，因此这个仅仅能当 GL 入门级教程使用哦～

绘制一个基础的三维地图

首先咱们在 Gallery 中用 ECharts GL 画一个基础的三维地图。注意由于 GL 是 ECharts 的一个扩展，因此咱们须要在 Gallery 中额外引入 GL 的脚本文件。 「引入文件」只须要在 Gallery中新建做品，而后在「脚本」的配置中加入这行地址就好了。

echarts.baidu.com/resource/ec…

若是要绘制世界地图的话还须要引入上面「经常使用脚本」的世界地图文件。

作好准备工做后咱们就能够开始画一个三维的世界地图了，GL 中画三维地图的配置项跟画普通的二维地图同样，只是系列名称从原来的map改为map3D。

咱们先用下面的最基础配置项，基于引入的脚本，生成一个最基础的三维地图系列。

option = {
series: [{
type: 'map3D',
map: 'world'
}]
};
是否是很简单，固然画出来的效果也是很是基础和简陋的。

接下来就咱们须要作的就是一步一步的添加光照、阴影、后期的配置项把这个三维地图画得更漂亮。

添加更丰富的灯光

GL 中大部分组件都支持灯光的配置，这些灯光会影响到组件中的全部图形，灯光的配置项须要统一在组件light属性下设置。

light: {
main: {
intensity: 1
},
ambient: {
intensity: 0
}
}
一般状况下组件中默认会有一个主光源main和一个全局的环境光ambient。主光源起到了主要的照明做用，可让咱们刚才画出来的三维地图产生基础的明暗对比，从而使图形产生真实的立体感。全局的环境光能够为整个场景提供全局照亮和统一材质的效果。（添加光照效果以下图）

咱们能够经过intensity属性设置不一样光源的强度。例如在上面的代码中咱们将主光源的强度设成2，环境光源的强度设成0后能够获得更增强烈的明暗对比。

默认的环境光只是单纯的对全部图形都加上一个固定的亮度，因此会显得很平淡，若是把主光源去掉（intensity设为0）的话，整个地图场景会变成灰色。因此为了更丰富的光照效果，咱们可使用 GL 提供的更为强大的ambientCubemap做为环境光源。

ambientCubemap是指使用一张全景贴图做为环境光源。通常全景的环境光贴图大概是下面这样。

你们使用手机的全景模式中就能够拍出相似的全景照片。不太小编建议去寻找专业的 HDR 格式的全景图资源。这里推荐一个有很多免费的HDR全景图资源的网站 www.hdrlabs.com/sibl/archiv…

找到合适的全景图片后，咱们能够在 Gallery 的导入数据中上传该图片。

获得在 Gallery 上该图片地址连接后插入到ambientCubemap的texture属性中。

light: {
main: {
intensity: 1
},
ambient: {
intensity: 0
},
ambientCubemap: {
diffuseIntensity: 1,
texture: '/asset/get/s/data-1497251035660-HkVJTnsMW.hdr'
}
}
设置了texture属性后 GL 就会自动启用环境光贴图做为环境光源。

由于全景贴图的每一个像素都会被计算到光照里，因此相比普通的环境光，使用环境光贴图会让整个光照会显得更真实和丰富。

为了获得更真实的环境光效果，注意此处建议使用.hdr格式的图片，由于 HDR 也就是高动态范围图像，它比其余格式的图像有更大亮度的数据存储。对比一下同一张图片HDR和PNG格式照亮的不一样效果。

添加阴影

有光的地方就会有阴影，阴影给了光照更多的层次，失去了阴影的光照是没有灵魂的，是平淡乏味的。

在 GL 中能够简单的加上shadow: true为主光源添加阴影。同时为了让三维地图有一种放在地面上的立体模型的感受，咱们再显示一个地面groundPlane。

light: {
main: {
intensity: 1,
shadow: true
},
ambient: {
intensity: 0
},
ambientCubemap: {
diffuseIntensity: 1,
texture: '/asset/get/s/data-1491896094618-H1DmP-5px.hdr'
}
},
groundPlane: {
show: true
}

经过阴影还能够更容易得感觉到光照的方向，咱们能够经过设置主光源alpha、beta两个属性设置不一样的光照角度，来查看阴影的变化。

main: {
intensity: 1,
shadow: true,
alpha: 150,
beta: 70
}

这样就能够实现以前设计圈很是流行的一种长阴影的风格。

更丰富的颜色

到这里咱们获得的效果跟最初那个简陋的画面已是天壤之别了，小编做为一个设计师是很钟情于白模的效果的，可是若是你手里有一份数据的话更是锦上添花。 数据的上传和转换能够经过echarts提供的表格数据转换工具实现， echarts.baidu.com/spreadsheet… 数据部份内容不在此多述。若是暂时没有现成数据，能够直接先复制教程实例中的数据，见左侧代码区域var regionData = [{……}];内的所有内容，直接复制粘贴便可进行以后操做。

将这份数据导入并写入配置项里，

接下来，咱们可使用 ECharts 中视觉映射「visualMap」组件将地图中的每块区域赋予不一样的颜色。

在 ECharts GL 中使用 visualMap 和在ECharts中并无任何的不一样：

visualMap: {
show: false,
min: 0,
max: 15,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
}
就是这样子每一个国家根据不一样数据就呈现出不一样的颜色啦。

后期处理

看到后期可能你们第一个想到的就是使用 PS 调色，小编此次主要用到的确实是调色。但其实GL 中除了调色以外，还有例如景深 、描边等诸多的后期效果能让整个画面呈现出你须要的效果，你们以后能够大胆的尝试。

不知道你们是否能感觉到其实此时获得的图片总体明度偏暗，色相偏蓝。就如咱们在拍完照片后发现色调和曝光不理想须要再次调整图片同样，咱们也须要对这张的画面进行后期处理和调色。

后期处理的配置项都是在组件的postEffect下。首先能够经过 enable 属性开启。

postEffect: {
enable: true
}
开启后 GL 会自动对整个画面调整曝光到合适的颜色。

固然若是这个画面并不能让咱们满意的话，咱们还能够经过postEffect下的colorCorrection配置项去手动的调整颜色。colorCorrection下有常见的曝光exposure、亮度brightness、对比度contrast和饱和度saturation选项。

可是此次小编要教你们使用这里面更强大的颜色查找表功能lookupTexture。这个功能可让咱们在 PS 等本身用着顺手的图像处理软件里处理好图片以后再到 GL 里复现咱们在 PS 里调整的颜色曲线。

小编给你们提供了一张初始的颜色查找表，你们把下面这张查找表的图片下载下来后和你的做品截图一块儿放入 Photoshop 中（能够把做品截图拖入查找表图层的上方，注意须要保持查找表大小不变，做品截图是为了让咱们直观的预览调整的效果，调到满意以后，删除做品图层，只保存查找表，以后在GL中载入查找表，查找表的颜色映射会直接在GL中复现）。

点击左下角建立新的填充或调整工具来选择本身须要调整的配置项，此时两个图层是能够同时调整的，这里能够自由调整各项参数来实现本身想要的效果。我在此使用的是颜色查找下自带的Candlelight.cube将图片调整成了一种蜡烛光照的复古风格，又调整了亮度和对比度使其更清晰。

调整完成以后，隐藏做品截图的图层，只需保存颜色查找表（以下图）

将该图在 Gallery 内上传数据，获得在 Gallery 上该图片地址连接后插入到colorCorrection的 lookupTexture中便可。

到此，在 ECharts GL 中配置一个三维地图的步骤就完成啦，还想解锁更多 GL 技能的话， 能够直接去 ECharts 官网查看 GL 超多酷炫的实例，或者去查看GL的配置项手册 echarts.baidu.com/option-gl.h… 尽情的尝试吧～

总结

本文咱们介绍了如何在 ECharts GL 中配置出一张好看的写实风格三维地图。小编要偷偷地告诉你，用 ECharts GL 生成的效果图你还能够直接用来作图片素材哦，若是你还在为 PPT 或者本身的设计做品找不到合适的配图素材发愁的话，快来试试直接在 Gallery 里用 ECharts GL 直接生成一张吧。