eharts 地图实现拖拽和缩放

缩放"/>

eharts 地图实现拖拽和缩放

Echarts地图的拖拽和缩放

• • 问题背景
  • 思路
  • 优化
  • 问题

预计阅读时间为五分钟

问题背景

1.项目中的echarts地图由于展示十段线，导致地图空间小文字被挤压，所以为了解决这个问题要把地图zoom扩大。
2.由此产生的问题是地图展示不全，所以需要添加地图的拖拽和缩放。

思路

要实现拖拽和缩放并不难因为echarts自带的一个属性可以解决，只需要在series和geo中开启roam:true就可以实现，但是现实不会那么容易😓

首先遇到的问题是当你拖拽和收缩的时候地图会分层，极大的影响了用户体验。为了解决这个问题我曾经尝试过使用geoIndex 想着把series的那层给丢掉直接指向geo的图层，但是这个方法会影响样式，之前是有两层的可以实现阴影的效果，但是现在只有一层是实现不了的。

上面好像有点乱可以简单梳理一下解决方案有两种：
为了拖拽和缩放不分层

1. 只保留一层地图，让series指向geo，方案就是在series中设置geoIndex:0,但是会损失一部分的样式例如阴影相关的。
2. 和之前一样不管地图有几层就是为了解决重叠问题，因为原来的地图样式是想要保留的，具体的实现方案如下：

      this.chart.on('georoam',(params)=>{let option = this.chart.getOption(); if(params.zoom!=null&&params.zoom!=undefined){ option.geo[0].zoom = option.series[0].zoom; option.geo[0].center = option.series[0].center;}else{option.geo[0].center = option.series[0].center}this.chart.setOption(option);});

以上主要是对georoam事件的监听，其中最重要也是我耗费时间最长的一部分就是要获取正确的option，并且这个option不是上文的直接使用的this.option，而是this.chart.getOption(),这样才能正确获取到地图中的series，geo等属性，并对其值进行更改。

优化

到目前为止能实现的基本上就已经实现了，还有一个问题就是动画相关的拖动会出现的重影或卡顿问题，要加上animationDurationUpdate:0在series和geo上就可以解决了。

问题

如有问题可评论区留言一起交流！