需求:
地图下钻时,由最初比例,以数值最高的位置为中心,放大地图至1.5倍。
官方配置项:
series-map. zoom Number 控制当前视角的缩放比例
series-map. scaleLimit Object 滚轮缩放的极限控制
series-map.scaleLimit. max number 缩放最大值
series-map.scaleLimit. min number 缩放最小值
series-map. center Array 当前视角的中心点,用经纬度表示
获取放大中心
需求限定地图放大中心是数值最高省份的经纬度,也就是.json 文件中每个省份下的属性 "cp",即地理位置
参考文章:series-mapECharts 地图实现文字居中,即省份在对应地图的中心位置
监听缩放与拖曳事件
用到了echarts的georoam事件,官方文档没有看到这个事件,这个事件能监听缩放与拖曳事件,话不多说直接上代码
myChart.on('georoam', function (params) { // 控制台打印数据的名称 console.log(params); });
georoam事件可以取到zoom值,但是是一个固定值,需要变通一下,通过getOption()方法取到当前zoom值,然后就可以通过判断zoom值做你想要做的事了嘿嘿嘿(手动狗头.),
当然代码肯定是要进行优化的,不然要卡顿,因为georoam能同时响应缩放和拖曳。不过我这里代码也勉强够用了。
参考文章:实现echarts地图监听缩放事件效果