Open5ヶ月前にコメント追加20

Cesiumを理解する

Cesiumの公式ページからざらっと見ていく
https://cesium.com/

CesiumJsのページ
あとで試してみる

https://cesium.com/platform/cesiumjs/

Cesiumで扱うデータ形式である3DTilesの仕様が書いてる

わかりやすい

ここでCesiumについて体系的に学べそう

ざっくりと見終わった
CesiumJsを一旦触ってみる

CesiumJSクイックスタート

Cesium ionにまずは登録

登録

次にCesiumJSクライアントをセットアップする

ここをやってく

React初期構築

npm create vite@latest my-app -- --template react

npmインストールでセットアップをする

npm install cesium

次は何をすればいいんだ

こっちみて進めれば表示できた、すごい
https://resium.reearth.io/installation#5-vite

こっちだと、座標に対して説明をつけられるのか

import { Viewer, Entity, PointGraphics, EntityDescription } from "resium";
import { Cartesian3 } from "cesium";

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);

function App() {
  return (
    <Viewer full>
      <Entity position={position} name="Tokyo">
        <PointGraphics pixelSize={10} />
        <EntityDescription>
          <h1>Hello, world.</h1>
          <p>JSX is available here!</p>
        </EntityDescription>
      </Entity>
    </Viewer>
  );
}

export default App;

Hello Worldはできたので、もうちょっと応用していく

これで線引けた

import { createFileRoute } from '@tanstack/react-router'
import { Cartesian3, Color, createWorldTerrainAsync, PolylineGraphics,  } from "cesium";
import { Viewer, Entity, PointGraphics, EntityDescription} from "resium";

const terrainProvider = createWorldTerrainAsync();
const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const positions = Cartesian3.fromDegreesArrayHeights([136.137600,36.218795,0,
  136.146183,36.210070,0,
  136.147385,36.197465,0,
  136.155109,36.191923,0,
  136.157513,36.188183,0,
  136.154938,36.182364,0,
  136.146870,36.175574,0])

export const Route = createFileRoute('/')({
  component: App,
})


function App() {
  return (
    <Viewer full terrainProvider={terrainProvider} timeline={true}>
      <Entity position={position} name="Tokyo">
        <PointGraphics pixelSize={10} />
        <EntityDescription>
          <h1>Hello, world.</h1>
          <p>JSX is available here!</p>
        </EntityDescription>
      </Entity>
      <Entity polyline={{positions: positions, width: 5, material: Color.RED}}></Entity>
    </Viewer>
  )
}

ここを参考にしている

これで、初期描画の際に指定した地点に飛ばしてくれる

const destination = Cartesian3.fromDegrees(136.194763, 36.047711, 45000.0)

<CameraFlyTo destination={destination}></CameraFlyTo>

次に、Cesium ionと連携する方法知りたいな