Openlayersとgdalを使って「Prezi」のような(?)プレゼンをする方法をご紹介します。(この話題、需要あるのか?)
1.
スライドをいつものようにpowerpointやkeynoteで作ります。
2.
できたスライドを高解像度でtiffやjpgに書き出します。
3.
書き出したスライド画像をGIMPや、あればillustratorやphotoshopで好きなように並べます。
4.
並べたスライドを1枚の画像として、なるべく高解像度でtiffに書き出します。
ここでは、ファイル名をprezen_sheet.tifとします。
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/
実際にプレゼンに利用したいけど、この説明ではよくわからんという方は、ご連絡ください。(いないと思いますが。)