echarts5.0使用第三方地圖數據並下鑽顯示

衆所周知echarts在5.0之後不再在原始包裏邊提供地圖map數據(我其實好幾年沒用過echarts地圖了,上次用的版本還是3.0),所以現在我想使用地圖時需要如下操作: 

    1.通過阿里DataV可視化平臺下載地圖json數據 DataV.GeoAtlas地理小工具系列 (aliyun.com)

   

 

 

 

 

 

 

 

2. 下載中國地圖geomap數據:

   這是我自己收集的可以下鑽到省市區的json數據,歡迎start:  JamesView/geoMaps: 自己收集的中國地圖(含港澳臺)geo數據(可以下鑽到區縣級) (github.com)

3. 首先渲染全國地圖,然後通過循環請求,新的地圖數據實現下鑽

async initMap(adcode = 100000) {
      this.$request.request({
    
        url: `/web/static/mapData/${adcode}.json`,
        baseURL: process.env.NODE_ENV === 'development' ? '某某域名' : ''
       
      }).then(res => {
        const mapData = res;
        this.eLoading.close();
        this.mapCharts = echarts.init(document.getElementById('mapCanvas'));
        echarts.registerMap('China', mapData);
        const option = {
          title: {
            text: '',
            textStyle: {
              fontSize: 20
            }
            
          },
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 20
            },
            formatter: (params) => {
              console.log(params);
              const resultStr = `${params.name}: ${params?.data?.value || '-'}`;
              if (this.mapFilterInfo.type === '1') {
                return resultStr + '次'
              } else if (this.mapFilterInfo.type === '2') {
                return resultStr + '單'
              } else {
                return resultStr + '元'
              }
            }
         
          },
          toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            // min給sort後數組的第一個值,但是要注意數組長度不爲2,則第一個給0
            min: parseInt(this.hotMapData[1] ? this.hotMapData[0]?.value : 0),
            max: parseInt(this.hotMapData[this.hotMapData?.length - 1]?.value) + 1,
            text: ['高', '低'],
            top: '3%',
            left: '2%',
            realtime: false,
            // calculable: true,
            inRange: {
              // color: ['lightskyblue', 'lightgreen', 'gold', 'orangered']
              // color: ['rgb(246,162,162)', 'rgb(246,2,2)']
              color: ['#BDE488', '#01865D']
            },
            textStyle: {
              fontSize: 20
            }
          },
          series: [
            {
              name: '區域值',
              type: 'map',
              map: 'China',
              roam: true,
              zoom: adcode === '100000' ? 1.6 : 1.2,
              left: 'center',
              top: adcode === '100000' ? '25%' : 'center',
              scaleLimit: {
                min: 1,
                max: 10
              },
              /* label: {
                  show: true
                },*/
              data: this.hotMapData,
     
              // 自定義名稱映射
              nameMap: {},
              color: '#fff',
              label: {
                show: true,
                position: 'bottom', // 顯示位置
                offset: [0, 0], // 偏移設置
                color: 'rgba(40,39,39)',
                // formatter: '{b}', // 圓環顯示文字
                fontSize: 15
              },
              itemStyle: {
                // areaColor: '#000',
                borderColor: 'rgba(40,39,39,0.3)',
                borderWidth: 1
              },
              emphasis: {
                label: {
                  show: true
                },
                itemStyle: {
                  show: true,
                  areaColor: '#04cc8f'
                }
              }
            }
          ]
        };
        this.mapCharts.setOption(option, true);
        let timeFn = null;
        this.mapCharts.off('click'); // 防止重複綁定,先關閉click
        this.mapCharts.on('click', (params) => {
          console.log(params);
          clearTimeout(timeFn);
          // 由於單擊事件和雙擊事件衝突，故單擊的響應事件延遲250毫秒執行
          timeFn = setTimeout(() => {
            if ([20, 30].indexOf(this.user.loginInfo.levCd) > -1 ||
              this.mapFilterInfo.mapLevel >= 3 ||
              this.MUNICIPALITY_CITY_CODE.indexOf(adcode) > -1 // 此處對直轄市做特殊處理,直轄市不再下鑽
            ) {
              this.$message('市級及以下不可再下鑽');
            } else if (params?.data?.code) {
              this.mapFilterInfo.mapLevel++; // 地圖層級+1
              this.mapCodeHistory.push(params.data.code);
              this.getHotMapData(params.data.code);
            } else {
              this.$message('當前區域暫無可下鑽數據');
            }
          }, 250);
        });
     
      }).catch((err) => {
        console.log(err);
        this.eLoading.close();
        this.$message.error('未獲取到地圖數據');
      })
    },

4. 總結:

   獲取地圖數據, 將json數據放到服務器上,通過地圖click事件不斷訪問新層級的json數據,然後重複渲染動作即可;

效果如下,全國-四川-成都: