Gio.지구의 이야기

개시하다

오래전부터 신경 많이 썼던 지오야.js 썼어요.
기술 기사라기보다는 소감과 필기의 기사다.

Gio.js 소개

https://giojs.org/
Gio.쓰리야.js로 구축된 웹 3D 장갑 데이터 시각화용 오픈 소스 라이브러리입니다.Gio.js의 차이는 Gio다.js를 사용하여 선언적인 방법으로 3D 데이터 시각화 모델을 맞춤형으로 제작하고 자신의 데이터를 추가하여 자신의 최신 웹 응용 프로그램에 통합시키는 것은 매우 간단한 일이다.
Gio.js README 참조 번역)
문장은 인상을 잡기 어려운데 어쨌든 지구계의 3D 모형을 보여줄 수 있다.
또 로그인 데이터를 통해 지구본에 데이터를 시각화할 수 있기 때문에 아래의 이미지를 보여주는 지구본도 있다.

Gio.js의 특징

Gio.Js는 다음 세 가지를 특징으로 열거한다.
① 도입의 단순성
최소 4행의 JavaScript 코드로 3D 지구본 모형을 만들 수 있습니다.
② 맞춤형 구성
Gio.js의 API를 사용하여 지구계의 설계를 맞춤형으로 제작할 수 있다.
③ 현대 디자인
상호작용이 풍부한 3D 전단 응용을 구축할 수 있다.

컨디션

Next+Typerscript 항목 내에 있습니다.js를 사용해 보세요.
버전은 다음과 같습니다.
항목
버전 세부 정보
node
16.14.2
next
12.1.4
react
18.0.0

이번 시도

Gio.js를 가져와서 다음과 같은 간단한 지구계를 표시해 보세요.

마지막으로 데이터 등록 또는 스타일 API를 사용하여 다음과 같은 다양한 디스플레이를 사용할 수 있습니다.

절차.

지구계 표시

Gio.js의 설치

설명 코드

매개 변수의 설명

데이터 추가 및 지구본에 시각화

데이터 파일 추가

코드의 보충

매개 변수 설명

맞춤형 지구계 추가

코드 n의 보충

스타일을 자세히 변경할 때

지구의를 표시한다

우선 지구의를 표시해 보자.

Gio.js 설치

Gio.js를 설치합니다.
매크로 패키지 관리자 - yarn을 사용하기 때문에 yarn에 설치합니다.
※Gio.js에서 TypeScript를 지원하지 않습니다.

yarn add giojs

npm를 사용할 때는 아래에 설치하십시오.

npm install giojs

설명 코드

이번에는 Next, Type script를 사용했기 때문에 코드는 다음과 같습니다.
열거한 네 줄로 기술할 수는 없지만 코드 수가 부족하다는 인상을 준다.
index.tsx

import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react";
import * as GIO from "giojs";

const initCountry = "JP";

const Giojs: NextPage = () => {
  const ref = useRef(null);

  useEffect(() => {
    const controller = new GIO.Controller(ref.current, {
      control: {
        initCountry,
      },
    });

    controller.init();
  }, []);

  return <div style={{ width: 1440, height: 800 }} ref={ref} />;
};

export default Giojs;

이런 코드 기술은 지구계를 나타낼 수 있다.화면에는 다음과 같은 그림처럼 간단한 지구계가 표시되어야 한다.

매개 변수 설명

initCountry

initCountry에서 처음 선택한 국가를 지정할 수 있습니다.initCountry에서 지정할 수 있는ISO 3166-1 국명 코드는 이번에 교부JP로 일본이 선택한 상태다.아무것도 지정하지 않으면 기본값CN이 지정되기 때문에 중국은 초기 선택 상태입니다.

지구계에 데이터 추가 가시화

당분간 지구의 에너지 표시는 지루할 뿐이다.
Gio.js의 장점은 국가 간의 데이터 관계를 가시화할 수 있기 때문에 추가 데이터는 디스플레이를 풍부하게 한다.

데이터 파일 추가

각 파라미터의 설명은 뒤에 서술하고 잠시 데이터를 추가할 것이다.
샘플 데이터로 이번에 sampleData.ts 파일을 추가했습니다.
sampleData.ts

const data = [
  {
    e: "JP",
    i: "CN",
    v: 3000000,
  },
  {
    e: "JP",
    i: "TH",
    v: 8000000,
  },
  {
    e: "ID",
    i: "JP",
    v: 1000000,
  },
];

export default data;

부호의 보충

아까 인덱스.tsx 파일에 추가된 데이터를 가져옵니다.
가져온 데이터는 controller.addData();의 매개 변수에 전달되어 지구계에 반영될 수 있다.
index.tsx

import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react";
import * as GIO from "giojs";
+ import data from "./sampleData";

const initCountry = "JP";

const Giojs: NextPage = () => {
  const ref = useRef(null);

  useEffect(() => {
    const controller = new GIO.Controller(ref.current, {
      control: {
        initCountry,
      },
    });

+    controller.addData(data);

    controller.init();
  }, []);

  return <div style={{ width: 1440, height: 800 }} ref={ref} />;
};

export default Giojs;

디스플레이를 확인한 후 선이 두 나라로 연결되어 빛 입자가 이 선상에서 이동했다.
이렇게 하면 좀 움직이는 것 같아.

매개변수 설명

방금 추가된 데이터 파라미터에 대해 설명하다.

{
    e: "JP",
    i: "CN",
    v: 3000000,
  },

e

e는 수출국을 나타내며 국가 간의 선을 연결하는 출발국이다.
코드 참조ISO 3166-1.

i

i는 수입국을 나타내며 국가 간의 선을 연결하는 도착국이다.
코드 참조ISO 3166-1.

v

v는 국가 간의 값이다.
수치가 크면 온라인에서 움직이는 입자의 크기와 양이 커지고 이동 속도가 빨라진다.
값이 작으면 온라인에서 움직이는 입자의 크기와 양이 작아지고 이동 속도가 느려진다.

스타일 사용자 정의 지구기 추가

마지막으로 스타일을 사용자 정의하여 더욱 부유해 보입니다.
Gio.js에 색상 및 스타일 API 사용자 정의가 준비되어 있어서 사용해 봤어요.

부호의 보충

index.tsx 파일에 추가controller.setStyle("mint");.
setStyle()API에서는 매개변수에 색상 이름을 지정하여 스타일 템플릿을 로드할 수 있습니다.
이번에 지정했어mint.
index.tsx

import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react";
import * as GIO from "giojs";
import data from "./sampleData";

const initCountry = "JP";

const Giojs: NextPage = () => {
  const ref = useRef(null);

  useEffect(() => {
    const controller = new GIO.Controller(ref.current, {
      control: {
        initCountry,
      },
    });
    
+    controller.setStyle("mint");

    controller.addData(data);

    controller.init();
  }, []);

  return <div style={{ width: 1440, height: 800 }} ref={ref} />;
};

export default Giojs;

이렇게 되면 디스플레이의 풍격이 바뀌어 더욱 풍부해진다라고 외면했다.

스타일 자세히 수정하기

setStyle 중 지정할 수 없는 배경색과 해양 투과율을 바꾸는 API 등도 준비돼 있어 API 조합에 따라 원하는 색으로 변경할 수 있다.
index.tsx

import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react";
import * as GIO from "giojs";
import data from "./sampleData";

const initCountry = "JP";

const Giojs: NextPage = () => {
  const ref = useRef(null);

  useEffect(() => {
    const controller = new GIO.Controller(ref.current, {
      control: {
        initCountry,
      },
    });

    // 地球表面(国境)の色(デフォルト値:#FFFFFF)
    controller.setSurfaceColor("#FFFFFF");

    // 選択した国の色(デフォルト値:#FFFFFF)
    controller.setSelectedColor("#FFFFFF");

    // 選択した国から出ていくラインの色(デフォルト値:#DD380C)
    controller.setExportColor("#DD380C");

    // 選択した国に入ってくるラインの色(デフォルト値:#154492)
    controller.setImportColor("#154492");

    // 地球の輪郭の色(デフォルト値:#FFFFFF)
    controller.setHaloColor("#FFFFFF");

    // 背景色(デフォルト値:#000000)
    controller.setBackgroundColor("#000000");

    // 海の明るさ[0~1](デフォルト値:0.5)
    controller.adjustOceanBrightness(0.5);

    // 関連する国の明るさ[0~1](デフォルト値:0.5)
    controller.adjustRelatedBrightness(0.5);

    // メンションされた国を光らせるか(デフォルト値:false)
    controller.lightenMentioned(true);

    // メンションされた国の光度[0~1](デフォルト値:0.5)
    controller.adjustMentionedBrightness(0.5);

    controller.addData(data);
    controller.init();
  }, []);

  return <div style={{ width: 1440, height: 800 }} ref={ref} />;
};

export default Giojs;

감상

Gio.js에서 3D 지구계를 간단하게 그릴 수 있고 데이터를 추가하면 국가 간의 관계를 가시화할 수 있어서 재미있습니다.
이번에는 색깔만 바뀌었어, 지오.js에 다른 API가 준비되어 있기 때문에 더욱 상호작용적으로 표시할 수 있습니다.

참고 문장

https://giojs.org/index.html
https://github.com/syt123450/giojs
https://keymaso.com/programemory/javascript/gio-js/
https://paiza.hatenablog.com/entry/2018/09/06/지금 바로 가져올 수 있어요!3D 지구에서 JavaScript로 데이터 시각화