「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
13 件
deck.gl の ArcLayer と同じ意図で、米国郡間の人口移動フローを 3D 放物線アークとして 始点・終点カラーグラデーションと標高カーブで描き、パン・ズームや郡選択に追従させたい。外部ライブラリなしで。
Canvas 2D / TypeScript (型ストリップ配信)
コード 4.6 KB gzip ・ データ 195 KB gzip ・ 初回描画 15 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗米国の郡別COVID-19新規感染者数を人口10万人当たりに直し、 週と集計セルの大きさを変えながら等値帯・等値線で見たい。
WebGL2 R32F scalar texture and Canvas2D land / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗バンクーバーの区画ごとの土地評価額と伸び率を、回転・拡大できる3D区画で見たい
WebGL2 triangle mesh and offscreen ID picking / TypeScript
コード 5.3 KB gzip ・ データ 577 KB gzip ・ 初回描画 596 ms ・ フレーム p95 215.58 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗米国の幹線道路事故を1990〜2015年で切り替え、死亡者数を色、事故件数を幅で見たい
WebGL2 instanced line quads and integer style textures / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗パリの約20万本の街路樹を、ズームに応じた集計格子から個々の点へ滑らかに切り替えて見たい
WebGL2 GL_POINTS and preaggregated sparse grids / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ニューヨークの Uber 乗車地点10万個を重みに応じたヒートマップで見たい。 地図のパン・ズーム中も更新し、半径・強度・しきい値を操作したい。
WebGL2 (R32F加算ブレンドとGPU縮約) / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗英国の交通事故約14万件を六角セルへ集計し、件数を立体の高さと色で見たい。 地図を動かし、集計半径・列の幅・上位分位を操作したい。
WebGL2 instanced hexagonal prisms / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗米国の郡（county）間の人口移動（ネットの東西方向）上位1,500組を、直線の LineLayer として地図上に描きたい。 東向きと西向きで色を分け、ドラッグでパン、ホイールで拡大縮小できるようにする。 外部ライブラリなし・Canvas 2D で最速・最小に実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Kaarta の室内 LiDAR 点群を全点保ち、回転と拡大縮小で滑らかに立体観察したい
WebGL2 GL_POINTS / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗deck.gl の ScatterplotLayer と同じ意図で、マンハッタンの 13,987 点を重みに応じた 半径と色の点で描き、パン・ズームで追従させたい。WebGL を使わず外部ライブラリなしで。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.5 KB gzip ・ データ 75 KB gzip ・ 初回描画 23 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ニューヨークの Uber 乗車地点10万個を画面上の正方格子で集計し、地図を動かしても セルの件数と色を更新したい。セル幅を変えて密度を見比べたい。PCブラウザで滑らかに動かしたい。
WebGL2 (R32F加算ブレンド) / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapterhorn の標高と VersaTiles の衛星画像を使い、セントヘレンズ山の3D地形を滑らかに観察したい
WebGL2 with two textures per terrain tile / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗マンハッタンのイエローキャブとグリーンキャブの移動を、建物の間を通る軌跡として 時間とともに再生したい。軌跡の長さを変え、地図を動かして比較したい。
WebGL2 instanced timed segments and indexed building triangles / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗