简介使用 ECharts 制作世界地图时最大的障碍往往在于找不到结构规整、可直接注册的 GeoJSON 数据。这份资源正是面向前端工程师、数据可视化开发者和经常制作大屏报表的人员提供了整理好的世界地图 JSON 文件下载后通过 echarts.registerMap(world, worldJson) 即可加载省去自行清洗坐标数据的环节。压缩包采用 RAR 格式整体仅 279KB只包含一个 JSON 文件数据体积小巧却覆盖完整的世界地图地理边界适合直接放入项目作为地图底稿也适合在需要内网部署或离线渲染的场景下使用。目前已有 1705 人学习/下载说明它经受了大量同类项目的实际验证。拿到这份文件后无论是快速搭建全球业务分布、访客来源统计等数据看板还是学习 ECharts 的区域样式、标记点与事件绑定都能直接上手尤其适合需要快速迭代的演示项目或数据分析原型。 做数据可视化这几年柱状图、折线图、饼图基本随手就能画但轮到地图图表我每次都不敢大意。原因很简单Echarts本身只是一个绘图引擎地图的边界数据并不会内置在框架里你得先准备一份JSON文件——这恰恰是新手最容易卡住的地方。我最近在给一个全球业务项目的销售分布做看板需要在Echarts里画世界地图并标出主要国家的数据光是找齐、处理这些GeoJSON文件就花了两天。这里把完整思路和踩过的坑整理一下包括JSON从哪里拿、怎么和Echarts对接以及怎么只保留你真正需要的那几个国家。1. 为什么地图必须靠JSONGeoJSON到底解决了什么问题1.1 一张世界地图其实就是一堆多边形很多人第一次接触地图JSON时会懵这不就是一个普通JSON文件吗凭什么能画出地图其实地图领域的“JSON”一般特指GeoJSON它是一种专门描述地理空间数据结构的格式。你可以把它理解为把地球上所有国家的边界用一串串经纬度坐标点连成闭合的多边形再给每个多边形附上国家名称、ISO代码等属性。一个典型的GeoJSON长这样{ type: FeatureCollection, features: [ { type: Feature, properties: { name: China }, geometry: { type: MultiPolygon, coordinates: [ [ [ [121.5, 31.2], [121.8, 31.5], [121.6, 31.8] ] ] ] } } ] }这里的coordinates是经纬度坐标数组最内层两个数字分别代表经度和纬度。FeatureCollection是整个文件的容器features数组里每一个元素就是一个国家或地区。Echarts拿到这份数据后会把每个多边形映射到Canvas或SVG上再通过填充颜色、描边等方式渲染出一张可交互的地图。理解了这个结构后面所有问题都能迎刃而解地图不显示、区域名对不上、只想保留几个国家本质上都是在操作这个JSON结构。1.2 Echarts怎么把GeoJSON变成可视化地图在Echarts 5.x版本里使用地图的固定链路是先调用echarts.registerMap(world, worldJson)注册地图再在option的geo或series里声明map: world。registerMap做的事情有点像一个“数据登记”告诉Echarts后续代码里凡是出现world这个地图名就用这份GeoJSON去渲染。得补充一个背景从Echarts 5.0开始官方不再随安装包一起提供地图数据。早几年大家用echarts/map/json/world.json这种路径直接引入现在这条路已经走不通了。所以“自己准备地图JSON文件”不是可选项而是必选项。这也解释了为什么网上关于Echarts地图的提问永远这么多——数据源这一环节就足以劝退一批人。2. 世界地图和主要国家的JSON文件从哪里找三个可靠来源2.1 阿里云DataV地图选择器个人最推荐的是阿里云DataV的地图选择器。它是一个在线可视化工具界面左侧是地图列表右侧可以直接点击选择你需要的区域选完就能下载对应的GeoJSON文件。世界地图、中国地图、各个省份、地级市甚至区县级别都有覆盖。国内访问速度快数据更新也及时我近几个项目的地图数据基本都是从这里拿的。在DataV里可以免费下载单个国家的JSON文件对于“只要主要国家”这类需求特别方便。下下来之后文件命名通常是world.json或者china.json直接就能用。如果你对数据时效性要求不高这个源基本是最省事的。2.2 GeoJSON.cn和GitHub开源仓库GeoJSON.cn是一个专门聚合世界各国GeoJSON数据的站点支持按国家名称搜索也提供中国省市区的数据。它的优点是数据组织结构清晰一个页面就是一个国家下载时不容易搞混。不过它是第三方整理的站点偶尔会出现坐标精度不足或者部分地区边界信息缺失的情况使用前建议做一次抽查。GitHub上也能找到很多持续更新的地图数据仓库搜索关键词countries geojson或world map geojson就能翻到。仓库数据通常按国家拆分成单独文件适合写脚本批量拉取。但注意GitHub仓库质量参差不齐有的把坐标精度压得很低有的很久没更新动手之前先看一下last commit时间和download量能避开大部分坑。2.3 Natural Earth和其他专业数据源如果你的项目对地理精度要求比较高比如做GIS数据叠加、科研分析那么Natural Earth这类专业数据集更合适。它提供全球范围、中高精度的矢量数据覆盖国家、省界、河流、道路等多个图层可以导出成GeoJSON格式。缺点是需要自己处理导出流程不像前两个源那样拿来即用。对于大多数业务看板来说用DataV或GeoJSON.cn就够了不必杀鸡用牛刀。这三个来源我整理成一张对照表方便按需选择数据源覆盖范围下载方式适用场景阿里云DataV世界地图、中国省市在线选择器下载业务可视化报表直接引入EchartsGeoJSON.cn全球国家、中国省市按国家/区域下载快速获取单个国家边界时优先使用GitHub开源仓库全球国家克隆仓库或下载单文件需要批量处理、脚本化操作时Natural Earth全球多图层导出转换GIS精度要求较高的场景3. 把JSON喂给Echarts从加载到渲染的完整链路3.1 加载JSON并注册地图拿到JSON文件只是第一步关键是让Echarts正确加载它。如果你的项目是纯静态页面用fetch直接拿文件即可fetch(./world.geo.json) .then(res res.json()) .then(worldJson { echarts.registerMap(world, worldJson); const chart echarts.init(document.getElementById(map-container)); chart.setOption({ ... }); });如果是Vue或React项目建议直接import worldGeo from /assets/world.geo.json把JSON作为模块依赖引入构建时会自动打包处理起来更方便。registerMap的第一参数是自定义地图名只要和option里使用的map值一致即可不强制要求叫world。有人习惯叫worldMap或mainCountries完全没问题。3.2 geo坐标系和series-map怎么选Echarts提供两种地图用法geo组件和series中的map类型。两者的核心区别在于geo是底层坐标系适合作为散点图、线图、效果动态线条的地图背景series-map则是MapSeries更适合直接展示“每个区域的数值大小”比如按国家聚合的销售额。如果你要展示的是一张“国家对应数值”的经典地图热力用series-map加visualMap最省事。如果还要在地图上叠加交易路线、动态粒子等效果就需要geo配合series里的scatter、lines、effectScatter。很多项目其实两种方式会混合使用比如我这次就是geo铺底再叠一个effectScatter展示各国实时活跃用户视觉效果比单用series-map好不少。3.3 一个可直接运行的世界地图示例下面是一个相对完整的世界地图示例包含加载JSON、注册地图、配置数据和visualMap的完整逻辑fetch(./world.geo.json) .then(res res.json()) .then(worldJson { echarts.registerMap(world, worldJson); const chart echarts.init(document.getElementById(map-container)); chart.setOption({ tooltip: { trigger: item }, visualMap: { type: piecewise, pieces: [ { min: 1000, label: 1000 以上 }, { min: 100, max: 999, label: 100-999 }, { min: 1, max: 99, label: 1-99 } ], left: 20, bottom: 20 }, series: [{ type: map, map: world, roam: true, label: { show: false }, data: [ { name: China, value: 1200 }, { name: United States of America, value: 300 }, { name: Japan, value: 80 } ] }] }); });这里用了piecewise分段式visualMap相当于把数据按区间分成多个颜色段让图例更直观。roam: true允许用户拖拽、缩放地图在大屏上几乎是标配。4. 真实项目里最容易踩的坑4.1 区域名对不上地图死活不亮这是我最常遇到的问题没有之一。GeoJSON里每个国家都有properties.name比如美国在大多数数据源里叫United States of America中国叫China。而你的业务数据如果写的是“美国”“中国”或者用ISO代码US、CN两边就对不上Echarts不会报任何错误只是地图上对应区域不显示数据。解决方案是写一个nameMap映射把外部数据名转成GeoJSON里的标准名。例如const nameMap { 美国: United States of America, 中国: China, 日本: Japan };然后在数据预处理阶段统一替换。还有一种更稳的做法先读取GeoJSON遍历features取出所有properties.name生成一份标准名称清单再让自己的业务数据模型向它靠拢。我第一次做世界地图时没做这一步结果图上三分之二的国家都没颜色排查了半天才发现全是名称匹配问题所以这个坑值得先提。4.2 图出来了但一片空白控制台只给一条无头无尾的报错如果你在控制台看到cant get dom width or height. please check dom.clientWidth之类的提示多半是初始化时机不对——map-container这个DOM还没有宽度或高度echarts.init就已经执行了。常见场景是组件在v-if条件渲染、弹窗、Tab页签里初始化地图容器初始是隐藏的宽度高度为0。解决办法是等容器显示后再初始化或者在容器尺寸变化后调用chart.resize()。弹窗里放地图时我一般会写一个nextTick再init避免拿到空尺寸。还有个别情况是display:none导致换成visibility:hidden保留占位也可以。4.3 移动端无法点击事件像被吞掉一样地图在移动端点击无响应通常会怀疑是Echarts问题其实大部分是层级遮挡或zIndex问题。地图容器里如果还放了其他悬浮元素或某个图层的z-index盖住了地图区域触摸事件就传不到Canvas上。检查一下地图容器内是否有额外DOM元素把遮挡元素的z-index调低或者在容器的style里补一个touch-action: manipulation一般都能解决。另外移动端初始化时Echarts默认会响应mousedown/mousemove/mouseup事件某些Android浏览器对touch事件支持不彻底会出现拖动缩放时偶尔“卡住”的情况。这时候可以监听chart.getZr()的mousedown事件来判断而不是依赖内置的click事件。我踩过一轮后现在移动端地图交互基本都会给roam加一个节流避免手势识别冲突。4.4 高纬度国家变形和文件体积失控默认世界地图的投影方式会直接使用经纬度坐标导致俄罗斯、加拿大这些高纬度地区在视觉上比实际大很多。如果只是业务看板这种变形可以接受如果追求更正的投影效果Echarts 5.3以上的版本支持geo.projection配置配合d3-geo库可以实现墨卡托等常用投影。不过这引入的额外依赖和算力消耗不小需要慎重评估。文件体积问题更实际。世界地图GeoJSON动辄1-3MB如果在弱网环境加载地图组件会出现长时间白屏。优化方式有两个一是用mapshaper这类工具对GeoJSON做几何简化只保留边界精度的80%左右视觉影响很小二是直接过滤掉用不到的国家这也是我每次都做的一步放到下一节细说。5. 只想要主要国家怎么办按需裁剪GeoJSON5.1 为什么要自己裁剪项目场景通常只需要“中国、美国、日本、英国、德国、法国”这几个主要国家把整个世界地图都加载进来是很大的浪费。一是文件体积大二是Echarts渲染时仍要处理所有国家边界拖慢首屏渲染三是数据处理时多了一堆无关区域容易误触。所以“按需裁剪GeoJSON”几乎是世界地图项目里的必备操作。5.2 用Python脚本按国家名过滤裁剪GeoJSON的原理非常简单读取features数组只保留我们关心的properties.name匹配项再写回新文件。用Python处理最方便不需要安装额外库import json def filter_countries(src_path, dest_path, keep_names): with open(src_path, r, encodingutf-8) as f: data json.load(f) features data.get(features, []) filtered [ f for f in features if f.get(properties, {}).get(name) in keep_names ] data[features] filtered with open(dest_path, w, encodingutf-8) as f: json.dump(data, f, ensure_asciiFalse) if __name__ __main__: filter_countries( world.geo.json, world-main.geo.json, {China, United States of America, Japan, United Kingdom} )运行完会得到一个新的world-main.geo.json里面只有你留下的国家体积往往能降到原文件的十分之一。记得先打开源GeoJSON确认目标国家的properties.name写法再往keep_names里填。5.3 裁剪后的命名对齐还是得做裁剪之后还要再做一遍命名对齐。因为我前面提过不同数据源里英国可能叫United Kingdom也可能叫UK甚至有些老数据源里叫England。最保险的方式是直接查看裁剪后JSON里的properties.name生成一个稳定的名称字典让业务数据的名称和它完全一致。做完裁剪和命名对齐世界地图项目的地图部分基本就稳定了。后面再往上叠图表、做下钻、调样式都只是锦上添花。最后再分享一个小技巧如果你需要经常重复“下载地图JSON - 裁剪 - 接Echarts”这套流程可以把你常用的国家清单和Python脚本存成一个模板下次新项目直接改两个参数就能跑。我在实际项目中就是这么做的省掉了不少重复劳动也减少了每次手动操作带来的命名错误和文件缺失。做地图可视化数据准备阶段花的时间永远值得前期理顺了后面绘图阶段就能把精力放在业务表达上。本文还有配套的精品资源点击获取
ECharts世界地图实战：GeoJSON获取、裁剪与渲染避坑指南
简介使用 ECharts 制作世界地图时最大的障碍往往在于找不到结构规整、可直接注册的 GeoJSON 数据。这份资源正是面向前端工程师、数据可视化开发者和经常制作大屏报表的人员提供了整理好的世界地图 JSON 文件下载后通过 echarts.registerMap(world, worldJson) 即可加载省去自行清洗坐标数据的环节。压缩包采用 RAR 格式整体仅 279KB只包含一个 JSON 文件数据体积小巧却覆盖完整的世界地图地理边界适合直接放入项目作为地图底稿也适合在需要内网部署或离线渲染的场景下使用。目前已有 1705 人学习/下载说明它经受了大量同类项目的实际验证。拿到这份文件后无论是快速搭建全球业务分布、访客来源统计等数据看板还是学习 ECharts 的区域样式、标记点与事件绑定都能直接上手尤其适合需要快速迭代的演示项目或数据分析原型。 做数据可视化这几年柱状图、折线图、饼图基本随手就能画但轮到地图图表我每次都不敢大意。原因很简单Echarts本身只是一个绘图引擎地图的边界数据并不会内置在框架里你得先准备一份JSON文件——这恰恰是新手最容易卡住的地方。我最近在给一个全球业务项目的销售分布做看板需要在Echarts里画世界地图并标出主要国家的数据光是找齐、处理这些GeoJSON文件就花了两天。这里把完整思路和踩过的坑整理一下包括JSON从哪里拿、怎么和Echarts对接以及怎么只保留你真正需要的那几个国家。1. 为什么地图必须靠JSONGeoJSON到底解决了什么问题1.1 一张世界地图其实就是一堆多边形很多人第一次接触地图JSON时会懵这不就是一个普通JSON文件吗凭什么能画出地图其实地图领域的“JSON”一般特指GeoJSON它是一种专门描述地理空间数据结构的格式。你可以把它理解为把地球上所有国家的边界用一串串经纬度坐标点连成闭合的多边形再给每个多边形附上国家名称、ISO代码等属性。一个典型的GeoJSON长这样{ type: FeatureCollection, features: [ { type: Feature, properties: { name: China }, geometry: { type: MultiPolygon, coordinates: [ [ [ [121.5, 31.2], [121.8, 31.5], [121.6, 31.8] ] ] ] } } ] }这里的coordinates是经纬度坐标数组最内层两个数字分别代表经度和纬度。FeatureCollection是整个文件的容器features数组里每一个元素就是一个国家或地区。Echarts拿到这份数据后会把每个多边形映射到Canvas或SVG上再通过填充颜色、描边等方式渲染出一张可交互的地图。理解了这个结构后面所有问题都能迎刃而解地图不显示、区域名对不上、只想保留几个国家本质上都是在操作这个JSON结构。1.2 Echarts怎么把GeoJSON变成可视化地图在Echarts 5.x版本里使用地图的固定链路是先调用echarts.registerMap(world, worldJson)注册地图再在option的geo或series里声明map: world。registerMap做的事情有点像一个“数据登记”告诉Echarts后续代码里凡是出现world这个地图名就用这份GeoJSON去渲染。得补充一个背景从Echarts 5.0开始官方不再随安装包一起提供地图数据。早几年大家用echarts/map/json/world.json这种路径直接引入现在这条路已经走不通了。所以“自己准备地图JSON文件”不是可选项而是必选项。这也解释了为什么网上关于Echarts地图的提问永远这么多——数据源这一环节就足以劝退一批人。2. 世界地图和主要国家的JSON文件从哪里找三个可靠来源2.1 阿里云DataV地图选择器个人最推荐的是阿里云DataV的地图选择器。它是一个在线可视化工具界面左侧是地图列表右侧可以直接点击选择你需要的区域选完就能下载对应的GeoJSON文件。世界地图、中国地图、各个省份、地级市甚至区县级别都有覆盖。国内访问速度快数据更新也及时我近几个项目的地图数据基本都是从这里拿的。在DataV里可以免费下载单个国家的JSON文件对于“只要主要国家”这类需求特别方便。下下来之后文件命名通常是world.json或者china.json直接就能用。如果你对数据时效性要求不高这个源基本是最省事的。2.2 GeoJSON.cn和GitHub开源仓库GeoJSON.cn是一个专门聚合世界各国GeoJSON数据的站点支持按国家名称搜索也提供中国省市区的数据。它的优点是数据组织结构清晰一个页面就是一个国家下载时不容易搞混。不过它是第三方整理的站点偶尔会出现坐标精度不足或者部分地区边界信息缺失的情况使用前建议做一次抽查。GitHub上也能找到很多持续更新的地图数据仓库搜索关键词countries geojson或world map geojson就能翻到。仓库数据通常按国家拆分成单独文件适合写脚本批量拉取。但注意GitHub仓库质量参差不齐有的把坐标精度压得很低有的很久没更新动手之前先看一下last commit时间和download量能避开大部分坑。2.3 Natural Earth和其他专业数据源如果你的项目对地理精度要求比较高比如做GIS数据叠加、科研分析那么Natural Earth这类专业数据集更合适。它提供全球范围、中高精度的矢量数据覆盖国家、省界、河流、道路等多个图层可以导出成GeoJSON格式。缺点是需要自己处理导出流程不像前两个源那样拿来即用。对于大多数业务看板来说用DataV或GeoJSON.cn就够了不必杀鸡用牛刀。这三个来源我整理成一张对照表方便按需选择数据源覆盖范围下载方式适用场景阿里云DataV世界地图、中国省市在线选择器下载业务可视化报表直接引入EchartsGeoJSON.cn全球国家、中国省市按国家/区域下载快速获取单个国家边界时优先使用GitHub开源仓库全球国家克隆仓库或下载单文件需要批量处理、脚本化操作时Natural Earth全球多图层导出转换GIS精度要求较高的场景3. 把JSON喂给Echarts从加载到渲染的完整链路3.1 加载JSON并注册地图拿到JSON文件只是第一步关键是让Echarts正确加载它。如果你的项目是纯静态页面用fetch直接拿文件即可fetch(./world.geo.json) .then(res res.json()) .then(worldJson { echarts.registerMap(world, worldJson); const chart echarts.init(document.getElementById(map-container)); chart.setOption({ ... }); });如果是Vue或React项目建议直接import worldGeo from /assets/world.geo.json把JSON作为模块依赖引入构建时会自动打包处理起来更方便。registerMap的第一参数是自定义地图名只要和option里使用的map值一致即可不强制要求叫world。有人习惯叫worldMap或mainCountries完全没问题。3.2 geo坐标系和series-map怎么选Echarts提供两种地图用法geo组件和series中的map类型。两者的核心区别在于geo是底层坐标系适合作为散点图、线图、效果动态线条的地图背景series-map则是MapSeries更适合直接展示“每个区域的数值大小”比如按国家聚合的销售额。如果你要展示的是一张“国家对应数值”的经典地图热力用series-map加visualMap最省事。如果还要在地图上叠加交易路线、动态粒子等效果就需要geo配合series里的scatter、lines、effectScatter。很多项目其实两种方式会混合使用比如我这次就是geo铺底再叠一个effectScatter展示各国实时活跃用户视觉效果比单用series-map好不少。3.3 一个可直接运行的世界地图示例下面是一个相对完整的世界地图示例包含加载JSON、注册地图、配置数据和visualMap的完整逻辑fetch(./world.geo.json) .then(res res.json()) .then(worldJson { echarts.registerMap(world, worldJson); const chart echarts.init(document.getElementById(map-container)); chart.setOption({ tooltip: { trigger: item }, visualMap: { type: piecewise, pieces: [ { min: 1000, label: 1000 以上 }, { min: 100, max: 999, label: 100-999 }, { min: 1, max: 99, label: 1-99 } ], left: 20, bottom: 20 }, series: [{ type: map, map: world, roam: true, label: { show: false }, data: [ { name: China, value: 1200 }, { name: United States of America, value: 300 }, { name: Japan, value: 80 } ] }] }); });这里用了piecewise分段式visualMap相当于把数据按区间分成多个颜色段让图例更直观。roam: true允许用户拖拽、缩放地图在大屏上几乎是标配。4. 真实项目里最容易踩的坑4.1 区域名对不上地图死活不亮这是我最常遇到的问题没有之一。GeoJSON里每个国家都有properties.name比如美国在大多数数据源里叫United States of America中国叫China。而你的业务数据如果写的是“美国”“中国”或者用ISO代码US、CN两边就对不上Echarts不会报任何错误只是地图上对应区域不显示数据。解决方案是写一个nameMap映射把外部数据名转成GeoJSON里的标准名。例如const nameMap { 美国: United States of America, 中国: China, 日本: Japan };然后在数据预处理阶段统一替换。还有一种更稳的做法先读取GeoJSON遍历features取出所有properties.name生成一份标准名称清单再让自己的业务数据模型向它靠拢。我第一次做世界地图时没做这一步结果图上三分之二的国家都没颜色排查了半天才发现全是名称匹配问题所以这个坑值得先提。4.2 图出来了但一片空白控制台只给一条无头无尾的报错如果你在控制台看到cant get dom width or height. please check dom.clientWidth之类的提示多半是初始化时机不对——map-container这个DOM还没有宽度或高度echarts.init就已经执行了。常见场景是组件在v-if条件渲染、弹窗、Tab页签里初始化地图容器初始是隐藏的宽度高度为0。解决办法是等容器显示后再初始化或者在容器尺寸变化后调用chart.resize()。弹窗里放地图时我一般会写一个nextTick再init避免拿到空尺寸。还有个别情况是display:none导致换成visibility:hidden保留占位也可以。4.3 移动端无法点击事件像被吞掉一样地图在移动端点击无响应通常会怀疑是Echarts问题其实大部分是层级遮挡或zIndex问题。地图容器里如果还放了其他悬浮元素或某个图层的z-index盖住了地图区域触摸事件就传不到Canvas上。检查一下地图容器内是否有额外DOM元素把遮挡元素的z-index调低或者在容器的style里补一个touch-action: manipulation一般都能解决。另外移动端初始化时Echarts默认会响应mousedown/mousemove/mouseup事件某些Android浏览器对touch事件支持不彻底会出现拖动缩放时偶尔“卡住”的情况。这时候可以监听chart.getZr()的mousedown事件来判断而不是依赖内置的click事件。我踩过一轮后现在移动端地图交互基本都会给roam加一个节流避免手势识别冲突。4.4 高纬度国家变形和文件体积失控默认世界地图的投影方式会直接使用经纬度坐标导致俄罗斯、加拿大这些高纬度地区在视觉上比实际大很多。如果只是业务看板这种变形可以接受如果追求更正的投影效果Echarts 5.3以上的版本支持geo.projection配置配合d3-geo库可以实现墨卡托等常用投影。不过这引入的额外依赖和算力消耗不小需要慎重评估。文件体积问题更实际。世界地图GeoJSON动辄1-3MB如果在弱网环境加载地图组件会出现长时间白屏。优化方式有两个一是用mapshaper这类工具对GeoJSON做几何简化只保留边界精度的80%左右视觉影响很小二是直接过滤掉用不到的国家这也是我每次都做的一步放到下一节细说。5. 只想要主要国家怎么办按需裁剪GeoJSON5.1 为什么要自己裁剪项目场景通常只需要“中国、美国、日本、英国、德国、法国”这几个主要国家把整个世界地图都加载进来是很大的浪费。一是文件体积大二是Echarts渲染时仍要处理所有国家边界拖慢首屏渲染三是数据处理时多了一堆无关区域容易误触。所以“按需裁剪GeoJSON”几乎是世界地图项目里的必备操作。5.2 用Python脚本按国家名过滤裁剪GeoJSON的原理非常简单读取features数组只保留我们关心的properties.name匹配项再写回新文件。用Python处理最方便不需要安装额外库import json def filter_countries(src_path, dest_path, keep_names): with open(src_path, r, encodingutf-8) as f: data json.load(f) features data.get(features, []) filtered [ f for f in features if f.get(properties, {}).get(name) in keep_names ] data[features] filtered with open(dest_path, w, encodingutf-8) as f: json.dump(data, f, ensure_asciiFalse) if __name__ __main__: filter_countries( world.geo.json, world-main.geo.json, {China, United States of America, Japan, United Kingdom} )运行完会得到一个新的world-main.geo.json里面只有你留下的国家体积往往能降到原文件的十分之一。记得先打开源GeoJSON确认目标国家的properties.name写法再往keep_names里填。5.3 裁剪后的命名对齐还是得做裁剪之后还要再做一遍命名对齐。因为我前面提过不同数据源里英国可能叫United Kingdom也可能叫UK甚至有些老数据源里叫England。最保险的方式是直接查看裁剪后JSON里的properties.name生成一个稳定的名称字典让业务数据的名称和它完全一致。做完裁剪和命名对齐世界地图项目的地图部分基本就稳定了。后面再往上叠图表、做下钻、调样式都只是锦上添花。最后再分享一个小技巧如果你需要经常重复“下载地图JSON - 裁剪 - 接Echarts”这套流程可以把你常用的国家清单和Python脚本存成一个模板下次新项目直接改两个参数就能跑。我在实际项目中就是这么做的省掉了不少重复劳动也减少了每次手动操作带来的命名错误和文件缺失。做地图可视化数据准备阶段花的时间永远值得前期理顺了后面绘图阶段就能把精力放在业务表达上。本文还有配套的精品资源点击获取
