위도 경도에서 거리 보기의 건축물 이미지 가져오기

7151 단어 라면geo가도

네, 그것도 좋아요.

  • 건물의 위도 경도만 알 수 있는 상태에서 Google 거리 풍경을 이용하여 건물의 이미지를 얻었습니다. 이것은 비망록
  • 하고 싶은 일.

  • 나는 단순히 건축물의 위도 경도를 엇갈려 그 건축물의 이미지를 얻고 싶었을 뿐이다
  • 이번 가설은 키로리아시 대명점라면의 외관도
  • 를 얻고 싶다고 가정한다.

    Street view static API

  • 원래 Google이 준비하고 있었습니다위도 경도에서 이미지 가져오기 API
  • 위의 API가 GCP 설정에서 활성화된 경우
  • 이런 느낌으로 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(=진북)이므로 완전히 다른 방향으로
  • 계산

  • 브라우저에서 거리의 위도 경도를 표시하고 건물을 잘 보이지만 이 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 표시
  • 여는 건 이거예요.

  • 카페 왔어요
  • 끝맺다

  • 이렇게 하면 2랑의 외관 이미지를 많이 수집할 수 있어요
  • 순례과 사이트를 만들 때 유용할 수 있다
  • 좋은 웹페이지 즐겨찾기