★ FEATURED ARTICLE 简介面向数据可视化需求整理的 ECharts 世界地图 JavaScript 资源包内含 39 个 JS 脚本与 38 个 JSON 地图数据文件共 77 个文件、3.42MB。JS 覆盖 ECharts 核心库与 macarons 主题扩展JSON 存储全球各国 GeoJSON 地理边界及坐标数据用于构建可缩放、可平移的交互式世界地图。开发者引入后通过 series-map 和 visualMap 即可实现人口、GDP 等数据按国家着色展示并支持 tooltip 点击提示、区域选择等交互。包体结构清晰主题、地图数据与核心库分文件存放便于按需调用与二次定制既适合初中级前端学习者快速上手也能满足中高级开发者在业务系统中展示全球分布的需求。该压缩包已有 1638 人学习轻量实用省去自行寻找和转换 GeoJSON 数据的时间可无缝对接现有 ECharts 项目。1. 世界地图在前端可视化里为什么绕不开 ECharts做全球业务看板时第一反应往往是找现成的世界地图组件可真上手才发现大多数地图库要么收费要么交互体验不适合 Web 端。ECharts 世界地图 JS 是一套基于 ECharts 的 JavaScript 世界地图渲染方案核心思路是先用registerMap注册一份 GeoJSON 地图数据再通过series-map把业务数据按国家/地区名挂到图形上。它解决的痛点很直接不用自研地图引擎用配置项就能把全球数据分布画出来。适合做跨境电商、国际物流、海外运营报表的前端开发者也适合产品经理想快速验证数据分布逻辑。本文按一个一线工程师的落地顺序来写先把机制讲透再给你能直接抄的代码最后把那些地图空白、名称匹配不上、性能拉胯的坑逐个排掉。2. ECharts 世界地图的底层机制与地图数据准备2.1 先搞清 registerMap 与 GeoJSON 的关系ECharts 本身并不内置任何地图数据。它只负责把坐标、边界和业务数据渲染成图形而某个国家的边界长什么样完全取决于你注册进去的 GeoJSON。这个设计很多人一开始会忽略于是直接照抄官方示例里的china地图能跑通换成世界地图就只剩一个点或者一片空白——因为世界地图数据不在默认包里你必须先registerMap。registerMap的签名很简单第一个参数是地图名你在配置项里引用这个名字第二个参数是 GeoJSON 对象或包含 GeoJSON 的 URL。常见做法是用fetch或axios请求一份世界地图的 GeoJSON 文件拿到对象后注册。需要留意的是ECharts 注册的是一个地图而不是一组国家也就是说全世界是一个整体地图内部的每个国家只是这个地图里的一个区域它们共享一套投影坐标系。这解释了为什么你不能直接把中国地图数据注册成world来用——区域编码、边界精度、投影比例都不一样。另一个重要概念是map类型下的geoCoordData与 GeoJSON 的区别。geoCoordData只能提供国家中心点坐标适合做散点定位GeoJSON 则提供完整的边界多边形适合做区域填充、描边和钻取。很多人在做世界地图时两种数据混用导致边界画出来了但散点位置偏了或者反过来。我的建议是区域分布用 GeoJSON精确到城市的散点再单独喂经纬度数组两者通过geo组件协调不要在一种数据源里混着搞。GeoJSON 内部结构上你至少要看懂三件事type: FeatureCollection代表一个集合features数组里每个元素是一个国家每个国家的properties.name是 ECharts 匹配数据时的索引键。数据匹配失败九成是name对不上这一点后面专门展开。2.2 自己准备世界地图 GeoJSON 的三种常见路子既然 ECharts 不自带地图数据那 GeoJSON 从哪来我常用的有三条路子按性价比排序。第一条直接用社区维护好的世界地图 GeoJSON 文件。GitHub 上有不少仓库专门维护高精度与低精度的世界地图数据按国家代码或中文名组织。下载一个world.json放进项目静态资源目录这是最省事的。缺点是精度不一有的仓库把有争议地区画得比较粗糙业务上如果涉及敏感边界展示要自己评估。第二条从在线地图编辑工具里导出。如果默认的世界地图缺少某些区域或者你想把某个海域范围也画进去可以导入 GeoJSON 到地图编辑工具里手工调整后导出。这条路子我一般只在定制需求时才走因为手工维护的边界文件后续更新很痛苦。第三条用脚本把高精度数据降噪简化。有的公开数据集精度过高一个世界地图的 GeoJSON 可能几十 MB浏览器渲染直接卡死。这时候可以用简化算法如 Douglas-Peucker把矢量边界抽稀到 1~5 MB 级别。常见做法是用 Node 脚本读取原始 GeoJSON按坐标精度阈值简化后重新输出。这样既保留了国家边界的基本形状又能保证页面加载速度。实际项目里我一般这样组织文件结构src/assets/map/world.json src/assets/map/world-simple.json src/utils/map-name-map.js src/utils/loadMap.jsworld.json是高精度版用于导出静态图或大屏展示world-simple.json是简化版用于常规看板和移动端map-name-map.js存放中文名到数据字段名的映射loadMap.js封装加载和注册逻辑。这样分层的意义在于地图数据和大屏业务数据分离后续地图精度更新时只换 JSON 不动业务代码。2.3 用脚本把地图数据接入项目的最稳方式接入环节最常见的翻车点是把 GeoJSON 直接放在src里通过 import 引入结果打包后体积暴涨。更稳的方式是把地图 JSON 放到public或静态资源目录运行时用fetch加载并注册。// loadMap.js import * as echarts from echarts; let mapLoaded null; export function loadWorldMap() { if (mapLoaded) { return mapLoaded; } mapLoaded fetch(/assets/map/world-simple.json) .then((res) { if (!res.ok) { throw new Error(加载世界地图失败: ${res.status}); } return res.json(); }) .then((geoJson) { echarts.registerMap(world, geoJson); return geoJson; }); return mapLoaded; }这段代码做了三件事用mapLoaded缓存 Promise 防止重复加载通过fetch从静态目录拿 JSON拿到后立刻registerMap。注释里的res.ok判断很关键——如果 GeoJSON 路径配错了fetch不会抛异常而是返回一个 404 的 Response不加这个判断后续res.json()会解析失败且错误信息很难看懂。参数说明这里把地图名定为world后面配置项里series.map和geo.map都要用这个字符串/assets/map/world-simple.json是相对于部署根路径的访问地址如果你部署在子目录下记得用相对路径或动态拼接 base。另外registerMap是全局注册同一个页面里多个图表实例可以共用同名地图不需要每个实例重新注册。如果你用的是 Vite 或 Webpack 这类打包工具还可以用?url后缀让构建工具自动处理资源路径import worldMapUrl from /assets/map/world-simple.json?url;这样可以把文件交给构建管线处理指纹和缓存但我个人更推荐public方案因为地图文件体积大且更新频繁绕开打包缓存更灵活。3. 从零跑通一张带数据的世界地图3.1 最小化示例一张能看见国家边界的空地图代码能不能跑通所有人第一步要的都是同一个结果页面上出现一张世界地图能看到国家边界鼠标移上去有提示。先把这一步做成后面加业务数据才有基础。import * as echarts from echarts; import { loadWorldMap } from ./loadMap; async function initWorldMap() { await loadWorldMap(); const chart echarts.init(document.getElementById(map-container)); const option { tooltip: { trigger: item, formatter: (params) ${params.name}: ${params.value ?? 无数据} }, series: [ { name: 全球分布, type: map, map: world, roam: true, label: { show: false }, data: [] } ] }; chart.setOption(option); return chart; } initWorldMap();逻辑说明loadWorldMap()保证地图注册完成后再初始化图表否则会出现registerMap 未注册的报错。series里type: map是 ECharts 绘制地图的类型声明map: world必须和registerMap的第一个参数一致。roam: true开启缩放和平移这在世界地图这种宽幅图形里几乎必开。参数说明tooltip.trigger在map系列下建议用item而不是axis因为地图不是直角坐标系图表。params.name是 GeoJSON 里国家的properties.nameparams.value是你在data里给这个国家绑定的数值。label.show: false是先关掉国家名称标签否则小国家名称会挤成一团等数据正常显示后再酌情打开。这个最小示例跑通后一个常见现象是地图区域的默认颜色是均匀的灰色或蓝色——这很正常因为你没配visualMap也没喂数据。接下来要做的就是把业务数据挂上去让颜色有深有浅。3.2 把业务数据挂到地图上series-map 的数据格式地图的数据格式比柱状图、折线图稍微绕一点它不是按坐标轴顺序传数组而是按区域名 值的映射关系传对象数组。const data [ { name: China, value: 86 }, { name: United States, value: 42 }, { name: Germany, value: 18 }, { name: Brazil, value: 7 }, { name: Australia, value: 3 } ];这个数组里name字段必须与 GeoJSON 中对应区域的properties.name完全一致。这里我习惯先用英文名测试因为大部分世界地图 GeoJSON 的name是英文。后续如果要显示中文标签可以通过自定义 label 做映射而不是直接改 GeoJSON。结合到完整配置中const option { tooltip: { trigger: item, formatter: (params) { if (!params.value) { return ${params.name}br/暂无数据; } return ${params.name}br/订单量: ${params.value}; } }, visualMap: { min: 0, max: 100, left: 20, bottom: 20, text: [高, 低], calculable: true, inRange: { color: [#e0f3f8, #abd9e9, #74add1, #4575b4] } }, series: [ { name: 全球订单量, type: map, map: world, roam: true, data: data } ] };逻辑说明visualMap把数值映射为颜色渐变没有配置它的时候地图区域内数字再大也是单一颜色。这里的映射区间是min: 0到max: 100如果业务数据量级变化大建议用min和max动态计算而不是写死。参数说明inRange.color数组是颜色断点ECharts 会在区间内线性插值。calculable: true会出现可拖动的滑块用户可以用它筛选数据范围。left和bottom控制图例组件的左下角位置在世界地图场景里把它放在右下角或左下角不遮挡主要区域。如果数据中有一些国家数值超出max该国家会直接显示成max对应的最深色视觉上会误导后面避坑章节会细说。3.3 配置项里必须先调好的 5 个参数series-map的配置项很多但世界地图场景下新手先抓这 5 个就够了。第一个是roam。世界地图横向跨度大默认展示时小国家根本看不清。roam: true允许鼠标滚轮缩放和平移这是提升体验的基线参数。但要注意roam开启后移动端手势缩放可能会和页面滚动冲突可以在初始化时判断设备类型。第二个是label.show和label.fontSize。世界地图上国家数量多全部显示名称必然重叠。建议默认show: false只有区域数值较高或用户 hover 到某个区域时才显示名称。这个通过emphasis.label.show实现后面讲交互时会写。第三个是itemStyle.areaColor和borderColor。很多默认主题下面的国家边界不明显需要显式设置areaColor控制区域填充色没有 visualMap 时的兜底色borderColor控制边界线颜色一般设成比区域色更亮的白色或浅灰才有地图分界感。第四个是selectedMode。地图默认点击后区域会保持高亮。如果业务没有点击选择的需求建议设成false或只允许单选single否则用户点击后地图上会留下一块刺眼的高亮色造成图形不可交互的误判。第五个是zoom与center。世界地图的初始视角默认是整个地球范围但很多业务实际只关注某个大区比如只关心亚洲和欧洲。这时可以用center设置地图中心经纬度[100, 30]大概聚焦亚洲[0, 30]聚焦欧洲和非洲。配合zoom: 3可以让初始视角就不一样避免用户每次都要手动缩放。const option { series: [ { type: map, map: world, roam: true, zoom: 2.5, center: [100, 30], label: { show: false }, itemStyle: { areaColor: #e8e8e8, borderColor: #ffffff }, selectedMode: false, data: data } ] };这段配置把初始视野放在亚洲区域并把缩放倍数提到 2.5地图边界用白色描边。zoom的基准是 1 表示完整显示全图大于 1 就放大了。注意center有两个语义一个是地图初始中心点的经纬度另一个是visualMap的控制按钮位置别把这两个混了。4. 把世界地图做得能看又能用样式、交互与钻取4.1 视觉映射 visualMap 的合理区间visualMap 是世界地图数据可视化的灵魂它直接把数字大小转换成颜色深浅。但转换区间怎么定是很多人靠眼睛猜的。最稳妥的做法是从数据里动态算出来而不是写死。function buildVisualMap(data) { const values data.map((item) item.value); const min Math.min(...values); const max Math.max(...values); let realMin 0; let realMax max; if (max min) { realMin min - 1; realMax max 1; } return { min: realMin, max: realMax, left: 20, bottom: 20, text: [String(max), String(min)], calculable: true, inRange: { color: [#f0f9e8, #bae4bc, #7bccc4, #43a2ca, #0868ac] } }; }逻辑说明先取所有数值的min和max然后处理一个极端边界——如果所有国家数值相同min maxECharts 的 visualMap 会失去梯度效果所以手动拉伸出一个区间。text数组的顺序是从高到低第一个字符串对应最大值第二个对应最小值。参数说明inRange.color数组建议控制在 3~5 个颜色断点之间太多颜色在省级或小国家区域根本看不出差别。浅色到深色的渐变需要遵循低值浅、高值深的认知不然用户会读反。如果你的数据有负数realMin就不要从 0 开始而是取真实最小值否则负值国家颜色会全部落在最低档上。这里还有个业务层面的选择是否要让数值为 0 的国家参与颜色映射默认情况下0会显示成最浅的颜色和暂无数据看不出区别。我一般会单独处理null或undefined排除在 visualMap 外显示为灰色表示没有数据0则参与映射表示数据为 0。区分这两种语义在业务看板里很重要。4.2 提示框、高亮与点击交互的常规写法世界地图上用户最常用的交互动作有三个hover 看数值、点击选中看详情、滚轮缩放看局部。后两个搭配写起来要注意别让事件互相打架。chart.on(click, (params) { if (params.componentType series params.seriesType map) { const countryName params.name; const value params.value; // 将选中的国家信息同步到页面其他组件 updateSidePanel(countryName, value); } });点击事件的重点是判断componentType。因为 ECharts 里geo组件和series-map都能响应点击如果你同时配置了geo和series同一个点击会触发两次。上面这个判断把事件源限定在series的map类型上就不会和geo组件的点击混淆。hover 高亮通过emphasis控制。默认的emphasis状态会加深区域颜色但很多设计稿要求 hover 时给区域加个边框或阴影效果series: [ { type: map, map: world, emphasis: { label: { show: true, fontSize: 14, color: #333 }, itemStyle: { areaColor: #ffd666, borderColor: #fa8c16, borderWidth: 1.5 } } } ]这里emphasis.label.show: true是核心技巧——平时国家名不显示hover 到某个国家时才把名字弹出来既避免了标签重叠又保证了可用性。itemStyle.borderWidth控制高亮时边界线粗细太粗会盖住邻国边界我一般用 1 到 2 之间。还有个容易被忽略的细节地图缩放时 tooltip 的跟随位置。如果roam: true用户在缩放过程中频繁移动鼠标tooltip 内容会闪烁。解决办法是给tooltip加一个hideDelay: 100并且判断当前是否处于缩放状态可以用chart.on(georoam)事件配合标志位。4.3 下钻到国家的实现思路做完世界地图后产品往往紧接着提需求点击某个国家钻取到该国的省级或地区分布。这不是 ECharts 一个组件能直接解决的而是地图数据切换 业务数据重查的组合动作。实现思路不复杂点击某个国家时判断这个国家是否有下一级地图数据有则动态加载该国的 GeoJSON用新的地图名注册后重新setOption。以点击中国为例chart.on(click, (params) { if (params.name China) { loadChinaMap().then(() { chart.setOption({ series: [ { map: china, data: chinaProvinceData } ] }); }); } });这段代码的核心是动态注册先fetch国家的 JSON 并registerMap(china, geoJson)然后setOption切换series.map。注意setOption时不要用新的空 option而是在原有 option 基础上更新否则会把视觉映射、提示框配置都重置掉。更稳的写法是先chart.clear()再重新setOption但这会丢失之前的缩放状态。钻取过程中还有两个容易翻车的点。第一个是返回逻辑下钻后没有返回世界地图的按钮不行且返回时地图实例的缩放中心和缩放倍数最好能恢复。常见做法是自己维护一个mapStack压栈时记录center和zoom状态返回时恢复。第二个是数据字段的层级关系China在中国地图数据里对应的是省份名如Guangdong而你在世界地图数据里可能只有一个China: 86两层数据的聚合、拆分逻辑要在业务侧先算好不能指望 ECharts 自动做汇总。如果不做下钻只是想点击国家后在新页面或侧栏显示该国列表那 4.2 里的事件写法就够用了不必把所有地图数据都加载出来。5. 世界地图渲染的 6 个常见坑与排查方法5.1 地图一片空白连边界线都看不到现象页面加载后图表区域空白控制台也没有明显报错偶尔能看到一个点或一个很怪异的图形。原因绝大多数情况是 GeoJSON 没注册成功或者注册名和series.map里的名字不一致。还有一种情况是 GeoJSON 文件本身解析成功但features数组为空地图没有可绘制的多边形。解决先用打印日志确认流程。在registerMap后打印echarts.getMap(world)如果返回undefined说明注册名没对上。再检查 GeoJSON 内容console.log(geoJson.features.length)如果为 0说明下载的文件是空壳。另外某些压缩过的 GeoJSON 文件带有 BOM 头fetch后 JSON 解析会失败这种只能用编辑器另存为 UTF-8 无 BOM 格式。排查时要按路径 → 注册 → 引用的链路逐步打点不要一开始就怀疑配色或数据绑定。5.2 数据死活匹配不上国家名称的英文对照问题现象地图渲染出来了边界清晰但悬停时许多区域显示为空或者data里的数据没有落在对应的国家上。原因GeoJSON 里的properties.name是英文你data数组里用的name也是英文但两边写法不一致。比如 GeoJSON 里是United States of America你写的是United States或者Russia和Russian Federation。有些简化版 GeoJSON 的国家名还会带上代码后缀。ECharts 的区域匹配是精确字符串匹配一个字符不对就匹配不上。解决第一手方案是打开 GeoJSON 文件直接看每个 feature 的properties.name以它为准维护一个数据映射表。比如你的业务后端返回的是国家代码US、CN那就在前端建一个映射表const CODE_TO_NAME { CN: China, US: United States of America, RU: Russia, BR: Brazil }; const data rawData.map((item) ({ name: CODE_TO_NAME[item.code], value: item.value }));这个映射表建议单独抽成文件维护不要散落在组件里。业务国家名单一般是固定的映射表维护一次后续新项目直接复用。反向映射——从 GeoJSON 名称找业务代码——也是一样处理。遇到匹配不上的国家时先查映射表是否存在不存在再回到 GeoJSON 里看原始名称把新名称补充进映射表。5.3 加载缓慢几十 MB 的地图 JSON 撑爆首屏现象页面首屏加载时间爆炸网络面板里地图 JSON 请求耗时数秒图表初始化卡顿甚至低端机上标签渲染时出现明显掉帧。原因高精度 GeoJSON 的分辨率过高文件体积大。很多开发者图省事把原始数据集直接放进项目没做抽稀。世界地图坐标点少则几万个多则十几万个浏览器在渲染这么多矢量多边形时开销很大。解决在开发阶段先做一个本地抽稀脚本把 GeoJSON 的坐标精度降低。常见做法是判断相邻坐标点之间的距离低于阈值就丢弃一个点。以 Node 脚本为例function simplifyCoords(coords, precision) { if (typeof coords[0] number) { return coords.map((v) Number(v.toFixed(precision))); } return coords.map((item) simplifyCoords(item, precision)); } const simplified { ...rawGeoJson, features: rawGeoJson.features.map((feature) ({ ...feature, geometry: { ...feature.geometry, coordinates: simplifyCoords(feature.geometry.coordinates, 2) } })) };逻辑说明simplifyCoords递归处理嵌套的多边形坐标数组每层级都做小数位数规整。precision: 2表示保留两位小数对应大约 1 公里左右的精度对世界地图来说肉眼几乎看不出边界变形但文件体积能压缩 60% 以上。参数说明precision不要设成 1那样太粗小国家的海岸线会变成锯齿也不要设成 3精度提升有限但体积反而大。实际项目里我一般先跑一次 2看体积和渲染效果再微调。如果简化后体积还是大再考虑去掉一些小岛和飞地多边形这需要按地理信息层面的需求取舍。5.4 tooltip 不显示或点击事件丢失现象鼠标移上去没有提示框或者chart.on(click)事件在部分区域不触发。原因tooltip 的trigger配成了axis而map系列不属于直角坐标系的轴点击事件丢失则多半是因为地图上叠加了其他透明组件比如geo组件或自定义的graphic遮住了series-map的区域事件被上层组件拦截了。解决tooltip.trigger改成item并确认tooltip.show没被全局设置成false。点击事件丢失的话把geo组件暂时移除或者把series-map放到z层级更高的位置。还有一个不起眼的点如果selectedMode设为multiple点击行为会被多选逻辑消耗掉此时在click事件的回调里要判断params.event是不是click而不是selectchanged。建议用chart.off()绑定前的清理习惯避免 HMR 或组件重挂载时事件累积触发。5.5 resize 与自适应问题窗口变化后地图变形现象浏览器窗口从小拉大地图没有跟着变大右边出现空白或者从大缩小时地图被裁剪。原因ECharts 实例的宽高是初始化时读取容器决定的容器尺寸变了但图表没感知到。更隐蔽的是容器在 Vue 或 React 组件里被display: none后再显示图表的初始化尺寸变成 0地图直接消失。解决监听窗口resize事件在组件卸载时取消监听window.addEventListener(resize, () { chart.resize(); });关键点是调用resize()的时机。如果容器是响应式布局直接用window的resize就够了如果容器尺寸受侧边栏折叠或弹窗展开影响要主动调用chart.resize()不能用事件监听覆盖所有场景。容器隐藏后需要显示的用$nextTick或setTimeout延迟到元素可见后再调一次resize()并传入{ width: 容器实际宽度, height: 容器实际高度 }作为参数否则会读到 0。5.6 标签重叠小国家名称挤成一团现象开启label.show: true后欧洲、东南亚这些国家密集区域名称文字互相覆盖地图完全没法看。原因世界地图上国家数量多而 ECharts 的label默认不避让每个国家都按自身中心点渲染名称。解决优先做法是默认关闭标签用emphasis悬停显示这是 4.2 里已经提到的。如果业务必须常显则要分国家做白名单只显示业务关注的重点国家标签其他区域保持隐藏。做法是自定义formatter函数label: { show: true, formatter: (params) { const WHITE_LIST [China, Russia, Brazil]; return WHITE_LIST.includes(params.name) ? params.name : ; } }formatter返回空字符串就表示不渲染标签这样既保留了重点国家的名称展示又不会全量重叠。这个白名单思路可复用性很强后续业务关注国家变化时只改数组。如果希望小国家也显示名称则比较难有通用解法毕竟屏幕空间有限这也是世界地图场景里标签问题无解的部分只能靠业务取舍。5.7 缩放后事件坐标偏移点击位置不对现象地图放大之后点击一个国家返回的名称却是旁边另一个国家。原因地图缩放会改变投影坐标和屏幕坐标的换算关系如果你自己在业务层用convertFromPixel转换点位做判断容易在缩放状态下踩中旧坐标系。其实chart.on(click)的params.name一般是基于最新坐标系计算的出现偏移大多是你同时监听了click和roam事件在缩放动画过程中点击导致事件对象里的params还没更新完。解决在roam过程中加一个防抖缩放结束后 200 毫秒内不响应点击let roaming false; chart.on(georoam, () { roaming true; clearTimeout(timer); timer setTimeout(() { roaming false; }, 200); }); chart.on(click, (params) { if (roaming) return; // 正常处理 });这个做法能挡掉大部分误触但极端情况下用户一边滚轮一边点击仍可能丢失事件业务上通常可接受。如果点击准确率要求极高建议改用georoam结束后的params重新做一次convertToPixel校验不过复杂度较高非必要不做。6. 让世界地图长期好维护的一个小习惯世界地图的项目做久了你会发现真正花时间的不是写配置项而是维护地图数据和名称映射。我现在的习惯是把 GeoJSON 文件和名称映射表放在独立目录并在文件头部用注释记录数据来源更新时间、精度等级和已知问题。每次从外部渠道更新地图数据时先跑一遍抽稀脚本再对着映射表跑一次 diff看看哪些国家的name变了。这个习惯帮我省掉了无数次这周地图上某个国家颜色怎么没了的线上问题排查。另一个值得做的是把视觉映射的区间计算抽成通用函数。不同看板的数据量级完全不同有的只到几十有的到几百万。有一套自动计算min和max的工具函数新页面接地图时就少一道手动调参的工序。地图配置本身也要写成工厂函数传入数据、地图名、主题色返回完整的option对象而不是每个页面都从零写一遍 option。这样后续换主题色、调整字体时只改一处。最后一个建议是给地图组件加一个简单的日志开关。开发环境打印地图加载耗时、数据匹配失败的国家列表线上不打。这个日志曾经帮我在一次数据升级后立刻发现新 GeoJSON 改了三个国家名避免了用户看到大面积空白。地图这个方向看着简单做深了都是一点点细节堆起来的希望这套思路能帮到你的下一个世界地图项目。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
