Gio.js学习笔记

最新推荐文章于 2025-04-17 07:06:58 发布

「已注销」

最新推荐文章于 2025-04-17 07:06:58 发布

阅读量1.3k

点赞数

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/oonelost/article/details/105523985

版权

学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文档详细介绍了Gio.js的基本使用，包括图形地球的配置、基础元素（如表面、国家、连接线等）、功能设计型API以及颜色风格类API的使用。此外，还提到了数据处理和依赖库接口，以及如何切换选中国家，为开发交互性应用提供了指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

基本概述

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

基本图形地球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/three.min.js"></script>
    <script src="js/gio.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <title>demo1</title>
</head>
<body>
<div id="globeArea" style="width: 800px; height: 800px">
    <script>
        // 获得用来来承载您的IO地球的容器
        var container = document.getElementById("globeArea");
        // 创建Gio控制器
        var controller = new GIO.Controller( container );
        // 添加数据，了解更多有关Gio.js数据格式，查看文档：http://giojs.org/html/docs/dataIntro_zh.html
        //controller.addData( data );
        // 初始化并渲染地球
        controller.init();
    </script>
</div>


</body>
</html>

在这里插入图片描述

配置

通过构造函数配置

var configs = {
        color: {
                surface:0xFF0000
        }
};
var globe = new Gio.controller(container, configs);

通过API配置：controller.configure(configs);

controller.configure({
            color: {
                halo:0xff0000
            }
        });

配置参数表

var configs = {
        control: {
                stats: false,
                disableUnmentioned: false,
                lightenMentioned: false,
                inOnly: false,
                outOnly: false,
                initCountry: "CN",
                halo: true
        },
        color: {
                surface: 0xFFFFFF,
                selected: null,
                in: 0x154492,
                out: 0xDD380C,
                halo: 0xFFFFFF,
                background: null
        },
        brightness: {
                ocean: 0.5,
                mentioned: 0.5,
                related: 0.5
        }
}

参数名	默认值/范围	描述
control.stats	false	True表示开启性能监控
control.disableUnmentioned	false	True表示设置"未提到的国家"不可点击
control.lightenMentioned	false	True表示设置地球表面"提到的国家"比"未提到的国家"更亮
control.inOnly	false	True表示只显示"输入线条"
control.outOnly	false	True表示只显示"输出线条"
control.initCountry	“CN”	初始"被选中国家"
control.halo	true	True表示显示光晕
color.surface	0xFFFFFF or “#FFFFFF”	大陆以及海洋颜色
color.selected	null	被选中国家颜色
color.in	0x154492 or “#154492”	"输入线条"颜色
color.out	0xDD380C or “#DD380C”	"输出线条"颜色
color.halo	0xFFFFFF or “#FFFFFF”	光晕颜色
color.background	null	背景颜色
brightness.ocean	0.5 [0.0, 1.0]	海洋亮度
brightness.mentioned	0.5 [0.0, 1.0]	被提到国家亮度
brightness.related	0.5 [0.0, 1.0]	有关国家亮度

基础元素

表面

表面包括了国家和海洋。默认的表面颜色是 0xffffff。

//设置表面颜色
controller.configure({
        color: {
                surface:0xff0000
        }
});

国家

每个国家都有一个特定的 ISO 3166代码
被选中的国家

//设置被选中国家的颜色
controller.configure({
        color: {
                selected:0xff0000
        }
});

有关的国家

//设置"有关的国家"的亮度
controller.configure({
        brightness: {
                related:0.8
        }
});

被提到的国家

//设置"被提到国家"的亮度
controller.configure({
        color: {
                mentioned:0.8
        }
});

未被提到的国家
不可点击的国家

连接线

两个国家之间的数据通过数据线以流动的方式按照一定的方向移动。
数据线分为"输入线"和"输出线"。 "输入线"的默认颜色是0x154492，"输出线"的默认颜色是0xdd380c。
设置连接线颜色

controller.configure({
        color: {
                in:0xff0000,
                out:0x00ff00
        }
});

背景

//设置背景颜色
controller.configure({
        color: {
                background:0x0000ff
        }
});

光晕

//设置光晕颜色
controller.configure({
        color: {
                halo:0xff0000
        }
});

海洋

//设置海洋亮度
controller.configure({
        brightness: {
                ocean:0.8
        }
});

功能设计型API

设置初始国家:将初始国家转至屏幕正前方

// 将初始国家改成"美国"
controller.setInitCountry("US");

在这里插入图片描述

高亮被提及国家

controller.lightenMentioned(true);
controller.lightenMentioned(false);

禁用未提及国家

controller.disableUnmentioned(true);
// 禁用此功能
controller.disableUnmentioned(false);

显示(隐藏)输入线(输出线)

controller.showInOnly(true);
controller.showInOnly(false);
controller.showOutOnly(true);
controller.showOutOnly(false);

添加/删除光晕

controller.addHalo(0xFF0000);
controller.removeHalo();

透明背景

//通过使用启用透明背景功能，可以使用自定义图片作为背景。
controller.setTransparentBackground( true );

自动旋转

// 启用自动旋转功能，将转速设置为1（同时1也是默认的转速） 
controller.setAutoRotation( true, 1 );
// 如果之前开启了自动旋转功能，可以用这种方式将其关闭 
controller.setAutoRotation( false );

颜色风格类 API

设置风格：默认风格

controller.setStyle("magic");

设置表面颜色

// 颜色的参数可以是字符串 "#FF0000" 或者是十六进制数值 0xFF0000
controller.setSurfaceColor("#FF0000");
//controller.setSurfaceColor(0xFF0000);

设置选中国家颜色

// 颜色的参数可以是字符串 "#FF0000" 或者是十六进制数值 0xFF0000
controller.setSelectedColor("#FF0000");
//controller.setSelectedColor(0xFF0000);

设置输出颜色

// 颜色的参数可以是字符串 "#FEF504" 或者是十六进制数值 0xFEF504
controller.setExportColor("#FEF504");
//controller.setExportColor(0xFEF504);

设置输入颜色

// 颜色的参数可以是字符串 "#00FF00" 或者是十六进制数值 0x00FF00
controller.setImportColor("#00FF00");
//controller.setImportColor(0x00FF00);

设置光晕颜色

// 颜色的参数可以是字符串 "#FF0000" 或者是十六进制数值 0xFF0000
controller.setHaloColor("#FF0000");
//controller.setHaloColor(0xFF0000);

设置背景颜色

// 颜色的参数可以是字符串 "#530000" 或者是十六进制数值 0x530000
controller.setBackgroundColor("#530000);
//controller.setBackgroundColor(0x530000);

设置海洋亮度

controller.adjustOceanBrightness(0.8);

设置相关国家亮度

controller.adjustRelatedBrightness(0.8);

设置被提到国家亮度

controller.lightenMentioned(true);
controller.adjustMentionedBrightness(0.8);

数据

载入一个数据集


[
        {
                "e": "CN",
                "i": "US",
                "v": 3300000
        },
        {
                "e": "CN",      //表示连线输出的国家
                "i": "RU",       //表示连线输入的国家
                "v": 10000     //表示这两个国家之间的数值
        }
]

清除数据

// 使用 clearData API 来清除数据
controller.clearData();

输入数据到洲：在输入数据中，“i"可以被定义成"洲”，这样定义代表着从一个国家输出到一个"洲"。
周期性加载数据/关闭周期性加载

// 返回JSON格式数据
var url = "dynamicallyAPI/data";

// 使用liveLoad() API加载URL中的数据。
// 设置回调。
// 指定加载时间。

controller.liveLoad( url, liveLoadCallback, 50000 );

function liveLoadCallback () {

        console.log("Load data event happens.");

}

// 使用 closeLiveLoader API 来关闭周期性加载功能
// controller.closeLiveLoader();

依赖库接口

添加背景图片：Three.js接口
Stats.js接口

切换选中国家

除了通过用户点击地球表面的国家来进行切换以外，Giojs还支持使用switchCountry() API来直接切换被选中的国家，开发者可以使用这个API来开发具有交互性的应用。
国家：特定的 ISO 3166代码

// 切换选中国家到 "US"
controller.switchCountry("US");