react-map-gl + node-mapnikでWebベースのGISアプリケーションを作った

react-map-gl + node-mapnikでのGIS Webアプリケーションを作った

この記事はFOSS4G Advent Calendar 2018の11日目の記事です。

Lgis
Lgisという、WebベースのGISアプリケーションを作りました。

github.com

デモサイト的なものはまだありません。。近々作る予定です。

機能

  • ブラウザ上で動作します。
  • PostGIS上に保存されている位置情報データを可視化する事ができます。
    • PostGISのテーブルに対してSQLを書く事で、観点に合わせてデータを可視化する事ができます。
      • 例) WHERE句を使い、任意の地域に限定してデータを可視化
      • GROUP BY句で、任意の市区町村データを集計して可視化

モチベーション

位置情報データから何らかの知見を得たい時、QGIS等のGISアプリを使って地図上に可視化するのが一般的だと思います。
QGISは、データの表現力高く、対応するデータソースも多い素晴らしいアプリケーションですが、
処理速度が遅かったり、ドリルダウン向きの機能が弱かったりと、仮説検証を繰り返しながらデータ分析をする上では痒い所に手が届かない印象があります。
最近では、Kepler.gl というモダンなGISアプリもありますが、データソースがテキストのみというのが厳しい。
また、Re:DashやTableau等のBIツールは簡単にデータをドリルダウンする事ができますが、地図描画の機能自体がまだまだ弱いです。
そこで、両者の良さを活かしたツールを作れないかと思い、開発に至りました。

利用した技術

バックエンド

  • node-mapnik
    • ベクタタイルを使いたかったので、対応している地図サーバの中で一番人気そうなこちらを選びました

フロントエンド

  • react-map-gl
    • Reactで書いたほうが後々拡張しやすいかなと思い、Mapbox-GL-JSのReactラッパーのこちらを採用しました。
  • Redux
  • TypeScript

使い方

yarn install
yarn build
yarn start

react-map-glを使っている関係上、Mapbox Access Tokenが必要になります。

今後

ベクタータイルはPostGISにかける負荷が結構多いようで、手元の環境では地物が500万レコードぐらいを超えるとサーバーが固まります。
これを解消するために、タイルのキャッシュ機能を追加してあげる必要があるかなと思います。