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

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

一种是map3D

一种是geo3D + series中的内容(比如bar3D、scatter3D)

具体配置Documentation - Apache EChartsicon-default.png?t=M5H6https://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 EChartsicon-default.png?t=M5H6https://echarts.apache.org/zh/option-gl.html#series-bar3D

scatter3D Documentation - Apache EChartsicon-default.png?t=M5H6https://echarts.apache.org/zh/option-gl.html#series-scatter3D

你可能感兴趣的:(echarts,3d,前端)