動態生成最新行政區劃 GeoJSON 數據並結合 ECharts 實現地圖下鑽功能
在開發基於地圖的數據可視化應用時，一個常見的挑戰是獲取準確且最新的行政區劃邊界數據（GeoJSON）。許多現有的在線資源可能數據陳舊，無法反映最新的行政區劃調整。本文將介紹一種解決方案，通過調用高德開放平台的 API 動態獲取最新的行政區劃邊界，並結合 ECharts 實現可下鑽的地圖可視化。
第一部分：通過高德開放平台 API 獲取行政區劃邊界數據
高德地圖提供了強大的“行政區查詢服務”（AMap.DistrictSearch），可以實時獲取全國範圍內的行政區劃信息，包括其地理邊界。
1. 準備工作：引入 API 與申請 Key
首先，您需要到高德開放平台申請一個 Key，用於 API 調用。然後，在頁面中引入高德地圖的 JS API 腳本。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=「您申請的key值」&plugin=AMap.DistrictSearch"></script>2. 調用接口獲取行政區列表
通過實例化 AMap.DistrictSearch 並調用其 search 方法，可以獲取指定區域的下一級行政區列表。以獲取中國所有省級單位為例：
// 初始化行政區查詢實例
const opts = {
subdistrict: 1, // 返回下一級行政區
showbiz: false // 最後一級不返回街道信息
};
const district = new AMap.DistrictSearch(opts);
// 查詢“中國”的下一級行政區
district.search('中國', (status, result) => {
if (status === 'complete') {
// result.districtList[0] 包含了省級列表數據
processData(result.districtList[0], 100000);
}
});3. 獲取 GeoJSON 格式的邊界數據
獲取到行政區列表後，需要利用 AMapUI 的 DistrictExplorer 模塊來加載指定區域的邊界數據（feature）。
function loadMapData(areaCode, callback) {
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
const districtExplorer = new DistrictExplorer();
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
if (error) {
console.error(error);
return;
}
// 構建標準的 GeoJSON 對象
const geoJson = {
type: "FeatureCollection",
features: areaNode.getSubFeatures() // 獲取子區域的邊界數據
};
callback(geoJson);
});
});
}關鍵點：areaNode.getSubFeatures() 返回的是一個 feature 數組，為了符合標準的 GeoJSON 格式，需要將其包裹在一個 { "type": "FeatureCollection", "features": [...] } 結構中。
第二部分：使用 ECharts 渲染地圖
獲取到標準的 GeoJSON 數據後，便可以利用 ECharts 將其渲染為地圖。
1. 引入 ECharts 庫
在項目中引入 ECharts 庫，例如使用 CDN：
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>2. 註冊並配置地圖
在 ECharts 中，使用 echarts.registerMap 方法註冊剛才獲取的 GeoJSON 數據，然後在 option 中配置 series-map。
// 假設 geoJsonData 是上一步獲取到的數據
// 假設 myChart 是已經初始化的 ECharts 實例
// 註冊地圖
echarts.registerMap('currentMap', geoJsonData);
// 配置 ECharts Option
const option = {
series: [{
type: 'map',
map: 'currentMap', // 使用剛剛註冊的地圖
roam: false,
itemStyle: {
// ...樣式配置
},
data: [ /* 業務數據 */ ]
}]
};
myChart.setOption(option);執行此步驟後，即可成功渲染出對應的行政區劃地圖。
第三部分：實現地圖下鑽功能
地圖下鑽功能的核心是監聽 ECharts 的點擊事件，獲取被點擊區域的 adcode，然後重複第一步和第二步的過程，獲取並渲染更深層級的地圖。
1. 監聽 ECharts 點擊事件
myChart.on('click', (params) => {
// params.data 中應包含下一級區域的 adcode
const cityCode = params.data.cityCode;
const level = params.data.level;
if (level === 'street') return; // 如果是街道級別，則不再下鑽
// 使用 cityCode 再次調用高德API獲取下一級數據
district.search(String(cityCode), (status, result) => {
if (status === 'complete' && result.districtList.length > 0) {
// 獲取新的 geoJson 並重新渲染 ECharts
loadMapData(cityCode, (geoJson) => {
// ...重新執行註冊和渲染的邏輯...
});
}
});
});注：上述代碼示例為核心邏輯展示，具體實現時可結合 Vue、React 等框架進行封裝。
總結與資源
通過上述方法，可以構建一個數據實時、支持無限層級下鑽的動態地圖應用，有效解決了靜態 GeoJSON 數據陳舊的問題。
對於希望直接查看完整實現或獲取預生成數據的開發者，可以參考以下資源：
- 完整示例項目：https://github.com/TangSY/echarts-map-demo
- 在線體驗與數據下載：https://geojson.hxkj.vip 該網站提供了基於此方法生成的最新省級、市級、區縣級 GeoJSON 文件以及多級別行政編碼數據的下載服務。
