首先，來看下效果圖
在線體驗地址：https://hxkj.vip/demo/echartsMap/，並提供實時geoJson數據文件下載
echarts官方社區鏈接地址（可在線編輯）：https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ
前段時間給公司弄了一套基於echarts map的地圖數據展示的平台，開發過程中發現百度官方已經不提供地圖下載了，於是只能期望能在網上搜到哪位大佬幫忙收集的json文件。找是找到了，然鵝發現大部分都年代久遠了，很多地區其實已經重新划分行政區划了。
所以，只能想想其他辦法了，回想起平常使用高德地圖搜索某個地名的時候，好像會有個邊界區域給我們繪制出來，然后我就覺得它既然能畫出來，應該會有辦法從某些渠道獲取，或者高德地圖會提供相應的API。於是乎，去到了高德開放平台仔細的查看了一下他提供的api，哈哈，果然有！有了接口，接下來就是擼碼了。
第一步，通過高德api獲取邊界數據
通過查閱API文檔可以知道，獲取邊界數據的接口為行政區查詢服務（AMap.DistrictSearch）。使用該服務之前記得去申請一個key，用於調用高德接口，申請地址直通車：https://lbs.amap.com/dev/key/app。
1、在頁面添加 JS API 的入口腳本標簽，並將其中「您申請的key值」替換為您剛剛申請的 key；
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=「您申請的key值」&plugin=AMap.DistrictSearch"></script>
2、通過以下方式獲取數據，以獲取中國地圖為例；
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、接下來，利用 AMapUI.loadUI 可以構造一個創建一個 DistrictExplorer 實例，然后利用 DistrictExplorer 的實例，可以根據當前需要加載城市的 areaCode獲取到該城市的 geo 數據
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);
});
});
},
第二步，用echarts把邊界數據渲染出來
我這邊使用的echarts版本為當前的最新版4.2.0，相關文檔查閱地址傳送門：https://echarts.baidu.com/option.html#series-map。千萬別看錯文檔了，他好幾個版本放在一起，關鍵是每個版本某些屬性會不一樣，所以要特別注意文檔的版本與引入的echarts版本保持一致。
1、在頁面引入JS文件，我這邊引入的bootstrap cdn提供的文件
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
2、注冊echarts並使用剛剛通過高德API獲取的數據渲染成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);
}
},
做完這一步，如果不出問題，中國地圖已經安靜的躺在你的屏幕上了！
第三步，實現省市區縣下探功能
1、添加點擊事件
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函數在前面已經定義過了
}
});
},
此項目這邊是基於VUE開發的，看完之后有什么不懂的，可以留言說明.
項目GitHub地址：https://github.com/TangSY/echarts-map-demo
轉載請注明出處：https://www.jianshu.com/p/c293c94d9ab7
作者：TSY
個人空間：https://www.hxkj.vip