개요
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 자동 완성 검색창을 사용하여 표시할 지역을 찾습니다. 위치를 선택하면 카메라가 해당 영역으로 원활하게 이동합니다.
카메라: 카메라 이동 속도와 궤도 유형을 조정하여 선택한 시청 환경을 만듭니다.
장소 (관심 장소): 표시할 관심 장소의 밀도, 검색 반경, 유형 (예: 음식점, 카페, 랜드마크)을 정의합니다.
이 앱을 사용하여 최종 사용자를 위한 환경을 맞춤설정하세요.
느린 카메라 경로를 따라 Google 시카고 오피스를 둘러보세요.
라스베이거스 스트립 주변 관광 명소의 밀집된 뷰를 확인하세요.
이제 고속 사인파 카메라 경로를 따라 라스베이거스를 탐색해 보세요.
주요 관광 명소와 함께 그랜드 캐년을 탐험하세요.
모든 맞춤설정에 대한 자세한 설명이 3D 영역 탐색기 맞춤설정을 참조하세요.
데모 앱
관리 앱에서 만든 구성을 로드하는 최종 사용자 대상 애플리케이션입니다. 이 몰입도 높은 3D 환경에서 사용자는 선택한 영역을 탐색하고 강조 표시한 장소를 찾을 수 있습니다.
관리 앱을 사용하여 디자인과 분위기를 맞춤설정하면 구성을 다운로드하고 소스 코드에서 맞춤 애플리케이션을 실행할 수 있습니다.
사용자 환경
이 애플리케이션의 주요 기능은 다음과 같습니다.
- 사용자는 건물, 랜드마크, 지형을 비롯한 지역을 3D로 양방향으로 탐색할 수 있습니다.
- 사용자가 주변 장소 (예: 박물관, 공원, 음식점)를 검색하고 찾을 수 있습니다.
사용자는 장소를 선택하면 해당 위치와 관련된 자세한 정보나 설명을 볼 수 있습니다.
개발자는 설정 및 제어 기능 (관리 앱을 사용하는 경우)을 통해 탐색 환경을 맞춤설정할 수 있습니다.
자동 회전이 사용 설정되어 있으면 선택한 영역의 중심을 중심으로 카메라가 자동으로 회전합니다.
기본 요건
Google 지도 API 키: 다음 API가 사용 설정된 유효한 API 키가 필요합니다.
웹 서버: 다음 중 하나에서 애플리케이션을 제공할 수 있습니다.
- 로컬 웹 서버 (예: 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 환경을 만들어 보세요.