AdSense部秋学期ミッション(4) - AdSense実験室

AdSense部秋学期ミッション(4)

2013-11-29

さて、前回ご紹介したGMapImageCutter。なかなかよく出来てて、画像の切り出しだけじゃなく、GoogleMapのシステムですぐに地図表示できるHTMLサンプルまでついています。
なので、元画像を用意させすれば、すぐにもブラウザでオリジナル地図表示できちゃうんですね。

実際に切り出し&HTML表示してみた結果がこちら。
http://www.kotizu.com/widearea

ただ、これだけじゃちょっと芸がないというか面白くない。
どうせならやっぱり過去と現在と比較して見てみたいところです。
↓こんな感じで。
http://www.geo.lt.ritsumei.ac.jp/meisaizu/googlemaps.html

でもこれを実際やるとなると、ちょっとハードルが上がります。さっきみたいに簡単にはいきません。
具体的になにが大変かというと、

・ 古地図と現在の地図との座標をズレなく合わせるために、画像の縮尺調整とトリミング作業
・ オーバーレイ表示と透過率をコントロールするためのコーディング

こんな作業が必要になります。
GoogleMapの地図というのは、256x256ピクセルの画像をタイル上に並べる形で構成されています。
こんな感じ。

GoogleMapのタイル構成

Googleのデベロッパーサイトにサンプルと説明がありますので、詳しくはそちらで。

で、Googleの地図はこのタイル座標を基準に構成されているので、これに自分の地図をオーバーレイさせようと思ったら、そのタイル座標に合う形で画像を用意しなきゃならない。
これがなかなか大変。 画像加工ソフトで縮尺を調整して、切り出す位置を揃えて…。これの繰り返しで、ほんと時間かかるんです。
おまけに今回は江戸時代の地図ということもあってかなりアバウトな描写なので、なかなかピッタリ合わないんですよね。
1つの地点を合わせればこんどは別の部分がズレる、という感じでほんと苦労しました。

まあでもそれを乗り越えてベースになる画像が用意できたら、いよいよGMapImageCutterでタイル画像に切り出し。
ところがここでまた問題発生。
このGMapImageCutter、切り出した画像に独自のルールでファイル名付けちゃう仕様なので、これをGoogleMapにオーバーレイさせるために、ファイル名を1つ1つリネームしなきゃいけない。
あまりに大変な作業なので、Javaでプログラム組んで自動変換させるようにしました。
これでようやく画像の準備は完了。次はオーバーレイの仕組みづくりです。

オーバーレイについては、このあたりのサイトが参考になりました。

http://jsfiddle.net/sasha_thor/H7EAD/22/

http://www.gavinharriss.com/code/opacity-control

これもなかなかうまくいかなくて苦労したんですが、そのへんは長くなるので割愛。
さて、苦労の末に動くようになったのがこちら。
http://www.kotizu.com/static/Kamakura.html

ここまで結構大変な道のりでした。
でもまだこれからマルチスクリーン対応させたり、サイトでの見せ方を考えたりと、やんなきゃいけないことはまだまだたくさんあります。
大変だけど、頑張らねば。

→ 次の記事:AdSense部秋学期ミッション(5)

スポンサーリンク