Cesium.js를 Angular 응용 프로그램에서 사용하게 되었기 때문에 지식을 공유하려고합니다.
비교적 기초적인 내용입니다만, 영어의 문서를 읽는데 힘든 생각을 했으므로 비망록을 겸해 투고합니다. 바라면 누군가의 도움이 되는 것을…

Cesium.js란?

Cesium.js의 설명에 대해서는 이 기사에서 기본적인 부분은 해설하고 있으므로 생략합니다.
htps : // 코 m/케이지포온/있어 ms/615 하면 f7561 아 27d744f5

준비

우선 새로운 Angular 프로젝트를 만듭니다.ng new cesium-project
프로젝트로 이동하여 ng serve에서 서버가 시작되었는지 확인합니다.cd cesium-projectng serve
확인한 후 서버를 중지하고 AngularCLI에서 라이브러리를 추가. 여기까지 하면 준비는 일단 완료입니다.ng add angular-cesium
npm 명령으로 수동 설치가 가능하지만 설정이 번거롭습니다. 어떤 이유로 수동 설치하는 경우 아래 참조.
htps : // / cs. 앙구ぁr-시시 m. 코 m / 갓찐 g-s r d / in s tat chion

지형과 구조물 표시

그런데, 우선은 지도의 표시를 하므로 새롭게 컴퍼넌트를 작성합시다.
다음 명령을 사용하여 map 구성 요소를 만듭니다.cd src/appng g c map
map.component.html을 다음과 같이 다시 작성합니다.

map.component.html

<div id="cesiumContainer"></div>

map.component.ts를 다음과 같이 다시 작성합니다.

map.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.scss"],
})
export class MapComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),//地形情報を表示するオプション
    });
    scene.primitives.add(Cesium.createOsmBuildings());//OpenStreetMapというプロジェクトで作成された簡易なモデルを表示できる
    viewer.camera.flyTo({//目的の座標にカメラを向ける処理
      destination: Cesium.Cartesian3.fromDegrees(139.767125, 35.681236, 1000), //経度,緯度,高さの順に指定
    });
  }
}

이제 app.component.html을 다음과 같이 다시 작성합니다.

app.component.html

<router-outlet></router-outlet>

app-routing.module.ts도 다시 작성하자.

app-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { MapComponent } from "./map/map.component";

const routes: Routes = [{ path: "", component: MapComponent }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

여기까지 오면, 다시 ng serve로 서버를 기동.
그러면 아래 그림과 같이 도쿄역 주변의 지도 정보를 3D 표시할 수 있었습니다.

궤적 표시

map.component.ts의 ngOnInit() 안에 아래와 같은 처리를 추가합니다.
물론 목록의 값은 적절합니다.

map.component.ts

//軌跡表示
    viewer.entities.add({
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
          139.767125,
          35.681236,
          300,
          139.768,
          35.682,
          300,
          139.7685,
          35.681,
          300,
          139.769,
          35.683,
          300,
          139.768,
          35.683,
          300,
        ]),
        width: 5,
        material: Cesium.Color.RED,
      },
    });

저장하고 화면을 확인합니다. 빨간색 선이 표시되는 것을 볼 수 있습니다.

궤적 위로 움직이는 객체를 표시합니다.

map.component.ts의 ngOnInit() 안에 아래와 같은 처리를 추가합니다.
프리로 구르고 있던 드론의 모델(.glb 형식)을 다운로드해, ​​src/assets에 넣었습니다.

map.component.ts

//アニメーションの処理。
    let czml = [
      {
        //Cesium特有のczmlというJSON形式のデータを作る
        id: "document",
        name: "CZML",
        version: "1.0",
        clock: {
          //アニメーションのループ間隔を指定する
          interval: "2020-09-02T12:00:00Z/2020-09-02T12:00:08Z", //画面下部のタイムバーの始値と終値を定義する。ここにはフライト開始時刻と終了時刻を入れる
          currentTime: "2020-09-02T12:00:00Z", //フライト開始時刻を入れる
          multiplier: 1, //n倍速の指定。固定値にするかは要検討。
          range: "LOOP_STOP"
          step: "SYSTEM_CLOCK_MULTIPLIER",
        },
      },
      {
        id: "drone",
        name: "drone",
        availability: "2020-09-02T12:00:00Z/2020-09-02T12:00:08Z", //ここにフライト開始時刻とフライト終了時刻を指定する
        position: {
          epoch: "2020-09-02T12:00:00Z",
          cartographicDegrees: [
            //秒,経度,緯度,高さの順番
            0, 139.767125, 35.681236, 300,
            2, 139.768, 35.682, 300,
            4, 139.7685, 35.681, 300,
            6, 139.769, 35.683, 300,
            8, 139.768, 35.683, 300,
          ],
        },
        model: {
          gltf: "assets/drone.glb",//3Dモデルの指定
          outlineColor: {
            rgba: [0, 0, 0, 255],
          },
        },
      },
    ];
    viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));

저장하고 화면을 표시하고 화면 왼쪽 하단의 재생 버튼을 클릭하면 애니메이션이 실행됩니다.

총괄

이 세계는 별로 일본어 문서가 없고, 고생했기 때문에 뭔가 도움이 되면 다행입니다.
좌표 데이터를 취득할 수 있는 하드웨어 등과 연계할 수 있으면, 여러가지 가능성이 보일 것 같습니다.

참고로 한 사이트의 URL을 붙여 둡니다.
h tps : // 씨 d 또는 stぇ. 세시 m. 이 m
htps : // 기 s-오 r. 기주 b. 이오/기 t보오 k/보오 k/마테리아 ls/우에 b_기s/세시 m/세시 m. HTML