Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者，可以快速地以申明的方式创建自定义的Web3D数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。
这个库的开发是受到Google 2012 Info大会上的某项目可视化的启发，该项目开发者是Google员工Michael Chang。使用Gio.js就可以快速构建这种炫酷的3D模型，并以此为基础进行深入地开发。
在HTML的<head>中引入Three.js和Gio.js依赖， 以下展示了如何使用<script>标签引入依赖:
在引入Three.js和Gio.js在页面之后，已经可以创建3D Gio地球了。在此我们将先展示如何创建基础样式的Gio地球。
创建一个<p>，Gio地球将会被渲染在这个区域中：
添加一下4行Javascript代码在你的HTML中， 用以创建并渲染：
在Gio.js 1.0发布之后，开发者们提出了很多很酷的、很有建设性的建议，比如微信应用开发者希望Gio.js支持微信小程序，有经验的Three.js开发者希望Gio.js提供Three.js编程接口等。在经过仔细研究、综合设计之后，Gio.js 2.0实现了大部分功能，并且添加了有关文档说明。以下列出了主要的2.0新增特性：
Gio.js仅依赖于Three.js。
经过测试，Gio.js在Three.js R90版本下可以很好地运行和使用。
Gio.js可以运行在以下的浏览器环境中:
更多详细的介绍就不在本文中介绍了，官方文档非常详细，感兴趣的小伙伴可以直接移步文档：
Gio.js可以说是Three.js中实践的非常不错的了，官方还提供了非常多的实例，通过一些简单的API配置即可实现非常炫酷的Web3D可视化地球，而且文档非常详细，更多实用和有趣的地方等待你的 探索 ！
很多人对制作大屏还是有很多的困扰比如布局排版，配色，组件以及使用过程都无从下手。所以我要推荐一款非常好用的软件------灯果可视化这次专门针对地图系列做一个分析!
[if !supportLists]（1）[endif]地图系列之底图层
（公司管理经营数据大屏）
（某疾病监控数据大屏）
如图所示的地图只是对于地图组件色块颜色的改变，修改的是底图层的内容，底图层反应在地图的各个子区域上，通过区域颜色的变化反应出对应数值大小的变化。
[if !supportLists]（2）[endif]地图系列之呼吸点层
（地质灾害防治指挥大屏）
（企业省内运营管理大屏）
如图所示的地图添加了呼吸点层效果。呼吸点层反应在地图的各个具体位置上，通过呼吸点的大小反应出对应数值大小的变化。呼吸点的动画有扩散和闪烁两种类型，呼吸点最小半径（对应最小的数值）、呼吸点最大半径（对应最大的数值）、呼吸点透明度和呼吸点颜色可以在这里进行设置。
（3）地图系列之呼吸点层
（全国电网数据分析大屏）
（产业宏观数据分析大屏）
如图所示的地图添加了柱状层效果。柱状层反应在地图的各个具体位置上，通过柱子的高度变化反应出对应数值大小的变化。柱子的形状可以设置为四棱柱或圆柱。
[if !supportLists]（3）[endif]地图系列之飞线层
（医疗数据可视化大屏）
（软件信息业务全球数据大屏）
如图所示的地图添加了飞线层效果。飞线层反应在地图的各个具体位置上，通过从起始点到结束点的飞线反应出两个位置之间的联系。
注意：飞线层的动画类型有2种，一种是飞线，另外一种是航线。
飞线动画效果如下：
航线动画效果如下：
[if !supportLists]（4）[endif]地图系列之标记层
（垃圾分类管理大屏）
（能源供热分析大屏）
如图所示的地图添加了标记层效果。如果我们想给地图上标记更多类型的地点（例如学校和医院等），我们可以在标记层进行设置。
当我们对标记层的属性进行设置时，首先要选择其中的某一个标记层，每个标记层是独立设置的。选择图片是设置该标记层的位置标识，例如你可以设置一个医院的标志。
以上都是对地图组件属性的一些分析，希望能够帮你们更快的了解如何制作地图。想要了解更多详情请点击下方
灯果可视化官网： www.dengguobi.com
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）