Gio.js：基于Three.js 构建的 Web 3D 地球数据可视化

概述

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

赋予动机

Gio.js 是一个开源库，用于使用 Three.js 构建的 Web 3D 地球数据可视化。Gio.js的不同之处在于，使用 Gio.js 以声明性方式自定义 3D 数据可视化模型、添加您自己的数据并将其集成到您自己的现代 Web 应用程序中非常简单。

该库的灵感来自Michael Chang开发的武器贸易可视化项目，并在Google Ideas INFO 2012期间展示。使用 Gio.js，可以轻松重现这个出色的数据可视化模型，并将其集成到 Web 应用程序中。

简单性 -- 只需四行 JavaScript 代码即可使用您自己的数据创建 3D 全局数据可视化模型
自定义 -- 在 Gio 中使用易于使用的 API 设计您自己的地球样式.js
现代化 -- 使用 Gio 构建负责任、完全交互式、丰富的 3D 前端应用程序.js

开始

安装

[hidecontent type="logged" desc="隐藏内容：登录后可查看"]

选项 1：<脚本>标记

包括三个.js依赖项：

<script src="three.min.js"></script>

包括本地 Gio.js 库

<script src="gio.min.js"></script>

或通过 CDN

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/giojs@2.2.1/build/gio.min.js"></script>

选项 2：npm

npm install giojs --save

选项3：纱线

yarn add giojs

用法

在 html 中包含“three.min.js”和“gio.min.js”后，创建一个来渲染 3D Gio 地球仪：（Gio.js 的用法在微信小游戏中略有不同，请查看此演示以了解更多信息）div

<!DOCTYPE HTML>
<html>
<head>

  <!-- include three.min.js library-->
  <script src="three.min.js"></script>

  <!-- include gio.min.js library-->
  <script src="gio.min.js"></script>

</head>
<body>

  <!-- container to draw 3D Gio globe-->
  <div id="globalArea"></div>

</body>
</html>

要初始化和渲染 3D Gio 地球仪，请执行以下操作：

<script>

    // get the container to hold the IO globe
    var container = document.getElementById( "globalArea" );

    // create controller for the IO globe, input the container as the parameter
    var controller = new GIO.Controller( container );

    /**
    * use addData() API to add the the data to the controller
    * know more about data format, check out documentation about data: http://giojs.org/html/docs/dataIntro.html
    * we provide sample data for test, get sample data from: https://github.com/syt123450/giojs/blob/master/examples/data/sampleData.json
    */
    controller.addData( data );

    // call the init() API to show the IO globe in the browser
    controller.init();

</script>

例子

Gio.js 有许多代表性的演示来展示如何使用 Gio.js，主要有三个示例资源：

资源1：吉奥.js游乐场

有一个游乐场（游乐场链接）供开发人员玩Gio.js并导出Gio.js参数。

资源 2：Github“示例”文件夹

Gio.js 有许多 API 演示，这些演示收集在示例文件夹中。克隆 Gio.js 存储库，在自己的环境中尝试它们~

资源 3：Codepen 上的现场演示

[/hidecontent]