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 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 district query service (AMap.DistrictSearch). Before using this service, remember to apply for a key, which is used to call the AutoNavi interface. Apply for the direct address: 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="//i2.wp.com/webapi.amap.com/maps?v=1.4.11 & amp;key=「Key value you applied for」 & amp ;plugin=AMap.DistrictSearch"></script>
2. Obtain data through the following methods, taking the map of China as an example;
this.opts = {
subdistrict: 1, //Return to the next administrative district
showbiz: false //The last level returns street information
};
this.district = new AMap.DistrictSearch(this.opts);//Note: You need to use the plug-in synchronous delivery function to use it directly like this
this.district.search('China', (status, result) => {
if (status == 'complete') {
this.getData(result.districtList[0], '', 100000);
}
});
getData(data, level, adcode) {//Process the obtained boundary data
var subList = data.districtList;
if (subList) {
var curlevel = subList[0].level;
if (curlevel === 'street') {//In order to match the normal display of district and county names on the echarts map, the street level data here needs special processing
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 = [];
//This mapData contains the code, name, and corresponding level of each area, which can be used when implementing the third step function.
this.mapData.push({name: this.cityName, value: Math.random() * 100, level: curlevel});
this.loadMap(this.cityName, mapJson);
this.geoJsonData = mapJson;
return;
}
//Data processing methods above street level
this.mapData = [];
for (var i = 0, l = subList.length; i < l; i + + ) {
var name = subList[i].name;
var cityCode = subList[i].adcode;
//This mapData contains the code, name, and corresponding level of each area, which can be used when implementing the third step function.
this.mapData.push({
name: name,
value: Math.random() * 100,
cityCode: cityCode,
level: curlevel
});
}
this.loadMapData(adcode);
}
},
3. Next, use AMapUI.loadUI to create a DistrictExplorer instance, and then use the DistrictExplorer instance to create a It is necessary to load the city’s areaCode to obtain the city’s geo data
loadMapData(areaCode) {
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
//Create an instance
var districtExplorer = window.districtExplorer = new DistrictExplorer({
eventSupport: true, //Turn on event support
map: this.map
});
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
if (error) {
console.error(error);
return;
}
let mapJson = {};
//Pay special attention here. If you have looked at normal geojson files, you will find that the files all start with the features field, so remember to add it here.
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 am using here is the latest version 4.2.0. The relevant documentation address 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 JS files into the page. I introduced the files provided by bootstrap cdn
<script src="//i2.wp.com/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>
//Register and assign value to echartsMap
this.echartsMap = this.$echarts.init(document.getElementById('map'));
//Load the map through the loadMap function
loadMap(mapName, data) {
if (data) {
this.$echarts.registerMap(mapName, data);//Inject geoJson data into echarts
//Configure the option of echarts
var option = {
visualMap: {
type: 'piecewise',
pieces: [
{max: 30, label: 'safety', color: '#2c9a42'},
{min: 30, max: 60, label: 'warning', color: '#d08a00'},
{min: 60, label: 'Danger', color: '#c23c33'},
],
color: '#fff',
textStyle: {
color: '#fff',
},
visibility: 'off'
},
series: [{
name: 'data 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,//This data contains the code, name, and corresponding level of each area, which can be used when implementing the third step function.
}]
};
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) {//Map click event
if (params.data.level == 'street') return;//params.data here is the data in this.mapData
this.cityCode = params.data.cityCode;
//Administrative district query
//Querying according to adcode can ensure the uniqueness of data returned
this.district.search(this.cityCode, (status, result) => {
if (status === 'complete') {
this.getData(result.districtList[0], params.data.level, this.cityCode);//This getData function has been defined previously
}
});
},
This project is developed based on VUE. 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
Provincial, city and county geojson boundary data download address: https://geojson.hxkj.vip/
Township street geojson download address: https://map.hxkj.vip