First, 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, four-level linkage data of provincial, urban, county and street administrative codes (accurate to township/street level), provincial Five-level administrative codes for urban areas, counties, streets, and villages.
Some time ago, I got a set of map data display platform based on echarts map for the company. During the development process, I found that Baidu officials no longer provide map downloads, so I can only hope that I can find the json files collected by some big guys on the Internet. I found it, but I found that most of them are old, and many areas have actually been re-divided into administrative divisions.
Therefore, I can only think of other ways. Recalling that when I usually use Gaode map to search for a place name, it seems that there will be a boundary area drawn for us. Then I think that since it can be drawn, there should be a way to get it from Obtained from certain channels, or Gaode Map will provide the corresponding API. So, I went to the Gaode open platform and carefully checked the api he provided, haha, sure enough! With the interface, the next step is to code.
The first step is to obtain boundary data through Gaode api
By consulting the API documentation, you can know that the interface for obtaining boundary data is the administrative region query service ( AMap.DistrictSearch). Remember to apply for a key before using this service, which is used to call the Gaode interface, and apply for a direct train address: https://lbs.amap.com/dev/key/app .
1. Add the entry script tag of the JS API 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 create an DistrictExplorerinstance, and then DistrictExploreruse the instance to load the city's areaCodeto obtain the city's geodata according to the current needs
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 render the boundary data with echarts
The echarts version I use here is the latest version 4.2.0. For related documents, please refer to the address portal: https://echarts.baidu.com/option.html#series-map . Don't read the document wrongly. It has several versions together. The key is that some attributes of each version will be different, so pay special attention to the version of the document to be consistent with the imported echarts version.
1. Introduce the JS file on the page, bootstrap cdnthe provided file introduced by me here
<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 Gaode API to render 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 this step, if there is no problem, the map of China has been quietly lying on your screen!
The third step is to realize the detection function of 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 based on VUEdevelopment. If you don’t understand something after reading it, you can leave a message to explain.
Project GitHub address: https://github.com/TangSY/echarts-map-demo
Province, city, city and county geojson boundary data download address: https://geojson.hxkj.vip/
township street geojson download address: https://map .hxkj.vip