Screenshots
Overview
概要
MapLibre GL JS(ベースマップ)とdeck.gl(GPUによる大量データ描画)を組み合わせ、日本のオープンデータを3Dで眺める地図実験室です。市区町村の人口を押し出し多角形やヘクスビンで、鉄道路線と乗降者数をライン＋カラムで、公示地価をlog色スケールの3Dカラムで——という3テーマを用意。データはすべてビルド時に前処理して静的同梱し、実行時のデータAPIは持たず、外部通信は地図タイルのみに絞っています。deck.glの各種レイヤーの実例と、オープンデータの丁寧な出典表記のリファレンスも兼ねます。
How to use
遊び方・使い方
全画面地図の上に半透明のオーバーレイUIが載ります。テーマ(人口・鉄道・地価)を切り替え、押し出しの高さ倍率・ヘクス半径・色スケール・指標(総人口／密度／増減)をパネルで操作。地物にホバーでツールチップ、クリックで順位つきの詳細カードが開き、上位地点へflyToします。ベースマップは地理院(淡色/ダーク)とOpenStreetMapを切替可能で、視点(中心・ズーム・傾き・方位)はURLハッシュに同期されるため、そのままリンク共有できます。低スペック向けの軽量モードも用意。
Tech stack
技術スタック
@deck.gl/core・layers・aggregation-layers・geo-layers・mapboxを用途別に導入し、TripsLayerで新幹線の光跡アニメーションも表現(prefers-reduced-motionで停止)。データは国土数値情報(N03/N02/L01/S12)とe-Stat国勢調査(2020/2015)、タイルは地理院・OSMを利用しています。
Highlights
工夫した点
- react-map-glを介さず、MapLibreのMapを自前のuseEffectで生成し、deck.glのMapboxOverlayをmap.addControlで重ねる統合方式。ラッパー起因のバージョン不整合を避け、破棄時はoverlay.finalize()とmap.remove()を徹底
- レイヤーは純関数buildLayers(params,data)→overlay.setProps({layers})で再構築し、差分更新はdeck.glに委譲。大きな配列はuseRefに置いてReactの再レンダーを避ける
- 前処理スクリプトを自作し、mapshaperで境界を簡略化(-simplify 5% keep-shapes)、人口は面積按分の代表点へ、座標は5桁丸め、鉄道は4分類へ正規化。1ページの転送量を約3MB以下に収める
To improve
改善したい点
- モバイルGPUでの大量カラム描画は負荷が高く、端末に応じた自動間引きの精度に伸びしろ
- 配色・凡例のアクセシビリティ(色覚多様性対応)をさらに詰めたい
- データが2020/2015時点の静的同梱で、更新の自動化パイプラインは未整備
What's next
今後の展望
- メッシュ人口や国勢調査の時系列アニメーションなど、テーマの追加
- ユーザーが指標やしきい値を組み合わせて可視化を作れるビルダー化
- 3D建物(地理院/OSM由来)との重ね合わせや、ピッチ演出の強化