Earth:浏览器里的 3D 地球,一路看到可观测宇宙

开源了一个新项目 Earth:类似 Google Earth 的纯前端 3D 地球。拖动旋转、滚轮缩放,点击任何一个国家,飞过去看它的国旗、人口、GDP、政体;顶栏还能沿宇宙尺度阶梯往外走——月球、太阳系、银河系,直到可观测宇宙。在线体验:earth.kim。

为什么做这个

想要的东西很简单:打开浏览器就能转的地球,点一个国家就能看到它的现状——不装客户端,不注册 token,不接付费 API。市面上专业的方案(比如 Cesium)对这个需求来说太重了,于是用轻量的方案自己拼了一个。

里面有什么

国家信息:点击国家,镜头按国家面积自适应高度平滑飞过去,详情面板给出国旗、双语名称与官方全称、首都、地区、面积、人口、语言、货币、GDP(名义 + 人均)、发展程度和政治体制,还内嵌了维基百科的历史摘要,中英文随语言切换。

数据图层:GDP 柱状图层把所有国家的最新 GDP 以柱高立在地图上(sqrt 归一化,颜色按世界银行收入分组);国旗图层把国旗按面积贴在各国位置;航线图层画出全球主要海运贸易通道——按枢纽港分段的动画弧线,线宽和颜色表示运量等级。都可以单独开关。

全球排行榜:GDP、出口、进口(World Bank 实时数据),加上石油、天然气产量的静态快照。点榜单行直接飞到那个国家。

时间旅行模式:从 7.5 亿年前的罗迪尼亚超大陆到现代,16 个地质时代的古地理 3D 演变,支持时间轴拖动和自动播放(古地理图 © C.R. Scotese PALEOMAP Project),可以看着大陆漂移、拼合、再裂开。

宇宙尺度阶梯:顶栏在五级尺度间切换,每级配双语资料卡——地球(10⁷ m)、月球(10⁸ m,月面贴图 + 阿波罗/嫦娥/月球号 10 个历史着陆点)、太阳系(10¹³ m,八大行星沿轨道公转)、银河系(10²¹ m,5 万粒子的程序化棒旋星系,标注太阳系位置与人马座 A*)、可观测宇宙(10²⁷ m,星系团与纤维结构的宇宙网点云)。

数据从哪来

全部免费、无密钥。国家基础信息来自 mledoze/countries(REST Countries 的上游数据集),构建时静态化打包,运行时零请求;人口、GDP、进出口走 World Bank Open Data API,点击国家时按需拉取,localStorage 缓存 30 天;国旗来自 flagcdn.com;国家边界用 Natural Earth 110m,随应用自托管;地球贴图是 three-globe 附带的 NASA 贴图;行星与月球贴图来自 Solar System Scope(CC BY 4.0)。

一个小坑:REST Countries v3.1 API 已在 2026 年弃用(新版要注册),所以项目不在运行时依赖它,改为构建时静态化上游数据集,更新数据只需重跑一个脚本。

技术栈

React 18 + TypeScript + Vite,3D 部分用 Three.js(globe.gl 封装)——比 Cesium 轻量数个量级,不需要 Ion token,国家多边形、飞行动画、悬停拾取开箱即用。样式 Tailwind CSS v4,状态 Zustand,国际化 react-i18next(自动检测浏览器语言 + localStorage 记忆)。纯前端,可静态部署,桌面端右侧面板、移动端底部抽屉。

后续

计划中的还有国家搜索、主要出口商品与资源模块、多国对比和图表可视化。代码在 github.com/tan-zhuo/earth,欢迎试玩和提 issue。