First, let’s take a look at the renderings
Online experience address:https://geojson.hxkj.vip, and provide real-time geoJson data file download
The downloadable data includes provincial-level geojson administrative boundary data, municipal-level geojson administrative boundary data, district/county-level geojson administrative boundary data, provincial, city, and county street administrative code four-level linkage data (accurate to the township/street level), provincial Five-level administrative codes for cities, counties, streets and villages.
Some time ago, I built a map data display platform based on echarts map for my company. During the development process, I found that Baidu official website no longer provides map downloads, so I can only hope to find someone on the Internet who can help me. Collected json files. After searching, I found it, but found that most of them were very old, and many areas had actually been re-divided administratively.
Therefore, I can only think of other ways. Recalling that when I usually use Amap to search for a certain place name, there seems to be a boundary area drawn for us, and then I feel that since it If you can draw it, there should be a way to obtain it from some channels, or Amap will provide the corresponding API. So, I went to the Amap open platform and carefully checked the APIs it provided, haha, it sure does exist! With the interface in place, the next step is coding.
The first step is to obtain boundary data through the Amap API.
By consulting the API documentation, we can know that the interface for obtaining boundary data is the administrative area query service (AMap.DistrictSearch). Before using this service, remember to apply for a key, which is used to call the AMAP interface and apply for the address through train: https://lbs.amap.com/dev/key/app .
1. Add the JS API entry script tag to the page, and replace the "key value you applied for" with the key you just applied for;
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=「您申请的key值」&plugin=AMap.DistrictSearch"></script>
2. Obtain data through the following methods, taking the map of China as an example;
this.opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
};
this.district = new AMap.DistrictSearch(this.opts);//注意：需要使用插件同步下发功能才能这样直接使用
this.district.search('中国', (status, result) => {
if (status == 'complete') {
this.getData(result.districtList[0], '', 100000);
}
});
getData(data, level, adcode) {//处理获取出来的边界数据
var subList = data.districtList;
if (subList) {
var curlevel = subList[0].level;
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
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 = [];
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
this.mapData.push({name: this.cityName, value: Math.random() * 100, level: curlevel});
this.loadMap(this.cityName, mapJson);
this.geoJsonData = mapJson;
return;
}
//街道级以上的数据处理方式
this.mapData = [];
for (var i = 0, l = subList.length; i < l; i++) {
var name = subList[i].name;
var cityCode = subList[i].adcode;
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
this.mapData.push({
name: name,
value: Math.random() * 100,
cityCode: cityCode,
level: curlevel
});
}
this.loadMapData(adcode);
}
},
3. Next, use AMapUI.loadUI to construct an instance of DistrictExplorer, and then use DistrictExplorer to create an instance. You can load the city's areaCode according to the current needs to obtain the city's geo data
loadMapData(areaCode) {
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
//创建一个实例
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文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
mapJson.features = areaNode.getSubFeatures();
this.loadMap(this.cityName, mapJson);
});
});
},
The second step is to use echarts to render the boundary data.
The version of echarts I am using here is the latest version4.2.0. The relevant document access portal is:https://echarts.baidu .com/option.html#series-map. Don’t read the document wrongly. There are several versions of it put together. The key is that some properties of each version will be different, so special attention should be paid to keeping the version of the document consistent with the imported echarts version.
1. Introduce the JS file into the page, which I introduced herebootstrap cdnThe file provided
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
2. Register echarts and use the data just obtained through the Amap API to render it into a map
//html
<div id="map"></div>
//注册并赋值给echartsMap
this.echartsMap = this.$echarts.init(document.getElementById('map'));
//通过loadMap函数加载地图
loadMap(mapName, data) {
if (data) {
this.$echarts.registerMap(mapName, data);//把geoJson数据注入echarts
//配置echarts的option
var option = {
visualMap: {
type: 'piecewise',
pieces: [
{max: 30, label: '安全', color: '#2c9a42'},
{min: 30, max: 60, label: '警告', color: '#d08a00'},
{min: 60, label: '危险', color: '#c23c33'},
],
color: '#fff',
textStyle: {
color: '#fff',
},
visibility: 'off'
},
series: [{
name: '数据名称',
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,//这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
}]
};
this.echartsMap.setOption(option);
}
},
After completing this step, if there are no problems, the map of China will be lying quietly on your screen!
The third step is to realize the function of exploring provinces, cities and counties.
1. Add click event
this.echartsMap.on('click', this.echartsMapClick);
echartsMapClick(params) {//地图点击事件
if (params.data.level == 'street') return;//此处的params.data为this.mapData里的数据
this.cityCode = params.data.cityCode;
//行政区查询
//按照adcode进行查询可以保证数据返回的唯一性
this.district.search(this.cityCode, (status, result) => {
if (status === 'complete') {
this.getData(result.districtList[0], params.data.level, this.cityCode);//这个getData函数在前面已经定义过了
}
});
},
This project is developed based onVUE. If you don’t understand anything after reading it, you can leave a message to explain.
Project GitHub address: https://github.com/TangSY/echarts-map-demo
Province, city and county geojson boundary data download address: https://geojson.hxkj .vip/
Township and street geojson download address: https://map.hxkj.vip