【echart-gl】利用visualMap实现bar3D的动态升高效果;利用viewControl实现3D地图的动态视角转换

需求

最近有个需求,需要在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轴正方向垂直向上移动(图向下࿰
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值