简介这是一份以中国为中心的世界地图可视化Demo基于ECharts实现配套国家中文名与英文名两套JSON数据适合前端开发者、地理数据可视化初学者以及需要在课件、活动页面或数据看板中突出中国视角的展示场景。压缩包共3个文件1个HTML页面可双击后在浏览器中直接运行2个JSON文件分别封装国家中文名和英文名映射数据整体约615KB无需安装额外软件或插件使用门槛低。已有276人学习下载。项目将地图展示逻辑与数据文件拆分结构清晰便于替换或扩展国家名称、调整地图样式、绑定业务数据其中国居中视角切换的核心思路对理解地图投影方式和地缘文化表达也有直接参考价值。借助该Demo可以快速获得一份可交互的世界地图底稿并在此基础上加入行政区划高亮、点击下钻、统计数值联动等常见功能是快速搭建地图展示页面的实用基础模板。1. 以中国为中心的世界地图不是改一行 CSS是重算整张投影做地理可视化的人应该都遇到过这个尴尬手里的世界地图是按欧美习惯绘制的中央经线定在 0°中国被挤在右边缘看亚太数据时视线要跨国界追着标签走。所谓「以中国为中心的世界地图」不是把图往左挪一挪而是把地图投影的中央经线从 0° 移到 105°E 附近让中国和东亚区域落到画面正中间。这一步看似简单实际涉及投影参数、跨经线数据割断、标注布局多个环节没处理干净就会出现国界线撕裂、接缝白条、标注跑到图外这些翻车现场。这篇文章按我平时做方案的习惯把原理、Python 和 QGIS 两条落地路径、参数调参和踩坑记录一次讲清适合做地理可视化、国际业务报表和地图底图生产的从业者照着复现。2. 投影与中央经线为什么默认世界地图总把中国挤在右边2.1 默认地图的「偏心」来自中央经线取 0°市面上绝大多数世界地图底图无论是 Natural Earth 的矢量数据还是 Google 系栅格瓦片实际绘制时用的都是全球范围经纬度坐标范围从 -180° 到 180°。绘图库拿到这些坐标后默认把 0° 经线格林尼治作为画面的中心参考线于是 -180° 到 0° 这一半美洲、大西洋落在图左0° 到 180° 这一半欧洲、亚洲、太平洋西部落在图右中国自然就贴到右边缘。换个说法同一份经纬度数据投影的中央经线central meridian决定了最终画面左右对称轴在哪里。想验证这个结论很简单在任意地图库中把中央经线参数从 0 改成 105其余数据完全不动画面会瞬间平移——亚洲移到中心美洲退到右侧边缘。这说明「以中国为中心」的本质是投影参数问题而不是数据源问题。做方案时我一般先确认数据源坐标系再决定改投影参数还是改数据预处理顺序别反。2.2 三种常用投影在中国居中场景下的表现对比以中国为中心不等于把默认投影的中央经线改掉就万事大吉。不同投影在远离中央经线区域的形变方式差别很大直接决定这张图能不能用在正式交付场景。第一种是等距圆柱投影PlateCarree / Equirectangular。经纬度直接映射为平面坐标全球范围显示为一个矩形中央经线可以任意指定。它的优点是计算简单、与栅格影像数据天然兼容缺点是高纬度地区俄罗斯、加拿大、北欧横向拉伸严重南北方向的面积变形肉眼可见。适合做数据分布底图、标注图不适合做强调面积对比的场景。第二种是 Miller 或 Robinson 这类折衷投影。它们牺牲了部分精确性换取更好的视觉比例同样可以指定中央经线。Robinson 投影在高纬度形变比等距圆柱小但 cartopy 里 Robinson 对中央经线的支持需要额外设置 global 参数否则会默认回到 -180 到 180 的显示范围这一步常见做法是显式传 central_longitude。第三种是兰伯特等积方位投影Lambert Azimuthal Equal Area简称 LAEA。以某个点为中心等积投影到平面上画出来是一张圆形地图。把中心点设在北京附近约 39.9°N116.4°E能得到一张真正「以中国为中心」的圆形世界地图形变在中心最小、越往外越大南半球和太平洋边缘会拉得很夸张。适合做品牌宣传图、示意图不太适合做数据叠加分析。2.3 中央经线参数选多少105°E 还是别的中央经线不是随便填个数它决定中国在画面中的横向偏移量。中国最西端约 73°E帕米尔高原最东端约 135°E黑龙江抚远中心大约在 104°E 附近。工程上一般取整数用 105°E 作为中央经线这样中国主体落在画面中线右侧一点点视觉上更自然。如果你想要的不是「中国居中」而是「太平洋居中」来凸显跨太平洋航线可以把中央经线设为 180° 或 -180°但这时要注意日界线正好落在画面中央很多数据在那个位置本身就会被切割处理复杂度会上升。还有一版常见做法是设 150°E让中国靠左、美洲靠右适合做亚太视角的航线图。我的经验是中央经线 105°E 时中国居中150°E 时亚太居中、美洲不贴边80°E 时欧洲非洲完整、中国偏右但不丢。这三个值基本够覆盖日常需求。投影类型中央经线推荐形变特征适合场景等距圆柱PlateCarree105°E高纬度横向拉伸严重数据标注、栅格叠加、快速预览Robinson105°E高纬度形变较大但视觉均衡印刷底图、通用示意图LAEA 方位等积以 105°E, 40°N 为投影中心中心小、边缘大圆形布局品牌视觉、非数据分析展示3. 用 Python 画一张以中国为中心的世界地图Cartopy 实操3.1 环境准备和数据获取常见做法是用 Cartopy 做投影Matplotlib 做绘制Natural Earth 数据做边界。Cartopy 自带读取 Natural Earth 的能力不需要手动下载 shapefile一句feature.NaturalEarthFeature就能拉取国界线数据。不过国内网络环境下首次访问 Natural Earth 数据会失败我一般在本地放一份数据缓存把CARTOPY_DATA_DIR环境变量指到本地目录一劳永逸。# 安装依赖建议用 conda 避免 geos 版本坑 conda install -c conda-forge cartopy matplotlib geopandas装完后检查一下版本Cartopy 0.22 之后对 Robinson 投影的中央经线支持比老版本稳定很多。如果跑代码时报GEOSException说明底层的 GEOS 库没装好或者版本冲突用 conda 重装 geos 一般能解决。数据这块不用额外下载Cartopy 首次运行时会自动从 naturalearth 官方源拉取 1:110m 或 1:50m 的矢量数据缓存到本地目录。3.2 最小可运行代码中央经线 105°E 的世界底图import matplotlib.pyplot as plt import cartopy.crs as ccrs import cartopy.feature as cfeature # 核心把投影中央经线设为 105°E proj ccrs.PlateCarree(central_longitude105) fig, ax plt.subplots(figsize(10, 6), subplot_kw{projection: proj}) # 添加 Natural Earth 国界线和海岸线 ax.add_feature(cfeature.COASTLINE, linewidth0.6) ax.add_feature(cfeature.BORDERS, linewidth0.4) ax.add_feature(cfeature.OCEAN, facecolor#d5ebfb) ax.add_feature(cfeature.LAND, facecolor#e8e0c0) # 关键强制显示范围跟随中央经线否则会回到 -180~180 ax.set_global() # 手动微调纵向范围避免上下过空 ax.set_ylim([-55, 85]) plt.savefig(world_centered_cn.png, dpi200, bbox_inchestight)这段代码的每个参数都有作用central_longitude105把投影中心从 0° 挪到中国中心set_global()让 Cartopy 以新的中央经线为中心计算 -180 到 180 的显示范围set_ylim把南北极过大的空白裁掉。如果不调用set_global()Cartopy 会默认用投影自身的边界范围导致画面只显示中央经线附近一小条区域这是一个非常容易让人误以为「数据丢了」的坑。3.3 把中国边界高亮用 GeoDataFrame 叠加绘制底图有了但很多场景需要把中国边界单独高亮出来。Natural Earth 的 BORDERS 数据是所有国家的边界合集想单独给中国描边或填充不能直接从 feature 里取需要读 M 级数据后用属性筛选。这时从本地读取一份带国家名称字段的 shapefile 是更稳定的做法import geopandas as gpd import matplotlib.pyplot as plt import cartopy.crs as ccrs # 读取 Natural Earth 1:110m 国家数据路径换成你本地实际存放位置 world gpd.read_file(ne_110m_admin_0_countries.shp) cn world[world[NAME] China] proj ccrs.PlateCarree(central_longitude105) fig, ax plt.subplots(figsize(10, 6), subplot_kw{projection: proj}) world.plot(axax, transformccrs.PlateCarree(), color#f0f0f0, edgecolor#888888, linewidth0.3) cn.plot(axax, transformccrs.PlateCarree(), color#ffcccc, edgecolor#aa0000, linewidth1.0) ax.set_global() ax.set_ylim([-55, 85]) plt.tight_layout() plt.savefig(world_cn_highlight.png, dpi200)这里的关键是transformccrs.PlateCarree()——GeoDataFrame 里的坐标是纯经纬度必须显式告诉 Cartopy 这些坐标属于 PlateCarree 坐标系它才能正确投影到目标投影上。忘记写 transform 是最常见的报错来源报错信息往往是「经纬度坐标无法投影」看似玄学实际就是没告诉绘图库数据原本是什么坐标系。3.4 画城市点和标注验证中国确实居中了一张图是否「以中国为中心」最直观的验证方法是在图上标注北京和华盛顿的位置看北京是否在视觉中心附近。这里要用ax.plot和ax.text并传入与数据一致的投影转换import cartopy.crs as ccrs proj ccrs.PlateCarree(central_longitude105) fig, ax plt.subplots(figsize(10, 6), subplot_kw{projection: proj}) # 北京和华盛顿的经纬度 beijing (116.4, 39.9) washington (-77.0, 38.9) # 标注城市点transform 写 PlateCarree() 表示输入是经纬度 ax.plot(beijing[0], beijing[1], o, colorred, transformccrs.PlateCarree()) ax.text(beijing[0] 2, beijing[1] 4, Beijing, transformccrs.PlateCarree()) ax.plot(washington[0], washington[1], o, colorblue, transformccrs.PlateCarree()) ax.text(washington[0] - 4, washington[1] 4, Washington, transformccrs.PlateCarree()) ax.set_global()注意文本标注的坐标偏移量是按经纬度写的4表示纬度方向偏移 4 度。画完后如果发现北京不居中优先检查中央经线是否生效而不是调整偏移量。4. 不写代码的路线用 QGIS 做出中国居中的世界地图4.1 在 QGIS 中设置自定义投影核心是 Proj4 字符串不是所有场景都需要写 Python。如果只是做一张静态底图给汇报材料用QGIS 的 Print Layout 比编程更快。第一步是加载 Natural Earth 的国家边界 shapefile。加载后图层面板里右击图层选择 Layer CRS把当前坐标系设成 EPSG:4326WGS84 经纬度这表示数据本身是经纬度坐标后续投影都由项目 CRS 控制。第二步是关键创建一个自定义投影。打开 Settings → Custom CRS点新建在 Proj4 字符串里填projeqc lat_ts0 lat_00 lon_0105 x_00 y_00 datumWGS84 unitsm no_defsprojeqc表示等距圆柱投影lon_0105表示中央经线为 105°E。如果要用 Robinson 投影把projeqc换成projrobin即可但 Robinson 投影下的数据渲染会更慢。我这里用的是等距圆柱因为等距圆柱与栅格影像数据配合时坐标对应最简单不容易出现错位。第三步右键图层 → Set Project CRS from Layer再右键图层 → Export → Save Features As选择刚才自定义的 CRS 导出成一份新的 shapefile。这一步实际上是重投影把原始经纬度坐标换算成以 105°E 为中心的平面坐标。重投影后图层渲染出来就是中国居中的效果。4.2 版面设置、比例尺和导出参数重投影后的图层在 QGIS 主画布上可能显示不全。如果整张图只显示局部右键图层 → Zoom to Layer 即可让视野覆盖到图层范围。接着点菜单 Project → New Print Layout按以下顺序操作在布局窗口左侧工具栏选择「Add Map」在画布上拉出一个矩形框右侧 Item Properties 中把 Scale 设为 1:80000000 或更大让全球范围完整显示勾选 Frame线宽设为 0.4添加标题文本框内容写「世界地图以中国为中心」导出图片时选择 300 DPI、PNG 格式导出的图片里如果接缝处出现一条明显白线说明数据在 -180/180 经线处被割断了。这个问题的成因和解决方式我在下一章展开。QGIS 这套流程适合一次性的制图需求做完就交付不涉及自动化如果以后每隔一周就要更新一次底图还是建议回到 Python 脚本。4.3 对已有栅格数据做同样处理重新投影而非平移常见误区是直接把栅格图片比如夜间灯光图、人口密度图在 QGIS 里手动拖动居中——这是不可行的。栅格影像的每个像素都绑定经纬度平移会破坏坐标对应关系。正确做法是 WARP重新投影菜单 Raster → Projections → Warp输入原始栅格设置目标 CRS 为刚才自定义的投影重采样方法选「Bilinear」双线性插值适合连续型数据执行后得到一张以 105°E 为中心的栅格底图Warp 过程在数据跨越 -180/180 时会产生一条接缝表现为图像左右两侧的内容互换到图外。处理方式是把源栅格先按经度拆成两个切片分别 Warp 后再合并或者用带 wrap 功能的工具一次性处理。这块比较绕如果不是做科研级交付我通常建议直接用矢量数据出图避免栅格接缝带来的额外工作量。5. 避坑与常见问题排查五个真实翻车现场5.1 接缝撕裂为什么国界线和多边形在图的边缘被劈成两半现象地图左右边缘出现被切断的国家或岛屿比如俄罗斯东部的楚科奇半岛一块在左、一块在右国界线呈放射状乱连。原因以 105°E 为中央经线时-180° 和 180° 经线重合处落在画面右边缘。原始数据中俄罗斯、美国的跨越日界线的多边形坐标序列会从 179° 跳到 -179°绘图库在渲染时会把它当作一条穿过整个地图的超长线段导致多边形撕裂。解决在数据处理阶段把跨越日界线的多边形按经度打断。Cartopy 里可以用cfeature自带的裁剪逻辑但更可控的做法是用 shapely 的split按照固定经度线切割多边形。我在生产方案里会专门写一段预处理脚本对每个多边形检测最大经度跨度若超过 180° 则按 180° 线切分成两个子多边形。这个逻辑在 QGIS 里对应的是「Split Features」工具手工切分量大的时候手工切不现实建议用脚本。5.2 接缝处出现一条竖向白线现象图面中央或右侧出现一条贯穿上下、宽约 1-3 像素的白线陆地和海洋颜色都缺失。原因多边形数据被切割后切口边缘的顶点坐标精度不够或者底图绘制顺序中陆地填充与背景错位。更常见的原因是数据源在跨经线处的多边形没有闭合存在缝隙绘图库按顶点顺序填充时留下一条未覆盖的细缝。解决先检查数据源多边形是否有缝隙用 QGIS 的「Vector Geometry → Check Validity」可以定位缝隙来自原数据的常见做法是把碎裂多边形用「Fix Geometries」工具修复。如果是 Cartopy 绘制时的渲染顺序问题尝试把ax.add_feature(cfeature.OCEAN)和ax.add_feature(cfeature.LAND)的顺序对调并在绘制 LAND 时把facecolor设置成与 OCEAN 不同的色值观察接缝位置是否变化。5.3 标注文字在边缘被裁掉现象城市名、国家名在图边缘被裁掉一半或者标注位置明显偏离对应坐标点。原因文字标注使用的坐标偏移量没有跟着中央经线一起换算。比如中央经线改为 105°E 后原来为 -180° 附近城市设计的偏移逻辑不适用文字往左偏出绘图区。解决代码里标注位置不要用固定偏移量改用 Cartopy 的ax.text配合transformccrs.PlateCarree()之外再调用ax.text的clip_onFalse让文字不被裁剪或者把文字 x 坐标根据中央经线动态换算若lon proj.central_longitude - 100则把文字放在图右侧。换新中央经线后必须重新检查边缘标注这是血泪经验。5.4 中央经线设置了但中国仍然不居中现象明明设置了central_longitude105但图上中国还是偏右甚至看起来完全没变化。原因Cartopy 中逆行的两个典型场景一是忘记调用ax.set_global()二是你用的是 Robinson 投影但没有把central_longitude传进去或是传了但版本低于 0.20 不支持。另一个常见场景是数据绘制时误传了transformccrs.PlateCarree(central_longitude105)导致数据先按 105°E 的坐标系统解释了一遍等于加了两次投影。解决确认 Cartopy 版本python -c import cartopy; print(cartopy.__version__)低于 0.20 直接升级确保 transform 只用于描述数据原始坐标系统一写成ccrs.PlateCarree()不带参数投影对象只新建一次全图复用。5.5 比例尺和指北针在重新投影后变得不可靠现象在 QGIS 布局中放置的固定比例尺出图后发现测量的距离与图上显示的刻度对不上。原因以 105°E 为中心的等距圆柱投影不是等距投影在高纬度地区横向距离被拉伸比例尺只在赤道附近准确。这是投影形变带来的数学上的必然不是软件错误。解决出图时不要依赖单一比例尺。如果是印刷用途在图上加一个网格线Grid并标注经纬度间隔让读者自己判断尺度如果在报告中引用距离信息必须注明数据源使用的投影和中央经线。这种情况在讲究数据准确性的场景里要特别注意不能因为图看着顺眼就默认比例尺可用。6. 进阶动态切换中央经线让同一份数据适配多中心视角做国际业务图表时经常要面对「同一份世界数据不同地区的人有不同观看习惯」的需求。欧美客户希望以 0° 为中心国内客户希望以 105°E 为中心做亚太航线时又希望太平洋居中。一种稳妥的做法是写一个动态绘图函数把中央经线作为参数传进去不修改任何数据源只改投影参数import matplotlib.pyplot as plt import cartopy.crs as ccrs import cartopy.feature as cfeature def draw_world_centered(central_lon: float, outfile: str world.png): proj ccrs.PlateCarree(central_longitudecentral_lon) fig, ax plt.subplots(figsize(10, 6), subplot_kw{projection: proj}) ax.add_feature(cfeature.COASTLINE, linewidth0.6) ax.add_feature(cfeature.BORDERS, linewidth0.4) ax.add_feature(cfeature.OCEAN, facecolor#d5ebfb) ax.add_feature(cfeature.LAND, facecolor#e8e0c0) ax.set_global() ax.set_ylim([-55, 85]) plt.savefig(outfile, dpi200, bbox_inchestight) plt.close(fig) # 三个常用视角各出一张 draw_world_centered(0, world_centered_0.png) draw_world_centered(105, world_centered_cn.png) draw_world_centered(150, world_centered_pacific.png)验证技巧每次出图后用 Matplotlib 在图上自动标注北京的坐标点检查北京点是否落在画面中线 ±15° 范围内。这个验证逻辑写成一个断言函数放在自动化脚本里防止以后改了数据源或投影参数后无意识破坏居中效果。另外一个出图的习惯是保存 PNG 时务必加bbox_inchestight否则图上标注的边缘会被裁剪保存 PDF/SVG 时则不需要因为矢量格式默认保留完整图面。我后来做这类底图时养成的习惯是中央经线永远做一个独立配置项不散落在代码里多处修改换数据源时先用北京和华盛顿两个坐标点做回归校验确认两个方向都在预期位置后才投入批量出图。这套流程帮我挡住了不少半夜才发现图不对的尴尬时刻。希望帮到你。本文还有配套的精品资源点击获取