简介这份资源面向需要在 Web 页面中展示重庆区域地理数据的开发者提供 ECharts 地图可视化的基础素材适合具备一定 JavaScript 与前端基础、希望快速搭建重庆地图展示效果的学习者。压缩包共 2 个文件包含 1 个 JSON 与 1 个 HTML整体约 18KBJSON 文件承载重庆各行政区划的边界坐标数据是地图渲染的底层依据HTML 文件则给出引入 ECharts、创建容器、初始化实例并加载地图数据的完整页面模板两者配合即可跑通地图展示流程。目前已有 2425 人学习下载说明该素材在实际项目中具备一定参考价值。读者可据此掌握地图类型 series 的配置方式并在此基础上扩展区域着色、悬浮提示、点击事件与缩放平移等交互也可将 JSON 数据替换为其他地区迁移到数据分析、地理信息展示等场景中。1. 从一份 Echarts 重庆地图资源说起区县边界、散点与飞线到底怎么落地前阵子接了个活儿要在数据大屏上把重庆三十多个区县的业务分布画出来客户还要求能下钻、能标点、能画飞线。我第一反应是找现成的地图 JSON结果翻了一堆仓库要么是几年前的旧边界要么缺了某个区县要么坐标系对不上点位全飘到隔壁省去了。后来拿到一份 Echarts 重庆地图资源包才算把这事儿按下去。这份资源的核心价值就一句话它把重庆的 GeoJSON 边界数据、Echarts 注册地图的调用方式、以及散点/飞线/下钻的配置模板打包在一起让你不用再从零去抠边界坐标。适合谁做数据可视化大屏的前端、需要区县级地图下钻的开发者、以及被「地图加载不出来」折磨过的同学。下面我按自己复现的流程把这份资源拆开讲清楚。2. Echarts 地图渲染原理与资源结构为什么你的地图总是空白2.1 Echarts 地图的三层依赖关系很多人第一次用 Echarts 画地图代码抄得一字不差结果页面上只有坐标轴没有地图控制台也不报错这就是典型的「玄学空白」。根因在于 Echarts 本身不内置任何地理边界数据它只负责渲染边界得你自己喂进去。整个链路分三层第一层是地理数据源也就是 GeoJSON 或 JS 格式的边界文件里面是一堆经纬度坐标点组成的多边形第二层是注册动作通过echarts.registerMap(重庆, geoJson)把这份数据挂到 Echarts 内部的地图注册表上注册名就是你后面 series 里map字段要引用的名字第三层才是 option 配置用geo组件或series-map来消费这份注册好的地图。这三层任何一层断了都会导致空白。常见情况是数据没加载完就调了 registerMap或者 registerMap 的名字和 series 里的 map 名不一致或者 GeoJSON 本身格式有问题比如 coordinates 层级多了一层。我一般排查时先在 registerMap 之后打印一下echarts.getMap(重庆)如果返回 undefined说明注册这一步就没成后面不用看了。2.2 这份资源里到底有什么拿到资源包后先别急着往项目里塞花两分钟把目录过一遍。通常这类 Echarts 重庆地图资源会包含以下几类文件我按用途列个表你对照自己手上的包核对文件/目录格式用途使用方式重庆整体边界.json / .js市级地图含 38 个区县轮廓registerMap 注册后直接渲染区县拆分文件.json单个区县独立边界下钻时按需注册示例页面.html散点、飞线、下钻 demo浏览器直接打开看效果配置片段.jsoption 模板复制到项目里改数据需要留意的是不同来源的边界文件坐标系可能不一样。Echarts 默认吃的是 WGS84 或 GCJ02 的经纬度如果你拿到的文件是用投影坐标比如 Web 墨卡托的米制坐标存的直接注册进去地图会缩成一个点或者跑到屏幕外。判断方法很简单打开 JSON 看 coordinates 里的数值如果经纬度量级是 106、29 这种重庆大概在东经 106、北纬 29那就是对的如果是几十万、几百万的数值那就是投影坐标得先转换。2.3 注册地图的最小可运行代码先跑通一个最小例子别一上来就堆散点和飞线。下面这段是注册重庆地图并渲染的最小代码我习惯用 fetch 加载本地 JSON你也可以直接 importimport * as echarts from echarts; // 1. 初始化实例容器要有明确的宽高否则地图不显示 const chart echarts.init(document.getElementById(map), null, { width: 100%, height: 600px }); // 2. 加载 GeoJSON 并注册注册名 chongqing 后面 series 要用 fetch(/static/chongqing.json) .then(res res.json()) .then(geoJson { // 注册前校验一下数据避免注册了空对象 if (!geoJson || !geoJson.features || !geoJson.features.length) { console.error(GeoJSON 数据为空或格式不对); return; } echarts.registerMap(chongqing, geoJson); // 3. 配置 optiongeo 组件负责底图 chart.setOption({ geo: { map: chongqing, // 必须和 registerMap 的名字一致 roam: true, // 允许缩放和拖拽 label: { show: true, fontSize: 10 }, itemStyle: { areaColor: #0b1a3a, borderColor: #2a5caa, borderWidth: 1 }, emphasis: { itemStyle: { areaColor: #1e4d8c } } } }); }) .catch(err console.error(地图数据加载失败, err));逻辑说明echarts.init的第三个参数显式指定宽高是因为很多大屏项目里容器是 flex 布局初始化时高度为 0地图自然看不见这是血泪经验。registerMap之前做了 features 校验防止加载到空文件还继续往下走。geo.map的值必须和注册名严格一致大小写都不能差。参数上roam: true开启缩放拖拽大屏上一般会关掉避免误操作label.show控制区县名显示区县多的时候建议关掉不然字叠在一起。3. 散点、飞线与区县下钻把业务数据挂到地图上3.1 散点图坐标转换与 visualMap 联动底图跑通后下一步就是把业务点位标上去。散点用series-scatter配合coordinateSystem: geo让点位跟着地图走。这里最容易翻车的是坐标系不匹配你的点位如果是用某地图 API 拾取的GCJ02 火星坐标而边界文件是 WGS84点位会有几百米偏移放大后很明显。常见做法是统一坐标系要么都用 GCJ02要么都用 WGS84别混着来。// 业务点位数据coord 是 [经度, 纬度] const points [ { name: 点位A, value: [106.55, 29.56, 120] }, // 第三个值是业务量 { name: 点位B, value: [108.38, 30.81, 85] }, { name: 点位C, value: [105.84, 30.42, 200] } ]; chart.setOption({ geo: { map: chongqing, roam: true }, visualMap: { min: 0, max: 200, calculable: true, inRange: { color: [#50a3ba, #eac736, #d94e5d] }, textStyle: { color: #fff } }, series: [{ type: scatter, coordinateSystem: geo, // 关键绑定到 geo 坐标系 data: points, symbolSize: (val) Math.sqrt(val[2]) * 2, // 按业务量映射大小 encode: { value: 2 }, // 告诉 visualMap 用第三个值着色 label: { show: true, formatter: {b} }, emphasis: { scale: 1.5 } }] });逻辑说明coordinateSystem: geo是散点能贴在地图上的前提漏了这行点位会按普通直角坐标系画。symbolSize用开方是为了让面积和数值成正比直接线性映射大值会大得离谱。encode.value: 2指定 visualMap 取数据里的第三个维度来着色不写的话 visualMap 默认取第一个值颜色就乱了。参数上visualMap.min/max要按你实际业务量的范围设设小了颜色全挤在一端。3.2 飞线图lines 系列与 effect 动画飞线用series-lines本质是连接两个坐标点的曲线。资源包里如果有飞线 demo你会发现它依赖effect做流动动画。飞线的数据格式是{ coords: [[起点经度, 起点纬度], [终点经度, 终点纬度]] }注意是二维数组套两层。const flyLines [ { coords: [[106.55, 29.56], [108.38, 30.81]] }, { coords: [[106.55, 29.56], [105.84, 30.42]] } ]; chart.setOption({ series: [{ type: lines, coordinateSystem: geo, data: flyLines, lineStyle: { color: #a6c84c, width: 1, curveness: 0.3 // 弯曲程度0 是直线 }, effect: { show: true, period: 4, // 动画周期越小越快 trailLength: 0.3, // 拖尾长度 symbol: arrow, symbolSize: 6 } }] });逻辑说明curveness控制线的弯曲0 是直线0.3 左右比较自然太大线会绕圈。effect.period是动画周期秒数大屏上一般 3 到 5 秒太快了看不清。trailLength是拖尾0 到 1 之间太大会糊成一片。飞线数量多的时候性能会掉超过几百条建议做聚合或者只显示重点线路。3.3 区县下钻点击事件与动态注册下钻是这类地图资源的高频需求点某个区县地图切换到该区县的详细边界。实现思路是监听click事件拿到区县名然后动态注册对应的区县 GeoJSON 并重设 option。chart.on(click, (params) { // params.name 是点击的区县名比如 渝中区 const districtName params.name; const districtFile /static/districts/${districtName}.json; fetch(districtFile) .then(res res.json()) .then(geoJson { echarts.registerMap(districtName, geoJson); chart.setOption({ geo: { map: districtName, roam: true }, series: [] // 下钻后清空上层散点按需重新加载 }); }) .catch(() console.warn(该区县边界文件缺失, districtName)); });逻辑说明params.name来自 GeoJSON 里 properties 的 name 字段所以你的边界文件里每个 feature 必须有 name 属性否则点击拿不到区县名。下钻后要清空 series不然上层的散点还挂在旧坐标系上。区县文件名建议和 name 字段保持一致省得做映射表。参数上如果区县文件是懒加载的记得加 loading 提示网络慢的时候用户会以为卡死了。4. 避坑与排查地图加载不出来、点位偏移、下钻失效的常见问题4.1 地图一片空白控制台无报错现象页面渲染了容器但地图区域是空的控制台干净。原因通常是容器高度为 0或者 registerMap 在 setOption 之后才执行。解决给容器显式设高或者用echarts.init的第三个参数指定 height把 registerMap 放进 setOption 之前的 then 回调里确保顺序。4.2 点位整体偏移到隔壁区域现象散点位置和实际地理位置对不上整体偏了几百米甚至几公里。原因边界文件和点位数据坐标系不一致常见是 GCJ02 和 WGS84 混用。解决统一坐标系用同一套标准重新拾取点位或者对边界文件做坐标转换。判断方法是对比一个已知地标的经纬度。4.3 区县名显示成拼音或 undefined现象地图上区县标签显示的是拼音、乱码或者 undefined。原因GeoJSON 的 properties 里没有 name 字段或者字段名不是 Echarts 默认读取的 name。解决检查 features 里每个 properties确保有name字段且值为中文如果字段名是别的比如 NAME、district在 registerMap 前做一次映射改写。4.4 下钻后返回上一级地图错乱现象下钻到区县后再想返回市级地图显示不全或者 series 残留。原因返回时没有重新注册市级地图或者 series 没清空。解决返回操作里重新registerMap(chongqing, 市级GeoJSON)并重设完整 option别只改 geo.map。我一般会封装一个renderMap(mapName, geoJson, seriesData)函数进出都走同一个入口避免状态残留。4.5 飞线动画卡顿、大屏掉帧现象飞线一多页面帧率骤降动画一顿一顿。原因lines 系列的 effect 动画是逐帧计算的几百条以上开销很大。解决减少同时显示的飞线数量或者关掉 effect 只画静态线也可以用large: true开启大数据量优化模式但飞线的动画效果会打折。5. 进阶技巧用 geoJSON 动态裁剪与自定义区域高亮资源包用熟之后我遇到一个更细的需求客户只想高亮重庆主城九区其他区县灰掉。常规做法是给每个区县单独设 itemStyle但三十多个区县一个个配太蠢。更省事的思路是利用 GeoJSON 的 features 做动态裁剪把主城九区的 feature 单独抽出来注册成一张「主城地图」其余区域作为背景。// 假设 geoJson 是完整的重庆边界 const mainCityNames [渝中区, 江北区, 沙坪坝区, 九龙坡区, 南岸区, 北碚区, 渝北区, 巴南区, 大渡口区]; // 从完整 features 里筛出主城九区 const mainCityFeatures geoJson.features.filter(f mainCityNames.includes(f.properties.name) ); // 构造一份只含主城九区的 GeoJSON const mainCityGeoJson { type: FeatureCollection, features: mainCityFeatures }; echarts.registerMap(mainCity, mainCityGeoJson); chart.setOption({ geo: [ // 底层完整重庆灰色背景 { map: chongqing, roam: true, itemStyle: { areaColor: #1a1a2e, borderColor: #333 }, label: { show: false }, silent: true // 底层不响应鼠标避免抢事件 }, // 上层主城九区高亮 { map: mainCity, roam: true, itemStyle: { areaColor: #2a5caa, borderColor: #5a9cff }, label: { show: true, color: #fff }, z: 2 // 层级高于底层 } ] });逻辑说明核心是features.filter按 name 筛选构造一份新的 FeatureCollection 再注册。geo数组支持多层叠加底层设silent: true让它不响应鼠标事件事件都交给上层。z控制层级值大的在上面。这个技巧的边界在于两层地图的 roam 缩放是独立的用户拖拽时两层会错位解决办法是监听georoam事件同步两层的 zoom 和 center或者干脆只让上层响应 roam底层设roam: false跟着走。参数上silent和roam的搭配要按交互需求调如果只做展示不做交互两层都设 silent 最省心如果要下钻只让上层响应。另外筛选用的区县名必须和 GeoJSON 里的 name 完全一致差一个字就筛不出来我一般会先把所有 name 打印出来核对一遍。从那以后我每次拿到新的地图资源包都强制先跑一遍「注册 → 打印 getMap → 渲染底图」这三步确认边界数据没问题再往上叠业务层省得后面出了偏移问题回头怀疑是数据还是配置。希望帮到你。本文还有配套的精品资源点击获取