Echarts 用GeoJson数据绘制地图

Echarts 通过加载 DataV.GeoAtlas工具 获取的GeoJson地图数据，绘制地图。

一、先获取地图数据：数据格式分别选择包含子区域和不包含子区域各下载一份。

二、Echarts利用数据绘制

1.加载两份数据

      //获取两份数据
      const SX = await this.getWorldJson('shanXi')
      const SXNoSubRegion = await this.getWorldJson('shanXiNoSubRegion')

      //加载数据
      this.$echarts.registerMap('山西省', SX)
      this.$echarts.registerMap('山西省无子区域', SXNoSubRegion)

2. echarts绘制地图，options中内容（分别配置无子区域和包含子区域的样式）。配置时{map:''},其中map属性对应使用 registerMap 注册的地图名称。

      const option = {
        series: [
          {
            type: 'map',
            map: '山西省无子区域',
            silent: true, // 图形是否不响应和触发鼠标事
            roam: false, // 鼠标缩放
            zoom: 1.01,
            itemStyle: {
              borderColor: '#14edfc',
              borderWidth: 5,
              areaColor: 'rgba(0,0,0,0)'
            }
          },
          {
            type: 'map',
            map: '山西省',
            roam: false,
            label: {
              show: true,
              color: '#0484a5'
            },
            itemStyle: {
              borderColor: '#3b89ac',
              borderWidth: 3,
              areaColor: 'rgba(9, 40, 77, 0.5)'
            }
          }
        ]
      }

 无子区域、包含子区域分别展示效果：

 实现的叠加效果

 无子区域的模块配置 缩放比例属性 zoom：1.01（默认1），这样叠加时两者不会完全重叠，无子区域地图稍大，地图轮廓有包裹的伪3D效果。

由于地图是两者叠加的，进行鼠标缩放时，只会放大其中一者，叠加的两份无法同步缩放，导致错乱。所以配置属性禁止鼠标缩放，并禁止无子区域地图响应和触发鼠标事件（只需包含子区域的地图响应）。