◆ Canvas から出力はできない
◆ URL から画像を作る API でも問題あり
  ◆ ストリートビューのリストア自体が同じ場所にならないことがある
  ◆ ストリートビューと画像で同じ座標と方向でも表示が違うことがある
  ◆ ズーム指定方法が違うので微妙に倍率がちがう

ストリートビューの含むページを作っていて 画像で保存したいなーというシーンがありました

スクショ拡張機能か PrintScreen+ちょっと編集 でもよかったのですが見ていた PC にはちょうど拡張機能もトリミングソフトもなかったのでページ内で画像出力できないか調べてみました

Canvas

ストリートビューの画像部分は Canvas で表示されています

なので

document.querySelector("canvas").toDataURL()

とやってみましたがだめでした
PNG の data uri 形式のデータは返ってくるものの全体が透明です

考えてみれば別ドメインの画像は Canvas に入れると出力できなくなったと思います
エラーが出てたような記憶もありますが 今回試した限りではエラーでなく透明なデータが取得できました

Street View Image API

Street View Image API という画像でストリートビューを取得できる API もあるのでこっちを使ってみます
GoogleMaps の Static Map のように URL に座標や向きを入れてアクセスすれば画像ファイルが表示されます

https://maps.googleapis.com/maps/api/streetview?size=300x300&location=34.994536268%2C135.785411650&heading=297.491126320&pitch=7.853417832&fov=53.152"

こういう感じです


表示中のストリートビューから座標などを取り出して URL に変換するところがちょっとめんどうですが 画像ファイルを作ってくれるので便利です

これでいいかな と思ったのですが問題点が 3 つありました

その前に

画像作る関係でいろいろ試すように作ったツール紹介です

ストリートビューImage

svst00


左上のストリートビューを操作して 「画像作成」ボタンを押すと画像が作られます
ボタンの下に出てるのは実際に作ったものです

「比較用再セット」ボタンを押すと左上のストリートビューの位置情報をもとに左下のストリートビューを更新します
なんのためにあるのかは下の方で詳しく書きます

1: ストリートビューのリストア問題

第一の問題ですが ストリートビュー自体が正確にリストアできない問題があります

上の清水寺の画像では特に問題なくリストアできていますが こういう場合もありえます

svst01

スカイツリーが見える東京のどこかですが 左側の上下を比べると場所が少しずれています
上側の位置をもとに復元したのにちょっとずれることがあるんです

セットされた座標をもとに最も近い場所のストリートビューを表示しているのでしょうが そのときに 取り出した方 (上側) の座標と少しずれた場所が選ばれるということが起きてしまうようです

右側の画像をみても 左下の画像と一緒で 正しく復元できない場合は画像もずれた表示になってしまいます
見えた状態そのままを画像にしたい場合は致命的です


この程度のズレなら用途によっては別に気にしないということが多いかもしれません

ですが ヒドイときはこういうのもあります

svst03

これは大阪駅の例です

再セットするとずれた先が地下になってしまい 全然違う場所です
緯度経度的には同じなのかもしれませんが ストリートビューの画像が必要という場合に地下と地上が異なれば全く使いものにならないですよね

他にも

  • ストリートビューが撮られた時期が違ってほぼ同じ場所なのに建物が変わっている
  • 車が前に出てきて前の風景が見えなくなっている
  • 昼間だったのが夜になってる

などがありました


全体で言うと 同じ場所にリストアされることがほとんどですが 10 回 20 回動かして試してるだけでおかしいケースが見つかることもあって 「画像で保存する」 という機能にしてしまうのは難しいと思います
「この場所の画像ファイルを取得する」 みたいに ちょっとぼかしてそのまま見てるものは出ないですよー という機能にしておくのが無難かもしれません

2: 画像とストリートビューでリストア方法が違う?

ストリートビューのリストアと画像取得では同じになると思っていたのに 異なるケースもありました

群馬県の県庁あたりのユーザ投稿のデータではなぜか上下反転された 360 度画像になっています

svst02

ストリートビューに復元すると反転したままですが なぜか画像では正常になっています
(まだちょっと歪んで感もありますけど)

今のところ こういう例はこの場所のみでした

3: fov

もうひとつストリートビューのリストアと画像取得の違いがあります

緯度経度や角度はそのままストリートビューから取得するものが使えますが ズームだけ特別です
ストリートビューでは zoom という値ですが 画像を取得する場合は fov という値です

公式サイトではこういう対応表があります

zoomfov
0180
190
245
322.5
411.25

コレをみる限りでは

function zoom2fov(zoom){
return 180 / Math.pow(2, zoom)
}

これで変換できるはずです
ですが やってみると微妙にずれています

あれこれやってみて 2 の部分を 1.8 ~ 1.9 にするといい感じのズームになることがわかりました
でも 100% 完璧ではなく パット見た間隔では一緒ってくらいです
細かく端の切れてる部分を比べるとやっぱり多少違いがでています

svst04


この式についてですが 1.8 ~ 1.9 が常に一番近いということでもなく  2.0 のほうがいいときもありました
常に近いとはいえないです

2 のところ以外も変えるべきかもしれませんが 正確な変換式を作るにはあらゆるパターンで試さないといけなくてすごく大変そうです

stackoverflow に式を載せてる人もいましたが その式を試してみても 私のところでは大きくずれていました
あくまでその人の条件でうまく行った式みたいです


今回作ったツールみたいにバーで画像を欲しい人が調整するならいいですが 手間ですし そういうことせず今の表示中のストリートビューを画像にしないといけないならずれが大きいこともあります 



操作中のストリートビューと同じになるかはわからないという前提で作ってみて大丈夫そうなら使う ダメそうなら使わないということになりそうです

できたりできなかったりが許されない時もありますし スクショするのが一番だと思います