简介：这份资源整理了世界地图与主要国家的 GeoJSON 数据，面向从事数据可视化、Web 地图开发的前端工程师与 GIS 初学者，解决绘制世界或单国地图时缺少现成矢量边界数据的问题。压缩包共 25 个文件，以 23 个 json 为主，另含 2 个 mht 参考文档，整体约 11.31MB，json 可直接用于 D3.js、ECharts 等库加载渲染，mht 则保留了相关学习资料。内容覆盖 world.json 世界地图，以及美国、日本、俄罗斯、澳大利亚、巴西、印度、韩国、新加坡、法国、德国、英国、瑞士、西班牙、葡萄牙、加拿大、挪威、瑞典、芬兰、冰岛、荷兰、新西兰、南非等主要国家。由于原始文件体积偏大，作者建议下载后到 mapshaper.org 按需简化，以适配网页性能。目前已有 6260 人学习下载，适合需要快速获取多国边界数据、搭建地图可视化原型的开发者参考使用。
1. 一份能直接塞进项目的世界地图 GeoJSON：我为什么留着它
做数据可视化或者前端地图项目时，最烦的往往不是画图本身，而是找底图数据。想画个世界地图，搜出来的要么是几百 MB 的 shapefile 需要自己转，要么是某个在线瓦片服务，一旦断网或者服务下线，整个页面直接白屏。更别提有时候只需要几个主要国家的轮廓，却被迫下载一整套全球行政边界，解析慢、加载卡，用户体验直接翻车。
我手里这份「世界地图和主要国家的 JSON (GeoJSON)」资源，解决的就是这个具体问题。它把全球国家边界和主要国家的轮廓预先整理成了标准 GeoJSON 格式，拿来就能用，不需要额外转换工具，也不需要依赖任何在线服务。适合做前端地图可视化、数据大屏、教学演示，或者后端做地理围栏、区域统计的从业者。如果你正在找一个轻量、离线可用、结构清晰的世界地图数据源，这份资源值得花几分钟了解一下怎么用、坑在哪。
2. GeoJSON 格式拆解：从 FeatureCollection 到坐标精度
2.1 为什么选 GeoJSON 而不是 shapefile 或 TopoJSON
地理数据格式不少，shapefile 是老牌选手，但它是二进制格式，前端解析需要额外库，而且一个 shapefile 往往是一堆文件（.shp、.shx、.dbf），传输和版本管理都麻烦。TopoJSON 是 GeoJSON 的压缩版，体积小，但需要拓扑库解码，对新手不友好。GeoJSON 基于 JSON，浏览器原生支持JSON.parse，任何语言都能轻松读写，调试时直接打开看结构，这是它最大的优势。
这份资源选 GeoJSON 作为交付格式，意味着你不需要装 GDAL、不需要跑 Python 转换脚本，拿到文件就能在代码里fetch或者import。代价是体积比 TopoJSON 大一些，但对于「世界地图 + 主要国家」这个粒度，完全在可接受范围内。常见做法是：如果项目对加载速度极其敏感，可以后续自己转 TopoJSON；如果只是常规可视化，GeoJSON 直接上。
2.2 文件结构长什么样：一个 Feature 的解剖
GeoJSON 的核心是FeatureCollection，里面每个Feature代表一个地理实体（比如一个国家）。下面是一个简化后的结构示例，我拿一个虚构的「示例国」来演示：
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "示例国", "iso_a2": "EX", "iso_a3": "EXM", "continent": "示例洲" }, "geometry": { "type": "Polygon", "coordinates": [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ] ] } } ] }properties里通常放国家名称、ISO 编码、所属大洲等属性，这些字段是后续做数据关联的关键。geometry.type可能是Polygon或MultiPolygon，像岛国或者有飞地的国家会用MultiPolygon。coordinates是经纬度数组，注意 GeoJSON 规范里经度在前、纬度在后，很多新手在这里搞反，导致地图画到南极去了。
提示：如果你拿到的数据里
coordinates层级特别深，先确认是Polygon还是MultiPolygon，两者的嵌套层数不一样，解析逻辑要分开处理。
2.3 坐标精度与体积的权衡
这份资源里的坐标精度是经过取舍的。原始测绘数据可能精确到小数点后 6 位以上，但那份文件动辄几十 MB。实际可视化时，屏幕像素根本分辨不出那么细的差别，所以资源里对坐标做了适度简化。你拿到手后可以检查一下坐标的小数位数，一般在 2 到 4 位之间，既保留了国家轮廓的辨识度，又把体积压了下来。
如果项目需要做区域面积计算或者精确的空间分析，这个精度可能不够，需要找更高精度的数据源。但如果只是画图、做交互高亮、展示数据分布，这个精度完全够用。我一般会先拿这份数据做原型，等确认视觉没问题再考虑要不要换更高精度的版本。
3. 把 GeoJSON 跑起来：前端渲染与后端解析的实操路径
3.1 前端用 Leaflet 加载：最小可运行示例
Leaflet 是前端地图可视化的轻量选择，配合这份 GeoJSON 数据，几十行代码就能出一个可交互的世界地图。下面是一个完整的 HTML 示例，假设 GeoJSON 文件放在同目录下的world.json：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>世界地图示例</title> <!-- 引入 Leaflet 样式和脚本 --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <style> #map { height: 600px; width: 100%; } </style> </head> <body> <div id="map"></div> <script> // 初始化地图，中心点设在世界地图中间附近 var map = L.map('map').setView([20, 0], 2); // 添加底图图层（这里用 OpenStreetMap，仅作演示） L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // 加载 GeoJSON 数据 fetch('world.json') .then(function(res) { return res.json(); }) .then(function(data) { // 把 GeoJSON 添加到地图上 L.geoJSON(data, { style: function(feature) { return { color: '#3388ff', // 边框颜色 weight: 1, // 边框宽度 fillOpacity: 0.3 // 填充透明度 }; }, onEachFeature: function(feature, layer) { // 鼠标悬停时显示国家名称 if (feature.properties && feature.properties.name) { layer.bindPopup(feature.properties.name); } } }).addTo(map); }); </script> </body> </html>这段代码的逻辑很直接：初始化地图，加一个底图，然后fetch加载 GeoJSON，用L.geoJSON渲染。style函数控制每个国家的样式，onEachFeature用来绑定交互事件。参数方面，setView的缩放级别设为 2 能看到全球，weight和fillOpacity根据你的视觉偏好调整。
注意：如果 GeoJSON 文件较大，
fetch加载会有延迟，建议加个 loading 提示。另外，Leaflet 的L.geoJSON对MultiPolygon支持没问题，但如果数据里有几何错误（比如环没有闭合），渲染会静默失败，需要先用工具校验。
3.2 用 D3.js 做数据驱动的地图着色
如果你的需求是根据数据给不同国家上色，比如按 GDP、人口或者某个业务指标，D3.js 更合适。下面是一个用 D3 加载 GeoJSON 并做颜色映射的示例：
import * as d3 from 'd3'; // 假设有一份国家指标数据，key 是 ISO 编码 const metrics = { "USA": 100, "CHN": 90, "DEU": 70, "BRA": 50, "IND": 40 }; // 颜色比例尺：根据指标值映射颜色 const colorScale = d3.scaleSequential(d3.interpolateBlues) .domain([0, 100]); // 加载 GeoJSON d3.json('world.json').then(function(geoData) { const svg = d3.select('#map').append('svg') .attr('width', 960) .attr('height', 600); // 投影：把经纬度转成屏幕坐标 const projection = d3.geoNaturalEarth1() .scale(180) .translate([480, 300]); const path = d3.geoPath().projection(projection); // 绘制每个国家 svg.selectAll('path') .data(geoData.features) .enter() .append('path') .attr('d', path) .attr('fill', function(d) { const iso = d.properties.iso_a3; const value = metrics[iso]; return value ? colorScale(value) : '#eee'; }) .attr('stroke', '#fff') .attr('stroke-width', 0.5); });这里的关键是d3.geoNaturalEarth1()投影，它把球面坐标展平到平面上。colorScale用interpolateBlues做连续映射，没有数据的国家填充灰色。metrics对象用 ISO 编码做 key，和 GeoJSON 里的properties.iso_a3对应。如果你的数据里 ISO 编码字段名不一样，改一下取值逻辑就行。
3.3 后端解析：用 Python 做区域统计
有时候你需要在后端处理 GeoJSON，比如判断某个坐标落在哪个国家，或者统计每个国家的区域数量。Python 的geopandas和shapely是常用工具。下面是一个用geopandas读取 GeoJSON 并做简单统计的示例：
import geopandas as gpd # 读取 GeoJSON 文件 gdf = gpd.read_file('world.json') # 查看基本信息 print(gdf.head()) print(gdf.crs) # 坐标参考系，GeoJSON 默认是 EPSG:4326 # 计算每个国家的面积（注意：EPSG:4326 下直接算面积不准，需要投影转换） gdf_projected = gdf.to_crs(epsg=3857) # 转成 Web Mercator gdf['area_km2'] = gdf_projected.geometry.area / 1e6 # 转成平方公里 # 按大洲统计国家数量 if 'continent' in gdf.columns: print(gdf.groupby('continent').size()) # 判断某个点落在哪个国家 from shapely.geometry import Point point = Point(116.4, 39.9) # 示例坐标 matched = gdf[gdf.geometry.contains(point)] print(matched[['name', 'iso_a3']])这段代码先读取 GeoJSON，然后做投影转换再算面积，因为 EPSG:4326 是地理坐标系，直接算面积单位是平方度，没有实际意义。contains方法用来做点面判断，返回包含该点的国家。参数方面，to_crs(epsg=3857)是 Web Mercator 投影，适合做面积和距离的粗略计算；如果要做精确测量，需要用对应区域的投影坐标系。
提示：
geopandas读取 GeoJSON 时，如果文件里有几何错误，可能会报错或者静默丢弃。建议先用gdf.is_valid检查一下几何有效性，有问题的用buffer(0)修复。
4. 避坑与排查：GeoJSON 用起来容易翻车的五个地方
4.1 地图画出来是空白的
现象：代码没报错，但地图上什么都没画出来。
原因：最常见的是坐标顺序搞反了。GeoJSON 规范是[经度, 纬度]，但有些数据源或者手动处理时写成了[纬度, 经度]，导致所有点都跑到南极或者北极附近，缩放级别不对时看起来就是空白。另一个可能是投影设置错误，比如把经纬度直接当像素坐标用。
解决：先检查coordinates数组的前两个值，经度范围是 -180 到 180，纬度范围是 -90 到 90。如果发现纬度值在 -180 到 180 之间但经度在 -90 到 90 之间，大概率是反了。用console.log打印几个点的坐标确认一下。
4.2 国家边界出现奇怪的连线
现象：地图上某些国家内部或者国家之间出现横跨屏幕的直线。
原因：多边形环没有正确闭合，或者MultiPolygon的嵌套层级写错了。GeoJSON 要求每个线性环的第一个点和最后一个点必须相同，否则渲染库会自己补一条线，这条线可能横跨整个地图。
解决：用工具校验 GeoJSON 的几何有效性。Python 里可以用shapely的is_valid检查，前端可以用turf.js的booleanValid。如果是环没闭合，手动补上最后一个点或者用buffer(0)修复。
4.3 加载速度慢，页面卡顿
现象：GeoJSON 文件加载后，地图渲染要等好几秒，拖动缩放都不流畅。
原因：文件体积太大，或者坐标精度过高导致顶点数量爆炸。全球国家边界如果保留原始精度，可能有几十万个顶点，浏览器渲染压力很大。
解决：先看文件大小，如果超过 5 MB，考虑做简化。用mapshaper或者turf.simplify降低坐标精度，减少顶点数量。另外，如果只需要主要国家，可以过滤掉小岛屿和无关区域，只保留需要的Feature。
4.4 属性字段对不上，数据关联失败
现象：想根据 ISO 编码给国家上色，但发现 GeoJSON 里的字段名和你的数据对不上，或者编码格式不一致。
原因：不同数据源的属性字段命名不统一，有的用iso_a2，有的用ISO_A2，有的用id。编码格式也可能不同，比如 ISO 3166-1 alpha-2 和 alpha-3 混用。
解决：先打印一个Feature的properties看看有哪些字段。如果字段名不一致，在代码里做映射；如果编码格式不一致，用转换表统一。常见做法是维护一个iso_a3到iso_a2的映射对象，加载后先做一次字段归一化。
4.5 跨域加载被浏览器拦截
现象：本地打开 HTML 文件时，fetch加载 GeoJSON 报 CORS 错误。
原因：浏览器对file://协议下的fetch请求有安全限制，不允许读取本地文件。
解决：起一个本地 HTTP 服务，比如python -m http.server或者npx serve，通过http://localhost访问页面。如果部署到线上，确保 GeoJSON 文件和页面同源，或者服务端配置了正确的 CORS 头。
5. 进阶技巧：用 ISO 编码做数据关联与动态着色
拿到这份 GeoJSON 之后，真正让它发挥价值的是和你的业务数据关联起来。我一般会走这么一条路径：先确认 GeoJSON 里的属性字段，尤其是 ISO 编码字段，然后把自己的数据整理成以 ISO 编码为 key 的字典，最后在渲染时做映射。
下面是一个完整的 D3 示例，演示如何根据外部数据动态着色，并且处理数据缺失的情况：
import * as d3 from 'd3'; // 模拟业务数据：ISO alpha-3 编码 -> 指标值 const businessData = { "USA": 85, "CHN": 92, "DEU": 78, "FRA": 74, "GBR": 80, "JPN": 88, "IND": 65, "BRA": 60, "CAN": 82, "AUS": 79 }; // 颜色比例尺 const colorScale = d3.scaleSequential(d3.interpolateYlOrRd) .domain([50, 100]); // 根据数据范围调整 d3.json('world.json').then(function(geoData) { const svg = d3.select('#map').append('svg') .attr('width', 960) .attr('height', 600); const projection = d3.geoNaturalEarth1() .scale(180) .translate([480, 300]); const path = d3.geoPath().projection(projection); // 绘制国家 svg.selectAll('path') .data(geoData.features) .enter() .append('path') .attr('d', path) .attr('fill', function(d) { const iso = d.properties.iso_a3; // 如果业务数据里有这个国家，用比例尺着色；否则用灰色 if (businessData[iso] !== undefined) { return colorScale(businessData[iso]); } return '#e0e0e0'; }) .attr('stroke', '#fff') .attr('stroke-width', 0.5) .append('title') // 原生 tooltip .text(function(d) { const iso = d.properties.iso_a3; const name = d.properties.name || '未知'; const value = businessData[iso]; return value !== undefined ? name + ': ' + value : name + ': 无数据'; }); });这段代码的关键点在于businessData的 key 和 GeoJSON 里的iso_a3对应。colorScale的domain根据你的数据范围设定，如果数据分布不均匀，可以用d3.scaleQuantile做分位数映射。title元素提供了原生的鼠标悬停提示，不需要额外绑定事件。
如果 GeoJSON 里的 ISO 编码字段不是iso_a3，你需要先做一次字段映射。我一般会写一个归一化函数，把不同来源的字段统一成标准编码：
// 字段归一化：把各种可能的 ISO 字段统一成 iso_a3 function normalizeIso(properties) { return properties.iso_a3 || properties.ISO_A3 || properties.id || properties.ADM0_A3 || null; }这个函数按优先级依次尝试常见字段名，返回第一个存在的值。如果都找不到，返回null，渲染时做特殊处理。
还有一个实际场景是：你只需要主要国家，不需要全球所有小岛屿和地区。这时候可以在加载后先过滤一遍：
// 只保留主要国家（根据 ISO 编码白名单） const majorCountries = ['USA', 'CHN', 'DEU', 'FRA', 'GBR', 'JPN', 'IND', 'BRA', 'CAN', 'AUS']; const filteredFeatures = geoData.features.filter(function(f) { const iso = normalizeIso(f.properties); return iso && majorCountries.includes(iso); });过滤后重新构造FeatureCollection，再交给渲染函数。这样能显著减少顶点数量，提升渲染性能。
从那以后我每次拿到新的 GeoJSON 数据，都强制走一遍「字段检查 → 几何校验 → 精度评估 → 过滤裁剪」这个流程，确认没问题再往项目里塞。希望帮到你。
本文还有配套的精品资源，点击获取
