空間情報可視化webアプリケーションを作った話

はじめに

名古屋の大学でコンピュータサイエンスを専攻しているdaishin(@kawara_13)というものです。
今年の4月ごろから名古屋のoptimindという会社でインターンとして働いています。
今回、空間情報可視化アプリケーションの作成をしましたので、その過程を簡単にまとめたいと思います。

Optimindについて

https://www.optimind.tech/
「世界のラストワンマイルを最適化する」をミッションに掲げ、ラストワンマイルの物流ルート最適化を目指す名古屋大学発のスタートアップ企業です。

プロジェクトについて

関連技術

実際に作ったものを紹介する前に、空間情報に関連する技術について紹介します。
まだまだ勉強中ですので、誤った記述などがあればご指摘いただけると幸いです。

地理空間情報

空間上の、ある地点やある区域の位置を表す情報や、それに関連する情報のこと。
地図上に情報を付与して提供したり、地図情報の分析などで活用されている。
具体的な活用例を挙げると、カーナビやハザードマップなど。

GIS（Geographic Information System：地理情報システム）

地理空間情報の管理や加工、可視化などの高度な分析を可能にするための技術である。
空間情報をコンピューター上で地図上に可視化し、情報の関係性や傾向などをわかりやすく示すのが大きな役割である。
参考：https://www.esrij.com/getting-started/

ウェブタイル・タイルサーバー

地図データをズームレベルと座標に基づいてタイルとして整理したものと、リクエストに応じてタイルを返すサーバー。タイルにはラスタータイルとベクタータイルの2種類ある。

• ラスタータイル
  • タイルを画像としてサーバーに保存しておき、リクエストに応じてその画像を返す
  • 描画速度がはやい
• ベクタータイル
  • サーバーに保存されているベクトルデータを元にリクエストに応じてタイルを作成してその画像を返す
  • ラスタータイルよりも柔軟性がある
  • ラスタータイルと比べると描画速度はやや劣る

作ったもの

optimindでは地理空間情報を扱っており、その空間情報を処理する際に結果を可視化して確認する必要があります。
これまでは、クラウド上で処理されたデータをS3などのクラウドストレージサービスを介して、ローカルにダウンロードし、qgisなどのgisアプリケーションで描画していたのですが、このようなやり方では次のような問題点がありました。

• 本来の目的であるデータの処理の試行錯誤のサイクル時間が遅くなる
• 描画結果を共有しづらい
• クラウドのノート環境での描画では、データを全てクライアントサイドにロードする必要があるので、全国の位置データなどを描画するのが困難

そのため、これらの問題を解決するために、処理を終えて書き出されたデータがすぐにアプリケーション上に反映され、ユーザーがそのデータをレイヤーとして地図上に可視化することができるwebアプリケーションを作成しました。

ちなみに作成したアプリケーションは「mappit」と名付けられております。

アーキテクチャ図

mappitは次のような構成図になっています。

• mappit client
  • Reactを使用
  • 必要な空間情報をブラウザに描写する
  • 描写に必要なベクタータイルはmappit serverから取得
  • タイルの描写にはdeck.glを使用
  • azure app serviceにデプロイ
• mappit server
  • Expressを使用
  • ベクタータイルを返すタイルサーバー
  • リクエストに基づいてPostGISから必要なデータを取得しタイルサーバーを作成
  • blob storageに書き出されたCSVファイルをPostGISにうつす
  • ユーザー認証機能つき
  • dockerでコンテナ化し、azure app serviceにデプロイ

↑ちなみにアプリケーションはこんな感じです。

serverのデータベースにはPostgreSQLを利用し、空間情報を扱えるようにするため、PostGISを導入しました。
しかし、データの処理に利用しているライブラリーの都合で、GISデータをそのまま書き出すことができなかったため、blob storageに書き出されたcsvファイルから空間情報を読み取ってGISデータに変換し、データベースにアップロードする、というようにしました。
blob storageにデータが書き込まれたらazure functionsがトリガーされ、mappit serverにリクエストを送り、書き込まれたデータがGISデータに変換されてデータベースに書き込まれます。

また、開発にはGithub Actionsを利用し、デプロイを自動化しています。

今後の課題

現在はタイルをリクエスト時に生成しているため、反映までに少し時間がかかってしまいます。そのため、キャッシュ機能の強化やラスターデータの導入などを行う必要があると思われます。
また、表示できるレイヤーの種類が少ないため、分析環境を整えるためにも、増やす必要があると考えています。
さらに、直接的な課題ではないですが、将来的にはリアルタイムの交通状況などを反映したり、描画内容を簡単に共有できる機能などを追加できたらいいなと思っています。

最後に

mappitの開発を通していろいろなことを学ぶことができました。
自分に足りていないところや、理解が及んでいない部分も見えてきたので、これからのモチベーションにもなりました。
とても良い経験をさせていただいて、optimindさんにはとても感謝しています!