GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

D3v3

GeoJSONを軽くするだけじゃない! TopoJSONクライアント TIPS

投稿日:2015年3月10日

単純に、GeoJSON形式のデータを効率よく圧縮してファイルサイズを軽くするものとらえられがちのTopoJSONですが、実はTopoJSONには様々な機能があります。
今回はその中から、クライアント側「topojson.js」で利用できる機能の一部を紹介します。

Home · mbostock/topojson Wiki

topojson.neighbors

neighborsメソッドについては以前記事にしたので省略。基本的には、このメソッドにTopoJSONのデータを渡してあげると、各ポリゴン毎に隣接するポリゴンのインデックスの値を配列として返してくれます。
【D3.js】隣接する区画を表示する

topojson.mesh

かいつまんで言うと、TopoJSONのデータを受け取って一本のパスストリング(svg/pathのd要素に渡す値)として返すメソッドです。
コールバックを使ってフィルタリングを行うことで、隣接するパスと単独のパスを分けて出力することができます。地形の外周と境界で表現を変えたいときに等便利。
下記は外周を青、境界を赤で表示しています。

topojson メッシュ

example

topojson.merge

ポリゴンとポリゴンを合成して一つのポリゴンとして表示します。
下記は新潟県、群馬県、埼玉県、東京都、神奈川県をマージして一つのエリアとして表示します。
ユーザーの操作に対して、動的にポリゴンのマージを行うなどもできます。

topojson マージ

example

その他

GeoJSONでは難しかった、交差ポイントの抽出などもTopoJSON形式のデータであれば比較的簡単に行えます。

topojson ジャンクション

example

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。