如何快速實現REST API集成以優化業務流程
初始使用下載本地的中國 geo 格式的 json 數據來繪制地圖，點擊某一區劃（例：山東省）時，以點擊的區劃名稱使用?AMap.DistrictSearch(opts)?構造函數查詢下一級的區劃信息（例：青島市區劃 id 為 370200）和業務數據整合處理；然后以點擊的區劃 id 用AMapUI中的組件DistrictExplorer相關方法獲取下一級的地圖 json 數據，繼而繪制下一級地圖（例：青島市），再點下同…
因為 echarts 在 5.0 及之后版本因?包體積優化和法規規定?取消了內置 json 地圖數據，但仍然可以下載之前版本的依賴包來使用或下載曾經內置的地圖數據。若要引地圖 json 數據，建議下載?echarts@4.9.0?，這是?echarts?取消內置前的最新版本地圖 json 數據，之前的版本地圖數據比如 3.x，2.x 或多或少在地圖邊界和島嶼精度部分有所不準，親測~
$ npm i echarts@4.9.0import echarts from 'echarts'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)1. 引入 AMap
<!-- html文件 -->
<!--引入高德地圖JSAPI，key值是在AMap官方申請的哦，plugin是項目中用到的插件 -->
<script src="http://webapi.amap.com/maps?v=2.0&key=bb36205e1ab4869979c6505a3cc362ee&plugin=AMap.DistrictSearch"></script>
<!--引入UI組件庫（1.1版本） -->
<script src="http://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)
})
})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, // 地圖系列中的數據內容數組。數組項可以為單個數值
},
],
}
到這里，就全部介紹完畢了，希望對你有用。
本文章轉載微信公眾號@web前端開發
