この記事は
- 建物の緯度経度だけがわかっている状況から、Googleストリートビューを使ってその建物の画像を取得してみたので備忘録です
やりたかったこと
- 単純に建物の緯度経度をずらっと持っていて、その建物の画像を入手したかったです
- 今回は仮にジロリアン希代の名店ラーメン二郎 目黒店の外観画像を入手したかったと仮定しておきます
Street view static API
- もともとGoogleが緯度経度から画像を取得するAPIを準備しています
- GCPの設定で上記APIを有効化すると使えます
- こんな感じでURLを組み立てれば表示ができるようで、おおこれだ！となりました
https://maps.googleapis.com/maps/api/streetview?size=400x400&location=40.720032,-73.988354
&fov=90&heading=0&pitch=10
&key=YOUR_API_KEY
しかし
- うきうきしながらジオコーディングサイトで、ラーメン二郎目黒店の住所を
35.634192, 139.707051の緯度経度に変換して、上記URLに入れ込んでみました
- 道ですね
- どうやら上記URLの
headingというパラメータがカメラの角度を示しているみたいです - デフォルト0 (=真北) なので全然違う方向を向いちゃってるわけですね
headingを計算する
- ブラウザから該当の緯度経度をストリートビューで表示すると、いい感じに建物が表示されているのですが、このAPIはそこまで親切ではないようです
- どうも自分で角度を計算して指定する必要があるっぽい
- で、その辺りを作ったのが下記コードです
- 下記では１件だけですが複数件まとめて順序通り取得できるようにPromiseとかasync/awaitかましたりしてます
- このへんは必須ではありません
var latlngs = [
[35.634192, 139.707051] //ラーメン二郎目黒店
];
var service = new google.maps.StreetViewService();
async function start() {
for(var i = 0; i < latlngs.length; i++) {
var latlng = latlngs[i];
var lat = latlng[0];
var lng = latlng[1];
var targetLatLng = new google.maps.LatLng(lat, lng);
await new Promise(function(resolve) {
service.getPanoramaByLocation(targetLatLng, 1000, function(panoData){
panoramaLatLng = panoData.location.latLng;
var heading = google.maps.geometry.spherical.computeHeading(panoramaLatLng, targetLatLng);
var url = "https://maps.googleapis.com/maps/api/streetview?size=1024x1024&location=" +
lat + "," + lng +
"&fov=90&heading=" + heading +
"&pitch=10&key=YOUR_API_KEY"
console.log(url);
resolve();
});
})
}
}
start();
- ポイントは下記でheadingを計算しているところです
- 撮影地点の緯度経度と建物の緯度経度を付き合わせて、グリッと回す角度を計算してくれてるみたいです
var heading = google.maps.geometry.spherical.computeHeading(panoramaLatLng, targetLatLng);
- これを実行するとJavaScriptコンソールにURLが表示されます
- それを開いてみたのがこちら
- きたー
終わりに
- これでいろんな二郎の外観画像をたくさん収集できますね
- 巡礼系のサイト作ったりするときに役にたつかもしれません