11
6

More than 5 years have passed since last update.

緯度経度からストリートビューで建物の画像を取得する

Last updated at Posted at 2019-02-04

この記事は

  • 建物の緯度経度だけがわかっている状況から、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に入れ込んでみました

jiro_meguro_road.jpeg

  • 道ですね
  • どうやら上記URLの heading というパラメータがカメラの角度を示しているみたいです
  • デフォルト0 (=真北) なので全然違う方向を向いちゃってるわけですね

headingを計算する

  • ブラウザから該当の緯度経度をストリートビューで表示すると、いい感じに建物が表示されているのですが、このAPIはそこまで親切ではないようです
  • どうも自分で角度を計算して指定する必要があるっぽい
  • で、その辺りを作ったのが下記コードです
    • 下記では1件だけですが複数件まとめて順序通り取得できるように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が表示されます
  • それを開いてみたのがこちら jiro_meguro.jpeg
  • きたー

終わりに

  • これでいろんな二郎の外観画像をたくさん収集できますね
  • 巡礼系のサイト作ったりするときに役にたつかもしれません
11
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
6