2025年7月份实时最新获取地图边界数据方法，省市区县街道多级联动【文末附实时geoJson数据下载】

动态生成最新行政区划 GeoJSON 数据并结合 ECharts 实现地图下钻功能

在开发基于地图的数据可视化应用时，一个常见的挑战是获取准确且最新的行政区划边界数据（GeoJSON）。许多现有的在线资源可能数据陈旧，无法反映最新的行政区划调整。本文将介绍一种解决方案，通过调用高德开放平台的 API 动态获取最新的行政区划边界，并结合 ECharts 实现可下钻的地图可视化。

第一部分：通过高德开放平台 API 获取行政区划边界数据

高德地图提供了强大的"行政区查询服务"（AMap.DistrictSearch），可以实时获取全国范围内的行政区划信息，包括其地理边界。

1. 准备工作：引入 API 与申请 Key

首先，您需要到高德开放平台申请一个 Key，用于 API 调用。然后，在页面中引入高德地图的 JS API 脚本。

html 复制代码

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=「您申请的key值」&plugin=AMap.DistrictSearch"></script>

2. 调用接口获取行政区列表

通过实例化 AMap.DistrictSearch 并调用其 search 方法，可以获取指定区域的下一级行政区列表。以获取中国所有省级单位为例：

javascript 复制代码

// 初始化行政区查询实例
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）。

javascript 复制代码

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：

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>

2. 注册并配置地图

在 ECharts 中，使用 echarts.registerMap 方法注册刚才获取的 GeoJSON 数据，然后在 option 中配置 series-map。

javascript 复制代码

// 假设 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 点击事件

javascript 复制代码

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 文件以及多级别行政编码数据的下载服务。