上期回顾：上期讲述了如何下钻，本期将讲述如何使地图进行拖拽。 拖拽使用到的最重要的配置项为 roam: true, // 开启地图漫游，支持鼠标滚轮缩放 最大的问题是如果将其放在geo层拖拽会导致geo与series层分离。 为了解决这个问题，将 roam 配置在series层中，并赋监听事件，改变geo层。

配置如下：

animationDurationUpdate: 0, //优化地图漫游动画效果

series: [

{

roam: true, // 开启地图漫游，支持鼠标滚轮缩放

...

}

]

animationDurationUpdate: 0, //优化地图漫游动画效果 能优化拖拽时的效果，使动画卡顿感降低。

此时在initMap（）函数中为地图添加 georoam 事件

this.chart.on("georoam", (params) => {

this.fnDraggingAndZooming(params);

});

fnDraggingAndZooming(params){

let options = this.chart.getOption();

if (params.zoom != null && params.zoom != undefined) {

//捕捉到缩放时

this.options.geo.zoom = options.series[0].zoom;

this.options.series[0].zoom = options.series[0].zoom;

this.options.geo.center = options.series[0].center; //下层的geo的中心位置随着上层geo一起改变

this.options.series[0].center = options.series[0].center; //下层的geo的中心位置随着上层geo一起改变

} else {

//捕捉到拖曳时

this.options.geo.center = options.series[0].center; //下层的geo的中心位置随着上层geo一起改变

this.options.series[0].center = options.series[0].center; //下层的geo的中心位置随着上层geo一起改变

}

this.chart.setOption(this.options);

}

完整代码如下

好文阅读

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：