「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
4 件
CesiumJS の最も基本的な「Hello World」のように、暗黒の宇宙空間に浮かぶ 3D 地球儀を表示したい。 マウスのドラッグで地球を全方向に回転し、ホイールでカメラの拡大・縮小ができること。外部ライブラリゼロ、Canvas 2D による直接描画で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.6 KB gzip ・ データ 27 KB gzip ・ 初回描画 8 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗CesiumJS Sandcastle の「Lighting」のように、太陽に照らされた 3D 地球儀を表示したい。 太陽はワールド座標に固定し、スライダーで太陽直下点の経度（分点なので緯度 0）を動かすと 昼夜の境界（terminator）が地図の上を移動する。ドラッグで地球を回転、ホイールでズーム。 外部ライブラリなし、Canvas 2D で最速・最小に実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗CesiumJS の「Map Pins」例のように、宇宙空間の 3D 地球儀上の指定地理座標（ワシントン、東京、ロンドン）に 色分けされたピン（マップピン）を配置し、地球の回転に応じて前面（可視）と背面（地平線遮蔽・非表示）が 正しく切り替わる地図を表示したい。ドラッグで回転、ホイールでズームできること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.3 KB gzip ・ データ 27 KB gzip ・ 初回描画 18 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗CesiumJS Sandcastle の「Points」のように、3D 地球儀上に 5,000 個の点プリミティブを配置し、 視線に応じた地平線オクルージョン判定（裏面カリング）とカラーバッチ描画により 60 fps で高速に回転・ズーム表示したい。 ドラッグで回転、ホイールで拡大縮小できること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.2 KB gzip ・ データ 60 KB gzip ・ 初回描画 52 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗