自分でストリートビューもどきを作る二回目です。
前回は画像を用意するところまで説明しました。今回はWebブラウザで表示するためのスクリプトです。プログラムの細かい説明は頭が痛くなる人がいるでしょうから原理的な話だけにします。
まず、360度の画像を表示するための領域を用意します。ポイントとしては画像は<img>タグではなく<div>タグの背景画像にするということです。というのも、ブラウザのスタイルシートの機能で背景画像を繰り返し配置できるからです。これは標準で背景画像が繰り返し表示されるため360度の画像を背景画像として指定するだけでできあがりです。
次に画像をぐるぐる見渡せるようにするためにスライダーを用意します。これはjQueryというライブラリで使うことができるスライダー機能を利用しています。スライダー以外は通常のJavaScriptの書き方にしてあります。
GPSデータはJSON形式にしてあります。JSON形式であれば手軽に他のファイルや他サイトにあるファイルを利用することができるためです。
var x = 0;
var stepX = 0;
var limit = 1774;
var gpsData = null;
var map;
function scrollView(){
var img = document.getElementById("contents");
img.style.backgroundPosition = x + "px 0px";
x+=stepX;
if (x > limit) x = 0;
setTimeout("scrollView()", 100);
}
$(function(){
scrollView();
$("#slider").slider({
min: -50,
max: 50,
value : 0,
slide : function(evt, ui){
stepX = -ui.value;
}
});
// データ読み込み
$.getJSON("./data.js", function(json){ gpsData = json; setGoogleMaps(); });
});
最後にグーグルマップを表示します。グーグルマップにはver 2とver 3がありますが、ここでは最新のver 3を使いました。マップ上にはマーカーを表示するのですが、これはJSONデータに記録された緯度経度を元にして表示していきます。これをデータの数だけ繰り返せばできあがりです。
// グーグルマップ表示
function setGoogleMaps() {
map = new GMap2(document.getElementById("gmap"));
map.setCenter(new GLatLng(35.9659179, 137.8142582), 10);
ctrlObj = new GLargeMapControl();
map.addControl(ctrlObj);
for(var i=0; i<gpsData.length; i+=2){
var lat = gpsData[i];
var lon = gpsData[i+1];
var marker = new GMarker(new GPoint(lon, lat));
map.addOverlay(marker);
GEvent.addListener(marker, "click", function(obj){
var lat = (""+obj.lat()+"0000000").substr(0, 10);
var lon = (""+obj.lng()+"0000000").substr(0, 11);
var src = "photo/"+lat+","+lon+".jpg";
var img = document.getElementById("contents");
img.style.backgroundImage = "url("+src+")";
});
}
}
実際に撮影してみると、写り込みもありますし画質もよいとは言えません。屋外だけでなく室内でも使い方によっては有益かもしれません（旅館やホテルの間取り、不動産関係など）。
撮影は徒歩か電動自転車が楽です。観光名所などを360度撮影して掲載しておくというのもよいかもしれません。
なお、上記のプログラムは自由に改変して使って構いませんし、そのまま使っても問題ありません。