【前端早自习】Echart多下实现Geo缩放拖曳

余生杂货铺2023-10-122024-07-16

Echart多Geo缩放拖曳。有两层地图，一层用于作为背景，一层用于显示，实现阴影的效果。实现鼠标同步缩放拖动两层地图

Echart多Geo下实现缩放拖曳

需求

有两层地图，一层用于作为背景，一层用于显示，实现阴影的效果。

实现鼠标缩放拖动地图

分析

Echarts geo 具有roam属性，设置为true可以实现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,
    animationDurationUpdate: 0, // 去除动画，同步上层运动
    label: {
        show: false,
        color: '#fff'
    },
    itemStyle:{ //底层地图样式
        normal:{
            areaColor: '1996b8',
            borderColor: '#1d5685'
        },
    },
    emphasis: {
        areaColor: '#2a333d'
    },
}],

同步缩放的实现

上层用roam属性，可以进行缩放拖动，通过georoam事件监听，将上层的缩放属性zoom和视觉中心位置center属性赋值给下面一层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
});