GUNMA GIS GEEK

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

D3v3 Google Map API

【D3.js】Google MapにSVGをオーバーレイする(SHAPEデータ軽量化)

投稿日:2013年1月23日

ggooglemap

Google MapにD3.jsで作成したSVGをオーバーレイする

前回作成した鶴(群馬県SVG)をGoogle Mapに貼り付けます。
詳しくは、exampleのソースを直接みてください。

OverlayViewを作成して、Google MapにsetMapします。
drawメソッドが、再描画(ズームイン、ズームアウト等)するたびに呼び出されるので、その中で地図を描画します。
ポイントは以下の2点

↑オーバーレイするSVGタグを画面外に-4000pxほどずらして設置

↑Projection関数が返すx,yの値に+4000pxして返す

これで、D3.jsで作成したSVGをグーグルマップにオーバーレイすることができたのですが……ものすごく重いです。
再描画が行われるたびにいちいち止まって実用的ではないので、データセットの軽量化を行います。

SHAPEデータの簡素化

国土数値情報サイトからダウンロードしたままのデータではあまりに重いので、一部情報をそぎ落として簡素化します。
シェープファイルの簡素化は以下のオンラインサービスを使用することで簡単に行えます。

MapShaper

国土数値情報サイトからダウンロードしたデータの中から、SHPファイルを上記サイトにアップロードします。
shpe000000
中央下にあるバーを右に動かすとデータが簡素化されます。
shpe000001
あんまり動かしすぎると、出来の悪いポリゴンみたいになるので注意。
shpe000002

程よきところで「export」ボタンを押して、Shapefile形式のpolygonsとpolylinesをダウンロードします。
ダウンロードしたpolygonsとplylinesのshpファイルを前回同様Quantum GISを使ってGeoJSONファイルに変換します。

簡素化する前のGeoJSONファイルのサイズが「3.07MB」だったのに対して、「46KB」までデータセットのサイズを小さくすることができました。
これなら、グーグルマップ上にオーバーレイしてもそんなに重くならずに済みます。

↓軽くした方
example

-D3v3, Google Map API

執筆者: