echarts定点缩放地图 && 监听缩放与拖曳事件

 需求:

  地图下钻时,由最初比例,以数值最高的位置为中心,放大地图至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事件,官方文档没有看到这个事件,这个事件能监听缩放与拖曳事件,话不多说直接上代码  

   echarts定点缩放地图 && 监听缩放与拖曳事件

  

myChart.on('georoam', function (params) {
    // 控制台打印数据的名称
    console.log(params);
});

   georoam事件可以取到zoom值,但是是一个固定值,需要变通一下,通过getOption()方法取到当前zoom值,然后就可以通过判断zoom值做你想要做的事了嘿嘿嘿(手动狗头.),

  当然代码肯定是要进行优化的,不然要卡顿,因为georoam能同时响应缩放和拖曳。不过我这里代码也勉强够用了。

  参考文章:实现echarts地图监听缩放事件效果

       获取地图缩放事件的例子