はじめに
オープンソースのGISにはQGISというド定番・大正義が存在しますが、インストールの手間、投影法など、若干敷居が高いです(初心者にとって)。ウェブ上で公開されている多数のオープンGISデータ(国土数値情報など)の内容をすぐに確認出来る、シンプルなWebGISがあれば便利なんじゃないかと思い開発したのがVanillaGISです。
VanillaGIS
Vanilla GIS
GitHub - Kanahiro/vanilla-gis
使用例(北海道のバス・鉄道路線図)
技術概要
主な使用ライブラリ
- Leaflet(JavaScript)
- Flask(Python)
フロントエンド
Leafletと以下の外部プラグインを使用しています。
- Leaflet.Control.Custom
- Leaflet.Control.Draw
- Leaflet.Control.Appearance(自作プラグイン)
バックエンド
- Flask
- SQLite
- SQLAlchemy
技術詳細
バックエンド(Flask)
前提としてRESTful APIを意識し、URLはリソースを参照する形式になっています。
/(ルート)
- GET
地図画面の表示。
- POST
外部ファイル(.zip(シェープファイル), .geojson)を投げるとjsonデータを返します。
.zipファイルの中身はシェープファイル(.shp, .shx, dbf)である必要があります。
pyshpモジュールを利用し、内部的にjsonに変換しています(LeafletはGeoJSONを読み込めるため)。
オープンデータで提供されるシェープファイルの多くはShift-JISエンコーディングですが、UTF-8やその他のエンコードである場合も踏まえ、通常利用されるすべてのエンコードに対応させています。Pythonでデコードする際、エンコードが相違しているとUnicode Errorが発生します。事前に主要なエンコードをリストにしておき、デコードでエラーが発生しなくなるまで各エンコードを順番にトライします(以下の記事で紹介しています)。
シェープファイルをGeoJSON形式に変換する - Qiita
/user_map/
- GET
ユーザーが作成し保存したカスタムマップの、レイヤーデータ以外を返します。
- PUT
ユーザーが作成し保存したカスタムマップの、レイヤーデータを返します。
GETで返すと、レイヤーデータが読み込むまでページ全体の読み込みが完了しないため、GETとはレスポンスを分離しています。Fetchにより非同期でレスポンスを取得します。
- POST
ユーザーが作成したカスタムマップをDBに保存します(公開されているアプリでは実装していません)。
/export
これだけnot RESTfulです。
- POST
ユーザーが作成し保存したレイヤーを投げるとjsonデータが返ってきます。
フロントでは、返ってきたデータを.geojsonとしてダウンロードさせます。
FlaskとJavaScriptのFetch通信でダウンロードさせる方法 - Qiita
フロントエンド
シングルページアプリケーションで、常にindex.htmlが表示されます。
/user_map/では、index.htmlにDBから取得したデータを渡しています。
Leafletと外部プラグイン(各種Control)を組み合わせる事でGUIを実装しています。
使用しているControl
- L.control.scale
純正プラグイン。地図の縮尺を表示。
- L.control.custom
外部プラグイン。htmlを記述する事でかなり自由にGUIを作成可能。
- L.control.draw
外部プラグイン。手書き図形の作図機能。
- L.control.Appearance
自作プラグイン。純正のL.control.layerと、外部プラグインのL.control.Opacityを参考に作成。
ベースマップ切り替え、オーバーレイのオンオフ、レイヤーごとの透過度設定、オーバーレイごとの色設定、オーバーレイの削除。
各レイヤーをひとつのプラグインで管理したくて作成(Chromeで動作確認済み)。
※レイヤーのプロパティにcolorを設定しないと、色設定機能は動作しないなど、まだ未完成です。
GitHub - Kanahiro/Leaflet.Control.Appearance
外部ファイル読み込み
ウィンドウにドラッグドロップする事で、ファイルを読み込みます。
対応している形式は.zip(.shp, .shx, .dbfのアーカイブ)か.geojsonです。
すべてFetchでサーバーに投げて、返ってきた.jsonをLeafletマップに追加します。