Gio.js学习笔记

最新推荐文章于 2024-03-24 10:01:36 发布

「已注销」

最新推荐文章于 2024-03-24 10:01:36 发布

阅读量1.2k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/Oonelost/article/details/105523985

版权

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

摘要由CSDN通过智能技术生成

文章目录

基本概述

官方文档
github地址
导入依赖

<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: fa