echarts地图缩放监听事件的实现

实现echarts地图监听缩放事件效果

最近需要获取echarts地图的缩放事件，然后根据缩放的等级zoom，进行相关的操作。

但是发现echarts官网居然没有相关事件，后来查到了相关的事件：‘georoam’，该事件可以监听geo地理坐标系组件的缩放和拖拽事件。

比如我们希望实现一个效果：

当地图缩放到8倍及以上时，我们输出一些内容，进行一些操作；

当地图缩放到8倍以下时，我们再输出一些内容，进行一些我们想要的操作。

// html部分

...

<div id="myEcharts"></div>

...

// js部分
import echarts from 'echarts';

...

renderEcharts() {
	let myEcharts = echarts.init(document.getElementById('myEcharts'));
	let option = {
		...
	};
	myEcharts.setOption(option);

	// 接下来我们需要监听地理坐标系组件geo的缩放和拖拽事件
	myEcharts.on('georoam', function(params) {
		console.log('params', params); //第一次，可以打印出params
        
		let {dx, dy} = params;
		if (dx || dy || (dx === 0 && dy === 0)) {
			// 如果是拖拽事件就不做处理（我目前希望在缩放事件里面做相关的处理）
			return;
		}
        
		let option = this.chart.getOption();
		// getOption的函数是为了获取当前实例中维护的 option 对象
    
		// 接下来获取geo组件缩放等级  
  		// 获取zoom这个得打印出option，然后参照该对象进行相应的获取，
        // 这个获取方式不是固定，在下面我会打印出相关的option
  		let zoom = option.geo[0].zoom; 
        
		if (zoom >= 8) {
			// 当缩放等级大于等于8的时候
			// 可以配置你需要的操作
			console.log('缩放等级大于等于8了');
		}
		else {
 			// 当缩放等级小于8的时候
			// 可以配置你需要的操作
			console.log('缩放等级小于8了');
		}

		this.chart.clear();
		this.chart.setOption(option);
	})
}

上面的函数实现了对echarts的geo地理组件缩放和拖拽事件的监听，并且可以配置自己需要的操作。

缩放地图的时候输出的params：

拖拽地图的时候输出的parmas：

通过上面两图的比较可以很明显看出来：

只要params对象存在dx/dy属性，就是触发了拖拽事件

打印出来的option，根据不同的配置会出现不同的对象，自己找到需要的zoom

打开option对象的geo属性，红色区域内就是我们需要获取的缩放等级zoom。

以上就是相关知识点，有不当的地方敬请指正。