如何快速實(shí)現(xiàn)REST API集成以優(yōu)化業(yè)務(wù)流程
初始使用下載本地的中國(guó) geo 格式的 json 數(shù)據(jù)來繪制地圖，點(diǎn)擊某一區(qū)劃（例：山東省）時(shí)，以點(diǎn)擊的區(qū)劃名稱使用?AMap.DistrictSearch(opts)?構(gòu)造函數(shù)查詢下一級(jí)的區(qū)劃信息（例：青島市區(qū)劃 id 為 370200）和業(yè)務(wù)數(shù)據(jù)整合處理；然后以點(diǎn)擊的區(qū)劃 id 用AMapUI中的組件DistrictExplorer相關(guān)方法獲取下一級(jí)的地圖 json 數(shù)據(jù)，繼而繪制下一級(jí)地圖（例：青島市），再點(diǎn)下同…
因?yàn)?echarts 在 5.0 及之后版本因?包體積優(yōu)化和法規(guī)規(guī)定?取消了內(nèi)置 json 地圖數(shù)據(jù)，但仍然可以下載之前版本的依賴包來使用或下載曾經(jīng)內(nèi)置的地圖數(shù)據(jù)。若要引地圖 json 數(shù)據(jù)，建議下載?echarts@4.9.0?，這是?echarts?取消內(nèi)置前的最新版本地圖 json 數(shù)據(jù)，之前的版本地圖數(shù)據(jù)比如 3.x，2.x 或多或少在地圖邊界和島嶼精度部分有所不準(zhǔn)，親測(cè)~
$ npm i echarts@4.9.0import echarts from 'echarts'1. echarts.registerMap
echarts 方法：在 echarts 5.0 及之后版本取消了registerMap 此方法，所以最新 echarts（v5.2.2）版本引用會(huì)報(bào)錯(cuò)，所以這里我使用 v4.9.0 來注冊(cè)地圖。
// registerMap 接收兩個(gè)參數(shù)
// 第一個(gè)是地圖名稱，china 為顯示右下角南海諸島，china1 則不顯示右下角南海諸島
// 第二個(gè)參數(shù)是繪制地圖所需的json數(shù)據(jù)，在這里我下載了兩個(gè)版本的json數(shù)據(jù)放在本地引用來使用，見下文
echarts.registerMap('china', chinaJson)2. echarts.init
echarts 方法：創(chuàng)建一個(gè) ECharts 實(shí)例，返回 echartsInstance，不能在單個(gè)容器上初始化多個(gè) ECharts 實(shí)例。
// 創(chuàng)建實(shí)例，接收三個(gè)參數(shù)
// 參數(shù)dom：實(shí)例容器，一般是一個(gè)具有高寬的div元素
// 參數(shù)theme：可選，應(yīng)用的主題。可以是一個(gè)主題的配置對(duì)象
// 參數(shù)opts：可選，附加參數(shù)
this.myChart = echarts.init(dom, theme, opts)3. echartsInstance.on
實(shí)例方法：綁定事件處理函數(shù)（對(duì)應(yīng) off：解綁事件處理函數(shù)）
// 創(chuàng)建實(shí)例，接收三個(gè)參數(shù)
// 參數(shù)eventName：事件名稱，全小寫，例如'click'，'mousemove', 'legendselected'
// 參數(shù)query：可選，過濾條件，能夠只在指定的組件或者元素上進(jìn)行響應(yīng)。可為 string 或者 Object
// 參數(shù)handler：事件處理函數(shù)
this.myChart.on(eventName, query, handler)4. echartsInstance.setOption
實(shí)例方法：設(shè)置圖表實(shí)例的配置項(xiàng)以及數(shù)據(jù)，萬(wàn)能接口，所有參數(shù)和數(shù)據(jù)的修改都可以通過 setOption 完成，ECharts 會(huì)合并新的參數(shù)和數(shù)據(jù)，然后刷新圖表。
配置項(xiàng)部分用法見下文五、echarts 部分配置項(xiàng)。官方配置項(xiàng)手冊(cè)
// 參數(shù) option：配置項(xiàng)
this.myChart.setOption(option)1. 引入 AMap
<!-- html文件 -->
<!--引入高德地圖JSAPI，key值是在AMap官方申請(qǐng)的哦，plugin是項(xiàng)目中用到的插件 -->
<script src="http://webapi.amap.com/maps?v=2.0&key=bb36205e1ab4869979c6505a3cc362ee&plugin=AMap.DistrictSearch"></script>
<!--引入U(xiǎn)I組件庫(kù)（1.1版本） -->
<script src="http://webapi.amap.com/ui/1.1/main.js"></script>2. AMap.DistrictSearch(opt)
插件，行政區(qū)查詢服務(wù)，提供行政區(qū)相關(guān)信息。官方文檔
/**
參數(shù)opts：對(duì)象，實(shí)例時(shí)的配置
opts：{
level: String, 關(guān)鍵字對(duì)應(yīng)的行政區(qū)級(jí)別或商圈，可選值
showbiz: Boolean, 是否顯示商圈，默認(rèn)值true
extensions: String，是否返回行政區(qū)邊界坐標(biāo)點(diǎn)。默認(rèn)值：base，不返回行政區(qū)邊界坐標(biāo)點(diǎn)，取值：all，返回完整行政區(qū)邊界坐標(biāo)點(diǎn)
subdistrict：Number，默認(rèn)1，顯示下級(jí)行政區(qū)級(jí)數(shù)（行政區(qū)級(jí)別包括：國(guó)家、省/直轄市、市、區(qū)/縣4個(gè)級(jí)別），商圈為區(qū)/縣下一級(jí)。0不返回下一級(jí)區(qū)劃，1返回下一級(jí)區(qū)劃，2...，3...。
}
**/
const districtSearch = new AMap.DistrictSearch(opts)
// 根據(jù)關(guān)鍵字查詢行政區(qū)或商圈信息 關(guān)鍵字支持：行政區(qū)名、citycode、adcode、商圈名，默認(rèn)值：“全國(guó)”
districtSearch.search(obj.data.name, (status, result) => {
console.log('加載區(qū)劃信息', status, result)
})3. DistrictExplorer
加載繪制地圖所需的 geo 格式的 json 數(shù)據(jù)。（行政區(qū)劃瀏覽） 提供了全國(guó)范圍內(nèi)到區(qū)縣一級(jí)的行政區(qū)劃數(shù)據(jù)（含邊界），同時(shí)提供一些輔助功能，比如區(qū)劃面繪制、事件監(jiān)聽，以及快速判斷經(jīng)緯度所屬的子級(jí)區(qū)劃等。官方文檔
// 使用
AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
let districtExplorer = new DistrictExplorer({
eventSupport: true, // 打開事件支持
map: null, // 地圖對(duì)象實(shí)例。僅僅獲取數(shù)據(jù)，不涉及地圖相關(guān)的操作時(shí)，可以不設(shè)置
})
districtExplorer.loadAreaNode(obj.data.cityCode, (error, areaNode) => {
if (error) return
const mapJson = {}
// 返回該區(qū)域中全部的子級(jí)區(qū)劃Feature數(shù)組
mapJson.features = areaNode.getSubFeatures() || []
console.log('繪制地圖所需的json數(shù)據(jù)', mapJson)
})
})const option = {
visualMap: {
// 視覺映射組件配置
type: 'continuous', // 定義為連續(xù)型 visualMap
show: true,
bottom: '5%',
left: '2%',
text: ['高', '低'], // 兩端的文本
min: 0, // 指定 visualMapContinuous 組件的允許的最小值
max: 100, // 指定 visualMapContinuous 組件的允許的最大值
inRange: {
// 定義 在選中范圍中 的視覺元素
color: ['#fff', '#A0CFFF', '#409EFF'], // 圖元的顏色
},
calculable: true, // 是否顯示拖拽用的手柄（手柄能拖拽調(diào)整選中范圍）
},
tooltip: {
// 提示框組件
trigger: 'item',
formatter: function (item) {
if (item.name == '南海諸島') {
return ''
} else {
return item.name + '<br>業(yè)務(wù)數(shù)據(jù)：' + (item.value || 0) + ' 個(gè)'
}
},
},
series: [
// 系列列表。每個(gè)系列通過 type 決定自己的圖表類型
{
type: 'map', // 系列列表。每個(gè)系列通過 type 決定自己的圖表類型
map: 'china', // 地圖。china 為中國(guó)全國(guó)地圖+右下角南海諸島，china1 為中國(guó)全國(guó)地圖
name: '業(yè)務(wù)數(shù)據(jù)', // 系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列
aspectScale: 0.75, // 用于 scale 地圖的長(zhǎng)寬比
zoom: 1.2, // 地圖縮放多少倍
roam: true, // 允許縮放和平移
mapType: '自定義地圖',
selectedMode: 'single', // 點(diǎn)擊區(qū)域，會(huì)處于選中狀態(tài)，single單選
showLegendSymbol: false, // 在圖例相應(yīng)區(qū)域顯示圖例的顏色標(biāo)識(shí)（系列標(biāo)識(shí)的小圓點(diǎn)），存在 legend 組件時(shí)生效
// center: [100.97, 35.71], // 初始化時(shí)的地圖位置，可通過改變地圖中心視角的經(jīng)緯度來實(shí)現(xiàn)地圖的平移
itemStyle: {
// 地圖區(qū)域的多邊形圖形樣式
normal: {
// 正常時(shí)的樣式
color: '#ccc', // 圖形的顏色
borderColor: '#303133', // 圖形的描邊顏色
areaColor: '#d4f7fc', // 地圖區(qū)域顏色
borderWidth: 0.5, // 描邊線寬。為 0 時(shí)無描邊
label: {
// 設(shè)置地圖區(qū)域名的文本樣式，例如地名的字體大小等
show: true, // 顯示地區(qū)的文本名稱,默認(rèn)是不顯示的，默認(rèn)狀態(tài)是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, // 地圖系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項(xiàng)可以為單個(gè)數(shù)值
},
],
}
到這里，就全部介紹完畢了，希望對(duì)你有用。
本文章轉(zhuǎn)載微信公眾號(hào)@web前端開發(fā)
對(duì)比大模型API的內(nèi)容創(chuàng)意新穎性、情感共鳴力、商業(yè)轉(zhuǎn)化潛力
一鍵對(duì)比試用API 限時(shí)免費(fèi)
鍵.png)
