echarts地图区域重叠

问题描述

抚州市文昌区在临川区内部，导致无法通过鼠标选择文昌区。因为将鼠标移动到文昌区域时，优先是临川区高亮，而文昌区会被覆盖，显示不了。
那如何解决这个问题呢？

解决方案

方案一

设置文昌区的zlevel属性，使其值大于其它区域。此时文昌区会处于其它区域的最顶层，即使其它区域高亮时都不会被覆盖，因此可以正常点击，满足要求。

JS主要代码如下：

// 在页面初始化时先加载一下wenchang的地图数据。如果不先加载一遍，则series中wenchang的属性设置不会生效，包含zlevel的设置
// 考虑到这个加载不应该展示给用户，因此通过第二个参数来控制区域的opacity。本次加载opacity设置为0，使得区域不显示
that.loadMap('wenchang', true);

loadMap(mapType, hide):

var opacity = 1;
if (hide) {
    opacity = 0;
}
that.myChart = echarts.init($('#' + that.el)[0]);
var seriesItem = {
    name: "",
    type: 'map',
    zoom: 1, // 当前视角的缩放比例
    roam: false, // 是否开启平游或缩放
    map: mapType,
    itemStyle: {
        normal: {
            areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#4354b6' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#00b6fe' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            },
            borderColor: '#2b91b6',
            borderWidth: 1,
            shadowColor: '#4354b6',
            shadowOffsetX: 6,
            shadowOffsetY: 5,
            shadowBlur: 3,
            opacity: opacity
        },
        emphasis: {
            areaColor: '#2B91B6',
            color: '#ededec'
        },
    },
    // 地市标签字体样式
    label: {
        normal: {
            show: true,
            textStyle: {
                color: "#ffffff",
                fontSize: 10
            }
        },
        emphasis: {
            color: '#222'
        }
    },
    data: that.data,
    zlevel: 1
};
var series = [seriesItem];
// 当加载抚州市地图时，才显示文昌区的区域。其它时候不显示。
// 这里设置了left,top的偏移，使得其在正确的位置，否则默认是在整个图的中心显示。并且设置zoom，以便大小合适。如果zoom=1，会填满整个图，不符合要求
// 其它区域zlevel=1，这里设置文昌区的zlevel=2，表示在所有其它区域顶层，不被覆盖
if (mapType == 'fuzhou') {
    var wenchang = $.extend({}, seriesItem, {
        zoom: 0.1, // 当前视角的缩放比例
        left: '73',
        top: '-64',
        map: 'wenchang',
        zlevel: 2
    });
    series.push(wenchang);
}

var option = {
    title: {
        text: '',
        left: 'left',
        textStyle: {
            color: '#FFF',
            fontSize: 14
        },
        padding: 10
    },
    tooltip: {
        trigger: 'item',
        showDelay: 0,
        transitionDuration: 0.2,
        formatter: function (params) {
            var value = (params.value + '').split('.');
            // console.log(params.value);
            value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
            // return params.name + ': ' + value;
            return params.name;
        }
    },
    visualMap: {
        show: false,
        type: 'continuous',
        min: 0,
        max: 1000,
        range: [0, 1000],
        x: 'left',
        y: 'bottom',
        inRange: {
            color: ['#a1ddf5', '#1853b1']
        },
        textStyle: {
            color: '#FFF',
            fontSize: 14
        },
        calculable: true
    },
    series: series
};

// 注意，必须要加上第二个参数notMerge，为true时表示不与上一次的option合并。
// 如果不设置为true，则展示其它区域地图时，wenchang区域出现过一次之后始终会存在
that.myChart.setOption(option, true);

方案二

将文昌区的区域做个偏移，使其不在临川区包围圈内。这个时候，就可以通过鼠标选中了。

// 通过specialAreas设置文昌区的偏移
// 注意对象名和地图显示名称一致，这里为'文昌区'
var specialAreas = {
    '文昌区': {
        // 左上角经度
        left: 116.312174,
        // 左上角纬度
        top: 27.954811,
        // 经度横跨的范围
        width: 0.2
    }
};
echarts.registerMap(mapType, map, specialAreas);

方案三

通过在文昌区加个气泡，然后通过先选择气泡，然后选择文昌区。因为选择其它区域（临川区）时，区域高亮并不会覆盖气泡。