需求
最近有个需求,需要在3D地图上轮播区域,并且还要将视角转换到当前区域,然后在该出现3D柱状图的动态升起的动画效果。然而在echart的官方文档上,都没有找到合适的方法实现,2D地图倒是可以通过center修改处于中心的经纬度实现视角转换,3D地图的center是视角相对于坐标轴的偏移量,并不是经纬度,于是先开始思考视角转换的实现方法
如何实现视角转换
仔细阅读文档,和视角控制有关的还是 center 所在的 viewControl,于是想到了,虽然不能通过经纬度控制视角,但是我们可以通过手动的偏移,提前确定每一个区域所在的最佳视角,在轮播区域时,动态设置viewControl实现视角的切换
视角默认的中心点为[0,0,0],分别对应[x,y,z]轴,水平向右为x轴正方向,垂直向上为y轴正方向, 视线方向为z轴反方向(向屏幕外部为z轴正方向)
viewControl:{
distance:80, //与视角的距离,值越大,图离视角越远,图越小
alpha:30, //绕x轴旋转的角度(上下旋转),增大,视角顺时针增大(向上)
beta:80, //绕y轴旋转的角度(左右旋转),增大,视角逆时针增大(向右)
center:[-15,-5,-10] //第一个参数:增大,视角沿x轴正方向水平右移动(图向左);第二个参数:增大,视角沿y轴正方向垂直向上移动(图向下