地図を塗りつぶしたくて GeoJSON

2021/05/28 (Fri) 社内 LT 会で発表した内容です。

### 参考文献
- RFC7946 - The GeoJSON Format

### その他
- 地理情報システム - Wikipedia
- 国土数値情報ダウンロードサービス
- P2P地震情報 - スマホ・PCで「揺れた！」を共有

Transcript

1. 地図を塗りつぶしたくて GeoJSON 2021/05/28 Takuya Yamaguchi / たいぷらいた～ (@no_clock)
2. 近況：ミニデジタルサイネージ (5 inch) に雨雲の動きを足した たいぷらいた～ (@no_clock) 2 モニタ下に配置 雨雲の動き: 気象庁 (CC BY 4.0) / 地図は地理院タイルを加工して利用 自動更新しないため、 cron と xautomation で 10 分おきに更新ボタンを押している
3. 地図を塗りつぶしたい 3
4. 地図を塗りつぶしたい 4 • 地震情報は XML (気象庁防災情報XML) で提供されている • XML をもとに、右図のように地域を塗りつぶしたい 地震情報及び地図: 2021/05/01 10:27 頃の地震による震度速報について、気象庁データを抜粋 (CC BY 4.0)
5. 5 ペイントツールのバケツ (Flood fill, Seed fill) • 離島や飛び地は… • アンチエイリアスは… • 県境未確定の富士山 マスク画像 • 画像の準備がすごい面倒 • 二度とやりたくない 地図: 地理院タイルを加工して利用 GeoJSON を知る前に浮かんでいた 地図を塗る方法 と で ラスタ データ ラスタ データ
6. 塗り方調べるの難しい 6 「地図　塗り方」　 → ツールの使い方 「地図　塗り方　アルゴリズム」 → 四色定理 「地図　塗りつぶし　アルゴリズム」 → Flood fill 「都道府県　塗りつぶし」 → 　　　　　　　　　　　　　　　　　　　 旅行のお供 に！ 行ったことのある都道府県
7. 気象庁 Web サイトは どうやってるの…？ 7
8. 気象庁 Web サイト vs. デベロッパーツール 8 Network Throttling しつつ凝視 👀 • 謎の JSON ファイル • 謎の 座標配列 • 日本の緯度経度っぽい値 データ: 気象庁データを抜粋 (CC BY 4.0) / 利用規約上、こうした解析行為は禁止されていません https://www.jma.go.jp/jma/kishou/info/coment.html
9. GeoJSON 9
10. GeoJSON (RFC7946) 10 RFC7946 https://datatracker.ietf.org/doc/html/rfc7946 地理データ構造を JSON に • Point (座標) • LineString (座標を結ぶ線) • Polygon (多角形) • MultiPoint (Point[]) • MultiLineString (LineString[]) • MultiPolygon (Polygon[]) • … 気象庁 地震情報の GeoJSON データ (CC BY 4.0) から東京都 23 区のみ抜粋 GitHubはGeoJSONのレンダリングに 対応している[13]。 GeoJSON - Wikipedia https://ja.wikipedia.org/wiki/GeoJSON
11. GeoJSON で塗りつぶすには GeoJSON 地域ごとの MultiPolygon 定義 座標変換 緯度・経度 →ピクセル ピクセル 座標 多角形パス [135.xx, 35.xx] [138.xx, 33.xx] [10, 15] [20, 24] 描画
12. GeoJSON で塗りつぶした いい感じ 12 地震情報: 2021/05/01 10:27 頃の地震による気象庁の震度速報 (CC BY 4.0) / 地域データ: 気象庁 (CC BY 4.0) 地図: 地理院タイルを加工して利用
13. おまけ 詳しくはおググり頂いて… • GIS (Geographic Information System, 地理情報システム) • 国土数値情報 Visual Studio は標準機能で JSON からクラスを生成できる 13 地震情報: 2021/05/01 10:27 頃の地震による気象庁の震度速報 (CC BY 4.0) / 地域データ: 気象庁 (CC BY 4.0) 地図: 地理院タイルを加工して利用