Github 项目推荐 | 基于 Three.js 的 web 3D 地球数据可视化的开源组件库
Github 项目推荐 | 基于 Three.js 的 web 3D 地球数据可视化的开源组件库
Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者，可以快速地以申明的方式创建自定义的Web3D数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。
Github 链接：
https://github.com/syt123450/giojs/blob/master/README_zh.md
为什么要使用Gio.js
Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者，可以快速地以申明的方式创建自定义的Web3D数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。
这个库的开发是受到Google 2012 Info大会上的项目世界武器贩卖可视化的启发，该项目开发者是Google员工Michael Chang。使用Gio.js就可以快速构建这种炫酷的3D模型，并以此为基础进行深入地开发。
- 易用性 -- 仅使用4行Javascript即可创建3D地球数据可视化模型
- 定制化 -- 使用Gio.js提供的丰富的API来创建自定义样式的3D地球
- 现代化 -- 基于Gio.js构建高交互、自适应的现代化3D前端应用
开始使用
安装
- 途径1: <script> 标签
在HTML页面的部分引入 Three.js 依赖：
<script src="three.min.js"></script>在HTML页面的部分引入 Gio.js 依赖：
<script src="gio.min.js"></script>或者通过CDN引入依赖：
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://raw.githack.com/syt123450/giojs/master/build/gio.min.js"></script>- 途径2: JavaScript包管理工具NPM
npm install giojs --save- 途径3: JavaScript包管理工具YARN
yarn add giojs使用
在HTML页面中添加了Threejs和Giojs依赖之后，您就可以基于Giojs开发您的应用了。我们将展示如何创建一个具有基础样式的Gio地球。
<!DOCTYPE HTML>
<html>
<head>
<!-- 引入three.js -->
<script src="three.min.js"></script>
<!-- 引入Gio.js -->
<script src="gio.min.js"></script>
</head>
<body>
<!-- 创建一个div座位Gio的绘制容器 -->
<div id="globalArea"></div>
</body>
</html>在您的页面中添加以下Javascript代码来初始化Gio地球：
<script>
// 获得用来来承载您的IO地球的容器
var container = document.getElementById( "globalArea" );
// 创建Gio控制器
var controller = new GIO.Controller( container );
// 添加数据，了解更多有关Gio.js数据格式，查看文档：http://giojs.org/html/docs/dataIntro_zh.html
controller.addData( data );
// 初始化并渲染地球
controller.init();
</script>如果一切顺利，在浏览器中打开您的HTML页面你将会看到以下3D地球： 用力点我. 如果有兴趣了解更多Gio.js有趣的用法，我们强烈推荐Gio.js的文档
点击后面这个Codepen logo来在Codepen中试一下这个例子吧 ~
例子
Gio.js有很多代表性的例子，这些例子可以作为小帮手，辅助你成为一个Gio.js的专家！大致可以将这些小帮手分成三类：
- 小帮手1号: Gio.js Playground
Gio.js有一个Playground插件（Playground链接），在这个Playground中，你可以试试Gio.js的部分功能并且导出配置参数。
- 小帮手2号: Github仓库"examples"文件夹下的例子
Gio.js的仓库中有很多API例子，这些例子都被归集在"examples"文件夹下。Clone Gio.js仓库，然后在本地环境中看看它们把~
- 小帮手3号: Codepen在线可编辑的例子
Gio.js有很多codepen的例子，你可以在codepen中编辑修改它们。