echart 三维可视化地图_在 ECharts GL 中绘制三维地图-CSDN博客

本文链接：https://blog.csdn.net/weixin_39835925/article/details/111527128

本文介绍了如何使用ECharts GL绘制三维地图，并通过光照、阴影、颜色映射等配置项，打造具有写实风格的三维地图。教程中详细讲解了如何设置灯光、阴影、颜色以及后期处理，让读者了解如何利用ECharts GL生成高质量的三维地图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 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。

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

6option = {

series: [{

type: 'map3D',

map: 'world'

}]

};

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