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