Vue中使用echarts@4.x中國地圖及AMap相關API的使用-有解無憂

一、此 demo 實作的基本功能

中國地圖的顯示
地圖點擊下鉆的功能
地圖相關組件的使用，例 tooltip...

二、實作思路

初始使用下載本地的中國 geo 格式的 json 資料來繪制地圖，點擊某一區劃（例：山東省）時，以點擊的區劃名稱使用 AMap.DistrictSearch(opts) 建構式查詢下一級的區劃資訊（例：青島市區劃 id 為 370200）和業務資料整合處理；然后以點擊的區劃 id 用AMapUI中的組件DistrictExplorer相關方法獲取下一級的地圖 json 資料，繼而繪制下一級地圖（例：青島市），再點下同...

三、引入 echarts

因為 echarts 在 5.0 及之后版本因包體積優化和法規規定取消了內置 json 地圖資料，但仍然可以下載之前版本的依賴包來使用或下載曾經內置的地圖資料，

若要引地圖 json 資料，建議下載 [email protected] ，這是 echarts 取消內置前的最新版本地圖 json 資料，之前的版本地圖資料比如 3.x，2.x 或多或少在地圖邊界和島嶼精度部分有所不準，親測~

1. 通過 npm 方式下載 echarts

$ npm i [email protected]

2. 引入 echarts

import echarts from 'echarts'

3. 相關 api 說明

1. echarts.registerMap

echarts 方法：在 echarts 5.0 及之后版本取消了registerMap 此方法，所以最新 echarts（v5.2.2）版本參考會報錯，所以這里我使用 v4.9.0 來注冊地圖，

// registerMap 接收兩個引數
// 第一個是地圖名稱，china 為顯示右下角南海諸島，china1 則不顯示右下角南海諸島
// 第二個引數是繪制地圖所需的json資料，在這里我下載了兩個版本的json資料放在本地參考來使用，見下文

echarts.registerMap('china', chinaJson)

2. echarts.init

echarts 方法：創建一個 ECharts 實體，回傳 echartsInstance，不能在單個容器上初始化多個 ECharts 實體

// 創建實體，接收三個引數
// 引數dom：實體容器，一般是一個具有高寬的div元素
// 引數theme：可選，應用的主題，可以是一個主題的配置物件
// 引數opts：可選，附加引數

this.myChart = echarts.init(dom, theme, opts)

3. echartsInstance.on

實體方法：系結事件處理函式（對應 off：解綁事件處理函式）

// 創建實體，接收三個引數
// 引數eventName：事件名稱，全小寫，例如'click'，'mousemove', 'legendselected'
// 引數query：可選，過濾條件，能夠只在指定的組件或者元素上進行回應，可為 string 或者 Object
// 引數handler：事件處理函式

this.myChart.on(eventName, query, handler)

4. echartsInstance.setOption

實體方法：設定圖表實體的配置項以及資料，萬能介面，所有引數和資料的修改都可以通過 setOption 完成，ECharts 會合并新的引數和資料，然后重繪圖表，

配置項部分用法見下文五、echarts 部分配置項，官方配置項手冊

// 引數 option：配置項

this.myChart.setOption(option)

四、AMap 相關 api 使用說明

1. 引入 AMap

<!-- html檔案 -->

<!--引入高德地圖JSAPI，key值是在AMap官方申請的哦，plugin是專案中用到的插件 -->
<script src="https://www.cnblogs.com//webapi.amap.com/maps?v=2.0&key=bb36205e1ab4869979c6505a3cc362ee&plugin=AMap.DistrictSearch"></script>

<!--引入UI組件庫（1.1版本） -->
<script src="https://www.cnblogs.com//webapi.amap.com/ui/1.1/main.js"></script>

2. AMap.DistrictSearch(opt)

插件，行政區查詢服務，提供行政區相關資訊，官方檔案

/** 
引數opts：物件，實體時的配置
opts：{
  level: String, 關鍵字對應的行政區級別或商圈，可選值
  showbiz: Boolean, 是否顯示商圈，默認值true
  extensions: String，是否回傳行政區邊界坐標點，默認值：base，不回傳行政區邊界坐標點，取值：all，回傳完整行政區邊界坐標點
  subdistrict：Number，默認1，顯示下級行政區級數（行政區級別包括：國家、省/直轄市、市、區/縣4個級別），商圈為區/縣下一級，0不回傳下一級區劃，1回傳下一級區劃，2...，3...，
}
**/

const districtSearch = new AMap.DistrictSearch(opts)
// 根據關鍵字查詢行政區或商圈資訊 關鍵字支持：行政區名、citycode、adcode、商圈名，默認值：“全國”
districtSearch.search(obj.data.name, (status, result) => {
  console.log('加載區劃資訊', status, result)
})

3. DistrictExplorer

加載繪制地圖所需的 geo 格式的 json 資料，（行政區劃瀏覽）提供了全國范圍內到區縣一級的行政區劃資料（含邊界），同時提供一些輔助功能，比如區劃面繪制、事件監聽，以及快速判斷經緯度所屬的子級區劃等，官方檔案

// 使用

AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
  let districtExplorer = new DistrictExplorer({
    eventSupport: true, // 打開事件支持
    map: null, // 地圖物件實體，僅僅獲取資料，不涉及地圖相關的操作時，可以不設定
  })
  districtExplorer.loadAreaNode(obj.data.cityCode, (error, areaNode) => {
    if (error) return
    const mapJson = {}
    // 回傳該區域中全部的子級區劃Feature陣列
    mapJson.features = areaNode.getSubFeatures() || []
    console.log('繪制地圖所需的json資料', mapJson)
  })
})

五、echarts 部分配置項

const option = {
  visualMap: {
    // 視覺映射組件配置
    type: 'continuous', // 定義為連續型 visualMap
    show: true,
    bottom: '5%',
    left: '2%',
    text: ['高', '低'], // 兩端的文本
    min: 0, // 指定 visualMapContinuous 組件的允許的最小值
    max: 100, // 指定 visualMapContinuous 組件的允許的最大值
    inRange: {
      // 定義 在選中范圍中 的視覺元素
      color: ['#fff', '#A0CFFF', '#409EFF'], // 圖元的顏色
    },
    calculable: true, // 是否顯示拖拽用的手柄（手柄能拖拽調整選中范圍）
  },
  tooltip: {
    // 提示框組件
    trigger: 'item',
    formatter: function (item) {
      if (item.name == '南海諸島') {
        return ''
      } else {
        return item.name + '<br>業務資料：' + (item.value || 0) + ' 個'
      }
    },
  },
  series: [
    // 系列串列，每個系列通過 type 決定自己的圖表型別
    {
      type: 'map', // 系列串列，每個系列通過 type 決定自己的圖表型別
      map: 'china', // 地圖，china 為中國全國地圖+右下角南海諸島，china1 為中國全國地圖
      name: '業務資料', // 系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用于指定對應的系列
      aspectScale: 0.75, // 用于 scale 地圖的長寬比
      zoom: 1.2, // 地圖縮放多少倍
      roam: true, // 允許縮放和平移
      mapType: '自定義地圖',
      selectedMode: 'single', // 點擊區域，會處于選中狀態，single單選
      showLegendSymbol: false, // 在圖例相應區域顯示圖例的顏色標識（系列標識的小圓點），存在 legend 組件時生效
      // center: [100.97, 35.71], // 初始化時的地圖位置，可通過改變地圖中心視角的經緯度來實作地圖的平移
      itemStyle: {
        // 地圖區域的多邊形圖形樣式
        normal: {
          // 正常時的樣式
          color: '#ccc', // 圖形的顏色
          borderColor: '#303133', // 圖形的描邊顏色
          areaColor: '#d4f7fc', // 地圖區域顏色
          borderWidth: 0.5, // 描邊線寬，為 0 時無描邊
          label: {
            // 設定地圖區域名的文本樣式，例如地名的字體大小等
            show: true, // 顯示地區的文本名稱,默認是不顯示的，默認狀態是hoverORclick才顯示
            fontSize: 12,
            textStyle: {
              color: '#606266',
            },
          },
        },
        emphasis: {
          // 選中后的樣式
          areaColor: '#4382F6',
          borderColor: '#fff',
          areaStyle: {
            color: '#fff',
          },
          label: {
            show: true,
            fontSize: 12,
            textStyle: {
              color: '#003767',
            },
          },
        },
      },
      data: this.mapData, // 地圖系列中的資料內容陣列，陣列項可以為單個數值
    },
  ],
}

六、地圖 json 資料說明及 demo 效果圖

1. 地圖 json 資料說明比較

[email protected] 版本之前內置的 geo 地圖 json 資料（這里特指v4.9.0）是不顯示海南省下方的南海諸島海域，所以地圖較方正，
阿里datav的地圖 json 資料是顯示海南省下方的南海諸島海域，所以地圖偏高，

2. demo 效果圖

使用[email protected]內置的地圖 json 資料繪制

使用阿里datav下載的地圖 json 資料繪制

demo gitee 地址

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/373968.html

標籤：其他

上一篇：全新Java入門到架構師教程之JavaScript物件（object）和關鍵字（this）

下一篇：使用input+datalist簡單實作實時匹配的可編輯下拉串列-并解決選定后瀏覽器默認只顯示value的可讀性問題

Vue中使用[email protected]中國地圖及AMap相關API的使用