行政区划边界数据库
深度教程 · 持续更新

ECharts 中国地图省市下钻教程

ECharts 画中国地图的核心是先用 echarts.registerMap 注册一份行政区划 GeoJSON，再用 type:'map' 系列渲染。免费数据源（如阿里云 DataV）通常只到区县级，乡镇级边界需另找来源；还要注意 WGS84 与 GCJ-02 坐标差异。本文给出一份可运行的省市县下钻示例。

第一步

准备中国地图 GeoJSON 数据

ECharts 不内置地图数据，需要一份标准 GeoJSON（FeatureCollection 结构）才能注册。

免费来源

阿里云 DataV（geojson 接口，省市区县三级）、天地图标准地图、部分开源库（如 geojson.cn）可获取省、市、区县边界，多数为 CGCS2000 或 GCJ-02 坐标系。

乡镇级稀缺

免费公开数据一般只提供到区县级，乡镇、街道级要么找不到、要么需转换坐标或整理格式，这是 ECharts 乡镇地图最常见的卡点。

格式要求

registerMap 接受 GeoJSON 对象或字符串；要素 properties 中需有名称字段（默认取 name 或 properties.name）用于 series.data 匹配。

第二步

注册地图并渲染

加载 GeoJSON 后调用 registerMap，再通过 series 配置绘制。

// 引入 echarts 后注册中国地图
fetch('china.json').then(r => r.json()).then(geoJson => {
  echarts.registerMap('china', geoJson);
  const chart = echarts.init(document.getElementById('map'));
  chart.setOption({
    series: [{
      type: 'map',
      map: 'china',
      data: [
        { name: '广东省', value: 12601 },
        { name: '浙江省', value: 6577 }
        // 其余省份按 name 与数据对应
      ]
    }]
  });
});

series.data 的 name 必须与 GeoJSON 要素名称一致，否则无法着色；建议用行政区划代码做匹配键更稳定（见 行政区划代码指南）。

第三步

实现省市县下钻

监听点击事件，按选中区域加载下一级数据并重新注册。

chart.on('click', function (params) {
  const name = params.name;               // 如「广东省」
  fetch('cities/' + name + '.json')       // 该省市级 GeoJSON
    .then(r => r.json())
    .then(geoJson => {
      echarts.registerMap(name, geoJson);
      chart.setOption({
        series: [{ type: 'map', map: name, data: cityData }]
      });
    });
});

下钻链路（省→市→区县→乡镇）需要每一级都有独立的 GeoJSON 文件，并保证上下级编码能对应。省级与地市级数据较易获取，区县级起整理成本上升，乡镇级则通常需要购买或自行加工。

避坑

坐标偏移：WGS84 与 GCJ-02

地图错位通常是坐标系混用，先统一坐标系再叠加。

WGS84

GPS 原始坐标（EPSG:4326），也是 GeoJSON 标准坐标，Leaflet、Mapbox 直接使用。本站边界数据即为此坐标系，免偏移。

GCJ-02

高德、腾讯等底图使用的加密坐标（火星坐标）。若数据是 WGS84 而底图是高德，会整体偏移数百米，需用 coordtransform、gcoord 等库转换后再叠加。

BD-09

百度地图二次加密坐标，与 WGS84 不能直接互换，同样需要先转换。详细说明见坐标体系说明。

乡镇地图

乡镇级地图数据从哪来

ECharts 乡镇地图的下钻卡点在数据，而不是代码。

乡镇街道级边界

免费公开渠道一般只到区县级；需要乡、镇、街道面要素时，可在整级打包页按省获取（单省 ¥19.99，WGS84、GeoJSON、含行政区划代码），配合 registerMap 即可完成乡镇级下钻与四级联动。

常见问题

常见问题

ECharts 中国地图数据从哪来？▶
免费渠道（阿里云 DataV、天地图、部分开源库）可获取省、市、区县三级 GeoJSON；乡镇、街道级免费数据稀缺，通常需要购买或自行加工。需要乡镇级面要素时可按省获取并配合 registerMap 使用。
echarts.registerMap 怎么用？▶
先通过 fetch 或 import 加载 GeoJSON 对象，调用 echarts.registerMap('地图名', geoJson) 注册，再在 series 中设置 type:'map' 并引用该地图名即可渲染。数据 name 需与要素名称对应才能着色。
如何实现省市县下钻？▶
给图表绑定 click 事件，点击后按选中区域名加载下一级 GeoJSON，用 registerMap 重新注册并 setOption 切换 series.map。下钻每级都需要独立的 GeoJSON 文件，且上下级编码要能对应。
地图位置偏移是为什么？▶
通常是坐标系混用：数据是 WGS84 而底图是高德（GCJ-02）或百度（BD-09），会整体偏移数百米。用 coordtransform、gcoord 等库把数据统一转换到与底图一致的坐标系后再叠加即可。
乡镇级地图数据哪里能获取？▶
免费公开渠道一般只提供到区县级。本站整级打包页提供乡镇、街道面要素，按省打包单省 ¥19.99，WGS84 坐标、GeoJSON 格式、含行政区划代码，可直接用于 ECharts 乡镇地图下钻。

需要可直接使用的边界数据？

省、市、区县边界可 地图分区下载省市区县边界；乡镇边界与全国整级打包请在 整级打包页 选购；村界数据请在 村级边界页 按省获取。