echarts 多个 geo 实现缩放拖拽同步

需求: 通过设计稿可以看到,我们需要双层的地图,但是地图间有点错位的那种效果.

如果我们分别制作两个同样大小地图,只是定位有些错位的话,当我们对地图进行拖拽或者缩放的时候,无法两个地图同时进行拖拽和缩放操作,此时我们引入多个 geo 来实现同步缩放和拖拽功能.

如何设置多个 geo 呢?

geo: [{
    zlevel:2, //geo显示级别，默认是0
    map: 'china',//地图名
    type: 'map',
    roam: true,//设置为false,不启动roam就无所谓缩放拖曳同步了
    zoom: 1.2,//缩放级别
    label: {
        show: true,
        color: '#1996b8',
        emphasis: {
            color: '#1996b8'
        }
    },
    itemStyle:{//顶层地图的样式，如地图区域颜色，边框颜色，边框大小等
        normal:{
            areaColor: '#0e2f50',
            borderColor: '#19968',
            color: '#1996b8',
            emphasis: {
                color: '#fff',
                areaColor: '#0a3767'
            }
        },
    },
},{
    map: 'china',
    roam: true, //roam与上一个geo配置相同
    zoom: 1.25,
    label: {
        show: false,
        color: '#fff'
    },
    itemStyle:{ //底层地图样式
        normal:{
            areaColor: '1996b8',
            borderColor: '#1d5685'
        },
    },
    emphasis: {
        areaColor: '#2a333d'
    },
}],

geo 设置 roam=true 时，对地图进行缩放拖曳时，上下2层 geo 是不会同步缩放拖曳，就会导致2个 geo 分层。

解决办法：添加如下代码，捕捉 georoam 事件，使下层 geo 跟着上层 geo 一起缩放和拖拽：

var myChart = this.$echarts.init(document.getElementById("map1"));
var option = { ... }
myChart.setOption(option);
//捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳
myChart.on('georoam',function(params){
    var option = myChart.getOption();//获得option对象
    if(params.zoom!=null&&params.zoom!=undefined){ //捕捉到缩放时
        option.geo[1].zoom=option.geo[0].zoom + 0.1;//下层geo的缩放等级跟着上层的geo一起改变
        option.geo[1].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
    }else{//捕捉到拖曳时
        option.geo[1].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
    }
    myChart.setOption(option);//设置option
});

当然这样的确可以实现效果,不过就是太卡顿了.

我们可以一开始就不要拆分为多个 geo .这样就不会有拖拽和缩放功能不同步的问题.我们通过添加阴影来给地图添加立体感.

geo: {
    map: 'china',
    type:'map',
    itemStyle: {
        normal:{
            areaColor: '#0e2f50',
            borderColor: '#1996b8',
            borderWidth:2,
            shadowBlur:2,
            shadowColor:'#0e2f50',
            shadowOffsetX:5,
            shadowOffsetY:10,
        }
    },
    zoom: 1,//地图放大
    aspectScale: 0.8,//地图宽高比例
    roam:true,//地图缩放、平移
},

希望大家能多多指教,提出更优的解决方案.