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

3D 지역 탐색기는 지역사회를 탐색할 수 있는 매혹적인 3D입니다. 이 솔루션은 Google의 포토리얼리스틱 3D 타일, 장소 검색, 장소 세부정보, 자동 완성 API를 활용합니다.

시작하기:

호스팅된 3D Area Explorer Admin 앱 사용

또는

API 키 가져오기 그런 다음 GitHub에서 코드를 다운로드하세요.

사용 설정

• 실사 3D 타일 API
• Places API

환경 맞춤설정

3D 지역 탐색기 솔루션은 세부적인 맞춤설정이 가능하므로 어떻게 도움이 되는지 알아보겠습니다. 광고 단위를 UI의 제어판 또는 config.json 파일을 사용하여

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

위치

위도와 경도를 조정하여 실험의 시작 지점을 정의합니다. config.json 파일에 있습니다.

카메라 제어

카메라의 궤도 유형(예: 클래식)을 선택하여 이동을 제어하세요. 흥미로운 사인파입니다.

• 고정 궤도:

  고정된 높이에서 특정 관심 장소를 중심으로 원형 궤도를 도는 것입니다.

  Google 시드니 탐험을 통해 실제 궤도에 있는 궤도 확인 Office를 참고하세요.

• 동적 궤도:

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

  에펠탑을 탐색하여 동적 궤도의 작동 방식을 확인하세요.

관심 장소 (POI):

• 원하는 장소 유형을 결정하여 탐색 분석을 맞춤설정합니다. 발견. types를 사용하여 박물관, 공원, 학교 등 다양한 장소 중에서 선택하세요. config.json의 배열입니다.
• 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 맞춤설정을 활용하면 선별된 모험을 떠나도록 다른 사용자를 초대할 수 있습니다.

참고: 완전히 로드된 맞춤설정된 URL을 사용해 보세요. https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

추가 맞춤설정

이전 섹션에서는 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의 지오코딩 도구를 사용하여 위도와 경도를 가져올 수 있습니다. 주소 또는 장소 이름의 좌표(위치에 지정) 객체:

1. 지오코딩 도구를 참고하세요.
2. 지오코딩 요청 만들기 '직접 해보기'를 클릭합니다. 섹션과 '주소'에 선택한 위치를 입력합니다. 필드를 확인합니다. 주소를 지정하거나 또는 랜드마크를 포함할 수도 있습니다.
3. 좌표 생성 '실행'을 클릭합니다. 버튼을 클릭하여 요청을 제출하세요. 이 도구는 위치에 대한 다양한 정보가 포함된 응답을 반환합니다. 위도 및 경도 좌표를 포함하여 geometry.location 섹션.
4. 지오코드 사용 구성 내 coordinates 객체에 붙여넣습니다.

참고: 이 방식으로 사용되는 지오코드는 Google 지도에 명시된 약관을 따라야 합니다. 플랫폼 약관 서비스 섹션 3.4에 따라 30일 이상 캐시해서는 안 되며 그 후에는 새로고침해야 합니다

이 구성은 지오코딩 도구를 사용하여 미국 캘리포니아주 마운틴뷰에 있는 Google 본사의 좌표를 해당 위치를 중심으로 하여 3D Place Navigator 애플리케이션을 생성할 수 있습니다.

참고: 이 방법을 사용하면 좌표를 찾는 과정이 간소화되고 API도 사용할 수 있습니다 구성 내에서 주소나 이름을 사용하여 모든 위치를 원활하게 탐색할 수 있습니다.

고급 맞춤설정

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

새 카메라 경로 추가

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

fixed-orbit" | "dynamic-orbit"

그러나 새 카메라 경로를 만들고 싶다면

calculateAutoOrbitFrame 함수의 /src/utils/cesium.js

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

장소 유형 추가

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

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

스타일 맞춤설정 (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 탐색 환경을 조정하기 위해 지역 탐색기에서 사용할 수 있는 다양한 맞춤설정 옵션을 살펴봤습니다. 수정 시각적 기울기 조정, 확대/축소 수준 변경 등 다양한 기능을 사용하여 선택한 설정과 포인트를 보여주는 독특하고 매력적인 경험 있습니다.

다양한 구성을 실험해 보고 매개변수를 지정할 수 있습니다. AI와 머신러닝의 몰입도 높고 개인화된 경험을 선사하여 비전을 실현하는 방법입니다.