1. CesiumJS 기본

• CesiumJS는 3D 지구와 맵을 위한 오픈 소스 JavaScript 라이브러리
• CesiumJS를 사용하면 웹 브라우저에서 3D 지구본과 2D 지도를 시각화하고, 이를 통해 다양한 지리 정보 시스템(GIS) 데이터를 시각화할수 있음

ㄱ. CesiumJS 사용방법

• 일단 프로젝트를 하나 만들어줌 npx create-react-app my-cesium-app
• 아래 코드를 사용해서 Cesium을 설치해줌
  • npm install cesium
  • npm install @types/cesium
  • npm install resium
• 아래 코드를 public/index.html에 추가해줌
  • <script>window.CESIUM_BASE_URL = '/cesium';</script>
• 그리고, public 폴더 안에 cesium 폴더를 생성하고 node_modules/cesium/Build/Cesium의 내용을 복사해 넣음
• 테스트 코드
  • 아래코드를 src/App.js에 붙여넣어 테스트함

    import React from 'react';
import { Viewer } from 'resium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
import { Ion, IonResource } from 'cesium';
Ion.defaultAccessToken = 'YOUR_CESIUM_ION_ACCESS_TOKEN';
function App() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <Viewer full />
    </div>
  );
}
export default App;

• 여기까지가 기본세팅이고 토큰값을 구하는 방법은

ㄴ. Cesium Token 얻는방법

• 여기 링크를 클릭하여 회원가입함
• 회원가입후 토큰 생성을 클릭하면 토큰이 나옴
• 나온 토큰을 위의 코드에 넣고 프로젝트를 실행하면

ㄷ. 결과물

• 검색창에 korea를 검색하면 아래처럼 이미지를 볼수있음!

2. CesiumJS - 심화

ㄱ. 동적데이터 시각화 하기(Glb파일)

• 관련문서
• 위의 관련문서를 클릭하여 샘플Glb 파일을 다운로드하고 아래위치에 해당 파일을 위치시켜둠
• Cartesian3.fromDegrees를 사용하여 드론의 위치를 경도, 위도, 고도로 설정
• HeadingPitchRoll을 사용하여 드론의 방향(heading, pitch, roll)을 설정
• Transforms.headingPitchRollQuaternion을 사용하여 드론의 방향을 쿼터니언으로 변환합니다.
• Entity 컴포넌트를 사용하여 드론 모델을 생성하고 droneModel 상태에 설정
• Viewer 컴포넌트는 Cesium 뷰어를 렌더링하며, droneModel이 자식 요소로 포함

ㄴ. 지도상에 드론띄우기

• 위의코드를 바탕으로 위도와 경도등을 파악하고 아래와 같이 코드를 작성함

ㄷ. 결과물

• 아래 이미지 처럼 결과물이 나오게됨

3. 지도를 클릭하여 드론 이동시키기

ㄱ. 위치를 나타낼 state2개를 만들어줌

ㄴ. 지도를 클릭시 위도와 경도를 알려줌 함수를 만들고 setState를 넣어서 state를 변화시켜줌

ㄷ. Viewer에 onClick함수에 만든 함수를 넣어줌

ㄹ. 결과물

• 

4. 드론 이동경로 표시하기

ㄱ.드론 이동시 이동경로에 흰색선 긋기

• viewerRef는 Cesium 뷰어를 참조하기 위한 ref
• targetPosition은 드론의 목표 위치를 저장함
• currentPosition은 드론의 현재 위치를 저장함
• pathPositions는 드론의 이동 경로를 저장함

ㄴ. 드론 이동 애니메이션

• 드론 이동 애니메이션 처리로 이동속도 등을 설정함

ㄷ. 클릭 이벤트 핸들러

• 이벤트 핸들러와 드론의방향 설정코드

ㄹ. Viewer 구성 및 렌더링

• Viewer 구성 및 렌더링 코드

ㅁ. 결과물

• 이동 경로 결과물 gif