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

  • Z时代
  • 2024-01-10
  • 分类：IT

Gio.js 是一个基于 Three.js 的 web 3D 地球数据可视化的开源组件库。使用 Gio.js 的网页应用开发者，可以快速地以申明的方式创建自定义的Web3D数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。

Gio.js 基于 Three.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)

切换 被选中的国家。

项目结构简介

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

  • assets：静态资源(截图)和依赖库（stat.min.js & three.min.js）

  • build：发布的文件。我们会在每次发布最新的版本的时候更新这个文件夹。最新的进展会反应在这个文件夹中

  • examples：具有代表性的例子，展示了 Gio 的功能和主要API的具体用法

  • src：源码

  • test：在 src 文件夹中代码的单元测试

更多详细使用请参见文档：https://www.wenjiangs.com/docs/gio-js-zh-docs

以上是 Gio.js 基于 Three.js 的 web3D 地球数据可视化的开源组件库 的全部内容， 来源链接： utcz.com/p/234068.html

回到顶部