D3.jsでWebに地図を描く【TopoJSON作成・Toposimplify圧縮比較】

この記事は、Webで地図を描きたいんだけどどうしたらいいの？D3.jsってどうなの？という疑問に答えます。

D3.jsを使って愛知県の地図を描きます。Toposimplifyコマンドの係数を指定してスマホやタブレットでも快適に使用できるレベルまで圧縮してみます。

Contants

D3.jsとは
D3.jsのセットアップ
- node.jsのセットアップ(npm)
TopoJSONファイルの生成
参考サイト
まとめ

D3.jsとは

D3.jsとは、javascriptでデータを基にSVGを描画するライブラリ。
Data-Driven Documents（データ駆動型ドキュメント）の3つのDをとって、d3といい、ライセンスは修正BSDです。

修正BSDライセンスとは

BSDライセンス（自己責任/作権の表示は消さない/複製・改変・再配布・販売等は自由が条件)

SVGとは？

SVG(Scalable Vector Graphics)とは、W3Cが標準化したタグ形式で画像を表現する規格。
HTML等で利用することが可能。
SVGの特徴は、ベクタ形式で画像を扱い、拡大、縮小時の劣化が起こりにくいという利点がある。
※Adobeのイラストレーターなどは代表的なベクタ形式のソフト

地図を描く

d3.jsのライブラリに、JSONファイルを読み込み表示します。
JSONファイルは別途自作することも可能なようです。
今回は国土交通省国土政策局国土情報課が提供する国土数値情報のデータを利用します。

今回は下図のような地図を作成して、圧縮比較をします。(画像をクリックでデモページ)

線画に使用するJSONファイル

通常GeoJSON形式で地図の線画は可能ですが、ファイルが大きくグラフィックボードなどを積んでいない場合には処理が重くなります。

その為簡易形式にコンバートしたTopoJSON形式にてファイルを生成しなおします。

TopoJSONとは

d3.jsの作者が作成したGeoJSONの拡張した地理情報データの規格。
GeoJSONファイルのジオメトリを、TopoJSONではarcsという形で記述し、重複するジオメトリを排除し合理化を図っている。

国土数値情報ダウンロードサービスページにて、GML(JPGIS2.1)シェープファイル形式を選択し、2.政策区域 > 行政区域のデータを選択します。

※圧縮ファイルにはGeoJSON形式ファイルも存在します。

D3.jsのセットアップ

npm(node.js)が前提条件。
node.jsのバージョンがv0.12以降でないとD3.jsのv1でしか作成できません。
※npmのセットアップは下記参照。

$ npm install -g topojson shapefile

topojson:geo2topoやtoposimpligyなどのコマンドを含む
shapefile:sha2geoなどのコマンドを含む

※shapefileはshaファイルから元となるGeoJSON作成時に使用。
※ダウンロードファイルにはGeoJSONファイルも含まれるのでtopojsonライブラリのみでもOK。

node.jsのセットアップ(npm)

CentOS6.8にセットアップしたので下記のファイルをセットアップします。

$ sudo rpm -Uvh https://rpm.nodesource.com//pub_8.x/el/6/x86_64/nodejs-8.9.4-1nodesource.x86_64.rpm

TopoJSONファイルの生成

GeoJSONファイルをTopoJSONファイルに置換します。

$ geo2topo -q 1e6 sample=input.geojson > output.topojson

Toposimplifyコマンド

TopoJSON形式ファイルを指定係数にて圧縮するコマンド。
引数に係数を渡すことで圧縮が可能。

$ toposimplify -P 0.1 sample.topojson > simplified.topojson

係数による圧縮の比較

実際に-P係数を変化させてどの程度劣化するかを検証してみます。

連続する3点でできる三角形、各三角形の面積が閾値より小さくなるとき、真ん中の点を間引くことでパスの構成点を削減する。

TopoJSONファイルサイズの変化

係数(-P)	ファイルサイズ【圧縮率】
【元データ】	1,600.0KB　( 1.6MB )　【100.0%】
【0.75】	1,300.0KB　( 1.3MB )　【 81.2%】
【0.50】	978.9KB　( 1.0MB )　【 61.1%】
【0.25】	609.7KB　( 0.6MB )　【 38.0%】
【0.10】	368.4KB　( 0.4MB )　【 23.0%】
【0.05】	284.4KB　( 0.3MB )　【 17.8%】
【0.01】	209.6KB　( 0.2MB )　【 13.1%】