★ FEATURED ARTICLE 简介面向使用 ECharts 绘制中国及省级地图的前端开发者与数据分析人员这份 JavaScript 地图数据压缩包提供可直接引入的 china.js 及各地地理信息脚本适合可视化入门、业务看板与区域数据展示能减少自行整理行政区划边界数据的工作量。rar 压缩包内共 35 个文件全部为 js 脚本整体约 841KB按全国与省级地图数据组织便于在项目中按需加载并配合 ECharts 的 geo 与 series 配置完成地图渲染、区域着色和交互展示。已有 5705 人学习下载说明其在同类地图数据资源中具有一定参考价值。读者可获得较完整的中国地图与省级地图数据基础用于快速搭建地图示例、验证可视化方案或在此基础上扩展区域数据标注、动态更新与点击交互等功能省去从零收集和转换地图脚本的时间。1. ECharts 地图缺的那块数据就装在这个 china.js 里接手一个数据看板改造时最容易被低估的一块是地图。全国分布、省份下钻、区域热度着色看着是三个需求落到代码里其实只隔着一个 china.js。ECharts 从 5.0 起把内置地图数据从主包里摘了出去早年series.map: china直接能跑的日子到此结束现在不自己备一份地图数据、不手动registerMap控制台只会回一句地图不存在。这份 echarts china.js 压缩包的价值就在这一份全国文件加各地省市文件把 ECharts 地图最缺的那层几何数据补齐。它适合正在做数据大屏、运营看板、区域分布图的前端和数据同学也适合接手老项目、要把 ECharts 4 的写法迁到 5 的那批人。下面按我实际的接入顺序从文件结构、加载方式、数据对齐一路讲到几个必踩的坑。2. 拆开 china.jsUMD 包装、registerMap 与 GeoJSON 的三层结构很多人第一次打开这个文件编辑器卡了两秒滚动条长得看不到底第一反应是“这玩意儿怎么读”。其实不用全读它只有三层最外面一层是模块包装中间一层是一次registerMap调用里面一层才是真正有用的地理数据。把这三层拆明白后面所有报错基本都能自己定位。2.1 为什么 ECharts 5 之后必须自己带地图数据ECharts 4 时代地图数据是跟主库一起发布的series.map: china写上去就出图代价是主包体积里长期压着一大坨绝大多数项目用不上的地理坐标。地图数据的更新节奏又跟主库对不上边界调整、行政层级变化都需要单独发版。把地图数据从主库剥离、改成按需注册是必然选择这也是 ECharts 5 之后所有地图项目都要过的第一道关。剥离之后渲染链路变成了两段先用registerMap(名字, 数据)把地图注册进一个内部注册表再在配置里用series.map或geo.map按名字取用。名字是你自己起的只要注册和引用对得上就行。这一步不做图表初始化时会直接抛Map china not exists页面上一片空白连坐标轴都不给你留。所以这类资源包的本质不是“一张图片”而是一份可以被 ECharts 消费的矢量几何数据集合。压缩包里全国一份、各省各一份按行政层级切好你按项目需要引哪份就注册哪份这也是控制体积的唯一有效手段。2.2 外层包装UMD 三段分支到底在干什么把文件头尾翻出来典型结构长这样(function (root, factory) { // 分支一AMD 环境 if (typeof define function define.amd) { define([exports, echarts], factory); // 分支二CommonJS 环境 } else if (typeof exports object typeof exports.nodeName ! string) { factory(exports, require(echarts)); // 分支三浏览器全局环境 } else { factory({}, root.echarts); } }(this, function (exports, echarts) { if (!echarts || !echarts.registerMap) { console.error(echarts 未加载或版本不支持 registerMap); return; } echarts.registerMap(china, { type: FeatureCollection, features: [ // ...成百上千个 Feature ] }); }));这段包装的逻辑说明文件本身不导出任何函数它的作用是在被加载的那一刻执行副作用——也就是调用echarts.registerMap把数据塞进 ECharts 的注册表。三个分支分别对应 AMD 加载器、Node/CommonJS 打包环境、以及浏览器 script 直引。参数说明上要盯两个点。第一个是registerMap的第一个参数china这是地图名后续series.map: china必须一字不差改成中国你就得在配置里也写中国。第二个是第二个参数也就是那个FeatureCollection对象它才是真正的地理数据前面所有包装都是为了把它送进注册表。需要留个心眼分支二里的require(echarts)在打包环境里会被静态解析一旦你的 echarts 版本对不上或者加载器把它当外部依赖处理失败就会在这一行炸掉。分支三里的root在严格模式的 ESM 环境下是undefined此时root.echarts直接抛错。这两个问题在后面的接入章节里会展开。2.3 里层数据一个 Feature 里哪几个字段真正参与渲染再看features数组里的单个元素结构是标准的 GeoJSON{ type: Feature, properties: { name: 北京市, adcode: 110000, center: [116.407526, 39.90403], cp: [116.407526, 39.90403] }, geometry: { type: Polygon, coordinates: [ [[116.22, 39.44], [116.24, 39.48], [116.50, 39.52]] ] } }真正参与渲染的字段只有两个。一个是properties.nameECharts 用它给每个区域建立索引后续series.data里每条数据的name就是拿它去匹配的名字对不上数据就贴不上去地图画出来了但全是灰的。另一个是geometrytype决定形状类型Polygon表示单块区域MultiPolygon表示由多块互不相连的区域组成后者在城市、岛屿类数据里很常见coordinates的嵌套层级也因此多一层。properties里的其余字段是给业务用的。adcode是行政区划代码做数据关联时比中文名稳定得多中文名会变代码不会。center和cp一般是区域中心点坐标用来定位标签或者打散点标记不同来源的文件里这两个字段可能只有一个存在取用前建议先用console.log确认。提示不同来源的 china.js 在properties字段命名上并不统一有的用name有的用NAME前者是 ECharts 能识别的大小写。拿到资源包后先翻一个 Feature 出来看字段名比出问题再回头查省事得多。2.4 全国文件和省市文件是平级的不是嵌套关系压缩包展开后常见的组织方式是根目录一份全国文件省市文件放在一个子目录里按行政区划分成若干个独立文件。这里有个容易误解的点——省市文件不是从全国文件里“展开”出来的层级子集它们是各自独立的地图各自注册各自的名称。全国文件里每个 Feature 对应一个省级区域所以properties.name是省一级的全称。省文件里每个 Feature 对应一个地级区域properties.name是地市一级的名称。做下钻的时候你做的事其实是先注册并展示全国地图用户点了某个省再注册那份省文件、把series.map换成省地图的名字重新setOption。两份数据从头到尾是平行的没有包含关系。这个认知直接决定了数据侧的准备工作。你的业务数据如果只有一份“区域名 数值”的扁平表做全国图时它得匹配省级全称做下钻图时它得匹配地市级全称两套名字的粒度不一样。常见做法是准备两张表或者在一张表里加一列level做区分别指望一份数据打天下。另外全国文件通常体积较大省市文件相对小。如果项目只需要展示某几个省全国文件完全可以不引直接引对应省份文件并把初始map设成该省首屏体积能省下一大截。这一点在后面讲按需加载时还会提到。3. 三种接入方式script 直引、打包器 import 与运行时 fetch拿到文件之后第一个选择题是“怎么把它弄进项目”。三种方式没有绝对优劣取决于你的构建工具链和是否需要动态切换地图。我按从土到洋的顺序排前两种是静态引入第三种是动态加载踩坑点各不相同。3.1 script 标签直引顺序错一步就是白屏最原始也最不容易出玄学问题的方式把 echarts 主库和地图文件都用 script 标签引进来注意顺序div idmap stylewidth: 100%; height: 600px;/div script src./libs/echarts.min.js/script !-- 必须在 echarts 之后因为文件内部会读全局 echarts -- script src./libs/map/china.js/script script var chart echarts.init(document.getElementById(map)); chart.setOption({ tooltip: { trigger: item }, series: [{ type: map, map: china, // 与 registerMap 里的名字一致 roam: true, label: { show: false }, data: [ { name: 北京市, value: 120 }, { name: 广东省, value: 340 } ] }] }); /script逻辑说明第一个 script 建立全局echarts第二个 script 在被解析执行时立刻调用registerMap第三个内联脚本才做初始化。三者是严格的顺序依赖地图文件的执行结果依赖于echarts已存在。参数说明map: china里这个字符串就是要和registerMap的第一个参数完全一致roam: true开启拖拽和缩放也可以写成scale只允许缩放、move只允许平移data数组里每条的name必须能匹配到properties.name这个在第四章会细说。这种写法唯一的硬性要求是顺序。把地图文件放在 echarts 前面文件执行时root.echarts还是undefined走到内部判断就直接console.error然后return注册没发生后面初始化必然报地图不存在。这种错在本地开发时反而更隐蔽因为有的浏览器会缓存并重新执行刷新两次看起来又好了。还有一个细节script 直引天然是全局污染地图文件执行完会在window上什么都不留它只调注册但 echarts 本身是全局的。这在纯页面项目里无所谓在微前端或多实例场景下要留意多个 echarts 实例共存时的注册表共享问题。3.2 打包器 import副作用模块与 tree-shaking 的暗坑上了 webpack 或 Vite 的项目通常会把这个 js 当作资源文件 import 进来import * as echarts from echarts; // 副作用导入文件自身没有导出靠执行时调 registerMap 生效 import ./assets/map/china.js; const chart echarts.init(document.getElementById(map)); chart.setOption({ series: [{ type: map, map: china }] });逻辑说明这行 import 不接收任何变量它的作用纯粹是让模块被执行一次。打包器默认会保留有副作用的模块但前提是它判断得出来这个模块有副作用。参数说明与配置webpack 5 和 Vite 都依赖sideEffects字段做摇树优化。如果你把这个地图文件放在src/assets下而项目的package.json里写了sideEffects: false打包器会认为所有模块都没副作用直接把这行 import 摇掉结果就是本地 dev 模式正常dev 不做摇树生产构建后地图消失。正确做法是显式声明{ sideEffects: [ *.css, ./src/assets/map/*.js ] }这条配置的含义是除了这两类文件其他模块都可以安全摇树。地图文件被列进白名单import 就不会被删。比摇树更麻烦的是 UMD 包装在 ESM 环境下的分支判定。前面提过文件里有typeof exports object这个判断。在 webpack 里模块被包了一层函数exports是存在的对象于是走 CommonJS 分支执行require(echarts)。这一句在 webpack 里能解析但如果你的项目装的是 echarts 5而这份地图文件是按 4 的接口写的注册时可能静默失败。在 Vite 的 ESM 环境下require根本不存在同时顶层this是undefinedroot.echarts直接抛Cannot read properties of undefined。注意如果你的构建工具是 Vite直接 import 这类 UMD 包装的 china.js 大概率报错别在包装层上死磕。要么让后端或静态目录提供纯 GeoJSON 版本走下面的运行时方案要么把文件改写成 ESM 形式把registerMap调用放进一个显式导出的函数里由业务代码主动调用。改写成 ESM 其实很简单把外层包装剥掉改成导出一个注册函数// map/china.mjs import * as echarts from echarts; import geoJson from ./china.geo.json; export default function registerChina() { echarts.registerMap(china, geoJson); }这样摇树、分支判定、全局变量的问题一次性全解决代价是你得先把 GeoJSON 从 js 文件里提取出来这一步可以用第 6 章的脚本做。3.3 运行时 fetch按需加载与浏览器缓存项目里地图数量多、或者需要根据用户权限动态决定加载哪些省份时静态 import 就不合适了全部打进包里体积扛不住。这时改成运行时拉取纯 GeoJSONasync function loadMap(name, url) { const res await fetch(url, { cache: force-cache }); if (!res.ok) throw new Error(地图加载失败: ${url} ${res.status}); const geoJson await res.json(); // 同名注册会覆盖旧地图下钻时正好用得上 echarts.registerMap(name, geoJson); return geoJson; } loadMap(china, /static/map/china.geo.json).then(() { chart.setOption({ series: [{ type: map, map: china }] }); });逻辑说明先请求、再解析、再注册最后才 setOption三步是串行的任何一步提前都会导致地图引用不到。cache: force-cache让浏览器优先用本地缓存避免每次进页面都重新下载几百 KB。参数说明name是注册名允许和已有的重名重名会覆盖这个特性在下钻场景里是刚需url建议放在静态资源目录下别塞进打包产物方便单独更新地图数据而不动业务代码。这个方案的代价是首屏多一次网络往返所以常见的折中做法是全国图静态引入保证首屏省市图运行时按需拉。这种混合策略在大屏项目里很实用用户九成时间只看全国图下钻是少数操作没必要为小概率操作拖慢首屏。3.4 容器初始化的几个必设参数不管走哪种加载方式初始化那一步的参数配错后面地图画得再对也是白搭const el document.getElementById(map); const chart echarts.init(el, null, { renderer: canvas, // canvas | svg devicePixelRatio: window.devicePixelRatio, locale: ZH }); // 容器尺寸变化时手动重算ECharts 不会自动监听 const ro new ResizeObserver(() chart.resize()); ro.observe(el);逻辑说明ECharts 初始化时只读一次容器尺寸容器是百分比宽度时父级变化不会触发图表重绘必须显式调resize()。用ResizeObserver比监听 window 的 resize 更准因为它能捕获侧边栏折叠、标签页切换这类不改变窗口尺寸的布局变化。参数说明renderer选canvas还是svg有讲究区域数量多、交互频繁的全国地图用 canvas 更稳区域数量少、需要导出矢量图的用 svg。devicePixelRatio在高分屏上不传会用默认值导致地图边缘发虚尤其标签文字明显。还有一点容易被忽略init时容器必须有确定的宽高。如果容器此时是display: none或者高度为 0图表初始化出来尺寸就是 0后面即使显示出来也是空白必须补一次resize()。4. 把数据贴到地图上name 对齐、geo 与 series 分工、省市下钻联动地图画出来只是第一步真正决定这个项目能不能用的是数据能不能正确贴上去、交互能不能顺畅下钻。这一章是整篇里最容易翻车的部分因为错误表现往往不是报错而是“图出来了但是灰的”没有控制台提示纯靠经验排查。4.1 geo 组件和 series-map 到底该用哪个ECharts 里画地图有两条路新手最容易混着用结果画出两层地图叠在一起。对比项geo组件series.type: map定位纯地理坐标系底图带数据映射的地图系列数据绑定不支持直接绑data支持data可接visualMap多图层可叠加散点、线、飞线同一地图多系列会重复绘制典型用途打点、轨迹、热力图底图区域着色、下钻选型原则很直白只需要底图、上面要叠散点或飞线的用geo需要按数值给区域上色的用series-map。两者同时配置时ECharts 会画两遍地图边界线颜色叠加后会变深看起来像描边加粗了实际是重复绘制。真要用“底图 数据层”的组合正确姿势是把geo作为坐标系让series通过geoIndex挂上去而不是各自画一遍option { geo: { map: china, roam: true, itemStyle: { areaColor: #0f2a4a, borderColor: #2c5f8a } }, series: [{ type: scatter, coordinateSystem: geo, // 挂到 geo 上而不是自己再画一张 geoIndex: 0, data: [{ name: 某市, value: [116.4, 39.9, 88] }] }] };参数说明coordinateSystem: geo是关键它告诉 series 用第 0 个 geo 组件做坐标换算geoIndex在有多个 geo 时才需要显式指定。散点数据的value是[经度, 纬度, 数值]三段式前两位决定了点的位置第三位是给 tooltip 和 visualMap 用的。4.2 name 对齐全名、简称和后缀三选一必须统一这是地图项目里最高频的问题没有之一。数据贴不上去九成是名字对不上。ECharts 匹配区域的依据是字符串全等。properties.name写的是“北京市”你数据里写“北京”匹配失败反过来也一样。中间差一个字、多一个“省”字、少一个“市”字都不行。先确认地图文件里的名字长什么样// 在注册后把地图里的名字打出来建立一份对照表 const geoJson await fetch(/static/map/china.geo.json).then(r r.json()); console.table(geoJson.features.map(f ({ name: f.properties.name, adcode: f.properties.adcode })));逻辑说明这段把地图里所有区域的name和adcode打成表格方便和业务数据做比对。实操里我一般把它跑一次把结果复制到 Excel 里和业务表做一次 VLOOKUP比在代码里反复试快得多。如果业务侧的中文名实在改不了用nameMap做一层映射series: [{ type: map, map: china, nameMap: { 北京市: 北京, 广西壮族自治区: 广西, 新疆维吾尔自治区: 新疆 }, data: [{ name: 北京, value: 120 }] }]参数说明nameMap的键是地图里的原始名properties.name值是你要显示和匹配的名字。配置之后series.data里的name要写映射后的值tooltip里显示的也是映射后的值。这一点搞反了数据照样贴不上。比中文名更稳的做法是关联adcode。业务数据里存一份 adcode用 adcode 做匹配键中文名只用来显示行政区划改名也不会影响你的数据关联。代价是要多维护一份映射但从长期维护角度看是值的。4.3 省市下钻注册覆盖、状态还原与返回全国下钻的完整链路是点全国图的某个省 → 加载该省的 js 或 geojson → 注册 → 把series.map换成该省 → 重新setOption→ 用户点返回 → 换回全国。let currentMap china; // 默认点亮后重新设置地图名和数据 function renderMap(mapName, data) { currentMap mapName; chart.setOption({ series: [{ type: map, map: mapName, roam: true, data }] }, { notMerge: true }); // 必须 notMerge否则旧系列的配置会残留 } // 点击下钻 chart.on(click, async (params) { if (currentMap ! china) return; // 防止在省图里再触发 const target await loadMap(params.name, /static/map/province/${params.name}.geo.json); renderMap(params.name, buildData(params.name)); }); // 返回全国 function backToChina() { renderMap(china, nationalData); }逻辑说明setOption的第二个参数{ notMerge: true }是这里的关键。默认是合并模式新旧 series 配置会合在一起切换地图后可能出现上一张图的样式残留、或者 series 数组变成两个。加上notMerge表示完全替换每次都是干净的。参数说明params.name是用户点击的区域名可以直接拿来做文件名但要注意中文字符做 URL 路径需要encodeURIComponent且部分服务器对中文路径支持不好稳妥做法是维护一份“名称 → 拼音或 adcode”的映射表用后者拼路径。还有一个常见需求是“下钻后要能一键回全国”。实现上就是把renderMap(china, nationalData)再调一次但要注意registerMap不会因为切换而卸载全国地图一直注册在表里直接切换即可不需要重新加载数据。这一点比很多人想的简单。4.4 visualMap、roam、label 的参数取舍最后这组参数是决定观感的参数常用值说明visualMap.min/max按数据算写死会导致颜色分布失真建议从数据里取极值visualMap.inRange.color灰度到主色渐变颜色越多读图成本越高三到五档够用visualMap.calculabletrue开启拖拽手柄大屏场景一般关掉防止误操作roamtrue/scale大屏展示建议只开scale防止用户把地图拖出视野label.show区域少开区域多关全国图开 label 在小屏上必然糊layoutCenter/layoutSize[50%,50%]/90%控制地图在容器里的位置和占比比zoom更可控option { visualMap: { min: 0, max: 500, calculable: false, inRange: { color: [#e8f4ff, #9ec9f0, #3f7fbf, #1b4b7a] }, left: 20, bottom: 20 }, series: [{ type: map, map: china, roam: scale, layoutCenter: [50%, 50%], layoutSize: 92%, label: { show: false }, emphasis: { label: { show: true, fontWeight: bold } } }] };参数说明layoutSize用百分比表示地图占容器的比例比调zoom更直观因为zoom是相对默认缩放倍数的乘法不同容器尺寸下表现不一致。emphasis里单独开 label 是常用折中——平时不显示名字鼠标悬停时显示既清爽又不丢信息。roam: scale限制只缩不拖避免用户在大屏触屏上把地图拖走又不知道怎么回来。5. 排查清单五类翻车现场和对应的定位手法下面这几条是我在不同项目里反复遇到的现象看着各不相同根因其实都落在前面几章的某个环节上。按“现象 → 原因 → 解决”整理出问题时对照着查。5.1 报Map china not exists现象控制台明确报地图不存在图表容器空白。原因通常有三个地图文件没引进来引进来了但在 echarts 之前执行或者文件执行时 echarts 版本太老不支持registerMap。解决方式是先在控制台敲echarts.getMap(china)返回undefined说明注册压根没发生去看网络面板里那个 js 有没有 200返回对象说明注册成功了问题在引用名检查series.map的字符串和注册名是否一字不差包括有没有多余空格和大小写。5.2 地图出来了但区域全是灰色现象边界线正常、形状正常就是数据不上色tooltip 也不显示数值。原因基本锁定在 name 不匹配。解决方式是选中一个本应上色的区域看properties.name到底是什么再和series.data里的name逐字符比对。特别注意三种情况简称与全称混用数据侧带空格以及用了nameMap之后数据侧还在写原始名。最省事的验证办法是临时把series.data改成一条{ name: 地图里某个确定存在的名字, value: 100 }能上色就说明逻辑没问题纯粹是数据侧名字的问题。5.3 本地开发正常打包上线后地图消失现象dev 模式一切正常CI 构建出来的包一打开就是空白控制台也不报错。原因有两个一是 tree-shaking 把副作用 import 删了二是 UMD 分支在构建产物里判到了错误的分支。解决方式是先在package.json的sideEffects白名单里加上地图文件路径重新构建验证如果还不行把构建产物里搜一下有没有registerMap字样搜不到就是被删了搜得到就是执行顺序或者分支判定问题改用第 3 章里导出一个注册函数的 ESM 写法让调用时机变成显式的。5.4 两张地图叠在一起边界线发黑现象地图整体比预期暗边界线像是加粗了鼠标移上去还会闪。原因是同时配了geo和series.type: map两个图层各画了一遍。解决方式是二选一要用数据上色就删掉geo只留series-map要用散点底图就删掉map系列让散点通过coordinateSystem: geo挂到geo上。改完刷新如果还有重影检查一下代码里是不是有多个setOption调用没加notMerge配置被合并累积了。5.5 缩放卡顿、标签糊成一团现象全国图开roam之后拖动明显掉帧或者label一开满屏文字重叠看不清。原因是全国地图的路径节点数量大canvas 在每次缩放时都要重绘全部路径同时标签排版也是一次完整计算。解决方式是只开roam: scale减少重绘触发频率label改成emphasis下才显示如果数据精度过高比如沿海岸线的点特别密用第 6 章的简化手段把坐标精度降到小数点后三位视觉上几乎看不出差别渲染开销能降不少。区域数量本来就少的省份图可以反过来把 label 开着不影响性能。6. 上线前的一道工序用 Node 脚本自检地图数据并瘦身地图这类资源有个特点出问题不报错只表现为“图不对”等上线后被业务方截图指出来就晚了。所以我现在养成一个习惯地图文件进项目之前先跑一遍自检把名字列表、Feature 数量、重复项都打出来和业务数据做个交叉比对比在浏览器里反复刷新快得多。这个脚本用 Node 的vm模块把 china.js 在一个沙箱里跑一遍给沙箱注入一个假的echarts.registerMap把数据截获下来// tools/check-map.js const fs require(fs); const vm require(vm); const file process.argv[2]; const code fs.readFileSync(file, utf8); let captured null; // 沙箱里放一个最小的 echarts 打桩对象 const sandbox { echarts: { registerMap(name, data) { captured { name, data }; } }, console }; sandbox.window sandbox; sandbox.self sandbox; vm.createContext(sandbox); vm.runInContext(code, sandbox, { timeout: 5000 }); if (!captured) { console.error(未捕获到 registerMap 调用检查文件格式); process.exit(1); } const { name, data } captured; const features data.features || []; const names features.map(f f.properties.name); const dup names.filter((n, i) names.indexOf(n) ! i); const weird names.filter(n !n || n.trim() ! n); console.log(注册名:, name); console.log(区域数量:, features.length); console.log(重复名称:, dup.length ? dup : 无); console.log(空名或首尾空格:, weird.length ? weird : 无); console.log(前 10 个名称:, names.slice(0, 10).join( / ));逻辑说明沙箱里只注入echarts和console地图文件的 UMD 包装会判断typeof exports沙箱里没有exports于是走全局分支读root.echarts正好拿到我们塞进去的打桩对象。runInContext加timeout是防止文件里有意外逻辑卡死。参数说明命令行第一个参数是文件路径输出的“注册名”要和业务代码里的series.map对上“区域数量”可以和预期值比对少一个就说明数据版本不对“重复名称”非空是很危险的信号说明有同名区域数据会被后一个覆盖。瘦身用的是 mapshaper不需要装什么重型依赖npx直接跑npx mapshaper china.geo.json \ -simplify 15% keep-shapes \ -filter-fields name,adcode \ -o formatgeojson precision0.001 china.slim.json逻辑说明-simplify 15%是顶点保留比例15% 意味着丢掉 85% 的路径节点全国图在这个比例下视觉上基本无损沿海岸线也不会出现明显锯齿keep-shapes防止面积很小的区域被简化到消失-filter-fields只保留两个必要字段砍掉大量业务用不上的属性precision0.001把坐标小数位压到三位这个精度下 1 公里左右的偏差做省级着色完全够用。参数说明简化比例不是越小越好低于 5% 会出现边界明显变形、飞地丢失。我一般先跑 15%把产物和原图叠在一起看一眼没问题再往下压。另外-filter-fields里一定要带上name这是 ECharts 匹配区域的唯一依据丢了它整份数据就废了。从那以后我每次往项目里加一份新地图文件都会先跑一遍自检脚本、再跑一遍简化、再和业务数据的名字做一次比对三步走完才提交。这样拦下来的问题至少有四五次比上线后被截图反馈再回头查要省心。希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
