「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
4 件
D3 の world map と同じ意図で、正距円筒図法の世界地図を陸地と10度刻みの経緯線で 描きたい。ブラウザで開いた瞬間に全体が見え、外部ライブラリなしで最速・最小に。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗D3 の tile / geo のデモと同じ意図で、Web Mercator のラスタータイル地図に タイル境界と z/x/y のアドレスを重ねて表示したい。TileJSON （https://tile.yuiseki.net/styles/512/osm-carto.json）の tiles テンプレート・ tileSize・minzoom/maxzoom・attribution を読んで描き、ポインタ下のタイルの z/x/y を読み出せるようにする。ドラッグでパン、ホイールでズーム。 地図エンジンも D3 本体も使わず Canvas 2D で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗2016年8月2日の地表気温予報GeoTIFFをNatural Earth投影の等値帯で見たい
WebGL2 R16UI texture and full-screen fragment shader / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗D3 の "Solar terminator" と同じく、世界地図の上に太陽直下点と昼夜の境界（明暗境界線）を 描き、UTC 時刻を動かすと夜の範囲が動くようにしたい。2026-10-30 の日付で、 外部ライブラリなしで最速・最小に。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗