首先，來看下效果圖

在線體驗(yàn)地址：https://hxkj.vip/demo/echartsMap/，并提供實(shí)時(shí)geoJson數(shù)據(jù)文件下載
echarts官方社區(qū)鏈接地址（可在線編輯）：https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ

前段時(shí)間給公司弄了一套基于echarts map的地圖數(shù)據(jù)展示的平臺(tái)，開發(fā)過程中發(fā)現(xiàn)百度官方已經(jīng)不提供地圖下載了，于是只能期望能在網(wǎng)上搜到哪位大佬幫忙收集的json文件。找是找到了，然鵝發(fā)現(xiàn)大部分都年代久遠(yuǎn)了，很多地區(qū)其實(shí)已經(jīng)重新劃分行政區(qū)劃了。
所以，只能想想其他辦法了，回想起平常使用高德地圖搜索某個(gè)地名的時(shí)候，好像會(huì)有個(gè)邊界區(qū)域給我們繪制出來，然后我就覺得它既然能畫出來，應(yīng)該會(huì)有辦法從某些渠道獲取，或者高德地圖會(huì)提供相應(yīng)的API。于是乎，去到了高德開放平臺(tái)仔細(xì)的查看了一下他提供的api，哈哈，果然有！有了接口，接下來就是擼碼了。

第一步，通過高德api獲取邊界數(shù)據(jù)

通過查閱API文檔可以知道，獲取邊界數(shù)據(jù)的接口為行政區(qū)查詢服務(wù)（AMap.DistrictSearch）。使用該服務(wù)之前記得去申請(qǐng)一個(gè)key，用于調(diào)用高德接口，申請(qǐng)地址直通車：https://lbs.amap.com/dev/key/app。

1、在頁面添加 JS API 的入口腳本標(biāo)簽，并將其中「您申請(qǐng)的key值」替換為您剛剛申請(qǐng)的 key；

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=「您申請(qǐng)的key值」&plugin=AMap.DistrictSearch"></script>

2、通過以下方式獲取數(shù)據(jù)，以獲取中國(guó)地圖為例；

this.opts = {subdistrict: 1, //返回下一級(jí)行政區(qū)showbiz: false //最后一級(jí)返回街道信息 }; this.district = new AMap.DistrictSearch(this.opts);//注意：需要使用插件同步下發(fā)功能才能這樣直接使用 this.district.search('中國(guó)', (status, result) => {if (status == 'complete') {this.getData(result.districtList[0], '', 100000);} }); getData(data, level, adcode) {//處理獲取出來的邊界數(shù)據(jù)var subList = data.districtList;if (subList) {var curlevel = subList[0].level;if (curlevel === 'street') {//為了配合echarts地圖區(qū)縣名稱顯示正常，這邊街道級(jí)別數(shù)據(jù)需要特殊處理let mapJsonList = this.geoJsonData.features;let mapJson = {};for (let i in mapJsonList) {if (mapJsonList[i].properties.name == this.cityName) {mapJson.features = [].concat(mapJsonList[i]);}}this.mapData = [];//這個(gè)mapData里包含每個(gè)區(qū)域的code、名稱、對(duì)應(yīng)的等級(jí)，實(shí)現(xiàn)第三步功能時(shí)能用上this.mapData.push({name: this.cityName, value: Math.random() * 100, level: curlevel});this.loadMap(this.cityName, mapJson);this.geoJsonData = mapJson;return;}//街道級(jí)以上的數(shù)據(jù)處理方式this.mapData = [];for (var i = 0, l = subList.length; i < l; i++) {var name = subList[i].name;var cityCode = subList[i].adcode;//這個(gè)mapData里包含每個(gè)區(qū)域的code、名稱、對(duì)應(yīng)的等級(jí)，實(shí)現(xiàn)第三步功能時(shí)能用上this.mapData.push({name: name,value: Math.random() * 100,cityCode: cityCode,level: curlevel});}this.loadMapData(adcode);} },

3、接下來，利用 AMapUI.loadUI可以構(gòu)造一個(gè)創(chuàng)建一個(gè) DistrictExplorer 實(shí)例，然后利用 DistrictExplorer 的實(shí)例，可以根據(jù)當(dāng)前需要加載城市的 areaCode獲取到該城市的 geo 數(shù)據(jù)

loadMapData(areaCode) {AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {//創(chuàng)建一個(gè)實(shí)例var districtExplorer = window.districtExplorer = new DistrictExplorer({eventSupport: true, //打開事件支持map: this.map});districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {if (error) {console.error(error);return;}let mapJson = {};//特別注意這里哦，如果查看過正常的geojson文件，都會(huì)發(fā)現(xiàn)，文件都是以features 字段開頭的，所以這里要記得加上mapJson.features = areaNode.getSubFeatures();this.loadMap(this.cityName, mapJson);});}); },

第二步，用echarts把邊界數(shù)據(jù)渲染出來

我這邊使用的echarts版本為當(dāng)前的最新版4.2.0，相關(guān)文檔查閱地址傳送門：https://echarts.baidu.com/option.html#series-map。千萬別看錯(cuò)文檔了，他好幾個(gè)版本放在一起，關(guān)鍵是每個(gè)版本某些屬性會(huì)不一樣，所以要特別注意文檔的版本與引入的echarts版本保持一致。

1、在頁面引入JS文件，我這邊引入的bootstrap cdn提供的文件

<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>

2、注冊(cè)echarts并使用剛剛通過高德API獲取的數(shù)據(jù)渲染成map

//html <div id="map"></div>//注冊(cè)并賦值給echartsMap this.echartsMap = this.$echarts.init(document.getElementById('map'));//通過loadMap函數(shù)加載地圖 loadMap(mapName, data) {if (data) {this.$echarts.registerMap(mapName, data);//把geoJson數(shù)據(jù)注入echarts//配置echarts的optionvar option = {visualMap: {type: 'piecewise',pieces: [{max: 30, label: '安全', color: '#2c9a42'},{min: 30, max: 60, label: '警告', color: '#d08a00'},{min: 60, label: '危險(xiǎn)', color: '#c23c33'},],color: '#fff',textStyle: {color: '#fff',},visibility: 'off'},series: [{name: '數(shù)據(jù)名稱',type: 'map',roam: false,mapType: mapName,selectedMode: 'single',showLegendSymbol: false,visibility: 'off',itemStyle: {normal: {color: '#ccc',areaColor: '#fff',borderColor: '#fff',borderWidth: 0.5,label: {show: true,textStyle: {color: "rgb(249, 249, 249)"}}},emphasis: {areaColor: false,borderColor: '#fff',areaStyle: {color: '#fff'},label: {show: true,textStyle: {color: "rgb(249, 249, 249)"}}}},data: this.mapData,//這個(gè)data里包含每個(gè)區(qū)域的code、名稱、對(duì)應(yīng)的等級(jí)，實(shí)現(xiàn)第三步功能時(shí)能用上}]};this.echartsMap.setOption(option);} },

做完這一步，如果不出問題，中國(guó)地圖已經(jīng)安靜的躺在你的屏幕上了！

第三步，實(shí)現(xiàn)省市區(qū)縣下探功能

1、添加點(diǎn)擊事件

this.echartsMap.on('click', this.echartsMapClick);echartsMapClick(params) {//地圖點(diǎn)擊事件if (params.data.level == 'street') return;//此處的params.data為this.mapData里的數(shù)據(jù)this.cityCode = params.data.cityCode;//行政區(qū)查詢//按照adcode進(jìn)行查詢可以保證數(shù)據(jù)返回的唯一性this.district.search(this.cityCode, (status, result) => {if (status === 'complete') {this.getData(result.districtList[0], params.data.level, this.cityCode);//這個(gè)getData函數(shù)在前面已經(jīng)定義過了}}); },

此項(xiàng)目這邊是基于VUE開發(fā)的，看完之后有什么不懂的，可以留言說明.

項(xiàng)目GitHub地址：https://github.com/TangSY/echarts-map-demo

轉(zhuǎn)載請(qǐng)注明出處：https://www.jianshu.com/p/c293c94d9ab7
作者：TSY
個(gè)人空間：https://www.hxkj.vip

轉(zhuǎn)載于:https://www.cnblogs.com/hashtang/p/11456123.html

總結(jié)

以上是生活随笔為你收集整理的echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。