埼玉県の描き方.pdf

Transcript

1. 埼玉県の描き方 あのぞん(えるざっぷ)
2. About me @anozon あのぞん (@anozon) elzup · GitHub 株式会社プランクユニッツ 埼玉県 川越市出身(22年) →東京(研究室ぐらし 3年) →東京(2年) React,TypeScript
3. 埼玉県の描き方は2ステップ 埼玉県の描き方 • 埼玉の輪郭を手に入れる • 埼玉の描画する
4. 埼玉の輪郭を手に入れる
5. GADM で地理境界線データを取得する 埼玉の輪郭を手に入れる • GADM https://gadm.org/download_co untry_v3.html • level2(市町村)までの 区域データがある • shape,kmlなど様々なデータ形式
6. GADM データを見てみる KML の中に47都道府県確認できる 埼玉の輪郭を手に入れる • 解凍 KMZ → KML • gadm36_JPN_0.kml 日本の？ • gadm36_JPN_1.kml 都道府県の輪郭 ←今回はこれ • gadm36_JPN_2.kml 市町村の輪郭
7. GADM データを見てみる Google Earth で確認できる 埼玉の輪郭を手に入れる
8. 余談 kml からデータを抜き出す(うまく行かなかった) 埼玉の輪郭を手に入れる • xml → json • jq で抜き出し
9. 埼玉を描画する SVG で描いてみた
10. そのまま SVG <polygon /> に入れてみると 埼玉の描画する
11. そのまま SVG <polygon /> に入れてみると 埼玉の描画する line-weight が 太いせい 北半球なので SVG の座 標系と上下が反対
12. ちゃんと描画できた 埼玉の描画する stroke-width="0.4%" svg { transform: scaleY(-1); } 強引に
13. 正規化するために 埼玉県の東西南北の先端を出してみる 埼玉の描画する
14. 埼玉県の東西南北の先端を出してみる 【永久保存版！】(埼玉の地理が変わらない限り) 埼玉の描画する n: 36.2759285 s: 35.75846481 e: 139.90383911 w: 138.71534729 GADM パスデータ依存
15. Fit しました 埼玉の描画する サイズ: 11KB 頂点数: 420
16. 埼玉を圧縮する
17. 正規化と緯度経度を丸め込んで ちょっと軽くしてみる 埼玉を圧縮する
18. 正規化と緯度経度を丸め込んで ちょっと軽くしてみたい 埼玉を圧縮する
19. 解像度1000でSVGで30%くらいに減った 埼玉の描画する サイズ: 11KB → 3KB プチ圧縮であって *1000 して + 先端分shift 切り捨て部分の情報失われる
20. おまけ解像度100 埼玉の描画する 元の 解像度100
21. 成果物はこちら CodePen コード https://codepen.io/anozon/pen/vYZZrgO?edito rs=1011
22. 終わりに こんなに埼玉を意識してコーディングしたのは人生で初めてだった GADM データは地球ハッカーになるための 偉大なツールの１つである