echart 给2d地图添加3d效果

通过设置多个图层叠加出阴影效果

1、使用series初始化地图

地图 mapJson获取： datav.aliyun.com/portal/scho…

代码如下：

const initChart = () => {
    const chartDom = document.getElementById('map');
    myChart = echarts.init(chartDom);
    myChart.showLoading();
    echarts.registerMap('gzs', mapJson); 
    option = {
      series: [
        {
          type: 'map',
          map: 'gzs',
          roam: false, // 是否开启鼠标缩放和平移
          zoom,
          itemStyle: {
            borderWidth: 2,
            borderColor: '#EEF7FF'
          },
          label: {
            show: true,
            color: '#FFFFFF'
          },
          emphasis: {
            itemStyle: {
              areaColor: '#FF8802'
            }
          },
          data: [
            { name: '荔湾区', value: 4822023 },
            { name: '越秀区', value: 731449 },
            { name: '海珠区', value: 6553255 },
            { name: '天河区', value: 2949131 },
            { name: '白云区', value: 38041430 },
            { name: '黄埔区', value: 5187582 },
            { name: '番禺区', value: 3590347 },
            { name: '花都区', value: 917092 },
            { name: '南沙区', value: 632323 },
            { name: '从化区', value: 19317568 },
            { name: '增城区', value: 9919945 }
          ]
        }
      ],
      visualMap: {
        left: 'right',
        min: 0,
        max: 38000000,
        inRange: {
          color: ['#CDDEFD', '#A5C5FF', '#87B2FF', '#6B9FFF', '#1c6af8']
        },
        text: ['数量'],
        calculable: true
      },
      tooltip: {
        trigger: 'item',
        show: true,
        formatter(params) {
          return `${params.name}：${params.value}`;
        }
      }
    };
    myChart.hideLoading();
    myChart.setOption(option);
};

效果如图：

2、使用geo和top\left\right\bottom和zlevel实现地图叠加阴影效果

    geo: [
        {
          map: 'gzs',
          left: '19%',
          zoom,
          emphasis: {
            label: false,
            itemStyle: {
              color: '#CFE3F3'
            }
          },
          itemStyle: {
            shadowColor: '#B0C6DA',
            shadowOffsetX: 2,
            shadowBlur: 5,
            color: '#CFE3F3', // 背景
            borderWidth: '0' // 边框宽度
            // borderColor: '#fff' // 边框颜色
          }
        }
      ]

效果如下：

geo多条数据时可根据zlevel控制层级关系