Trình khám phá khu vực 3D: Hướng dẫn tuỳ chỉnh

Trình khám phá khu vực 3D là một giải pháp giúp bạn khám phá các cộng đồng ở chế độ 3D sống động. Giải pháp này tận dụng: Ô 3D ảnh thực tế của Google, Tìm kiếm địa điểm, Thông tin về địa điểm, và API Tự động hoàn thành.

Bắt đầu:

Bật

Tuỳ chỉnh trải nghiệm

Giải pháp Trình khám phá khu vực 3D có khả năng tuỳ chỉnh cao, cho phép bạn điều chỉnh trải nghiệm đến hành trình của khách hàng. Bạn có thể tuỳ chỉnh bằng bảng điều khiển trên giao diện người dùng hoặc dùng tệp config.json.

Bạn đã sẵn sàng tuỳ chỉnh? Cách làm như sau:

Vị trí

Xác định điểm bắt đầu của trải nghiệm của bạn bằng cách điều chỉnh vĩ độ và kinh độ trong tệp config.json.

Điều khiển máy ảnh

Làm chủ hành trình của bạn bằng cách chọn loại quỹ đạo của máy ảnh: một kiểu quỹ đạo cổ điển một đường tròn hoặc một sóng sin hấp dẫn.

  • Quỹ đạo cố định:

    Đây là quỹ đạo tròn ở một độ cao cố định và xung quanh một điểm yêu thích cụ thể.

    Hãy xem cách hoạt động của một quỹ đạo cố định bằng cách khám phá văn phòng của Google tại Sydney.

  • Vòm cung động:

    Máy ảnh di chuyển trơn tru theo quỹ đạo sóng hình sin xung quanh một điểm được chỉ định địa điểm yêu thích. Chuyển động độc đáo này giúp người xem quan sát điểm nhấn quan tâm từ nhiều góc độ và độ cao khác nhau, mang đến trải nghiệm linh hoạt trải nghiệm hình ảnh sống động.

    Xem quỹ đạo động trong thực tế bằng cách khám phá tháp Eiffel tháp.

Địa điểm yêu thích (POI):

  • Tuỳ chỉnh dữ liệu khám phá bằng cách xác định loại địa điểm mà bạn muốn đến khám phá. Chọn trong số các bảo tàng, công viên, trường học và nhiều địa điểm khác bằng cách sử dụng types trong config.json.
  • Đặt số lượng tối đa Điểm yêu thích hiển thị bằng cách điều chỉnh tham số density.
  • Sửa đổi searchRadius (in meters) để thêm các viên ngọc hoặc tiêu điểm ẩn ở gần về các lĩnh vực cụ thể.
  • Đặt tốc độ đã chọn cho chuyển động của máy ảnh bằng tham số speed (in revolutions per minute).

Tải trước dữ liệu khám phá: Tìm hiểu sâu hơn bằng cách tuỳ chỉnh URL

Trình khám phá khu vực 3D cho phép bạn xác định trước dữ liệu khám phá của mình bằng URL phần tuỳ chỉnh. Điều này giúp loại bỏ nhu cầu định cấu hình thủ công, tinh giản trải nghiệm người dùng.

Tạo URL hoàn hảo:

Chỉ cần nối thêm các thông số cụ thể vào URL của Trình khám phá khu vực để đặt trước vị trí và các cài đặt khác. Ví dụ:

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

URL này đặt điểm bắt đầu theo vĩ độ và kinh độ đã chỉ định, ngay lập tức đưa bạn đến vị trí đã chọn. Các tham số có sẵn:

  • location.coordinates.lat: Vĩ độ của vị trí bạn đã chọn.
  • location.coordinates.lng: Kinh độ của vị trí bạn đã chọn.
  • poi.types: Danh sách các loại POI được phân tách bằng dấu phẩy để hiển thị.
  • poi.density: Số lượng địa điểm yêu thích tối đa đã chọn.
  • poi.searchRadius: Bán kính để tìm kiếm các địa điểm yêu thích lân cận.
  • camera.speed: Tốc độ quỹ đạo của máy ảnh.
  • camera.orbitType: Loại quỹ đạo của máy ảnh (" quỹ đạo cố định" hoặc " quỹ đạo động").

Lợi ích của tính năng Tuỳ chỉnh URL:

  • Đơn giản hoá trải nghiệm người dùng bằng cách xác định trước các chế độ cài đặt mà bạn đã chọn.
  • Chia sẻ hành trình được nhắm mục tiêu với các vị trí được tải sẵn và POI cụ thể.
  • Nhúng trải nghiệm Trình khám phá khu vực đã định cấu hình sẵn một cách liền mạch vào các trang web.

Bằng cách tận dụng tính năng tuỳ chỉnh URL, bạn có thể tạo ra trải nghiệm riêng và mời người khác tham gia vào những cuộc phiêu lưu tuyển chọn.

Tuỳ chỉnh thêm

Phần trước đã tìm hiểu các điều chỉnh có thể truy cập thông qua giao diện người dùng hoặc cấu hình . Tuy nhiên, bạn cũng có thể sửa đổi một số thông số tích hợp khác để tuỳ chỉnh thêm ứng dụng.

Để thực hiện các tuỳ chỉnh nâng cao này, bạn cần xem mã trong Tệp src/utils/cesium.js nằm trong thư mục src. Nội dung sau đây các biến có thể được thay đổi để thay đổi giao diện và giao diện của ứng dụng

Chiều cao của camera

Kiểm soát độ cao của máy ảnh khi di chuyển đến một điểm bằng cách điều chỉnh giá trị CAMERA_HEIGHT. Giá trị càng cao thì bạn càng chế độ xem toàn cảnh, thu nhỏ, trong khi các giá trị thấp hơn sẽ đưa bạn đến gần thông tin chi tiết về khu vực

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
  • Chế độ cài đặt: CAMERA_HEIGHT
  • Giá trị mặc định: 100
  • Mô tả: Xác định chiều cao của camera phía trên vị trí mục tiêu khi bay đến một điểm.
  • Giá trị mẫu:
    • 50: Xem gần hơn, nhấn mạnh các chi tiết.
    • 200: Chế độ xem toàn cảnh hơn.

Độ cao của máy ảnh

Tên viết tắt nghiêng của camera do BASE_PITCH xác định. Sử dụng các giá trị âm cho độ nghiêng xuống và giá trị dương cho chế độ xem đi lên. Để thêm chuyển động động tinh tế cho khám phá của bạn, hãy thay đổi 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;
  • Chế độ cài đặt: BASE_PITCH và AUTO_ORBIT_PITCH_AMPLITUDE
  • Giá trị mặc định:
    • BASE_PITCH: -30 (giảm 30 độ xuống dưới)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (thay đổi cao độ thêm 10 độ thời gian)

Mô tả: Độ cao của máy ảnh là độ nghiêng trực quan của bản đồ, được đo bằng đơn vị độ. Nó còn được gọi là độ nghiêng. Các chế độ cài đặt này xác định tên viết tắt của camera và điều chỉnh cao độ linh động trong quá trình xoay tự động.

Giá trị mẫu:

  • BASE_PITCH: 0 (camera cấp độ)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (không có biến thiên độ cao)

Phạm vi và thu phóng của máy ảnh

Các thông số này đặt mức thu phóng được áp dụng khi tập trung vào một số . Giá trị nhỏ hơn đồng nghĩa với việc thu phóng gần hơn.

// 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;

Chế độ cài đặt: RANGE_AMPLITUDE_RELATIVE và ZOOM_FACTOR

Giá trị mặc định:

  • RANGE_AMPLITUDE_RELATIVE: 0,55 (chênh lệch khoảng cách tương đối)
  • ZOOM_FACTOR: 20 (hệ số thu phóng của máy ảnh)

Nội dung mô tả: Các chế độ cài đặt này xác định sự thay đổi phạm vi trong khi quay video chuyển động và mức thu phóng để nhìn gần hơn.

Giá trị mẫu:

  • RANGE_AMPLITUDE_RELATIVE: 1 (biến thể đầy đủ)
  • ZOOM_FACTOR: 10 (thu phóng ít hơn)
// 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.
};

Đặt lại máy ảnh

Khi người dùng muốn đặt lại camera về vị trí ban đầu, Các giá trị CAMERA_OFFSET được sử dụng. Cài đặt này bao gồm tiêu đề (xoay), cao độ (nghiêng) và phạm vi (khoảng cách từ máy ảnh đến tâm).

  • Chế độ cài đặt: CAMERA_OFFSET
  • Giá trị mặc định:
    • heading: 0 (không có chênh lệch xoay)
    • pitch: Cesium.Math.toRadians(-30) (đổ dốc 30 độ xuống dưới)
    • range: 800 (cách trung tâm 800 mét)
  • Mô tả: Xác định hướng, độ dốc và phạm vi của máy ảnh để đặt lại chế độ xem.
  • Giá trị mẫu:
    • heading: 45 (độ, nhìn hướng Tây Bắc)
    • range: 1500 mét (cách trung tâm hơn)

Toạ độ bắt đầu:

START_COORDINATES xác định kinh độ, vĩ độ và độ cao ban đầu cho máy ảnh. Đây là nơi dữ liệu khám phá sẽ bắt đầu, vì vậy, hãy đặt dữ liệu khám phá thành khu vực mà bạn muốn người dùng nhìn thấy đầu tiên.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};
  • Chế độ cài đặt: START_COORDINATES

  • Giá trị mặc định:

    • longitude: 0
    • latitude: 60
    • height: 15000000 (15.000 km trên bề mặt)

  • Giá trị mẫu:

    • longitude: -122.4934, latitude: 37.7951 (Cầu Cổng Vàng)
    • height: 2000 (vị trí bắt đầu gần hơn)

Tải một vị trí được xác định trước

Đối tượng location trong config.json đặt trung tâm của khu vực. Đó là góc nhìn ban đầu của camera trong trình xem Cesium.coordinates: Xác định vĩ độ (lat) và kinh độ (lng) cho vị trí mà bạn muốn máy ảnh di chuyển đến trước tiên. Điều chỉnh các giá trị này để đặt camera thành vị trí cụ thể bất kỳ hình ảnh địa cầu.

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

Cấu hình này cho phép bạn khởi động ứng dụng Trình điều hướng địa điểm 3D phóng to một địa điểm cụ thể mà bạn chọn. Bạn có thể sử dụng công cụ Mã hoá địa lý của Google để biết vĩ độ và kinh độ toạ độ của một địa chỉ hoặc tên địa điểm bằng cách chỉ định nó trong vị trí đối tượng:

  1. Truy cập vào khoá học Mã hoá địa lý Công cụ.
  2. Tạo yêu cầu mã hoá địa lý Nhấp vào nút "Tự thử" và nhập vị trí bạn đã chọn vào phần "Địa chỉ" . Bạn có thể chỉ định một địa chỉ, tên địa điểm hoặc thậm chí là các địa danh.
  3. Tạo toạ độ Nhấp vào nút "Chạy" để gửi yêu cầu của bạn. Công cụ này sẽ trả về một phản hồi chứa nhiều thông tin về vị trí, bao gồm cả toạ độ vĩ độ và kinh độ hiển thị trong mục geometry.location.
  4. Sử dụng mã địa lý Sao chép các giá trị vĩ độ và kinh độ được truy xuất từ phản hồi và dán chúng vào đối tượng coordinates trong cấu hình của bạn.

Lưu ý: Mã địa lý dùng theo cách này phải tuân thủ các điều khoản nêu trong Google Maps Điều khoản của Nền tảng Dịch vụ mục 3.4, đó là chúng không được lưu vào bộ nhớ đệm quá 30 ngày và phải sẽ được làm mới sau đó.

hình ảnh

Cấu hình này sẽ sử dụng công cụ Mã hóa địa lý để tự động xác định toạ độ của trụ sở chính của Google tại Mountain View, California và ra mắt ứng dụng Trình điều hướng địa điểm 3D của bạn với máy ảnh được căn giữa vào vị trí đó.

Tuỳ chỉnh nâng cao

Bạn có thể thực hiện các chế độ tuỳ chỉnh khác bằng cách tìm hiểu kỹ hơn về mã này. Phần sau đây hướng dẫn bạn về một số tuỳ chọn

Thêm đường dẫn máy ảnh mới

Ngay từ đầu, giải pháp này sẽ triển khai 2 đường dẫn máy ảnh khác nhau:

fixed-orbit" | "dynamic-orbit"

Tuy nhiên, nếu muốn, bạn có thể tạo một đường dẫn máy ảnh mới bằng cách sử dụng

/src/utils/cesium.js trong hàm calculateAutoOrbitFrame.

Để sử dụng cách tính đường dẫn mới này trong bảng điều khiển cấu hình, hãy tham khảo cách triển khai trong demo/src/camera-settings.js.

Thêm các loại địa điểm khác

Bạn có thể điều chỉnh danh sách loại địa điểm cho cấu hình trong tệp demo/src/place-settings.js. Bắt đầu trên dòng 4 là các địa điểm có trong bản minh hoạ.

Nếu bạn muốn sử dụng các loại địa điểm cụ thể mà không cần thay đổi nguồn minh hoạ, bạn có thể chỉ có thể thêm họ vào tệp config.json trong poi.types

Tuỳ chỉnh kiểu (css)

Đối với các kiểu mà chúng tôi đã làm việc với các biến CSS. Các mã này được hỗ trợ ở mọi chuyên ngành trình duyệt và giúp có thể thay đổi một dòng ở một vị trí trung tâm và cập nhật thuộc tính CSS cụ thể. Các biến CSS của chúng ta được xác định trong src/main.css.. Tại đây, bạn có thể điều chỉnh màu sắc, chế độ cài đặt phông chữ và khoảng đệm hoặc lề cho toàn bộ ứng dụng.

Phủ dữ liệu bổ sung

Để phủ thêm dữ liệu, bạn cần cập nhật tệp src/utils/cesium.js và tham khảo tài liệu về xesi về cách thêm GeoJSON hoặc tham chiếu địa lý khác dữ liệu ra toàn cầu.

Xoá các phần cấu hình

Ứng dụng JavaScript của chúng tôi có ba phần chính trong tệp cấu hình: demo/src/[config-panel.js](config-panel.js): location, poi và camera. Mỗi phần trong số các phần này cung cấp các tuỳ chọn cấu hình cho khía cạnh khác nhau của ứng dụng. Nhà phát triển có thể tuỳ chỉnh các phần này dựa trên nhu cầu cụ thể của mình.

1.Xoá một phần cụ thể khỏi cấu hình

  • Mục Vị trí

Để xoá phần location, hãy tìm dòng sau trong mã và chú thích hoặc xoá dòng đó:

const locationConfig = { ...config.location, ...customConfig.location };
  • Mục địa điểm yêu thích

Để xoá phần poi, hãy tìm dòng sau trong mã và nhận xét của bạn hoặc xoá dữ liệu:

const poiConfig = { ...config.poi, ...customConfig.poi };
  • Phần Máy ảnh

Để xoá phần camera, hãy tìm dòng sau trong mã và nhận xét của bạn hoặc xoá dữ liệu:

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

2. Cập nhật cấu hình kết hợp

Sau khi xoá một mục, bạn cần phải cập nhật cấu hình kết hợp . Đối tượng này hợp nhất cấu hình mặc định với mọi tuỳ chỉnh. Xoá thuộc tính tương ứng khỏi đối tượng 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. Điều chỉnh các thành phần trên giao diện người dùng

Nếu việc xoá một phần cũng có nghĩa là xoá các thành phần liên quan trên giao diện người dùng, hãy cập nhật mã cho phù hợp trong mã html. Ví dụ: nếu bạn muốn xoá một từ Bảng điều khiển quản trị (chẳng hạn như tốc độ của máy ảnh), bạn phải cập nhật cả js và html cho điều đó.

4. Xóa phần cài đặt camera

Để xoá phần cài đặt máy ảnh khỏi giao diện người dùng, hãy tìm dòng sau và nhận xét hoặc xoá nhận xét:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Đang xóa phần tóm tắt mục Vị trí

const locationSection = await getLocationSettingsSection(locationConfig);

Kết luận

Trong tài liệu này, chúng ta đã khám phá các tuỳ chọn tuỳ chỉnh có sẵn trong Trình khám phá khu vực để điều chỉnh trải nghiệm khám phá 3D của bạn. Sửa đổi hành vi của máy ảnh, điều chỉnh độ nghiêng hình ảnh và thay đổi mức thu phóng, bạn có thể tạo trải nghiệm độc đáo và hấp dẫn thể hiện các chế độ cài đặt và điểm mà bạn chọn quan tâm.

Hãy nhớ thử nghiệm với các cấu hình khác nhau và tinh chỉnh cho phù hợp với nhu cầu cụ thể của mình. Bằng cách tận dụng sức mạnh của bạn có thể tạo ra những hành trình sống động và phù hợp với từng cá nhân, cuốn hút đối tượng khán giả và hiện thực hoá tầm nhìn của bạn.