GeographicInformationSystemDevelopmentOverviewForWindows

Geographic Information System Development Overview For Windows.
PostgreSQL, PostGIS, Node.js, Express4, AngularJs and Google Maps API.

Transcript

1. 地理情報システム開発概要 (for Windows) 2014-06-16 木村 憲規 @KazunoriJs
2. この資料について • サンプルアプリケーションを題材に、地理情報シス テムの開発について解説します。 • サンプルアプリケーションのソースコードは以下で公 開しています。 – https://github.com/Kazunori-Kimura/express-gis 2
3. サンプルアプリケーション概要 1. 3
4. サンプルアプリケーション 4
5. アプリケーションの概要 • 行政区域のリストから市区町村を選択すると、そ の市区町村にある小学校とその小学校区が Google Map上に表示されます。 • 小学校をクリックすると、その小学校名と住所が 吹き出しで表示されます。 5
6. 動作環境について • Windows 7 • Google Maps API v3 • PostgreSQL v9.3.4 • PostGIS v2.1.3 • Node.js v0.10.28 • Express v4.4.2 • AngularJS v1.2.17 6
7. データソースについて • 国土交通省が運営する、「国土数値情報 ダウ ンロードサービス」からデータをダウンロードします。 – 今回は「行政区域」と「小学校区」の大阪府、兵庫 県のデータを使用します。 7
8. 国土数値情報 ダウンロードサービス 8 http://nlftp.mlit.go.jp/ksj/
9. 用語について (1) • GIS – 地理情報システム (Geographic Information System) • Shape形式ファイル – GISデータの規格で、ほとんどのGISソフトが対応している。 • JPGIS (地理情報標準) – 日本の地図やGISデータの標準規格。対応しているGIS ソフトはほぼ無いため、Shape形式等に変換が必要 9
10. 用語について (2) • geometry, geom – 平面空間データ。座標情報の集合。 • JSON – JavaScriptObjectNotation – JavaScriptにおけるObjectの表記法をベースとした データ記述言語。 • GeoJson – 平面空間データをJSON形式で表すためのフォーマッ ト。 10
11. POSTGRESQL, POSTGISの インストール 2. 11
12. 12 PostgreSQL 9.3 のインストール
19. 19 チェックを外す
20. 20 PostGIS 2.1.3 のインストール
21. 21 チェックを入れる
26. 26 「はい」を選択
27. 27 「はい」を選択
28. 28 「はい」を選択
30. 30 スタートメニューから「pgAdminIII」 を起動する PostGISインストール時に指定した データベースが生成されている データベースを確認したらpgAdminIIIを終了します。
31. PATHの設定 • 「C:¥Program Files¥PostgreSQL¥9.3¥bin」にPATHを通 します。 • psqlがコマンドプロンプトから実行できる事を確 認します。 – `psql --version` 31
32. GISデータの登録 3. 32
33. データのダウンロード • 国土数値情報 ダウンロードサービスから大阪府、 兵庫県の行政区域データおよび小学校区データ をダウンロードします。 • データ形式はJPGIS2.1を選択します。 – A27-10_27_GML.zip – A27-10_28_GML.zip – N03-130401_27_GML.zip – N03-130401_28_GML.zip • 適当なフォルダに解凍します。 33
34. SQLファイルの生成 • ダウンロードしたshapeファイルからsqlファイルを 生成します。 – shp2pgsqlコマンドを使用します。 – 標準出力にSQLが返されるので、ファイルにリダイレク トします。 – https://gist.github.com/Kazunori-Kimura/2fa56df2fad38becba79 34 > shp2pgsql -s 4612 -D -i -I -W cp932 D:¥tmp¥A27-10_27_GML¥A27-10_27-g_PublicElementarySchool.shp A27-10_27-g_PublicElementarySchool > A27-10_27-g_PublicElementarySchool.sql ※ 実際には改行せず、1行で入力してください。
35. データの取込み • shp2pgsqlで生成したSQLを実行します。 • ここまでの手順を繰り返し、6つのshapeファイル をすべて取込みます。 35 > psql -U postgres -d postgis_21_sample -f A27-10_27-g_PublicElementarySchool.sql ※ 実際には改行せず、1行で入力してください。
36. データの確認 36 6テーブル生成されている
37. テーブル定義 4. 37
38. 地理情報データテーブル • 「3. GISデータの登録」の手順により、3種類 * 2府県のテーブルが生成されます。 • 各テーブルの内容について、簡単に解説します。 – 詳細はダウンロードサービスの各データのページを確 認してください。 38
39. a27-10_xx- g_publicelementaryschool • 小学校の位置情報 – gid: 連番 – a27_001: 行政区域コード (JIS5) – a27_002: 設置主体 – a27_003: 学校名 – a27_004: 住所 – geom: Point 39
40. a27-10_xx-g_schooldistrict • 小学校の校区 – gid: 連番 – a27_005: 行政区域コード (JIS5) – a27_006: 設置主体 – a27_007: 学校名 – a27_008: 住所 – geom: MultiPolygon 40
41. n03-13_xx_130401 • 行政区域データ – gid: 連番 – n03_001: 都道府県 – n03_002: 支庁名 (北海道のみ) – n03_003: 郡・政令都市名 – n03_004: 市区町村名 – n03_007: 行政区域コード (JIS5) – geom: MultiPolygon 41
42. サンプルアプリケーションの セットアップ 5. 42
43. Node.js • Node.jsは高速、スケーラブルなネットワークアプ リケーションを簡単に構築するためのChromeの JavaScriptランタイム上に構築されたプラット フォームです。 – Windows向けのインストーラが用意されています。 – 最新の安定版(2014-06-16時点では v.0.10.28) をインストールしている前提で進めます。 43
44. npm: Node Package Manager • npm(https://www.npmjs.org/) はNode のライブラリ・パッケージを管理するコマンドライン ツールです。 – Nodeのインストールを行うとnpmが合わせてインス トールされます。 44
45. Chocolatey • Chocolatey(http://chocolatey.org/)は Ubuntuのapt-get、RedhatLinuxのyumの ような、パッケージ管理ツールです。 – コマンドプロンプトにて、以下のコマンドを実行するとダ ウンロード・インストールが行われます。 45 @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new- object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%¥chocolatey¥bin
46. Python2.7 • ChocolateyでPythonをインストールします。 – npmでダウンロードされるモジュールの一部は、インス トール時にPC環境に合わせてコンパイルが実行され る場合があります。 – その際、npmがPythonスクリプトを実行します。 46 > cinst python2
47. Visual Studio • Windowsの場合、npmのコンパイルには Visual Studioに付属のC/C++コンパイラが使 用されるようです。 • Visual Studio 2013 Expressなど、適当な バージョンのVisual Studioをインストールしてお きます。 47
48. Git • Windowsでgitを使えるように、 msysgit(http://msysgit.github.io/)をイ ンストールします。 – コマンドプロンプトにてgitコマンドを使用出来るように セットアップしておくと楽です。 48
49. bower • Nodeで作られた、Twitter Bootstrapや jQueryなどのクライアントサイドで動作する JavaScriptやCSSのライブラリ管理ツールです。 • npmでインストールします。 – コマンドプロンプトを管理者として実行してください。 49 > npm install -g bower
50. サンプルアプリケーションのインストール > git clone git@github.com:Kazunori-Kimura/express-gis.git > cd express-gis > npm install > bower install 50 ※ env.jsonにデータベースの接続情報を記載してください。
51. サンプルアプリケーションの起動 > node app.js 51 3000番ポートでWebサーバーが立ち上がります。 ブラウザから、<http://localhost:3000/>にアクセスしてください。 アプリケーションを終了する場合は、起動したコマンドプロンプトにて 「Ctrl+C」で強制終了してください。
52. サーバーサイド プログラムの概要 6. 52
53. 機能概要 • ２つの機能を提供します。 – ブラウザで表示するHTML, CSS, JavaScriptを返 す – 行政区域、小学校、校区の情報をJSON形式で返 すREST API • データの参照のみ、更新機能は実装していません。 53
54. REST API設計 URL 機能 GET: /areas 全ての行政区域情報を取得する。 GET: /areas/:code 指定された行政区域コードを元に、 行政区域のGISデータを取得する。 GET: /areas/:code/schools 指定された行政区域内にある全て の小学校を取得する。 GET: /areas/:code/districts 指定された行政区域内にある全て の小学校区を取得する。 54
55. GISデータの取得 55 • PostGISの機能により、通常のデータと同じよう にSQLでGISデータを取得できます。
56. 当アプリで使用するPostGISの機能 関数名 内容 ST_Union Geometryを結合します。group byと 共に使用します。 ST_Centroid Geometryの重心を取得します。 ST_AsGeoJSON GeometryをGeoJSONに変換します。 56
57. クライアントサイド プログラムの概要 7. 57
58. 機能概要 • データベースに登録されている行政区域のリスト を表示します。 • リストから選択された行政区域内の公立小学校 およびその校区の情報をサーバーから取得し、 Google Mapに表示します。 • 画面の制御にはAngularJSを使用しています。 58
59. ありがとうございました！ ご質問や間違いのご指摘などは 以下の連絡先にお願い致します。 mail: kazunori.kimura.js@gmail.com twitter: @KazunoriJs 59