Openlayersとgdalを使ってPreziみたいなプレゼンをする方法

Openlayersとgdalを使って「Prezi」のような(？)プレゼンをする方法をご紹介します。（この話題、需要あるのか？）

1.

スライドをいつものようにpowerpointやkeynoteで作ります。

2.

できたスライドを高解像度でtiffやjpgに書き出します。

3.

書き出したスライド画像をGIMPや、あればillustratorやphotoshopで好きなように並べます。

4.

並べたスライドを1枚の画像として、なるべく高解像度でtiffに書き出します。
ここでは、ファイル名をprezen_sheet.tifとします。

5.

書き出したtiff画像の縦横のピクセル数を調べてメモします。
ここでは仮に、横4000px 縦3000px だったとします。

6.

http://www.ecoris.co.jp/map/mouseposition.html
ここを参考にプレゼンを貼りたい範囲をgoogleメルカトルのX,Y座標でメモします。
その際、縦横比は画像と同じにします。
ここでは仮に、Xmin:15500000 Xmax:15504000 Ymin:4250000 Ymax:4253000とします。

7.

gdalの以下コマンドを打って座標をつけます。gcpの順番は、ピクセルX ピクセルY 座標X 座標Y　を1セットにして
四隅を指定します。ただ縦方向は、ピクセルと座標が基準が逆なので注意してください。（座標Ymaxの時にピクセル0を指定）

gdal_translate -gcp 0 3000 15500000 4250000 -gcp 4000 3000 15504000 4250000 -gcp  4000 0 15504000 4253000 -gcp 0 0 15500000 4253000  prezen_sheet.tif prezen_gcp.tif

8

gdalの以下コマンドを打ってepsg:4326に変換します。

gdalwarp -s_srs epsg:900913 -t_srs epsg:4326 -r bilinear prezen_gcp.tif prezen_wgs.tif

9

gdalの以下コマンドを打ってタイルに変換します。※作成するタイルのズーム範囲は必要な値に設定してください。

gdal2tiles -r bilinear -z 1-15 prezen_wgs.tif

10

Openlayersで地図を表示できるhtmlを用意します。

11

OpenlayersでTMSレイヤとしてprezen_wgsタイルを読み込みます。

12

キーボードを押したときに、スライドの場所に移動するようにjavascriptでプログラムを書きます。
（キーイベントが発生したらsetCenterやpanTo,zoomToで緯度経度、ズームを変更します。）

これでOpenlayersでプレゼンできるようになりました。めでたしめでたし。

※最後の方は、説明するのが面倒になったので、ソースコードをご覧ください。（TMSレイヤで指定してる部分と、最後の方のキーイベントの部分だけで、あとは関係ありません。）
http://www.ecoris.co.jp/map/base.js

プレゼンの例はこちら

キーイベントは、1,2,3,4,5,6,7,8,9,0,q,w,a,z,x,c,v,b,n,m に割り当ててあるので押してみてください。
http://www.ecoris.co.jp/map/

実際にプレゼンに利用したいけど、この説明ではよくわからんという方は、ご連絡ください。（いないと思いますが。）