使用echarts实现3D地图和需要注意的点
一些用echarts的艰难险阻
·
echarts实现3d地图有两种方法
一种是map3D
一种是geo3D + series中的内容(比如bar3D、scatter3D)
需要强调的是:map3D可以使用 this.chart.on('click', 回调函数);方法获取点击内容,而geo3D是不可以的。
所以我们如果想用点击事件,并且还想在地图上做一些散点,圆柱。可以map3D和geo3D同时使用,将geo3D中show属性设为false隐藏就可以了
一、注册地图
1、注册地图,使用echarts.registerMap(mapName,opt)注册地图
参数:
-
mapName
地图名称,在 geo 组件或者 map 图表类型中设置的 map 对应的就是该值。
-
opt
2、geojson可以在阿里的那个生成
但是需要注意一点:阿里生成的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
更多推荐
已为社区贡献2条内容
所有评论(0)