Technologies
/
CesiumJS から
同じことを Ortho Earth で書く
3D Tiles · I3S · quantized-mesh の地形 · glTF/GLB · WGS84 楕円体 · CZML · 時計
Ortho Earth はブラウザで動く 3D 地球儀の地図エンジン（WebGPU、無ければ WebGL2）で、API は MapLibre GL JS に合わせています。
CesiumJS でしていることの多くに、ここでの書き方があります。この頁はそれを並べたものです：CesiumJS での書き方、Ortho Earth での書き方、動いている頁。
例はどれも npm i @ortho-earth/globe のあと const map = await createGlobe({ target: "#map" }) とした前提です。
| 項目 | CesiumJS | Ortho Earth | 動く例 |
|---|---|---|---|
| 3D Tiles | await Cesium3DTileset.fromUrl(url) ＋ scene.primitives.add(tileset) | await map.add3DTiles(url) | オランダの 3D（3DBAG のタイルセット） |
| I3S | I3SDataProvider.fromUrl(url) | await map.addI3S(url) | — |
| quantized-mesh の地形 | CesiumTerrainProvider.fromUrl(url) | map.setTerrain({ source: { type: "quantized-mesh", url: ".../layer.json" } }) | quantized-mesh の例 |
| Cesium ion の地形 | CesiumTerrainProvider.fromIonAssetId(id) | map.setTerrain({ source: { type: "quantized-mesh", ion: { assetId, accessToken } } }) | — |
| 楕円体高と標高 | 楕円体からの高さ | heights: "ellipsoidal"（既定・同梱の EGM96 ジオイドで標高に直す）か "orthometric" | — |
| glTF / GLB の模型 | Model.fromGltfAsync({ url, modelMatrix }) | await map.gadget.model(url, { at: [lon, lat], heading, scale })（ファイルに CESIUM_RTC・ECEF の置き場所があればそちらが勝つ） | GLB の模型 |
| three.js を場面に | — | map.addThree({ three, module })（描画 worker の中で同じカメラ・地形と建物に隠れる） | three.js で 3D Tiles |
| 項目 | CesiumJS | Ortho Earth | 動く例 |
|---|---|---|---|
| WGS84 楕円体 | Ellipsoid.WGS84（常に） | createGlobe({ ellipsoid: true }) か ?ell=1。既定の "auto" は力のあるデスクトップで楕円体。計測は常に WGS84 | 楕円体の日本 |
| カメラを飛ばす | camera.flyTo({ destination }) | map.flyTo({ center: [lon, lat], zoom, pitch, bearing }) | 地球儀 |
| カメラを置く | camera.setView({ destination, orientation }) | map.jumpTo({ … }) か map.setCamera({ lng, lat, height, heading, pitch, roll }) | — |
| 動く物を追う | viewer.trackedEntity = entity | map.follow(target)（点・時刻の関数・読み込んだ CZML の軌跡の id） | 人工衛星 |
| 点を見る | camera.lookAt(target, offset) | await map.lookAt(target) | — |
| 項目 | CesiumJS | Ortho Earth | 動く例 |
|---|---|---|---|
| 時計 | viewer.clock | map.clock（夜の側・星・衛星・時刻付きのデータが同じ 1 つの時計で動く） | 世界時計 |
| 時計の範囲 | clock.clockRange = ClockRange.LOOP_STOP | map.clock.setRange(start, end, "loop")（"clamped"・"loop"・"unbounded"。CZML の名前も受ける） | — |
| CZML | CzmlDataSource.load(url) | .czml を地図に落とす（map.gadget.dropFile()）：sampled position は map.clock で同じ補間（ECEF・線形／Lagrange）で再生し、出ている区間だけ billboard・label・path を描く。document の clock は地図の時計へ写す | ortho-japan（ファイルを落とす） |
| 太陽と影 | viewer.shadows = true | await map.sunShadow({ mode: "instant" }) か "duration"（日影の時間） | — |
| 見通しの解析 | — | map.viewshed() · map.lineOfSight(a, b) | — |
style.json・setPaintProperty・queryRenderedFeatures は MapLibre GL JS と同じ書き方です。MapLibre も使っているなら MapLibre GL JS のコードを球へ を見てください。map.overlay(module)・map.addThree()・url を持つ custom layer で加わります。
全ての口はパッケージの型定義（@ortho-earth/globe/globe.d.ts）と エンジンの概要 にあります。
手順は Build with Ortho Earth（英語）にあります。