개요
3D 지역 탐색기 솔루션을 사용하면 완전히 새로운 방식으로 위치를 발견하고 경험할 수 있습니다. 이 솔루션은 Google Maps Platform 포토리얼리스틱 3D 타일 및 Places API의 기능을 활용하여 매력적인 양방향 3D 환경을 만듭니다.
3D 지역 탐색기는 여러 용도로 사용되도록 설계되었습니다.
지역 탐색 개선: 사용자는 시각적 세부사항이 많은 지역을 가상으로 탐색하여 지역의 특징과 랜드마크에 대한 유용한 정보를 얻을 수 있습니다.
위치 기반 스토리 홍보: 풍부한 설명이 포함된 관심 장소(POI)를 통합하여 특정 위치에 대해 사용자에게 교육하고 정보를 제공하는 스토리 중심 환경을 만들 수 있습니다.
Google 지도 3D 기능을 사용하여 개발에 영감을 얻으세요: 몰입감 있는 대화형 지도를 만들기 위한 Google의 3D 지도 데이터의 잠재력을 보여줍니다.
시작하기:
사용 설정
핵심 기술
이 솔루션은 다음 두 가지 주요 기술을 사용하여 빌드됩니다.
Google Maps Platform API:
Google에서는 Google Maps Platform의 여러 API를 사용하여 기본 지도와 데이터를 가져와 이 환경을 만듭니다.
- Google 지도 포토리얼리스틱 3D 타일: 건물과 지형의 고해상도 3D 모델은 도시 환경을 사실적이고 시각적으로 매력적으로 표현합니다.
- Places API: 앱은 탐색된 지역 내의 관심 장소 (POI)에 관한 자세한 정보를 식별하고 표시하여 지역 정보로 사용자 환경을 풍부하게 할 수 있습니다.
- Autocomplete는 사용자가 특정 위치나 관심분야를 검색하는 데 도움이 됩니다.
CesiumJS
CesiumJS는 고해상도 3D 지구본을 렌더링하고 표시하는 역할을 합니다. 건물과 지형의 3D 메시 모델을 제공하는 Google의 실사 3D 타일의 로드 및 시각화를 처리합니다.
카메라 관리: CesiumJS는 카메라의 위치, 방향, 움직임을 제어하는 도구를 제공합니다. 여기에는 다음이 포함됩니다.
- 앱을 로드할 때 지정된 동네에 초점을 맞추도록 초기 뷰포인트를 설정합니다.
- 탐색을 위한 자동 궤도 애니메이션과 같은 동적 카메라 움직임 구현
- 이러한 기능이 포함된 경우 글로브와의 사용자 상호작용 처리(화면 이동, 확대/축소, 회전)
포토리얼리스틱 3D 타일이 3D 타일 렌더러와 함께 작동하는 방법을 알아봅니다.
주요 구성요소
애플리케이션은 다음과 같은 두 가지 앱으로 나뉩니다.
- 관리 앱
- 데모 앱
이 다이어그램은 두 애플리케이션 간의 차이점과 상관관계를 간략하게 보여줍니다.
각 앱을 자세히 조사하는 것이 좋습니다.
관리 앱
이 애플리케이션은 3D 환경을 맞춤설정할 수 있는 사용자 친화적인 인터페이스를 제공합니다.
위치 검색 : 통합 Google Maps Platform Autocomplete 검색창을 사용하여 표시하려는 지역을 찾습니다. 위치를 선택하면 카메라가 해당 지역으로 원활하게 이동합니다.
카메라: 카메라 이동 속도와 궤도 유형을 조정하여 원하는 시청 환경을 만듭니다.
장소 (POI): 표시할 관심 장소 (예: 레스토랑, 카페, 랜드마크)의 밀도, 검색 반경, 유형을 정의합니다.
이 앱을 사용하여 최종 사용자의 환경을 맞춤설정하세요.
라스베이거스 스트립 주변의 관광 명소를 빽빽하게 표시한 뷰를 확인하세요.
모든 주요 관광 명소를 둘러보며 그랜드 캐니언을 탐험하세요.
모든 맞춤설정은 3D Area Explorer 맞춤설정에 자세히 설명되어 있습니다.
데모 앱
이것은 관리 앱에서 만든 구성을 로드하는 최종 사용자 대상 애플리케이션입니다. 이 몰입형 3D 환경에서 사용자는 선택한 영역을 탐색하고 강조 표시된 장소를 발견할 수 있습니다.
관리 앱을 사용하여 디자인을 맞춤설정한 후 구성을 다운로드하고 소스 코드에서 맞춤 애플리케이션을 실행할 수 있습니다.
사용자 환경
애플리케이션의 주요 기능은 다음과 같습니다.
- 사용자는 건물, 랜드마크, 지형 등 지역을 3D로 대화형으로 탐색할 수 있습니다.
- 사용자는 박물관, 공원, 음식점 등 주변 장소를 검색하고 찾을 수 있습니다.
장소를 선택하면 사용자는 해당 위치와 관련된 세부정보 또는 설명을 볼 수 있습니다.
개발자는 설정 및 관리 앱을 사용하는 경우 컨트롤을 통해 탐색 환경을 맞춤설정할 수 있습니다.
자동 회전이 사용 설정되어 카메라가 선택한 영역의 중심을 중심으로 자동으로 회전할 수 있습니다.
기본 요건
Google 지도 API 키: 다음 API가 사용 설정된 유효한 API 키가 필요합니다.
웹 서버: 다음 중 하나에서 애플리케이션을 제공할 수 있습니다.
- 로컬 웹 서버 (예: Node.js, http-server 사용)
- 정적 웹 호스팅 서비스 (애플리케이션에는 Dockerfile이 포함됨)
배포 옵션에 대한 자세한 설명은 GitHub 프로젝트의 readme 섹션에서 확인할 수 있습니다.
배포
GKE 또는 GAE와 같은 컨테이너 환경에서 앱을 노드 애플리케이션 또는 Docker 컨테이너로 배포할 수 있습니다. 호스팅된 데모는 다음 아키텍처를 사용합니다.
- 이 아키텍처에서는 코드가 GitHub 프로젝트에 있습니다.
- Cloud Build는 main에 푸시된 코드를 가져와 빌드 작업을 트리거합니다.
- 빌드의 일부로 API 키를 삽입하고 이미지를 만든 후 아티팩트 레지스트리에 저장합니다.
- 마지막으로 Artifact Registry에서 최신 안정화 이미지를 Cloud Run에 배포합니다.
- 배포된 앱의 상태를 확인하기 위해 실행되는 상태 점검 및 모니터링도 있습니다.
청구 정보
3D 지역 탐색기 솔루션은 Google Maps Platform 서비스를 사용하여 몰입형 동적 환경을 제공합니다. 일부 API는 요금이 부과될 수 있습니다. 다음은 API 개요와 가격 링크입니다.
Google Maps Platform - 3D Tiles API:
스토리텔링 솔루션은 3D 타일 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 - Places Autocomplete 가격을 참고하세요.
CesiumJS:
CesiumJS는 3D 지구 시각화에 사용됩니다. CesiumJS 자체는 오픈소스이지만 추가 기능이나 서비스에는 자체 관련 비용이 있을 수 있습니다. 프리미엄 제품은 CesiumJS 문서를 참고하세요.
요금은 사용량에 따라 개별적으로 결정되므로 각 API의 가격 세부정보를 검토하는 것이 중요합니다. Google Maps Platform에서는 일정량의 사용량을 무료로 제공하는 무료 등급을 제공하며, 가격 세부정보는 요청 수 및 사용 지역과 같은 요인에 따라 달라질 수 있습니다.
Google Maps Platform 및 CesiumJS 사용 비용에 관한 가장 정확한 최신 정보는 항상 공식 가격 책정 페이지를 참고하세요. 이러한 서비스에서 설명하는 이용약관을 준수하여 관련 비용을 효과적으로 관리하고 파악하세요.
결론
이 문서에서는 3D 영역 탐색기의 기능, 구성요소, 사용자 환경, 기술 요구사항을 간략하게 설명합니다.
Google의 포토리얼리스틱 3D 타일 및 Places API를 활용하여 주변 지역을 가상으로 탐색하고, 관심 장소를 발견하고, 지역 역사를 알아볼 수 있습니다.
지역을 선보이거나, 탐색을 개선하거나, 디지털 스토리텔링을 홍보하는 등 3D Area Explorer는 시각적으로 멋진 플랫폼을 제공합니다.
데모를 사용해 보고 관리 앱을 사용하여 데모를 맞춤설정하여 흥미롭고 유익한 3D 환경을 만들어 보세요.