react-map-gl + node-mapnikでWebベースのGISアプリケーションを作った
react-map-gl + node-mapnikでのGIS Webアプリケーションを作った
この記事はFOSS4G Advent Calendar 2018の11日目の記事です。
Lgisという、WebベースのGISアプリケーションを作りました。
デモサイト的なものはまだありません。。近々作る予定です。
機能
- ブラウザ上で動作します。
- PostGIS上に保存されている位置情報データを可視化する事ができます。
モチベーション
位置情報データから何らかの知見を得たい時、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万レコードぐらいを超えるとサーバーが固まります。
これを解消するために、タイルのキャッシュ機能を追加してあげる必要があるかなと思います。