简介这份江苏省矢量地图资源面向前端开发、数据可视化工程师及GIS应用开发者提供基于ECharts加载的GeoJSON多级地图数据可解决省、市、县三级行政区划地图绘制与交互展示的需求。压缩包共111个文件以110个json地理数据文件和1个html示例页面为主json文件按行政区划编码组织覆盖省级、市级、县级多级边界数据html文件则演示了地图加载与交互逻辑整体包体约599KB轻量便于集成。通过访问地址参数如orgCode100000可层层点击下钻动态加载不同层级地图并显示不同颜色适合用于区域数据统计、业务分布展示等场景。目前已有1199人学习下载读者可直接获取完整的多级GeoJSON数据与配套示例代码快速搭建交互式江苏地图省去自行采集与处理边界数据的成本。1. 拿到一份省级矢量地图怎么让 ECharts 从省一路钻到县手头有一份江苏省的矢量地图数据包含省级、市级、县级多级 GeoJSON想用 ECharts 做一张能逐级下钻的地图。这个需求在数据大屏、业务看板、区域分析里非常常见但真正动手时会发现GeoJSON 的坐标系对不对、name字段能不能和业务数据对上、下钻时地图怎么切换、县级数据几百个文件怎么组织每一步都有坑。这篇笔记就围绕「江苏省矢量地图 ECharts 多级 GeoJSON」这条线把数据准备、注册、下钻、性能、排错完整走一遍。适合两类人一是手里已经有 GeoJSON 但不知道怎么接进 ECharts 的二是想自己从公开渠道整理一套多级地图数据的。读完你应该能独立跑通「省 → 市 → 县」三级下钻并且知道每一步参数该改哪里。2. 多级 GeoJSON 的数据组织与坐标系确认2.1 三级数据到底该拆成多少个文件江苏省的行政区划层级是1 个省级单位、13 个地级市、95 个县级单位含市辖区、县级市、县。做下钻时数据文件的组织方式直接决定了后面代码的复杂度。常见有三种组织方式我一般推荐第三种。组织方式文件结构优点缺点单文件全量一个 json 含所有层级加载一次文件大下钻要过滤容易卡按层级拆province.json / city.json / county.json结构清晰单文件仍偏大县级全量很重按区域拆省一个 每个市一个 每个县一个按需加载最快文件数量多需要命名规范按区域拆的具体做法是省级一个320000.json每个地级市一个如320100.json南京每个县一个如320102.json。文件名直接用行政区划代码这样代码里不用维护映射表拼接即可。县级 95 个文件听起来多但每个文件通常只有几十 KB按需加载反而比一次性加载一个几 MB 的大文件流畅得多。提示如果只是做静态展示、不要求下钻用单文件全量最省事只要涉及点击下钻一定按区域拆。2.2 坐标系不确认地图一定画歪这是血泪经验里排第一的坑。GeoJSON 的坐标是经纬度数组[经度, 纬度]但不同来源的数据坐标系不一样。ECharts 默认按 WGS84GPS 原始坐标理解如果你拿到的是 GCJ02国内地图偏移坐标或 BD09百度坐标直接画会出现整体偏移省界和实际底图对不上。判断方法很简单取一个已知地标的经纬度和 GeoJSON 里对应点的坐标比。比如某市中心大致在东经 118.8、北纬 32.0 附近如果数据里是 118.79、32.01 这种量级基本是 WGS84 或 GCJ02如果偏差到小数点后一位明显不同就要警惕。// 读取 GeoJSON 后先打印第一个要素的第一个坐标点做人工核对 const geo require(./data/320000.json); const firstCoord geo.features[0].geometry.coordinates[0][0]; console.log(首个坐标点:, firstCoord); // 期望量级经度 116~122纬度 30~35江苏省范围 // 若经度出现 130 或纬度出现 20-说明坐标系或数据有问题逻辑说明这段代码不做转换只做「体检」。参数上江苏省经度范围约 116.3~121.9纬度约 30.7~35.1任何超出这个范围的坐标都说明数据有问题。如果确认是 GCJ02 而 ECharts 需要 WGS84就得先做坐标纠偏这一步没有捷径必须用转换库处理不能靠肉眼调。2.3 name 字段决定下钻能不能对上ECharts 地图下钻的核心逻辑是点击某个区域拿到该区域的name然后用这个name去加载对应的下一级 GeoJSON。所以 GeoJSON 里每个 feature 的properties.name必须和你的业务数据、以及下一级文件名能对应上。{ type: Feature, properties: { name: 南京市, adcode: 320100 }, geometry: { type: Polygon, coordinates: [] } }这里建议name用全称如「南京市」同时保留adcode。下钻时优先用adcode拼文件名用name做显示和业务匹配。原因是name可能有「市辖区」这类重复或歧义而adcode全国唯一。我一般会在数据预处理阶段就把adcode补进每个 feature后面代码会干净很多。3. 用 ECharts 注册地图并实现省到县的下钻3.1 最小可运行的下钻骨架先搭一个能跑的最小版本加载省级地图点击某个市切换到该市地图再点击某个县切换到县地图。核心 API 是echarts.registerMap和series.map的动态切换。import * as echarts from echarts; const chart echarts.init(document.getElementById(map)); // 缓存已注册的地图避免重复请求 const mapCache {}; async function loadMap(adcode) { if (mapCache[adcode]) return mapCache[adcode]; const res await fetch(/geo/${adcode}.json); const geoJson await res.json(); echarts.registerMap(adcode, geoJson); mapCache[adcode] geoJson; return geoJson; } async function renderMap(adcode, mapName) { await loadMap(adcode); chart.setOption({ series: [{ type: map, map: adcode, // 必须和 registerMap 的第一个参数一致 roam: true, // 允许缩放拖动 label: { show: true }, data: [] // 业务数据按 name 匹配 }] }); } // 点击下钻 chart.on(click, async (params) { const adcode params.data params.data.adcode; if (!adcode) return; // 320000 是省点击市进入下一级这里用 adcode 前两位判断层级 await renderMap(adcode, params.name); }); renderMap(320000, 江苏省);逻辑说明registerMap(adcode, geoJson)把 GeoJSON 注册成一个命名地图series.map引用这个名字。参数上roam: true开启缩放拖动label.show控制区域名显示。关键点是map的值必须和注册名完全一致很多人在这里翻车——注册用江苏series 里写江苏省地图直接空白。3.2 下钻时怎么带上级返回和面包屑只有下钻没有返回用户体验会很差。常见做法是维护一个层级栈每次下钻 push点击返回 pop。const stack [{ adcode: 320000, name: 江苏省 }]; async function drillDown(adcode, name) { stack.push({ adcode, name }); await renderMap(adcode, name); updateBreadcrumb(); } function goBack() { if (stack.length 1) return; stack.pop(); const prev stack[stack.length - 1]; renderMap(prev.adcode, prev.name); updateBreadcrumb(); } function updateBreadcrumb() { const el document.getElementById(breadcrumb); el.innerHTML stack.map((item, i) span>const businessData [ { name: 南京市, value: 3200 }, { name: 苏州市, value: 4100 }, { name: 无锡市, value: 2800 } ]; chart.setOption({ visualMap: { min: 0, max: 5000, inRange: { color: [#e0f3f8, #4575b4] }, calculable: true }, series: [{ type: map, map: 320000, data: businessData }] });逻辑说明visualMap根据value自动上色min/max决定色带范围。参数上如果某个区域没有数据它会显示默认色通常是灰色这是正常的。常见问题是name对不上导致整张图全灰排查方法是在chart.on(click)里打印params.name和 GeoJSON 里的name逐个比对。4. 多级地图的性能与加载优化4.1 县级数据按需加载而不是全量预载95 个县级 GeoJSON 如果一次性全加载首屏会非常慢。正确做法是只加载当前需要的那一级。上面的loadMap已经做了按需 fetch但还可以进一步优化预加载当前市下辖的县用户点击时几乎无感。// 进入某个市时预取它下辖的县adcode 前四位相同 async function preloadCounties(cityAdcode) { const prefix cityAdcode.slice(0, 4); const countyList await fetch(/geo/index/${prefix}.json).then(r r.json()); countyList.forEach(adcode loadMap(adcode)); // 并行预取 }逻辑说明需要一个索引文件记录每个市下辖哪些县的adcode。参数上slice(0, 4)取市级代码前缀因为县级 adcode 前四位和所属市一致。预取用Promise并行不阻塞当前渲染。注意别预取太多一次预取一个市下辖的县通常 5~10 个就够了。4.2 简化边界坐标减少渲染压力县级 GeoJSON 如果边界点太密渲染会卡。可以在数据预处理阶段做坐标抽稀保留主要轮廓。# 用 shapely 做简单的坐标抽稀示例 from shapely.geometry import shape, mapping import json with open(320102.json, r, encodingutf-8) as f: geo json.load(f) for feature in geo[features]: geom shape(feature[geometry]) # tolerance 越大点越少轮廓越粗 simplified geom.simplify(tolerance0.001, preserve_topologyTrue) feature[geometry] mapping(simplified) with open(320102.simplified.json, w, encodingutf-8) as f: json.dump(geo, f, ensure_asciiFalse)逻辑说明simplify的tolerance是容差单位是度。0.001 大约对应 100 米精度对县级展示足够。参数上preserve_topologyTrue保证简化后不会自相交。注意抽稀只适合展示如果要做面积计算等分析不能用简化后的数据。4.3 地图切换时的闪烁怎么消除下钻时如果先清空再渲染会有明显闪烁。解决办法是保持series结构不变只改map和data让 ECharts 做增量更新。chart.setOption({ series: [{ type: map, map: newAdcode, data: newData }] }, { notMerge: false }); // 关键不要 merge 整个 option逻辑说明notMerge: false是默认值表示增量合并。如果写成notMerge: true整个图表会重建闪烁更严重。参数上只更新变化的字段visualMap等保持不变。另外可以给容器加 CSStransition让切换更平滑。5. 多级地图下钻的避坑与排查清单5.1 地图空白控制台无报错现象registerMap执行了setOption也调了但地图区域一片空白。原因通常是series.map的值和注册名不一致或者 GeoJSON 的type不是FeatureCollection。解决打印echarts.getMap(adcode)确认注册成功检查 GeoJSON 顶层type字段必须是FeatureCollection单个Feature不能直接注册。5.2 点击区域拿不到 adcode现象chart.on(click)里params.data是 undefined 或没有adcode。原因是series.data里没有把adcode带进去ECharts 点击返回的是你传入的 data 项。解决在业务数据里补上adcode或者用params.name反查映射表。我一般直接在 data 里带adcode最省事。5.3 下钻后地图偏移或变形现象省级正常下钻到市或县后地图跑到屏幕外或比例失调。原因是不同层级 GeoJSON 的坐标范围差异大ECharts 自动缩放有时不准。解决在series里设置layoutCenter和layoutSize或者下钻后调用chart.resize()。更稳的做法是每级数据都做一次 boundingBox 归一化。5.4 县级 name 重复导致上色错乱现象两个不同县都叫「城关区」之类业务数据匹配到错误的区域。原因是name不唯一。解决下钻到县级时业务数据的匹配键改用adcode在series.data里同时提供name和adcode用name显示、adcode匹配。ECharts 本身按name匹配所以更彻底的办法是给name加前缀区分。5.5 频繁下钻导致内存泄漏现象反复下钻返回多次后页面越来越卡。原因是每次registerMap都往 ECharts 内部注册表里塞数据缓存没清理。解决mapCache控制缓存上限或者用echarts.unregisterMap清理不再用的地图。参数上保留最近 5~10 个地图即可超出就淘汰。6. 把多级地图做成可复用的组件前面几章把单张地图的下钻跑通了但真实项目里往往要在多个页面复用甚至同时展示省和市两张联动地图。这时候把逻辑抽成一个组件或类比每次复制粘贴靠谱得多。我一般的做法是封装一个MapDrill类构造时传入容器、数据根路径和层级配置内部管理缓存、栈和事件。核心接口就三个init(adcode)、drillTo(adcode)、back()。这样业务层只关心「我要看哪个区域」不用管 GeoJSON 怎么加载。class MapDrill { constructor(dom, options {}) { this.chart echarts.init(dom); this.basePath options.basePath || /geo; this.cache new Map(); this.stack []; this.maxCache options.maxCache || 10; this.chart.on(click, (p) this.handleClick(p)); } async load(adcode) { if (this.cache.has(adcode)) return this.cache.get(adcode); const geo await fetch(${this.basePath}/${adcode}.json).then(r r.json()); echarts.registerMap(adcode, geo); // 超限淘汰最早的地图防止内存膨胀 if (this.cache.size this.maxCache) { const oldest this.cache.keys().next().value; echarts.unregisterMap(oldest); this.cache.delete(oldest); } this.cache.set(adcode, geo); return geo; } async render(adcode, data []) { await this.load(adcode); this.chart.setOption({ series: [{ type: map, map: adcode, roam: true, data }] }); } async drillTo(adcode, name) { this.stack.push({ adcode, name }); await this.render(adcode); } async back() { if (this.stack.length 1) return; this.stack.pop(); const prev this.stack[this.stack.length - 1]; await this.render(prev.adcode); } handleClick(params) { const adcode params.data params.data.adcode; if (adcode) this.drillTo(adcode, params.name); } }逻辑说明maxCache控制缓存上限超出时用unregisterMap清理这是避免内存泄漏的关键。参数上basePath让数据路径可配置方便部署到不同环境。handleClick里只处理带adcode的点击避免误触。验证组件是否正常我习惯用一个最小页面跑三步初始化省级、点击下钻到市、返回省级。三步都正常再接入真实业务数据。如果下钻后地图不显示先看cache里有没有对应 adcode再看registerMap是否成功最后看series.map是否一致。这个顺序能覆盖九成问题。一个具体技巧如果要做省和市两张联动地图不要开两个MapDrill实例各自加载而是共享同一个cache。把cache提到外面传进去两张图就能复用已注册的地图省一半请求。这个改动很小但在大屏场景下效果明显。最后说个我踩过的坑早期我图省事把 GeoJSON 直接内联在 JS 里结果打包后文件巨大首屏加载十几秒。后来全部改成按需 fetch配合缓存和预取首屏降到一秒内。地图数据这种东西能异步就别同步能按需就别全量这是最实在的经验。希望帮到你。本文还有配套的精品资源点击获取