【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
    评论
ECharts 是百度开源的一个非常强大的数据可视化库,可以用于制作各种类型的图表,包括 3D 地图。在 ECharts 中实现 3D 飞线效果需要使用 echarts-gl 这个扩展库。 具体实现过程如下: 1. 引入 echarts 和 echarts-gl 库: ```html <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/1.1.1/echarts-gl.min.js"></script> ``` 2. 定义地图配置项: ```javascript var option = { globe: { baseTexture: 'img/earth.jpg', heightTexture: 'img/bathymetry_bw_composite_4k.jpg', displacementScale: 0.1, shading: 'realistic', environment: 'img/starfield.jpg', realisticMaterial: { roughness: 0.2 }, postEffect: { enable: true, SSAO: { enable: true, radius: 2, intensity: 1.5, quality: 'high' } }, light: { ambient: { intensity: 0.1 }, main: { intensity: 1.5 } }, viewControl: { autoRotate: true, autoRotateAfterStill: 10, targetCoord: [116.46, 39.92], distance: 200, minDistance: 150, maxDistance: 300 }, layers: [{ type: 'lines3D', coordinateSystem: 'globe', blendMode: 'lighter', polyline: true, lineStyle: { width: 1, color: '#00ffff', opacity: 1 }, data: [] }] } }; ``` 其中,globe 表示创建地球的配置项,baseTexture、heightTexture、environment、realisticMaterial 等属性用于设置地球的表面材质、高度图、环境光、反光度等参数。layers 表示在地球上添加的图层,这里使用 lines3D 表示添加飞线的效果。 3. 添加数据: ```javascript var data = [ [{ coord: [116.46, 39.92] }, { coord: [121.48, 31.22] }], [{ coord: [116.46, 39.92] }, { coord: [113.40, 23.10] }], [{ coord: [116.46, 39.92] }, { coord: [104.06, 30.67] }], …… ]; option.globe.layers[0].data = data; ``` 其中,data 数组包含每条飞线的起点和终点坐标。 4. 渲染图表: ```javascript var chart = echarts.init(document.getElementById('chart')); chart.setOption(option); ``` 通过调整 viewControl 的参数,可以控制地球的初始位置、缩放比例等。 以上就是实现 ECharts 3D 飞线效果的全部过程。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值