vue 使用echarts-gl实现3d旋转地图

之前也有使用过echarts开发项目中涉及到的地图功能，当时使用geo来实现地图轮廓，看上去有种3d的感觉。最近闲来无事看了一份可视化大屏的UI设计图，感觉3d旋转地图挺好玩的，今天就来尝试实现下。
首先安装下echarts和echarts-gl依赖，在这里注意的点是，echarts-gl版本可以安装低版本，默认安装的依赖版本运行后一直报错。

$ npm install echarts@4.2.1 echarts-gl@1.1.0

安装好依赖，在页面引入

import echarts from 'echarts';
import 'echarts-gl';
import beijingJson from '../../src/api/beijing.json';

接下来我们看下完整的代码

<template>
	<div style="width: 100%; height:100%;">
		<div id="echarts" ref="myEcharts" style="width: 100%; height:100%;"></div>
	</div>
</template>

<script>
	import echarts from 'echarts';
	import 'echarts-gl';
	import beijingJson from '../../src/api/beijing.json';
	export default {
   
		data() {
   
			return {
   
			}
		},
		methods: {
   
			init() {
   
				let that = this;
				echarts.registerMap('beijing', beijingJson);
				that.option = {
   
					tooltip: {
   
						show: true,
						formatter: function(params) {
   
							let value = params.data.value;
							return params.seriesName + ':' + value[2];
						}
					},
					geo3D: {
   
						map: 'beijing',
						boxWidth: 70,
						boxHeight: 6,
						boxDepth: 70,
						realisticMaterial: {
   
							roughness:1,//粗糙度，0为完全光滑，1完全粗糙
							textureTiling: 32 //材质细节纹理的平铺
						},
						//光源的设置
						light: {
   
							main: {
   
								intensity: 1,
								shadow: true,
								alpha: 150,
								beta: 170
							},
							ambient: {
   
								intensity: 0
							}
						},
						//地面的背景颜色
						groundPlane: {
   
							show: true,
							color: 'transparent'
						},
						//特效设置
						postEffect: {
   
							enable: true
						},
						//标签样式
						label: {
   
							show: true,
							formatter: function(params) {
   
								var content = '',
									content = params.name;
								return content;
							},
							distance: 0,
							textStyle: {
   
								color: '#ffffff',
								fontWeight: 'normal',
								fontSize: 16,
								backgroundColor: 'rgba(255,255,255,0)'
							},
						},
						itemStyle: {
   
							color: '#73a4ff',
							borderColor: 'rgb(62,215,213)',
							borderWidth: 1
						},
						emphasis: {
   
							label: {
   
								show: true,
								distance: 10
							},
							itemStyle: {
   
								color: '#3b7efc',
							}
						},
						// 用于鼠标的旋转，缩放等视角控制。
						viewControl: {
   
							projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
							autoRotate: true,
							//更多配置可自行查询添加，
						}
					},
					series: []
				};

				let initEcharts = echarts.init(that.$refs.myEcharts);
				initEcharts.setOption(that.option);
			}

		},
		mounted() {
   
			this.$nextTick(() => {
   
				this.init();
			})
		}
	}
</script>

看完代码后对于之前做过地图的同学来说是不是和echarts没啥区别，只是多了一个geo3D的属性。geo3D是否显示三维地理坐标系组件，这也是实现3d地图的主要属性，针对geo3d中每个属性的功能大家可以在echarts文档进行查阅，这里我就不一一细说了。

这里把文档地址给大家贴出来了，大家可以查看文档，这样实现起来更快捷。https://echarts.apache.org/zh/option-gl.html#geo3D

最终效果：

这里我截图展示的，需要看地图动效的，大家可以在本地运行看下地图自动旋转效果。