Giojs is a web 3D earth data visualization component library built on Three.js, which allows you to create your own 3D global data visualization model with a small amount of JS code, and supports customizing all Gio Earth parameters, such as surface, country, connecting line, halo, background, ocean, etc.
Get Started:
1. Installation
Introduce dependencies in the HTML section of the page <head> :
<script src="three.min.js"></script><script src="gio.min.js"></script>Or use npm to install and introduce modules.
npm install giojs --savevar Gio = require('giojs');2、Create a < div > tag and add a controller.
<div id="globeArea" style="width: 200px; height: 200px"></div><script>$(function () {//Get a container to hold your image orthographic image tube Earth.var container = document . getelementbyid(” global area “)；// Create Haimenkou controller var controller = new GIO. Controller (container);//Add data controller.addData (data); //Initialize and render the Earthcontroller . init()；});</script >
3、Open web page preview
Other settings:
Surface color
The surface includes countries and oceans, and the default color is 0xffffff.
controller.configure({color: {surface:0xff0000}});- connecting line
The data between two countries will move in a certain direction through the data line in a flowing way. For the selected countries, the lines representing the inflow data are called “input lines” and the lines representing the outflow data are called “output lines”. The default color of “input line” is 0x154492, and the default color of “output line” is 0xdd380c.
controller.configure({color: {in:0xff0000,out:0x00ff00}});- background
The background is the area behind the earth in the 3D scene, and the default color is
0x000000。
controller.configure({color: {background:0x0000ff}});- halation
Halo is the aperture around the earth, and the default color is 0xffffff.
controller.configure({color: {halo:0xff0000}});- ocean
The ocean is a specific area on the 3D earth surface. On the Gio earth surface, the ocean is the darkest area with a default brightness of 0.5.
controller.configure({brightness: {ocean:0.8}});- Add data
Load data into Gio’s controller and overwrite previous data synchronously. The data set used for visualization is in JSON format. Each element in the array contains an input country (I), an output country (E) and a numerical value (V).
[{"e": "CN","i": "US","v": 3300000},{"e": "CN","i": "RU","v": 10000}]- Input data to continent
In the input data, “I” can be defined as “continent” (for example, input “Asia” for Asia), so the definition represents the output from a country to a “continent”.
[{// “e “cannot be set as a continent, and the output must be the country e:” cn “.//You can set” i “as Europe and” Europe “as the input parameter i:
“Europe”,v: 5000000}]
