基于Three.js的web3D地球数据可视化的开源组件库

开始使用

试一试

GitHub

易用性

仅使用4行Javascript即可创建3D地球数据可视化模型

定制化

使用Gio.js提供的丰富的API来创建自定义样式的3D地球

现代化

基于Gio.js构建高交互、自适应的现代化3D前端应用
开始使用

1. 安装

在HTML的<head>中引入Three.js和Gio.js依赖, 以下展示了如何使用<script>标签引入依赖:
<script src="three.min.js"></script>
<script src="gio.min.js"></script>

2. 创建

在引入Three.js和Gio.js在页面之后,已经可以创建3D Gio地球了。在此我们将先展示如何创建基础样式的Gio地球。
创建一个<div>,Gio地球将会被渲染在这个区域中:
<div id="globeArea" style="width: 200px; height: 200px"></div>
添加一下4行Javascript代码在你的HTML中, 用以创建并渲染:
<script>
        var container = document.getElementById( "globalArea" );
        var controller = new GIO.Controller( container );
        controller.addData( data );
        controller.init();
</script>

3. 定制

阅读API文档, 你可以简单快速创建自定义的风格的Gio样式, 右边的区域展示了一种自定义风格的3D Gio地球。
下载
Gio.js可以很好地运行在Chrome, safari, firefox浏览器中,同时我们正在努力解决更多的跨浏览器问题。在我们的官网中包含了 Giojs文档,文件下载和使用样例。

Gio.js的源码可以从giojs的Github仓库下载。如果有关于Giojs的 使用问题,可以到github上的issue部分提出宝贵意见。

使用NPM下载

npm install giojs

使用Yarn下载

yarn add giojs

下载

v1.4.0.zip