1 of 22

埼玉県の描き方

あのぞん(えるざっぷ)

2 of 22

About me @anozon

あのぞん (@anozon)

elzup · GitHub

株式会社プランクユニッツ

埼玉県 川越市出身(22年)�→東京(研究室ぐらし 3年)�→東京(2年)

React,TypeScript

3 of 22

埼玉県の描き方は2ステップ

  • 埼玉の輪郭を手に入れる
  • 埼玉の描画する

埼玉県の描き方

4 of 22

埼玉の輪郭を手に入れる

5 of 22

GADM で地理境界線データを取得する

  • GADM https://gadm.org/download_country_v3.html
  • level2(市町村)までの�区域データがある
  • shape,kmlなど様々なデータ形式

埼玉の輪郭を手に入れる

6 of 22

GADM データを見てみる

KML の中に47都道府県確認できる

  • 解凍 KMZ → KML
  • gadm36_JPN_0.kml 日本の？
  • gadm36_JPN_1.kml 都道府県の輪郭 ←今回はこれ
  • gadm36_JPN_2.kml 市町村の輪郭

埼玉の輪郭を手に入れる

7 of 22

GADM データを見てみる

Google Earth で確認できる

埼玉の輪郭を手に入れる

8 of 22

余談 kml からデータを抜き出す(うまく行かなかった)

  • xml → json
  • jq で抜き出し

埼玉の輪郭を手に入れる

9 of 22

埼玉を描画する�SVG で描いてみた

10 of 22

そのまま SVG <polygon /> に入れてみると

埼玉の描画する

11 of 22

そのまま SVG <polygon /> に入れてみると

line-weight が�太いせい

北半球なので SVG の座標系と上下が反対

埼玉の描画する

12 of 22

ちゃんと描画できた

stroke-width="0.4%"

​

svg {� transform: scaleY(-1);�}

強引に

埼玉の描画する

13 of 22

正規化するために�埼玉県の東西南北の先端を出してみる

埼玉の描画する

14 of 22

埼玉県の東西南北の先端を出してみる�【永久保存版！】(埼玉の地理が変わらない限り)

n: 36.2759285

s: 35.75846481

e: 139.90383911

w: 138.71534729

GADM パスデータ依存

埼玉の描画する

15 of 22

Fit しました

サイズ: 11KB

頂点数: 420

埼玉の描画する

16 of 22

埼玉を圧縮する

17 of 22

正規化と緯度経度を丸め込んで

ちょっと軽くしてみる

埼玉を圧縮する

18 of 22

正規化と緯度経度を丸め込んで

ちょっと軽くしてみたい

埼玉を圧縮する

19 of 22

解像度1000でSVGで30%くらいに減った

サイズ:

11KB → 3KB

​

プチ圧縮であって

*1000 して + 先端分shift

切り捨て部分の情報失われる

埼玉の描画する

20 of 22

おまけ解像度100

元の

解像度100

埼玉の描画する

21 of 22

成果物はこちら

CodePen コード

https://codepen.io/anozon/pen/vYZZrgO?editors=1011

22 of 22

終わりに

こんなに埼玉を意識してコーディングしたのは人生で初めてだった

�GADM データは地球ハッカーになるための�偉大なツールの１つである