First, let’s take a look at the renderings
Online experience address: https://geojson.hxkj.vip , and provides 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 platform for the company to display map data based on echarts map. During the development process, I found that Baidu officially no longer provides map downloads, so I can only hope to find the json files collected by someone online. 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, it seems that there will be a boundary area drawn for us, and then I feel that since it can be drawn, there should be a way to draw it from Obtain it from certain channels, or Amap will provide 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, you 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 direct 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, you AMapUI.loadUI can construct an DistrictExplorerinstance to create an instance, and then use DistrictExplorerthe instance to areaCodeload 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 use echarts to render the boundary data.
The echarts version I use here is the latest version 4.2.0. The relevant documents can be found at the address portal: 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 JS files into the page, and I introduced bootstrap cdnthe provided files 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 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 based on VUEdevelopment. 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