GeoJSONファイルからTopoJSONファイル

 行政界の地図をLeafletでオンライン処理して表示する場合、(サイズにもよるが、)GeoJSONだと重くなる。

 この点、GeoJSONをギュッと圧縮したTopoJSONならば、ギュンと改善される。

 TopoJSONファイルをエディタで開いてみると

  •  arcsという配列
  •  緯度・経度とは異なる数字

がズラズラと並んでいる。

  •  ポリゴンの隣接部分(重複部分)を簡素化
  •  相対座標で記録

することで、ファイルサイズが小さくなる、とのこと。

 TopoJSONからGeoJSONへ変換することもできる。

 エディタでいじる場合、緯度・経度が読めるGeoJSONのほうが分かりやすい。というかTopoJSONはいじれない。

TopoJSONツール

 さて、どのようにTopoJSONへ変換したらよいのか。
 公式ページはこちら(github.com/topojson/topojson)のようだが、全般的にTopoJSONに関する情報はあまり多くない印象。

 npmを使ってインストールできる、ということで、それだけのために

 Node.js(nodejs.org/)をダウンロードしてインストール。

 Node.jsは、ブラウザの外でも(≒サーバーでも)使えるJavaScript。

 npm Node Package Managerは、読んで英字の如くNode.jsのパッケージ・マネージャー。

 コマンドプロンプトから

npm install -g topojson

でTopoJSONツールのインストール。

 以前は、

topojson -o polbnda_jpn.topojson polbnda_jpn.geojson

で変換できたが、今は、

geo2topo polbnda_jpn.geojson > polbnda_jpn.topojson

といった具合に大きく変わっている。

 以前は、

topojson -p adm_code -p nam -p laa -p pop -o polbnda_jpn.topojson polbnda_jpn.geojson

で必要な属性(上の場合、adm_code列、nam列、laa列、pop列)が残り、

topojson -p -o polbnda_jpn.topojson polbnda_jpn.geojson

で全ての属性が残り、-pをつけないと図形情報しか残らない、という仕様だった。

 バージョンアップせず以前のまま使っているので、TopoJSONツールの説明はここまで。

mapshaperで簡素化

 幸いmapshaper(mapshaper.org/)で、GeoJSONからTopoJSONへ変換できる。
 最初から言っておけ、といった感じになってしまったが、ただ変換するだけでなく、簡素化できる。
 簡素化がメインだが、変換ツールとして使える。

  •  Import
  •  Simplify
  •  ExportでTopoJSONを選択して保存

という3段階の流れ。

 TopoJSONツールで、11MBのGeoJSONファイルが1.5MBのTopoJSONファイルにギュッと圧縮されたが、もっとサイズを小さくしたい……。

 Simplifyで15%にすると900KB弱。

 ここから10%、8%、5%、3%、……と簡素化していくと小さい島々が次々と消えていってしまう。
 0%。

 サイズが小さくなったが、佐渡島もないし、対馬もないし、消えすぎ。

 15%~10%ぐらいまでは、あまり気にせず簡素化できる。
 地形次第では、5%や3%でもたいして崩れない。 

 最後にLeafletでTopoJSONを描画する方法……。

 最後の最後でつまずいた。ちょっと邪道な感じもするが、R言語のleafletRパッケージを使って生成したHTMLを使わせてもらった(ちょっと改変)。

 やや重い感じもするが(mapshaperでSimplify15%のTopoJSON読み込み)、許容範囲ギリギリライン。

 TopoJSONプラグインは、以前は、

<script src="https://d3js.org/topojson.v1.min.js"></script>

といった具合に使っていたが、現在、公式ページでは、

<script src="https://unpkg.com/topojson@3"></script>

となっている。

 あとGeoJSON、TopoJSONの読み込みではJQueryも必要。

LeafletでTopoJSON(leafletRで生成したソースコードを改変)   

MAP
スポンサーリンク
ふシゼン
タイトルとURLをコピーしました