東京都の町丁目別　火災危険度をマッピングした

町丁目別　火災危険度マップを作った。

これは東京都消防庁が公開しているオープンデータを加工しマップアプリ化したもの。
作り方をすぐ忘れるのでメモしておく。

【データソース】

まず上記２つをQGISを使い合体させるのだが、いきなり問題が発生した。

境界データと消防庁のデータで住所文字列で合体させるのだが、住所文字列にゆらぎがありうまく合体出来ない住所が大量に出た。

例：
・○○町１丁目　！＝　○○町一丁目
・市ヶ谷　！＝　市ケ谷

など。。。

今思うと、ジオコーディングサービスなどを使いお互いのデータをクリアリングした上で住所コードで合体させればよかったのだが、手作業で荒い合体作業をしてしまった。

そのため最後までポリゴンに穴がある箇所がある

ポリゴンを作成したらQGISを使い、GeoJSONで出力しその後topoJsonに変換する

topoJsonに変換するには以下のライブラリを利用する。

{
  "dependencies": {
    "topojson-client": "^3.1.0",
    "topojson-server": "^3.0.1",
    "topojson-simplify": "^3.0.3"
  }
}

以下でインストール

npm install topojson-client topojson-server topojson-simplify

GeoJSON から topoJSONへ変換

# geo2topo -q 1e6 object=tokyo2018.geojson > tokyo2018.topojson

このままだとポリゴンが高精細すぎて表示すると重くなるため簡素化する

% toposimplify -P 0.0000000001 tokyo2018.topojson > s0.0000000001_tokyo2018.topojson

toposimplify前

toposimplify後

こんなに簡略化していいのかというくらい簡略化してしまった。

しかしこれでWeb上でサクサク動作するようになった。

次にWebアプリを作る。詳しくは割愛するが今を利用した。

・React
・MATERIAL-UI（Reactで使えるマテリアルUIのライブラリ）
・OpenLayres

以前作った以下のサイトで抱えていた問題をすべて解決する事が出来た。
https://ufirst.jp/tokyoEarthquakeAreaRiskMap/

コメント