使用echarts实现3D地图和需要注意的点_echarts3d地图

echarts实现3d地图有两种方法

一种是map3D

一种是geo3D + series中的内容（比如bar3D、scatter3D）

具体配置Documentation - Apache EChartshttps://echarts.apache.org/zh/option-gl.html#series-bar3D.coordinateSystem中的GL配置中

需要强调的是：map3D可以使用 this.chart.on('click', 回调函数);方法获取点击内容，而geo3D是不可以的。

所以我们如果想用点击事件，并且还想在地图上做一些散点，圆柱。可以map3D和geo3D同时使用，将geo3D中show属性设为false隐藏就可以了

一、注册地图

1、注册地图，使用echarts.registerMap(mapName,opt)注册地图

参数：

• mapName

地图名称，在 geo 组件或者 map 图表类型中设置的 map 对应的就是该值。

• opt

  • geoJSON 可选。GeoJson 格式的数据，具体格式见 GeoJSON。可以是 JSON 字符串，也可以是解析得到的对象。这个参数也可以写为 geoJson，效果相同。

  • svg 可选。从 v5.1.0 开始支持SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。更多信息参见 SVG 底图。

  • specialAreas 可选。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。只在 geoJSON 中生效，svg 中不生效。

2、geojson可以在阿里的那个生成

DataV.GeoAtlas地理小工具系列

但是需要注意一点：阿里生成的china数据在map3d和geo3d上是无法显示名称的，但是省份或者市是可以的。这个地方实在太坑了！因为这个问题找了半天时间，一定要注意！

二、配置地图

配置地图的时候最好还是按着官方文档配置，map3D和平面地图的配置有略微不同的。

这里说一下option中比较常用的map3D和geo3D配置

1、viewControl对象：用于鼠标的旋转，缩放等视角控制。

viewControl: {
	alpha: 70, //视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
  beta: 5 //视角绕 y 轴，即左右旋转的角度。
},
top: 0, //组件的视图离容器四个方向的距离。
left: 0,
right: 0,
bottom: 0,
center: [0, 0, 0] //视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。

2、label对象：标签的相关设置。

label: {
	show: true, //是否显示标签。
	formatter: params => { //标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n换行。
	    return params.name;
	},
	textStyle: { //标签的字体样式。
	    color: '#fff', //字体颜色
      borderWidth: 1,	//字体边框宽度
      borderColor: 'red',	//字体边框颜色，注意：使用此属性需要设置borderWidth
      fontFamily: 'sans-serif', //文字的字体系列。
      fontSize: '12'，//文字的字体大小。
      fontWeight: 500 //文字字体的粗细。
	},
	emphasis: { //鼠标悬停时候的样式
	    show: true,
	    textStyle: {
	        color: '#fff'
	    }
	}
},

3、itemStyle对象: 三维图形的视觉属性，包括颜色，透明度，描边等。

itemStyle: {
	color: '#387BFF', //图形的颜色。地图中就是板块的颜色
	opacity: 1,	//透明度
	borderColor: '#fff', //边框颜色
	borderWidth: 0.5,	//边框宽度
	emphasis: {	//鼠标悬停的样式
	    color: '#7BA8FF',
	    borderColor: '#fff',
	    borderWidth: 0.5
	}
},

三、配置散点图、三维柱状图

如果需要使用scatter3D、bar3D就需要geo3D配合使用

bar3D Documentation - Apache EChartshttps://echarts.apache.org/zh/option-gl.html#series-bar3D

scatter3D Documentation - Apache EChartshttps://echarts.apache.org/zh/option-gl.html#series-scatter3D