前端地图开发必备：一个轻量的行政区划边界下载工具

WebGIS 开发实录：如何快速拿到省市区县边界 GeoJSON 数据

做前端地图可视化的时候，最头疼的不是写图表配置，而是——边界数据从哪来？

一、痛点：找一份能用的行政区划边界有多折腾

最近在做一个区域数据大屏，需要把全国各省、各市的边界轮廓套到 ECharts 地图上。按以前的路子，大概是这么个流程：

1. 去自然资源部或天地图翻半天，找到了标准地图服务，但下载下来的是 shp 格式；
2. 打开 QGIS 或 ArcGIS，手动裁剪、投影转换、导出 GeoJSON；
3. 坐标对不上，WGS84 和 GCJ-02 混在一起，地图画出来整体偏移几百米；
4. 想单独下一个区县级的数据，还得在一堆图层里翻。

一套操作下来，半天时间没了，图还没画出来。

二、解决方案：在线预览 + 一键导出 GeoJSON

后来找到一个轻量在线工具，不用装任何客户端，浏览器打开就能用。整体思路很直接：

选行政区 → 地图预览核对 → 选坐标系 → 下载 GeoJSON

以下载北京市边界为例，实际操作就三步：

第一步：逐级选择行政区

左边下拉框先选省级（北京市），再选下一级（全市或具体某个区，比如朝阳区、海淀区）。选完右边地图会实时高亮对应边界轮廓，区划代码也会同步显示，方便核对有没有选错。

第二步：确认坐标系

默认是 WGS84（GPS），做 Web 前端地图开发直接用这个就行，和 Leaflet、OpenLayers、ECharts 这些主流库的默认坐标系一致，不用再转。

第三步：下载 GeoJSON

点一下「下载数据 GeoJSON」，文件直接存到本地，开箱即用，不需要任何格式转换。

三、拿到数据之后怎么用？

以 ECharts 为例，加载下载好的 GeoJSON 文件：

// 1. 注册地图
fetch('./beijing.json')
  .then(res => res.json())
  .then(geoJson => {
    echarts.registerMap('beijing', geoJson);

    // 2. 配置 series
    const chart = echarts.init(document.getElementById('main'));
    chart.setOption({
      series: [{
        type: 'map',
        map: 'beijing',
        label: { show: true },
        emphasis: { label: { show: true } }
      }]
    });
  });

把 `beijing.json` 换成你从工具里下载的文件路径，地图就能渲染出来。区县、街道级别同理，粒度可以一直选下去。

四、适合的场景：

- 做区域数据可视化大屏
- 后台管理系统里的地图选点、区域圈选
- GIS 课程作业或 demo 快速搭原型
- 需要精确到区县级边界的统计地图

## 五、小结

对于前端或数据可视化开发者来说，行政区划边界数据是个高频但又很碎的需求。重型 GIS 软件不是不能用，但大部分时候我们只是想要**一个能直接拖进项目里的 GeoJSON 文件**。

这个工具的价值就在于把整个流程压缩到了几十秒，把时间留给真正写业务逻辑的部分。有需要的可以自己试试，省下来的时间喝杯茶挺好。

---

> 
> 工具地址：[https://mapland.hereitis.cn]
> 适用人群：WebGIS 开发者、数据可视化工程师、前端工程师