echart 三维可视化地图_在 ECharts GL 中绘制三维地图

在 ECharts GL 中绘制三维地图

叮叮

2017-06-14

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

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

绘制一个基础的三维地图

首先我们在 Gallery 中用 ECharts GL 画一个基础的三维地图。注意因为 GL 是 ECharts 的一个扩展，所以我们需要在 Gallery 中额外引入 GL 的脚本文件。 「引入文件」只需要在 Gallery中新建作品，然后在「脚本」的配置中加入这行地址就行了。

如果要绘制世界地图的话还需要引入上面「常用脚本」的世界地图文件。

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

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

1

2

3

4

5

6option = {

series: [{

type: 'map3D',

map: 'world'

}]

};

是不是很简单，当然画出来的效果也是非常基础和简陋的。

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

添加更丰富的灯光

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

1

2

3

<