Echarts多层geo实现缩放、拖动同步且不卡顿!!和不同窗口尺寸始终保持立体效果

1. 多层geo实现缩放、拖动同步且不卡顿

主要通过某一篇博客的一个方法,监听拖动来实现

https://blog.csdn.net/m0_37294207/article/details/96879705

通过这个方法能够实现同步,但会发现新问题即拖动第一层geo,第二层geo会延迟

解决:
直接在第二层geo上加上该配置:

animationDurationUpdate:0,

在这里插入图片描述
配置解读就直接看官方文档的说明,如上,这个值的默认为300,将其设为0即可

当然这个配置生效的前提是animation为true,设为false是不延迟了,但卡的不行

2. 窗口尺寸变化时,多层geo始终保持立体效果

实现起来很简单,主要就是控制每层geo的left和top值

一般都是给left增加个2%即可了,具体自行调试

切记不要将某个设为center,看似简单方便了,其实就不能自适应窗口变化了

get:[{//只放了关键代码
	left:'12%',
	top:'10%',
},{
	left:'14%',
	top:'10%',
}]

最后有个问题找不到解决方案,当把地图拖动出当前窗口后,拖不回来了,不知道有无解决方案

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值