用 Gio.js 构建国家间数据流动的 3D 可视化地球
Gio.js 是一个基于 Three.js 的开源 3D 地球数据可视化库。它的核心目标是降低 3D 地球可视化的开发门槛，让开发者能够快速创建展示国家间数据流向的交互式地球。
项目主要解决的问题是：在 Web 端展示地理数据流向（如贸易往来、人口迁移、网络流量等）时，传统的 2D 地图难以直观表达数据的空间流动关系。Gio.js 提供了一种开箱即用的 3D 解决方案。
需要明确的是，Gio.js 专注于国家/地区级别的数据流可视化，不适用于城市级别的精细地理数据展示，也不是通用的 3D 地图引擎。
核心功能
声明式 API 设计
Gio.js 采用声明式 API，将复杂的 Three.js 场景管理封装在内部。开发者无需直接操作 WebGL 或理解 Three.js 的渲染机制，通过配置对象即可完成大部分定制需求。
数据流可视化
库的核心能力是展示国家间的数据流动。数据以"出口国-进口国-数值"的格式输入，Gio.js 会自动在 3D 地球上渲染出带有方向的弧线，弧线的粗细和颜色可以反映数据量级。
样式定制
提供 40 多个 API 用于调整视觉效果，包括：
- 地球表面、海洋、光晕的颜色
- 数据流入/流出线条的颜色
- 被选中国家的高亮色
- 亮度和对比度控制
使用方法
安装
npm 安装：
npm install giojs --saveyarn 安装：
yarn add giojsCDN 引入：
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/giojs/build/gio.min.js"></script>基础使用
Gio.js 强调"四行代码"的快速上手体验：
| 步骤 | 代码 | 作用 |
|---|---|---|
| 1 | var container = document.getElementById("bindGlobeContainer") | 获取容器元素 |
| 2 | var controller = new GIO.Controller(container) | 创建控制器实例 |
| 3 | controller.addData(data) | 添加数据 |
| 4 | controller.init() | 初始化渲染 |
完整示例：
<!DOCTYPE html>
<html>
<head>
<style>
#bindGlobeContainer {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="bindGlobeContainer"></div>
<script src="three.min.js"></script>
<script src="gio.min.js"></script>
<script>
// 准备数据：从中国到美国和日本的数据流
var data = [
{ e: "CN", i: "US", v: 3000 },
{ e: "CN", i: "JP", v: 2000 }
];
// 四行核心代码
var container = document.getElementById("bindGlobeContainer");
var controller = new GIO.Controller(container);
controller.addData(data);
controller.init();
</script>
</body>
</html>数据格式说明：
e：出口国的 ISO 3166-1 alpha-2 国家代码i：进口国的国家代码v：数值大小
样式定制
var controller = new GIO.Controller(container, {
color: {
surface: 0x48C12, // 地球表面颜色
selected: 0xF26B5E, // 选中国家颜色
in: 0x154492, // 流入线条颜色
out: 0xDD380C // 流出线条颜色
},
brightness: {
ocean: 0.5, // 海洋亮度
mentioned: 0.8, // 有数据国家亮度
related: 0.5 // 相关国家亮度
}
});常用 API
| API | 作用 |
|---|---|
controller.addData(data) | 添加数据 |
controller.clearData() | 清空数据 |
controller.switchDataSet(name) | 切换数据集 |
controller.setInitCountry("CN") | 设置初始选中国家 |
controller.enableAutoRotation() | 启用自动旋转 |
controller.disableAutoRotation() | 禁用自动旋转 |
controller.getScene() | 获取 Three.js 场景对象 |
controller.onCountryPicked(callback) | 国家点击回调 |
总结
Gio.js 在 3D 地球数据流可视化这个细分领域提供了一个实用的解决方案。它的价值在于将 Three.js 的复杂性封装起来，让前端开发者能够快速实现国家间数据流向的可视化效果。
对于需要在 Web 端展示全球数据流动的项目，Gio.js 可以显著减少开发工作量。但如果项目需要更精细的地理数据展示或复杂的 GIS 功能，则需要考虑 Cesium 或 Mapbox GL 等更专业的方案。
项目地址：https://github.com/syt123450/giojs (opens in a new tab)