使用Echarts实现3D地图效果

上一篇中，我们实现了街道乡镇的平面地图，现在需求要求实现3D立体效果（平面地图效果如下）：

关于如何实现街道、乡镇地图：juejin.cn/post/718694…

实现方式：使用geo属性生成地图(不再使用之前的series生成地图)，使用geo的top和zlevel属性来实现地图的堆叠效果；geo属性是一个数组可以构建多个相同的map根据想要的效果调整top值来实现堆叠效果，zlevel值越大图层则越往上。

mounted() {
    var myChart = echarts.init(document.getElementById('main'));
    axios.get('http://192.168.1.121:8080/static/map.json').then((res) => {
      console.log(res);
      echarts.registerMap('地图', res.data);
      let option = {
        geo: [
          {
            map: '地图',
            zlevel: 5,
            label: {
              show: true,
              color: '#eee',
            },
            itemStyle: {
              color: '#2075B8', // 背景
              borderWidth: '1', // 边框宽度
              borderColor: '#fff', // 边框颜色
            },
          },
          {
            map: '地图',
            top: '11%',
            zlevel: 4,
            itemStyle: {
              color: '#3C5FA1', // 背景
              borderWidth: '1', // 边框宽度
              borderColor: '#3C5FA1', // 边框颜色
            },
          },
          {
            map: '地图',
            top: '12%',
            zlevel: 3,
            itemStyle: {
              color: '#163F6C', // 背景
              borderWidth: '1', // 边框宽度
              borderColor: '#163F6C', // 边框颜色
            },
          },
          {
            map: '地图',
            top: '13%',
            zlevel: 2,
            itemStyle: {
              color: '#31A0E6', // 背景
              borderWidth: '1', // 边框宽度
              borderColor: '#31A0E6', // 边框颜色
              shadowColor: '#fff', // 外部阴影
              shadowBlur: '10',
            },
          },
        ]
      };
      myChart.setOption(option);
    });
  },

最终效果：