「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
5 件
OpenGlobus の Base Layers 例のように、UI の切り替えボタン（「OSM」と「Satellite」）でベースレイヤー （標準地図スタイルと衛星写真風ダークスタイル）を瞬時に切り替えられる地図を表示したい。 ドラッグでパン、ホイールでズームでき、スタイル切り替え時も位置・ズームが保持されること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.7 KB gzip ・ データ 30 KB gzip ・ 初回描画 6 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗OpenGlobus の「Billboards」例のように、世界主要都市（パリ、東京、ニューヨーク、シドニー、カイロ）に ビルボードマーカー（アイコンバッジ）を配置した地図を表示したい。 ドラッグでパン、ホイールで拡大縮小でき、マーカーが地理座標に固定されて追従すること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.9 KB gzip ・ データ 30 KB gzip ・ 初回描画 10 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗OpenGlobus の "Circles on the ground" 例と同じく、東京・ニューヨーク・ロンドンを中心とする 半径 1,500 / 1,200 / 1,000 km の地面円を半透明の色で陸地の上に描き、 ドラッグとホイールで操作したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗世界地図上に東京・ニューヨーク・ロンドンの3つの点を色分けして表示し、 クリックした点の名前をポップアップで出したい。ドラッグでパン、ホイールで拡大縮小でき、 外部ライブラリなし・Canvas 2D で最速・最小に実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗OpenGlobus の公式例「Natural Vector Layers」のように、3D 地球儀上に世界の国境ベクター境界線および 領土ポリゴンを高精細に投影描画したい。ダークスレート調グローブとシアン発光の国境境界線を用い、 視線による裏面カリングを行いながらドラッグで回転、ホイールで拡大縮小でき、60 fps で滑らかに再描画すること。 外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.7 KB gzip ・ データ 38 KB gzip ・ 初回描画 45 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗