? ? ? ? echart在開發地圖時，會遇到下鉆顯示子區域地圖數據。比如江蘇省，下鉆到市級南京，南京再下鉆到區級。下載地址：DataV.GeoAtlas地理小工具系列

在阿里的數據可視化平臺，可以通過ajax方式：`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json` 進行獲取，但有些項目需要在本地不聯網狀態下正常顯示。此時我們就需要把每級數據的json文件下載下來，但一個一個下載太麻煩，這里提供一段nodejs抓取數據代碼，通過上級區域數據的地址，就可以下載所有下級數據了。

前期準備：

另外如上圖，可以復制json數據放到JSON格式化工具?，格式化數據后，查看需要下載區域的adcode值，通過adcode值下載本區域以及下級區域數據文件。

一、下載區域數據json文件

通過上述準備，我們首先在目錄中新建data目錄，用于存儲下載下來的json數據，然后再新建download.js文件。目錄結構如下：

這里就先以下載“澳門特別行政區”數據包為例，download.js代碼如下：

var http = require('https'); var fs = require('fs'); var path = require('path');const baseUrl = 'https://geo.datav.aliyun.com/areas_v3/bound/'; const levels = ['province', 'city']; //district區縣級不帶full const loseList = []; let loseTotal = 0;function RequestInfo(_url){return new Promise((resolve, reject) => {http.get(_url, res => {const { statusCode } = res;let error;if(statusCode !== 200){error = new Error("請求失敗. \n 狀態碼：" + statusCode);}if(error){res.resume();res.on('end', () => {reject(error);});}else{res.setEncoding('utf8');let rawData = '';res.on('data', chunk => { rawData += chunk; });res.on('end', () => {resolve(rawData);});}}).on('error', e => {reject(e);});}); }function downloadJson(_url, _code, _name){RequestInfo(_url).then(res => {//console.log(_name, _code, _url);try{let writeInfo = `//${_name} \r\n import * as echarts from 'echarts' \r\nlet map_data = ${res}; \r\n echarts.registerMap("${_code}", map_data);`;fs.writeFile('./data/' + _code+'.js', writeInfo, function(e){});let _data = JSON.parse(res),_features = _data['features'],_tmp = '';if(Array.isArray(_features)){if(_features.length>1){_features.forEach((item, i) => {if(item.properties.name){_tmp = levels.indexOf(item.properties.level)!=-1?'_full':'';setTimeout(downloadJson, 50 * i, `${baseUrl}${item.properties.adcode}${_tmp}.json`, item.properties.adcode, item.properties.name);}});}}}catch(e){ console.log('catch url:', _name, _code, _url);}}).catch((e) => {loseTotal++;let _data = { name: _name, code: _code, url: _url.replace('_full', '') };console.log(JSON.stringify(_data) + ',');}); }//開始下載澳門特別行政區，以及下級區域地圖數據 downloadJson(baseUrl + '820000_full.json', 820000, '澳門特別行政區');

然后通過nodejs命令執行當前目錄下的download.js，如下圖：

命令：node download

執行完成后，再打開data目錄，澳門特別行政區，以及下級區域地圖數據就都下載下來了。

?注意：下載數據包里，可以使用100000直接下載整個中國區域地圖數據，但是經測試，請求過于頻繁，阿里數據可視化平臺會禁用當前IP一段時間，無法正常下載，導致下載數據會有丟失情況，建議以省或行政區進行下載。

?二、丟失下載數據問題

? ? ? ? 以download.js中，已有處理了丟失數據輸出功能，未能下載的json數據文件，會輸出在控制臺上，可單獨下載，也可以通過單獨復制鏈接直接下載。這邊以省級或行政區進行下載，丟失數據量并不大，就直接單獨下載了。如下載廣東省時，丟失兩條數據，下載復制url鏈接放到瀏覽器地址欄，直接下載即可。

?三、引入json數據

這里生成的json文件，是在vue中使用，故json文件拼接數據結構如下：

//澳門特別行政區 import * as echarts from 'echarts' let map_data = {"type":"FeatureCollection","features":[ ... ]}; echarts.registerMap("820000", map_data);

由于澳門區域數據較少，這里直接通過數組形式循環引入，完成地圖注冊。代碼如下：

['820000', '820001', '820002', '820003', '820004', '820005', '820006', '820007', '820008' ].forEach(item => {require('./' + item); })

四、渲染數據

? ? ? ? vue實現代碼如下：

import * as echarts from 'echarts' export default {data(){return {dataList: [{"name":"花地瑪堂區","code":820001, "value":0},{"name":"花王堂區","code":820002, "value":0},{"name":"望德堂區","code":820003, "value":0},{"name":"大堂區","code":820004, "value":0},{"name":"風順堂區","code":820005, "value":0},{"name":"嘉模堂區","code":820006, "value":0},{"name":"路凼填海區","code":820007, "value":0},{"name":"圣方濟各堂區","code":820008, "value":0}]}},mounted() {this.renderCharts();},methods: {getOptions(params, data){params = params || {};data = Array.isArray(data)?data:[];let options = {visualMap: {"min": 800,"max": 50000,"text": ["High","Low"],"realtime": false,"calculable": true,"inRange": {"color": ["lightskyblue","yellow","orangered"]}},tooltip: {trigger: 'item',formatter: '{a}<br/>{b}:{c}'},series: [{"name": "澳門特別行政區","type": "map","map": params.map,"label": {"show": true},"data": data}]}return options;},renderCharts(){this.chart = echarts.init( this.$refs['chart'] );this.chart.setOption( this.getOptions({ map: 820000 }, this.dataList) );//地圖點擊事件this.chart.on('click', res => {this.chart.setOption( this.getOptions({ map: res.data.code }, this.dataList) );});}} }

地圖如下顯示：

? 點擊“大堂區”下鉆? ?

? ? ? ? 這里主要講解是如何通過 阿里數據可視化平臺，下載需要的地圖數據文件，大家可根據自己實際需求，在下載時調整下載文件內結構。

總結

以上是生活随笔為你收集整理的Echart地图的省级，以及所有地市级下载与使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。