Provincial level of Echart maps, as well as all prefecture-level download and use

        echart在开发地图时,You will encounter drill down to display sub-region map data.比如江苏省,Drill down to the municipal level of Nanjing,Nanjing drills down to the district level.下载地址：DataV.GeoAtlas地理小工具系列

Alibaba's data visualization platform,可以通过ajax方式：`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json` 进行获取,However, some items need to be displayed normally when the local network is not connected.At this point we need to put each level of datajson文件下载下来,But downloading one by one is too troublesome,这里提供一段nodejsGrab data code,Pass the address of the higher-level area data,All subordinate data can be downloaded.

前期准备：

另外如上图,可以复制json数据放到JSON格式化工具 ,格式化数据后,Check the required download areaadcode值,通过adcodeThe value downloads this area and the subordinate area data files.

一、Download area datajson文件

Prepare by the above,We first create a new one in the directorydata目录,Used to store downloaded json数据,然后再新建download.js文件.目录结构如下：

Download here first“澳门特别行政区”数据包为例,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'];	//districtDistrict and county levels do not carryfull
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) + ',');
	});
}



//Start downloading Macau SAR,And the subordinate area map data
downloadJson(baseUrl + '820000_full.json', 820000, '澳门特别行政区');

然后通过nodejsThe command is executed in the current directorydownload.js,如下图：

命令：node download

执行完成后,再打开data目录,澳门特别行政区,And the lower-level regional map data are downloaded.

 注意：in the download package,可以使用100000Directly download the entire China regional map data,但是经测试,请求过于频繁,Alibaba data visualization platform will disable the currentIP一段时间,无法正常下载,As a result, the downloaded data will be lost,It is recommended to download by province or administrative region.

 二、Lost download data issue

        以download.js中,The missing data output function has been handled,Failed to downloadjson数据文件,will output on the console,可单独下载,It can also be downloaded directly by copying the link separately.Here, download by province or administrative region,The amount of lost data is not large,Just download it separately.Such as when downloading Guangdong Province,Two pieces of data are lost,下载复制urlThe link is placed in the browser address bar,直接下载即可.

 三、引入json数据

这里生成的json文件,是在vue中使用,故jsonThe file stitching data structure is as follows：

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

Due to the lack of data in the Macau region,Here, it is directly introduced through the loop in the form of an array,Complete map registration.代码如下：

[
    '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":"Kao Parish","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":"Cotai reclamation area","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) );
			});
		}
	}
}

The map is shown below：

  点击“大堂区”下钻   

        Here is the main explanation on how to pass Ali data visualization platform,Download the required map data file,Everyone can according to their actual needs,Adjust the structure of the download file when downloading.