echarts 3d地图 实现多个geo层缩放拖拽同步且不卡顿

效果:

 主要代码:

原理:监听捕获放大缩小动作,设置下层geo的zoom,center为顶层的zoom,center。

标记点大小是计算放大缩小倍数,重设值图标大小。

注意:最后所有层记得加上 animationDurationUpdate:0, 不然会有同步延迟和卡顿

myChart.on("georoam", function(params) {
					var option = myChart.getOption(); //获得option对象
					if (params.zoom != null && params.zoom != undefined) {
						//捕捉到缩放时
						let mo = option.geo[0].zoom
						option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
						option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
						// 改变标记点随地图放大缩小
						// console.log(option.series)
						let size = option.series[0].zoom/mo
						if(option.series[0].zoom>mo){
							// console.log(option.series)
							option.series[2].symbolSize = [option.series[2].symbolSize[0]*size,option.series[2].symbolSize[1]*size]
							option.series[1].symbolSize=option.series[1].symbolSize*size
							option.series[1].label.fontSize=option.series[1].label.fontSize*size
						}else{
							option.series[2].symbolSize = [option.series[2].symbolSize[0]*size,option.series[2].symbolSize[1]*size]
							option.series[1].symbolSize = option.series[1].symbolSize*size
							option.series[1].label.fontSize = option.series[1].label.fontSize*size
						}
						// 改变标记点end
					} else {
						//捕捉到拖曳时
						option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
					}
					// myChart.dispatchAction({ //来用程序主动渲染选框
					// 	type: "restore",
					// });
					myChart.setOption(option); //设置option
				});

animationDurationUpdate:0, //数据更新动画的时长。

 主要是记录下,所以这里就只放了比较关键的代码段

扩展:

以上代码是针对我当前项目配置的,以下是缩放移动同步的主要代码:

myChart.on("georoam", function(params) {
					var option = myChart.getOption(); //获得option对象
					if (params.zoom != null && params.zoom != undefined) {
						//捕捉到缩放时
						option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
						option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
                    } else {
						//捕捉到拖曳时
						option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
					}
					// myChart.dispatchAction({ //来用程序主动渲染选框
					// 	type: "restore",
					// });
					myChart.setOption(option); //设置option
				});

echarts配置项对应:

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

另一个自己IT

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值