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

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

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

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

Transcript

1. 地図を塗りつぶしたくて
   GeoJSON
   2021/05/28
   Takuya Yamaguchi / たいぷらいた～ (@no_clock)
   

   View Slide

2. 近況：ミニデジタルサイネージ (5 inch) に雨雲の動きを足した
   たいぷらいた～ (@no_clock)
   2
   モニタ下に配置
   雨雲の動き: 気象庁 (CC BY 4.0) / 地図は地理院タイルを加工して利用
   自動更新しないため、
   cron と xautomation で
   10 分おきに更新ボタンを押している
   

   View Slide

3. 地図を塗りつぶしたい
   3
   

   View Slide

4. 地図を塗りつぶしたい
   4
   ● 地震情報は XML (気象庁防災情報XML) で提供されている
   ● XML をもとに、右図のように地域を塗りつぶしたい
   地震情報及び地図: 2021/05/01 10:27 頃の地震による震度速報について、気象庁データを抜粋 (CC BY 4.0)
   

   View Slide

5. 5
   ペイントツールのバケツ
   (Flood fill, Seed fill)
   ● 離島や飛び地は…
   ● アンチエイリアスは…
   ● 県境未確定の富士山
   マスク画像
   ● 画像の準備がすごい面倒
   ● 二度とやりたくない
   地図: 地理院タイルを加工して利用
   GeoJSON を知る前に浮かんでいた
   地図を塗る方法
   と で
   ラスタ
   データ
   ラスタ
   データ
   

   View Slide

6. 塗り方調べるの難しい
   6
   「地図　塗り方」　 → ツールの使い方
   「地図　塗り方　アルゴリズム」 → 四色定理
   「地図　塗りつぶし　アルゴリズム」 → Flood fill
   「都道府県　塗りつぶし」 →
   　　　　　　　　　　　　　　　　　　　
   旅行のお供
   に！ 行ったことのある都道府県
   

   View Slide

7. 気象庁 Web サイトは
   どうやってるの…？
   7
   

   View Slide

8. 気象庁 Web サイト vs. デベロッパーツール
   8
   Network Throttling しつつ凝視 👀
   ● 謎の JSON ファイル
   ● 謎の 座標配列
   ● 日本の緯度経度っぽい値
   データ: 気象庁データを抜粋 (CC BY 4.0) / 利用規約上、こうした解析行為は禁止されていません https://www.jma.go.jp/jma/kishou/info/coment.html
   

   View Slide

9. GeoJSON
   9
   

   View Slide

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
    

    View Slide

11. GeoJSON で塗りつぶすには
    GeoJSON
    地域ごとの
    MultiPolygon 定義
    座標変換
    緯度・経度
    →ピクセル
    ピクセル
    座標
    多角形パス
    [135.xx, 35.xx]
    [138.xx, 33.xx]
    [10, 15]
    [20, 24]
    描画
    

    View Slide

12. GeoJSON で塗りつぶした
    いい感じ
    12
    地震情報: 2021/05/01 10:27 頃の地震による気象庁の震度速報 (CC BY 4.0) / 地域データ: 気象庁 (CC BY 4.0)
    地図: 地理院タイルを加工して利用
    

    View Slide

13. おまけ
    詳しくはおググり頂いて…
    ● GIS (Geographic Information System, 地理情報システム)
    ● 国土数値情報
    Visual Studio は標準機能で JSON からクラスを生成できる
    13
    地震情報: 2021/05/01 10:27 頃の地震による気象庁の震度速報 (CC BY 4.0) / 地域データ: 気象庁 (CC BY 4.0)
    地図: 地理院タイルを加工して利用
    

    View Slide