Gio.js 基于 Three.js 的 web3D 地球数据可视化的开源组件库
Gio.js 是一个基于 Three.js 的 web 3D 地球数据可视化的开源组件库。使用 Gio.js 的网页应用开发者，可以快速地以申明的方式创建自定义的Web3D数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。
为什么要使用 Gio.js
这个库的开发是受到 Google 2012 Info 大会上的项目 世界武器贩卖可视化 的启发，该项目开发者是 Google 员工 Michael Chang。使用 Gio.js 就可以快速构建这种炫酷的 3D 模型，并以此为基础进行深入地开发。
- 易用性 -- 仅使用 4 行 JavaScript 即可创建3D地球数据可视化模型
- 定制化 -- 使用 Gio.js 提供的丰富的API来创建自定义样式的3D地球
- 现代化 -- 基于 Gio.js 构建高交互、自适应的现代化3D前端应用
开始使用
安装
Gio.js 可以很好地运行在 Chrome、safari、firefox 浏览器中，同时我们正在努力解决更多的跨浏览器问题。在我们的官网中包含了 Giojs 文档，文件下载和使用样例。
Gio.js 的源码可以从 giojs 的 Github 仓库下载。如果有关于 Giojs 的 使用问题，可以到 github上 的 issue 部分提出宝贵意见。
途径1：<script> 标签，下载地址 v2.0.zip。
在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地球。（在微信小游戏中Gio.js的使用略有不同，查看这个栗子，了解如何在微信小游戏中使用 Gio.js）
<!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 地球：
// 获得用来来承载您的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();如果一切顺利，在浏览器中打开您的 HTML 页面你将会看到以下3D地球： 用力点我，如果有兴趣了解更多 Gio.js 有趣的用法，我们强烈推荐Gio.js的 文档。
例子
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 中编辑修改它们。
API 列表
configure(json)
配置controller。
setInitCountry(ISOCode, default: 'CN')
设置初始 被选中国家。
lightenMentioned(boolean, default: 'false')
使 Gio 地球表面上 提及国家 比 未提及的国家 更亮。
disableUnmentioned(boolean, default: 'false')
禁止点击 未提及的国家。
showInOnly(boolean, default: 'false')
对于"被选中的国家"，只显示"输入线"。
showOutOnly(boolean, default: 'false')
对于"被选中的国家"，只显示"输出线"。
addHalo(string)
添加地球光晕，可以指定光晕颜色。
removeHalo()
删除地球光晕。
enableStats()
显示左上角的"性能监控"组件。
disableStats()
隐藏左上角的"性能监控"组件。
setStyle(string)
通过设置风格名称来更改3D地球的颜色风格。
setSurfaceColor(string, default: '#ffffff')
通过RGB值设置3D地球的表面颜色。
setSelectedColor(string, default: '#ffffff')
通过RGB值设置"在选中状态"下的国家颜色。
setExportColor(string, default: '#DD380C')
通过RGB值设置输出线的颜色。
setImportColor(string, default: '#154492')
通过RGB值设置输入线的颜色。
setHaloColor(string, default: '#ffffff')
通过RGB值设置光晕的颜色。
setBackgroundColor(string, default: '#000000')
通过RGB值设置背景的颜色。
adjustOceanBrightness(float, default: 0.5)
设置海洋的亮度。
adjustRelatedBrightness(float, default: 0.5)
设置相关国家的亮度。
adjustMentionedBrightness(float, default: 0.5)
设置提到国家的亮度。
addData(json)
将数据加载到Gio的控制器并同步覆盖以前的数据。
clearData()
清除地球上添加的数据，同时有将数据线和数据点清除的效果。
switchDataSet()
切换地球表面呈现的数据集。
addDataAsync(url, callback)
从一个数据源异步加载数据。
liveLoad(url, callback, duration)
周期性地从一个数据源加载数据。
closeLiveLoader()
关闭周期性加载功能。
getScene()
获得 three.js 中 scene 对象的引用。
getStatsObject()
获得 Stats 面板对象的引用。
onCountryPicked(callback)
当 被选中的国家 改变时被调用。
switchCountry(IsoCode)
切换 被选中的国家。
项目结构简介
- assets：静态资源(截图)和依赖库（stat.min.js & three.min.js）
- build：发布的文件。我们会在每次发布最新的版本的时候更新这个文件夹。最新的进展会反应在这个文件夹中
- examples：具有代表性的例子，展示了 Gio 的功能和主要API的具体用法
- src：源码
- test：在 src 文件夹中代码的单元测试
更多详细使用请参见文档：https://www.wenjiangs.com/docs/gio-js-zh-docs
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论