이 페이지는 Cloud Translation API를 통해 번역되었습니다.

3D 영역 탐색기: 맞춤설정 가이드

3D 영역 탐색기는 매혹적인 3D로 커뮤니티를 탐색할 수 있는 솔루션입니다. 이 솔루션은 Google의 Photorealistic 3D Tiles, Places Search, Place Details, Autocomplete API를 활용합니다.

시작하기:

사용 설정

환경 맞춤설정

3D 영역 탐색기 솔루션은 고도로 맞춤설정이 가능하므로 고객 여정에 맞게 환경을 맞춤설정할 수 있습니다. UI의 제어판을 사용하거나 config.json 파일을 사용하여 맞춤설정할 수 있습니다.

맞춤설정할 준비가 되셨나요? 방법은 다음과 같습니다.

위치

config.json 파일에서 위도와 경도를 조정하여 환경의 시작점을 정의합니다.

카메라 제어

카메라의 궤도 유형(전형적인 원형 경로 또는 흥미로운 사인파)을 선택하여 이동 경로를 제어하세요.

고정 궤도:

특정 관심 지점을 중심으로 높이가 고정된 원형 궤도입니다.

Google 시드니 사무실을 탐색하여 고정된 궤도의 실제 작동 모습을 확인해 보세요.
동적 궤도:

카메라는 지정된 관심 장소 주변의 사인파 궤도를 따라 부드럽게 움직입니다. 이 독특한 움직임을 통해 시청자는 관심 장소를 다양한 높이와 각도에서 볼 수 있으며 역동적이고 몰입도 높은 시각적 경험을 제공할 수 있습니다.

에펠탑을 탐색하여 실제 궤도선을 구경하세요.

관심 장소 (POI):

찾고자 하는 장소 유형을 결정하여 탐색 분석을 맞춤설정합니다. config.json에서 types 배열을 사용하여 박물관, 공원, 학교 등 다양한 장소 중에서 선택하세요.
density 매개변수를 조정하여 표시할 최대 관심 장소 수를 설정합니다.
searchRadius (in meters)를 수정하여 근처의 숨겨진 보석을 포함하거나 특정 지역에 집중합니다.
speed (in revolutions per minute) 매개변수를 사용하여 선택된 카메라 이동 속도를 설정합니다.

탐색 분석 미리 로드: URL 맞춤설정 자세히 알아보기

3D 영역 탐색기를 사용하면 URL 맞춤설정을 통해 탐색 분석을 미리 정의할 수 있습니다. 따라서 수동으로 구성할 필요가 없으므로 사용자 환경이 간소화됩니다.

완벽한 URL 만들기:

영역 탐색기 URL에 특정 매개변수를 추가하여 위치 및 기타 설정을 사전 설정하기만 하면 됩니다. 예를 들면 다음과 같습니다.

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

이 URL은 지정된 위도와 경도로 시작점을 설정하여 즉시 선택한 위치로 이동합니다. 사용 가능한 매개변수:

location.coordinates.lat: 선택한 위치의 위도
location.coordinates.lng: 선택한 위치의 경도입니다.
poi.types: 표시할 관심 장소 유형의 쉼표로 구분된 목록입니다.
poi.density: 선택한 최대 관심 장소 수입니다.
poi.searchRadius: 주변 관심 장소를 검색하는 반경입니다.
camera.speed: 카메라 궤도 속도입니다.
camera.orbitType: 카메라 궤도 유형 ('고정 궤도' 또는 '동적 궤도')입니다.

URL 맞춤설정의 이점:

선택한 설정을 사전 정의하여 사용자 환경을 간소화하세요.
타겟팅된 여정을 미리 로드된 특정 위치 및 관심 장소와 공유합니다.
사전 구성된 Area Explorer 환경을 웹사이트에 원활하게 삽입할 수 있습니다.

URL 맞춤설정을 활용하면 맞춤 환경을 만들고 선별된 모험을 시작하도록 다른 사용자를 초대할 수 있습니다.

추가 맞춤설정

이전 섹션에서는 UI 또는 구성 파일을 통해 액세스할 수 있는 조정을 살펴봤습니다. 그러나 애플리케이션을 더 맞춤설정하기 위해 수정할 수 있는 다른 기본 제공 매개변수도 몇 가지 있습니다.

이러한 고급 맞춤설정을 수행하려면 src 디렉터리에 있는 src/utils/cesium.js 파일에서 코드를 확인해야 합니다. 다음 변수를 변경하여 애플리케이션의 모양과 느낌을 변경할 수 있습니다.

카메라 높이

CAMERA_HEIGHT 값을 조정하여 특정 지점을 향해 비행할 때 카메라가 자동으로 배치되는 높이를 제어합니다. 값이 클수록 더 축소된 파노라마 뷰가 제공되며, 값이 작을수록 해당 영역의 세부정보에 더 가까워집니다.

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;

설정: CAMERA_HEIGHT
기본값: 100
설명: 특정 지점으로 이동할 때 대상 위치 위로 카메라 높이를 정의합니다.
값 예시:
- 50: 더 가까이에서 디테일을 강조
- 200: 더 파노라마 관점.

카메라 피치

카메라의 초기 기울기는 BASE_PITCH에 의해 정의됩니다. 아래로 기울이려면 음수 값을 사용하고 위쪽으로 기울일 때는 양수 값을 사용하세요. 탐색 분석에 미세한 동적 움직임을 추가하려면 AUTO_ORBIT_PITCH_AMPLITUDE를 변경합니다.

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;

설정: BASE_PITCH 및 AUTO_ORBIT_PITCH_AMPLITUDE
기본값:
- BASE_PITCH: -30 (30도 아래쪽으로 피칭)
- AUTO_ORBIT_PITCH_AMPLITUDE: 10 (시간 경과에 따라 높낮이 10도 변경)

설명: 카메라 피치는 도 단위로 측정되는 지도의 시각적 기울기입니다. 기울기라고도 합니다. 이 설정은 자동 회전 중 카메라의 초기 피치와 동적 피치 조정을 정의합니다.

예시 값:

BASE_PITCH: 0 (수평 카메라)
AUTO_ORBIT_PITCH_AMPLITUDE: 0 (음조 변화 없음)

카메라 범위 및 확대/축소

이러한 매개변수는 특정 지점에 초점을 맞출 때 적용되는 확대/축소 정도를 설정합니다. 값이 작을수록 더 가까이 확대/축소됩니다.

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

설정: RANGE_AMPLITUDE_RELATIVE 및 ZOOM_FACTOR

기본값:

RANGE_AMPLITUDE_RELATIVE: 0.55 (상대적 거리 변화)
ZOOM_FACTOR: 20 (카메라 확대/축소 비율)

설명: 이 설정은 카메라가 움직이는 동안의 범위 변화와 더 자세히 살펴보기 위한 확대/축소 수준을 정의합니다.

예시 값:

RANGE_AMPLITUDE_RELATIVE: 1 (전체 범위 변형)
ZOOM_FACTOR: 10 (더 작게 확대/축소)

// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

카메라 초기화

사용자가 카메라를 원래 위치로 재설정하려고 할 때 CAMERA_OFFSET 값이 사용됩니다. 이 설정에는 방향 (회전), 피치 (기울기), 범위 (카메라와 중앙의 거리)가 포함됩니다.

설정: CAMERA_OFFSET
기본값:
- heading: 0 (회전 오프셋 없음)
- pitch: Cesium.Math.toRadians(-30) (30도 아래쪽으로 피칭)
- range: 800 (중심으로부터 800미터)
설명: 뷰를 재설정하기 위한 카메라 방향, 피치, 범위를 정의합니다.
값 예시:
- heading: 45 (도, 북서쪽 보기)
- range: 1,500미터 (중심으로부터 멀어짐)

시작 좌표:

START_COORDINATES는 카메라의 초기 경도, 위도, 높이를 정의합니다. 여기에서 탐색 분석이 시작되므로 사용자에게 먼저 표시할 영역으로 설정합니다.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};

설정: START_COORDINATES
기본값:
- longitude: 0
- latitude: 60
- height: 15000000 (표면 위 15,000km)
예시 값:
- longitude: -122.4934, latitude: 37.7951 (골든게이트교)
- height: 2000 (더 가까운 시작 위치)

사전 정의된 위치 로드

config.json의 location 객체는 영역의 중심을 설정합니다. Cesium 뷰어에서 카메라의 초기 시점입니다.coordinates: 카메라를 첫 번째로 패닝할 위치의 위도 (lat)와 경도 (lng)를 정의합니다. 이러한 값을 조정하여 지구본에서 원하는 특정 위치로 카메라를 설정합니다.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

이 구성을 사용하면 선택한 특정 위치로 확대하여 3D Place Navigator 애플리케이션을 시작할 수 있습니다. Google의 지오코딩 도구를 사용하여 주소 또는 장소 이름의 위도 및 경도 좌표를 위치 객체에 지정하여 가져올 수 있습니다.

지오코딩 도구에 액세스합니다.
지오코딩 요청 만들기 'Try It Yourself' 섹션을 클릭하고 'Address' 필드에 선택한 위치를 입력합니다. 주소, 장소 이름 또는 명소도 지정할 수 있습니다.
좌표 생성 '실행' 버튼을 클릭하여 요청을 제출하세요. 이 도구는 geometry.location 섹션에 표시된 위도 및 경도 좌표를 포함하여 위치에 관한 다양한 정보가 포함된 응답을 반환합니다.
지오코드 사용 응답에서 가져온 위도와 경도 값을 복사하여 구성 내의 coordinates 객체에 붙여넣습니다.

참고: 이 방법으로 사용된 지오코드는 30일 넘게 캐시해서는 안 되며 그 후에는 새로고침해야 한다는 Google Maps Platform 서비스 약관 3.4에 설명된 약관을 준수해야 합니다.

이 구성에서는 지오코딩 도구를 사용하여 캘리포니아주 마운틴뷰에 있는 Google 본사의 좌표를 자동으로 결정하고 해당 위치의 중심에 카메라를 두고 3D Place Navigator 애플리케이션을 실행합니다.

고급 맞춤설정

코드를 자세히 살펴보면 추가로 맞춤설정할 수 있습니다. 다음 섹션에서는 몇 가지 옵션을 안내합니다.

새 카메라 경로 추가

이 솔루션은 기본적으로 두 가지 카메라 경로를 구현합니다.

fixed-orbit" | "dynamic-orbit"

하지만 원하는 경우 새 카메라 경로를 만들고 싶다면

/src/utils/cesium.js를 calculateAutoOrbitFrame 함수에 추가하세요.

구성 패널에서 이 새로운 경로 계산을 사용하려면 demo/src/camera-settings.js.의 구현을 참고하세요.

장소 유형 추가

구성의 장소 유형 목록은 demo/src/place-settings.js 파일에서 조정할 수 있습니다. 4번째 줄부터 데모에서 사용할 수 있는 장소 유형이 표시됩니다.

데모 소스를 변경하지 않고 특정 장소 유형을 사용하려면 poi.types의 config.json 파일에 추가하면 됩니다.

스타일 맞춤설정 (CSS)

CSS 변수로 작업한 스타일의 경우 모든 주요 브라우저에서 지원되므로 중앙에서 한 줄을 변경하고 특정 CSS 속성을 업데이트할 수 있습니다. CSS 변수는 src/main.css.에 정의되어 있습니다. 여기에서 전체 애플리케이션의 색상, 글꼴 설정, 패딩이나 여백을 조정할 수 있습니다.

추가 데이터 오버레이

추가 데이터를 오버레이하려면 src/utils/cesium.js 파일을 업데이트하고 GeoJSON 또는 기타 지리 참조 데이터를 지구본에 추가하는 방법에 관한 cesium 문서를 참고해야 합니다.

구성 섹션 삭제

JavaScript 애플리케이션의 구성 파일에는 세 가지 기본 섹션(demo/src/[config-panel.js](config-panel.js): location, poi, camera)이 있습니다. 이러한 각 섹션에서는 애플리케이션의 다양한 측면에 대한 구성 옵션을 제공합니다. 개발자는 구체적인 요구사항에 따라 이러한 섹션을 맞춤설정할 수 있습니다.

1.구성에서 특정 섹션 삭제

위치 섹션

location 섹션을 삭제하려면 코드에서 다음 줄을 찾아 주석 처리하거나 삭제합니다.

const locationConfig = { ...config.location, ...customConfig.location };

관심 장소 섹션

poi 섹션을 삭제하려면 코드에서 다음 줄을 찾아 주석 처리하거나 삭제합니다.

const poiConfig = { ...config.poi, ...customConfig.poi };

카메라 섹션

camera 섹션을 삭제하려면 코드에서 다음 줄을 찾아 주석 처리하거나 삭제합니다.

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. 결합된 구성 업데이트

섹션을 삭제한 후에는 결합된 구성 객체를 업데이트해야 합니다. 이 객체는 기본 구성을 맞춤설정과 병합합니다. combinedConfig 객체에서 상응하는 속성을 삭제합니다.

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. UI 요소 조정

섹션을 삭제하면 관련 UI 요소도 삭제되므로 html 코드에서 코드를 적절하게 업데이트하세요. 예를 들어 관리자 패널에서 카메라 속도와 같은 특정 섹션을 삭제하려면 해당 섹션의 js 및 html 코드를 모두 업데이트해야 합니다.

4. 카메라 설정 섹션 삭제

UI에서 카메라 설정 섹션을 삭제하려면 다음 줄을 찾아 주석 처리하거나 삭제합니다.

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

위치 섹션 요약 삭제

const locationSection = await getLocationSettingsSection(locationConfig);

결론

이 문서에서는 3D 탐색 환경을 맞춤설정하는 데 영역 탐색기에서 사용할 수 있는 다양한 맞춤설정 옵션을 살펴보았습니다. 카메라 동작을 수정하고 시각적인 기울기를 조정하고 확대/축소 수준을 변경하여 선택한 설정과 관심 장소를 보여주는 독특하고 매력적인 환경을 만들 수 있습니다.

다양한 구성을 실험하고 특정 니즈에 맞게 매개변수를 미세 조정해야 합니다. 맞춤설정의 힘을 활용하면 시청자를 사로잡고 비전을 실현하는 몰입도 높은 맞춤형 여정을 만들 수 있습니다.