3D 영역 탐색기 시작하기

이미지

개요

3D 지역 탐색기 솔루션을 사용하면 완전히 새로운 방법으로 위치를 탐색하고 경험할 수 있습니다. 이 솔루션은 Google Maps Platform 포토리얼리스틱 3D 타일Places API의 기능을 활용하여 매력적인 양방향 3D 환경을 만듭니다.

3D 지역 탐색기는 다음과 같은 여러 목적으로 설계되었습니다.

  • 지역 탐색 개선: 사용자는 높은 수준의 시각적 세부정보로 주변 지역을 가상으로 탐색하여 지역 지형지물과 명소에 관한 유용한 정보를 얻을 수 있습니다.

  • 위치 기반 내러티브 홍보: 관심 장소(POI)를 풍부한 설명과 함께 사용하면 사용자에게 특정 위치를 교육하고 알리는 내러티브 중심 환경을 만들 수 있습니다.

  • Google 지도 3D 기능을 사용하여 개발 아이디어 얻기: 몰입도 높은 양방향 지도를 만드는 데 Google의 3D 매핑 데이터가 지닌 잠재력을 보여줍니다.

시작하기:

사용 설정

핵심 기술

이 솔루션은 다음 두 가지 주요 기술을 사용하여 빌드됩니다.

Google Maps Platform API:

이 환경을 만들기 위해 기본 지도와 데이터를 가져오는 데 Google Maps Platform의 여러 API를 사용합니다.

  • Google 지도 포토리얼리스틱 3D 타일: 건물과 지형의 고해상도 3D 모델을 통해 도시 환경을 실감 나고 시각적으로 매력적으로 표현할 수 있습니다.
  • Places API: 앱은 탐색된 영역 내의 관심 장소 (POI)에 관한 자세한 정보를 식별하고 표시하여 지역 지식으로 풍부한 사용자 환경을 제공할 수 있습니다.
  • 자동 완성은 사용자가 특정 위치 또는 관심 장소를 검색하는 데 도움이 됩니다.

CesiumJS

CesiumJS는 고해상도 3D 지구를 렌더링하고 표시합니다. 이 클래스는 건물과 지형의 3D 메시 모델을 제공하는 Google의 실사 3D 타일의 로드 및 시각화를 처리합니다.

카메라 관리: CesiumJS는 카메라의 위치, 방향, 움직임을 제어하는 도구를 제공합니다. 여기에는 다음이 포함됩니다.

  • 앱을 로드할 때 지정된 주변 지역에 초점을 두도록 초기 시점 설정
  • 탐색을 위한 자동 궤도 애니메이션과 같은 동적 카메라 움직임을 구현합니다.
  • 이러한 기능이 포함된 경우 지구와의 사용자 상호작용 처리(화면 이동, 확대/축소, 회전)

실사 3D 타일이 3D 타일 렌더기와 함께 작동하는 방법을 알아보세요.

주요 구성요소

애플리케이션은 다음 두 가지 앱으로 나뉩니다.

  • 관리 앱
  • 데모 앱

다음 다이어그램은 두 애플리케이션 간의 차이점과 상관성을 간략히 보여줍니다.

이미지

각 앱을 자세히 조사하는 것이 좋습니다.

관리 앱

이 애플리케이션은 3D 환경을 맞춤설정할 수 있는 사용자 친화적인 인터페이스를 제공합니다.

  • 위치 검색 : 통합된 Google Maps Platform 자동 완성 검색창을 사용하여 표시할 지역을 찾습니다. 위치를 선택하면 카메라가 해당 영역으로 원활하게 이동합니다.

  • 카메라: 카메라 이동 속도와 궤도 유형을 조정하여 선택한 시청 환경을 만듭니다.

  • 장소 (관심 장소): 표시할 관심 장소의 밀도, 검색 반경, 유형 (예: 음식점, 카페, 랜드마크)을 정의합니다.

이 앱을 사용하여 최종 사용자를 위한 환경을 맞춤설정하세요.

모든 맞춤설정에 대한 자세한 설명이 3D 영역 탐색기 맞춤설정을 참조하세요.

데모 앱

관리 앱에서 만든 구성을 로드하는 최종 사용자 대상 애플리케이션입니다. 이 몰입도 높은 3D 환경에서 사용자는 선택한 영역을 탐색하고 강조 표시한 장소를 찾을 수 있습니다.

관리 앱을 사용하여 디자인과 분위기를 맞춤설정하면 구성을 다운로드하고 소스 코드에서 맞춤 애플리케이션을 실행할 수 있습니다.

사용자 환경

이미지

이 애플리케이션의 주요 기능은 다음과 같습니다.

  1. 사용자는 건물, 랜드마크, 지형을 비롯한 지역을 3D로 양방향으로 탐색할 수 있습니다.
  2. 사용자가 주변 장소 (예: 박물관, 공원, 음식점)를 검색하고 찾을 수 있습니다.
  3. 사용자는 장소를 선택하면 해당 위치와 관련된 자세한 정보나 설명을 볼 수 있습니다.

  4. 개발자는 설정 및 제어 기능 (관리 앱을 사용하는 경우)을 통해 탐색 환경을 맞춤설정할 수 있습니다.

  5. 자동 회전이 사용 설정되어 있으면 선택한 영역의 중심을 중심으로 카메라가 자동으로 회전합니다.

기본 요건

  1. Google 지도 API 키: 다음 API가 사용 설정된 유효한 API 키가 필요합니다.

  2. 웹 서버: 다음 중 하나에서 애플리케이션을 제공할 수 있습니다.

    • 로컬 웹 서버 (예: Node.js, http-server 사용)
    • 정적 웹 호스팅 서비스 (애플리케이션에 Dockerfile과 함께 제공)

GitHub 프로젝트의 리드미 섹션에서 배포 옵션에 관한 자세한 설명을 확인할 수 있습니다.

배포

GKE 또는 GAE와 같은 모든 컨테이너 환경에서 앱을 노드 애플리케이션 또는 Docker 컨테이너로 배포할 수 있습니다. 호스팅된 데모는 다음 아키텍처를 사용합니다.

이미지

  • 이 아키텍처에서 코드는 GitHub 프로젝트에 있습니다.
  • Cloud Build는 메인에 푸시할 때마다 코드를 가져와 빌드 작업을 트리거합니다.
  • 빌드의 일부로 API 키를 삽입하고 이미지를 만든 후 아티팩트 레지스트리에 저장합니다.
  • 마지막으로 Artifact Registry의 최신 안정화 이미지를 Cloud Run에 배포합니다.
  • 또한 배포된 앱의 상태를 확인하기 위한 상태 점검 및 모니터링도 실행됩니다.

청구 정보

3D 지역 탐색기 솔루션은 Google Maps Platform 서비스를 사용하여 몰입형 동적 환경을 제공합니다. 일부 API에는 요금이 부과될 수 있습니다. 다음은 API의 개요 및 가격 책정 링크입니다

Google Maps Platform - 3D Tiles API:

스토리텔링 솔루션은 3D Tiles API를 사용하여 지리 정보 데이터의 시각적 환경을 개선합니다. 3D Tiles API와 관련된 가격 세부정보는 Google Maps Platform - 3D Tiles API 가격을 참고하세요.

Google Maps Platform - Places API:

Places API는 위치 기반 데이터에 사용되어 스토리텔링 환경에 풍부한 정보를 추가합니다. Google Places API와 관련된 비용을 알아보려면 Google Maps Platform - Places API 가격을 참고하세요.

Google Maps Platform - Autocomplete API:

자동 완성 기능은 사용자 상호작용을 개선합니다. Google Maps Autocomplete API의 가격 책정에 관한 자세한 내용은 Google Maps Platform의 Place Autocomplete 가격 책정 페이지를 참고하세요.

CesiumJS:

CesiumJS는 3D 지구 시각화에 사용됩니다. CesiumJS 자체는 오픈소스이지만 추가 기능이나 서비스에는 자체 관련 비용이 있을 수 있습니다. 프리미엄 제품은 CesiumJS 문서를 참고하세요.

요금은 사용량에 따라 개별적으로 결정되므로 각 API의 가격 책정 세부정보를 검토해야 합니다. Google Maps Platform은 일정량의 사용량을 무료로 제공하는 무료 등급을 제공하며, 요청 수 및 사용 지역과 같은 요인에 따라 가격 세부정보가 다를 수 있습니다.

Google Maps Platform 및 CesiumJS 사용 비용에 관한 가장 정확하고 최신 정보는 항상 공식 가격 페이지를 참고하세요. 이러한 서비스에 명시된 이용약관을 준수하여 관련 비용을 효과적으로 관리하고 파악해야 합니다.

결론

이 문서에서는 3D 영역 탐색기의 기능, 구성요소, 사용자 환경 및 기술 요구사항에 관한 개요를 제공합니다.

Google의 포토리얼리스틱 3D 타일과 Places API를 활용하여 주변 지역을 가상으로 탐색하고 관심 장소를 검색하며 지역 역사를 배울 수 있습니다.

지역을 소개하거나 탐색을 개선하거나 디지털 스토리텔링을 홍보할 때 3D 지역 탐색기는 시각적으로 멋진 플랫폼을 제공합니다.

데모를 사용해 보고 관리 앱으로 맞춤설정하여 흥미롭고 유용한 3D 환경을 만들어 보세요.