echarts 监听地图放大缩小事件

最新推荐文章于 2024-04-10 11:50:31 发布

代码搬运媛

最新推荐文章于 2024-04-10 11:50:31 发布

阅读量1.4k

点赞数 2

分类专栏： VUE专栏文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/sinat_33255495/article/details/129044158

版权

VUE专栏专栏收录该内容

63 篇文章 5 订阅

订阅专栏

文章介绍了如何在echarts中实现对使用georoam方法的中国地图的缩放事件进行监听。首先初始化中国地图，然后设置监听函数`listenerZoom`，在该函数内处理缩放事件，获取并修改地图的缩放比例，最后更新地图的配置选项。

摘要由CSDN通过智能技术生成

实现监听的方法： georoam

注意：监听的 georoam方法的前提：echarts实现的中国地图，option地理坐标组件的配制是geo

具体实现方法：

    //初始化中国地图
    initEchartMap() {
	      let mapDiv = document.getElementById("material_map_box");
	      let myChart = echarts.init(mapDiv);
	      myChart.setOption(this.options);
	      this.myChart = myChart;
	      this.listenerZoom();
    },
   
    //监听缩放事件
   listenerZoom() {      
      this.myChart.on("georoam", params => {
        if (params.dy || params.dx) return; //如果是拖拽事件则退出
        let _option = this.myChart.getOption();     //获取最新的option配制
        let _zoom = _option.geo[0].zoom;           //获取当前缩放比例zoom

        这里可以根据自己情况修改_option选项配制。。。。。。
     
        this.myChart.clear();                            //清空
        this.myChart.setOption(_option);        //更新修改后的option配制
      });
    },