关于echarts:echarts地图区域重叠

6次阅读

共计 2286 个字符，预计需要花费 6 分钟才能阅读完成。

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

设置文昌区的 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);

通过在文昌区加个气泡，而后通过先抉择气泡，而后抉择文昌区。因为抉择其它区域（临川区）时，区域高亮并不会笼罩气泡。

正文完