GUNMA GIS GEEK

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

*

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

     - d3.js ver.3, Google Map API

はてなブックマーク - 【D3.js】Google MapにSVGをオーバーレイする(SHAPEデータ軽量化)
Pocket

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

はてなブックマーク - 【D3.js】Google MapにSVGをオーバーレイする(SHAPEデータ軽量化)
Pocket

 - d3.js ver.3, Google Map API

  関連記事

FogEffect
リアルワールドをダンジョンPRG風に変えるスマホアプリ

マッピングは麻薬。 ウィザードリィで、白紙のマッピングシートを自分の手で埋めてい …

svg mask
[SVG]ドーナツ状のcircleを描画する。

先日の勉強会にて「重ねたcircleの途中の色だけ変えたい」という質問があり、そ …

Google Map 水彩画風
Google Mapを使って水彩画風/モノクロームの地図を表示する

クリエイティブ・コモンズライセンスで配布されているマップタイルを使用して水彩画風 …

【D3.js】サイズの大きなファイルを可視化する(ツリーマップ)

example 以前、アクセス流入元をツリーマップで表示してみたことがあるのです …

福岡市のオープンデータを使用して交通危険個所マップを作成しました。

Civic Tech Advent Calendar 2013 11日目 参加記 …

隣接市区町村表示
【D3.js】隣接する区画を表示する

example こちらのサンプルを見て日本地図版を作ってみました。 マウスオーバ …

群馬県 地域別転入転出数
群馬県の地域別転入転出数

example あいかわらず、群馬県移動人口調査を弄りながらD3.jsの勉強を行 …

github_geojson_search
GithubからGeoJSONを検索して地図上に表示するページを作ってみました。

example Google Custom Search APIを使って、Git …

ハート型の地図

ハッピーバレンタイン(1日遅れ) 上記はオロンス・フィネ(オロンティウス・フィネ …

Data-Driven Documents ?
9月6日に大宮でD3.js勉強会をやります。

Code for SAITAMAさんに声をかけていただき、D3.jsの勉強会を開 …