Y

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

JavaScriptとMySQLでGISを作ってみよう
2019.7.12
宮内 はじめ @miyauchi
山﨑 由章 @yyamasaki1

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

事前準備できてますか？

http://bit.ly/31SK9s3

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

目次

1. 自己紹介
2. 本日のゴール
3. MySQLのGIS機能の紹介
4. 本日の流れ
5. 本日の開発環境
6. 座学
7. 演習
8. 参考情報このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

目次

1. 自己紹介
2. 本日のゴール
3. MySQLのGIS機能の紹介
4. 本日の流れ
5. 本日の開発環境
6. 座学
7. 演習
8. 参考情報このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

自己紹介
宮内 はじめ名前：

データ分析やビジュアライズ、GISが大好きなエンジニアです。
シビックテック活動もやってます。

Twitter: @miyauchi
Facebook: https://fb.me/hajimemiyauchi
WEB: https://www.mylab.jp/※FB申請もらえる場合はどこで会ったかメッセージもらえるとありがたし。

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

Y

自己紹介
山﨑 由章（やまさき よしあき）

名前：・MySQLのセールスコンサルタント（オラクルの中の人です）
・GIS分野でのMySQLの普及促進を頑張っています！
・美味しいものを食べることが好きなので、おススメの飲食店情報があれば教えて下さい！笑・GISの聖地の1つである(？)明石市出身です！

Twitter: @yyamasaki1
Facebook: https://www.facebook.com/yoshiaki.yamasaki.2※FB申請もらえる場合はどこで会ったかメッセージもらえるとありがたし。
(© 2019 宮内さん)

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

目次

1. 自己紹介
2. 本日のゴール
3. MySQLのGIS機能の紹介
4. 本日の流れ
5. 本日の開発環境
6. 座学
7. 演習
8. 参考情報このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日のゴール

Google Maps APIとMySQLを使って、オープンデータを可視化してみましょう。
http://play.mylab.jp/webgis-hands-on-mysql/

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日のゴール・・・アーキテクチャ
バックエンドデータベース＋アプリケーション

MySQL

Apache+PHP

位置情報データの保存と集計(SQL)

ブラウザから要求されたデータをデータベースから取得し出力(PHP)

この資料ではここを重点的に説明します

大したことしてない
PHP以外でもOK

フロントエンドブラウザ

HTTP通信

共通のフォーマットを使って情報をやりとり(JSON)

Google Maps
APIブラウザ

サーバから情報を取得したり地図の描画と操作(JavaScript)

JavaScriptの知識が必要ネッ
トに情報溢れてます。

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日のゴール・・・今日やらないこと
以下は本資料中では対象としません。
サーバは及びキー、データはこちらで準備したものを使用します。
●●●

サーバの構築○ PHPやMySQLのインストール
Google Maps APIのAPIキー取得
データの準備○ オープンデータのダウンロードや加工○ MySQLへのインポート

上記については参考情報としてURLを掲載しています。

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

目次

1. 自己紹介
2. 本日のゴール
3. MySQLのGIS機能の紹介
4. 本日の流れ
5. 本日の開発環境
6. 座学
7. 演習
8. 参考情報Y

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

MySQL8.0の位置情報機能の紹介● MySQLの標準機能として使える○ MySQLをインストールするだけで使用可能● Geometryを扱うデータ型、各種のSpatial
関数、空間インデックスが使用可能● MySQL 8.0でSRIDにも対応

Y

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

MySQL8.0の位置情報機能の紹介

どの海岸線との距離が近いの？

何km？

たとえば距離計算

Y

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

MySQL8.0の位置情報機能の紹介
SELECT
name, ST_Distance([ある場所の緯度経度], geom)↑①ST_Distanceで求めた距離を取得
FROM
coastline↑②海岸線ポリゴン(国土数値情報)のテーブルから検索
ORDER BY
ST_Distance([ある場所の緯度経度], geom) ASC↑③ST_Distanceで降順に並べる
LIMIT
1↑④最短距離のみ取得

たった8行で書ける。これプログラムでやると結構大変。

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

目次

1. 自己紹介
2. 本日のゴール
3. MySQLのGIS機能の紹介
4. 本日の流れ
5. 本日の開発環境
6. 座学
7. 演習
8. 参考情報このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日の流れ

1. FTPでサンプルファイルをダウンロード
2. エディタでファイルを編集してFTPでアップロード
3. ブラウザで動作確認
a. 動けばOKb. 動かなかったら2からやり直すこのスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

目次

1. 自己紹介
2. 本日のゴール
3. MySQLのGIS機能の紹介
4. 本日の流れ
5. 本日の開発環境
6. 座学
7. 演習
8. 参考情報このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日の開発環境
使うソフトウェアは主にこの3つ

1. FTPソフト
2. エディタ
3. ブラウザこのスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日の開発環境・・・FTPソフト

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日の開発環境・・・FTPソフト
英語が苦手な人は日本語化しておきましょう

Japanese(ja_JP)

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日の開発環境・・・FTPソフト

ホスト： play.mylab.jp
プロトコル：FTP
ログオンの種類：通常
ユーザ：配布パスワード：配布

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

ユーザ: guest111
パスワード: guest111

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日の開発環境・・・エディタ
UTF-8を扱うことができれば普段お使いのエディタで構いません。私はVisual Studio Codeを使います。このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日の開発環境・・・ブラウザ
Chromeのデベロッパーツールを使います。

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

本日の開発環境・・・ブラウザ

http://play.mylab.jp/<アカウント名>/

各自のアカウント名でアクセスしてみてください。

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

目次

1. 自己紹介
2. 本日のゴール
3. MySQLのGIS機能の紹介
4. 本日の流れ
5. 本日の開発環境
6. 座学
7. 演習
8. 参考情報このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

座学・・・緯度経度● 緯度経度○ 緯度■ 赤道を0度として南北にそれぞれ90度。(北緯、南緯)■ 英語ではlatitude。latと略されることが多い。
■ プログラムでは北緯を＋、南緯を−で扱う場合が多い。
○ 経度■ 子午線を0度として東西に180度(東経、西経)。
■ 英語ではlongitude。lonやlngと略される■ プログラムでは東経を＋、西経を−で扱う場合が多い。

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

座学・・・緯度経度● ライブラリや関数によって緯度、経度の順に指定するものもあ
れば、経度、緯度の順番で指定するものもあるので注意。
○ 例: Google Maps API■ google.maps.LatLng(lat, lng)
○ 例：MySQL■ ST_GeomFromText(‘POINT(lat lng)’, 4326);○ 例: PostGIS■ ST_GeomFromText(‘POINT(lng lat)’, 4326);

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

座学・・・緯度経度

この緯度と経度の軸の指定順をaxis orderといい、且つそれが比較対象となるPostgreSQLとMySQLで逆であるために話題になったりしました。
※WKTのaxis orderが標準で逆。
オプションで指定することも可。

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

座学・・・ズームレベル● ズームレベル(縮尺)○ 0〜21(Google Mapsの場合)○ 数字が大きくなるほど詳細になります。

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

Y

座学・・・データベース

テーブル

テーブル
行/レコード列/カラムこのスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

Y

座学・・・テーブル
数値型

文字列型

GEOMETRY型

id

name

HEX(geom)

1〇〇公園

E610000001010000004913EF00CFA9614
0A8FE412443844540

2〇〇センター

E610000001010000000000000000E06040
75CB0EF10F914640

テーブルの作成：
CREATE TABLE test (id INTEGER PRIMARY KEY AUTO_INCREMENT, name
CHAR(50), geom GEOMETRY);
データの挿入：INSERT INTO test(id, name, geom)
VALUES (1, '〇〇公園', ST_GeomFromText('POINT(43.033299 141.306519)', 4326));

Y

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

INSERT INTO mcdnald(name, address, geom)
VALUES('名前','住所', ST_GeomFromText('POINT(43.0 141.0)', 4326));https://dev.mysql.com/doc/refman/8.0/en/gis-wkt-functions.html#function_st-geomfromtext

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysqlY

座学・・・データベース(SQL)

SELECT<列名>
FROM<テーブル名>
WHERE
<条件式>

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

Y

座学・・・データベース(SQL)
testテーブルから、id、name、geom列を取得するSQLSELECTid, name, HEX(geom)
FROM
test
結果
id

name

HEX(geom)

1〇〇公園

E610000001010000004913EF00CFA96140A8
FE412443844540

2〇〇センター

E610000001010000000000000000E0604075C
B0EF10F914640

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

Y

座学・・・データベース(SQL)
testテーブルから、id、name、geom列を取得するSQLSELECTid, name, ST_AsText(geom)
FROM
test
結果
id

namegeom1〇〇公園

POINT(43.033299 141.306519)

2〇〇センター

POINT(45.133299 135)

Y

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

https://dev.mysql.com/doc/refman/8.0/en/gis-format-conversion-functions.html#function_st-astext

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

Y

座学・・・データベース(SQL)
testテーブルから、id、name、geom列を取得するSQLSELECT
id, name, ST_AsGeoJSON(geom)
FROM
test
結果
id

namegeom1〇〇公園{"type": "Point", "coordinates": [141.306519, 43.033299]}

2〇〇センター{"type": "Point", "coordinates": [135.0, 45.133299]}Y

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

https://dev.mysql.com/doc/refman/8.0/en/spatial-geojson-functions.html

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

目次

1. 自己紹介
2. 本日のゴール
3. MySQLのGIS機能の紹介
4. 本日の流れ
5. 本日の開発環境
6. 座学
7. 演習
8. 参考情報このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

演習
http://bit.ly/git-web-gis

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql$db = mysqli_connect('localhost','guest', 'Test@1234', 'opendata');このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

目次

1. 自己紹介
2. 本日のゴール
3. MySQLのGIS機能の紹介
4. 本日の流れ
5. 本日の開発環境
6. 座学
7. 演習
8. 参考情報このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

Y参考情報● MySQLのインストール方法○ Linux■■

https://dev.mysql.com/doc/refman/8.0/en/binary-installation.html(汎用的)https://dev.mysql.com/doc/refman/8.0/en/linux-installation.html(ディストリビューション依存)○ Windows■

https://dev.mysql.com/doc/refman/8.0/en/windows-installation.html○ Mac■

https://dev.mysql.com/doc/refman/8.0/en/osx-installation.html○ 解説資料■MySQL 8.0入門セミナー講演資料 (インストール、アーキテクチャ基礎編)
https://www.mysql.com/jp/why-mysql/presentations/mysql-80-for-beg
inners-install-doc-ja/

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

Y

参考情報● 参考資料○ MySQLのSpatial関数一覧■ https://dev.mysql.com/doc/refman/8.0/en/sp

atial-function-reference.html○ @sakaikさんの資料■ MySQLのGIS機能とか超入門 ～MyNA会2018年7月
https://www.slideshare.net/sakaik/mysqlgis-myna20187-107186395■ 周辺知識から理解するMySQL の GIS機能～ClubMySQL #4
https://www.slideshare.net/sakaik/mysql-gis-clubmysql-4

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

Y

参考情報● 参考記事○ MySQL 8.0にPOINTデータ(経度、緯度)を入れてMySQL Workbenchから検索し、OpenStreetMapで表示する
https://qiita.com/yyamasaki1/items/c05f60357c69936fa0e7○ MySQL 8.0にシェープファイルを取り込んで、MySQL Workbenchでポリゴンの形を確認する
https://qiita.com/yyamasaki1/items/073450d6987565223ba0

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

参考情報● リソース○ Google Maps API■ https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja■ https://developers.google.com/maps/documentation/javascript/?hl=ja● 緯度経度を調べる方法例■ https://user.numazu-ct.ac.jp/~tsato/webmap/sphere/coordinates/advanced.html

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

参考情報● 緯度経度付きオープンデータが手に入るサイト○ 国土数値情報 http://nlftp.mlit.go.jp/ksj/○ e-stat https://www.e-stat.go.jp/

https://www.youtube.com/watch?v=2eBWFQiz
BjU○ 地震ハザードステーション http://www.j-shis.bosai.go.jp/

このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

マクドナルドのJSONをMySQLにインサートする<?php$json = file_get_contents('mcdnald.json');$vars = json_decode($json, true);foreach($vars as $v){echo 'INSERT INTO mcdnald (name, address, geom) VALUES ';echo '(';
echo "'" . $v['name'] . "',";
echo "'" . $v['address'] . "',";
echo "ST_GeomFromText('POINT(";echo $v['latitude'] . ' ';echo $v['longitude'];echo ")', 4326)";
echo ');';
echo "\n";}このスライドのURL ▶ http://bit.ly/foss4g-2019-mysql

アンケート
http://bit.ly/2Dx5ZJ5