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 cho phép bạn khám phá các cộng đồng bằng cách thu hút mô hình 3D. Giải pháp này khai thác: Thẻ thông tin 3D ảnh thực tế của Google, Tìm kiếm địa điểm, Thông tin chi tiết 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, giúp bạn điều chỉnh trải nghiệm cho phù hợp với 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 xuất phát của trải nghiệm bằng cách điều chỉnh vĩ độ và kinh độ trong tệp config.json.

Điều khiển camera

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

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

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

    Xem một quỹ đạo cố định trong thực tế bằng cách khám phá văn phòng Google Sydney.

  • Quỹ đạo động:

    Máy ảnh di chuyển đều đặn theo quỹ đạo sóng hình sin quanh một địa điểm yêu thích được chỉ định. Chuyển động độc đáo này cho phép người xem quan sát địa điểm yêu thích từ nhiều độ cao và góc độ, mang đến trải nghiệm hình ảnh động và sống động.

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

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

  • Tuỳ chỉnh dữ liệu khám phá của bạn bằng cách xác định các loại địa điểm bạn muố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 mảng types trong config.json.
  • Đặt số lượng Địa điểm yêu thích tối đa được hiển thị bằng cách điều chỉnh tham số density.
  • Sửa đổi searchRadius (in meters) để bao gồm các viên ngọc ẩn ở gần hoặc tập trung vào các khu vực cụ thể.
  • Đặt tốc độ đã chọn cho chuyển động của camera bằng tham số speed (in revolutions per minute).

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

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

Tạo URL hoàn hảo:

Bạn chỉ cần 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 chế độ 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 xuất phát thành vĩ độ và kinh độ được chỉ định, sẽ đưa bạn đến ngay vị trí đã chọn. Các thông 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 địa điểm yêu thích được phân tách bằng dấu phẩy mà bạn muốn hiển thị.
  • poi.density: Số lượng POI tối đa đã chọn.
  • poi.searchRadius: Bán kính để tìm kiếm đị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 ("orbit cố định" hoặc "động quỹ đạo").

Lợi ích của việc tùy 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í đã tải sẵn và địa điểm yêu thích cụ thể.
  • Nhúng trải nghiệm của Trình khám phá khu vực được định cấu hình sẵn một cách liền mạch trong 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 phù hợp và mời mọi người tham gia những cuộc phiêu lưu được tuyển chọn.

Tuỳ chỉnh khác

Phần trước đã tìm hiểu các mức điều chỉnh có thể truy cập được thông qua giao diện người dùng hoặc tệp cấu hình. Tuy nhiên, bạn cũng có thể sửa đổi một số tham 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 xét mã trong tệp src/utils/cesium.js nằm trong thư mục src. Bạn có thể thay đổi các biến sau đây để thay đổi giao diện của ứng dụng

Chiều cao của máy ảnh

Kiểm soát độ cao của máy ảnh khi di chuyển về một điểm bằng cách điều chỉnh giá trị CAMERA_HEIGHT. Giá trị cao hơn sẽ mang đến chế độ xem toàn cảnh có độ phóng to lớn hơn, trong khi giá trị thấp hơn sẽ giúp bạn tiến gần hơn với 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 máy ảnh trên vị trí mục tiêu khi di chuyển đến một điểm.
  • Giá trị mẫu:
    • 50: Góc nhìn cận cảnh hơn, nhấn mạnh vào các chi tiết.
    • 200: Tầm nhìn toàn cảnh hơn.

Cao độ máy ảnh

Độ nghiêng ban đầu của máy ảnh do BASE_PITCH xác định. Sử dụng giá trị âm cho độ nghiêng xuống và giá trị dương cho chế độ xem hướng lên. Để thêm một chuyển động động tinh vi vào dữ liệu 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 (nghiêng 30 độ xuống dưới)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (thay đổi cao độ thêm 10 độ theo thời gian)

Mô tả: Độ nghiêng máy ảnh là độ nghiêng hình ảnh của bản đồ, được đo theo độ. hay còn gọi là nghiêng. Các chế độ cài đặt này xác định độ cao ban đầu của máy ảnh và độ cao động điều chỉnh trong khi xoay tự động.

Giá trị mẫu:

  • BASE_PITCH: 0 (máy ảnh cấp độ)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (không có biến thể cao độ)

Phạm vi camera và Thu phóng

Các tham số này đặt mức thu phóng được áp dụng khi lấy tiêu điểm vào các điểm cụ thể. Giá trị nhỏ hơn có nghĩa là bạn có thể 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 (biến động khoảng cách tương đối)
  • ZOOM_FACTOR: 20 (hệ số thu phóng của máy ảnh)

Mô tả: Các chế độ cài đặt này xác định sự thay đổi phạm vi trong khi máy ảnh di chuyển và mức thu phóng để xem kỹ hơn.

Giá trị mẫu:

  • RANGE_AMPLITUDE_RELATIVE: 1 (biến thể đầy đủ)
  • ZOOM_FACTOR: 10 (thu phóng thấp 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 máy ảnh về vị trí ban đầu, các giá trị CAMERA_OFFSET sẽ được sử dụng. Chế độ cài đặt này bao gồm tiêu đề (xoay), độ nghiêng (nghiêng) và phạm vi (khoảng cách từ tâm của camera).

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

Toạ độ bắt đầu:

Hàm START_COORDINATES xác định kinh độ, vĩ độ và chiều cao ban đầu cho máy ảnh. Đây là nơi quá trình khám phá sẽ bắt đầu, vì vậy, hãy đặt dữ liệu 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 so với mặt đấ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 tâm của vùng. Đây là điểm nhìn ban đầu của máy ảnh 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 xoay đến đầu tiên. Điều chỉnh các giá trị này để đặt máy ảnh ở bất kỳ vị trí cụ thể nào trên 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 vị trí 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 toạ độ (vĩ độ và kinh độ) của một địa chỉ hoặc tên địa điểm bằng cách chỉ định tên đó trong đối tượng vị trí:

  1. Truy cập vào Công cụ mã hoá địa lý.
  2. Tạo yêu cầu mã hoá địa lý Nhấp vào phần "Tự dùng thử" và nhập vị trí bạn đã chọn vào trường "Địa chỉ". Bạn có thể chỉ định địa chỉ, tên địa điểm hoặc thậm chí là mốc.
  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ề phản hồi chứa nhiều thông tin về vị trí, bao gồm cả vĩ độ và kinh độ hiển thị trong phần 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 rồi dán vào đối tượng coordinates trong cấu hình của bạn.

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

hình ảnh

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

Tuỳ chỉnh nâng cao

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

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

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

fixed-orbit" | "dynamic-orbit"

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

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

Để sử dụng cách tính toán đườ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 các loại địa điểm cho cấu hình trong tệp demo/src/place-settings.js. Bắt đầu từ dòng 4 là các loại địa điểm có sẵn trong bản minh hoạ.

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

Tuỳ chỉnh kiểu (css)

Đối với kiểu, chúng tôi đã làm việc với các biến CSS. Các thuộc tính này được hỗ trợ trong mọi trình duyệt chính và giúp bạn có thể thay đổi một dòng ở vị trí trung tâm cũng như cập nhật các thuộc tính CSS cụ thể. Các biến CSS của chúng tôi được xác định trong src/main.css. Tại đó, 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.

Lớp phủ dữ liệu bổ sung

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

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

Ứng dụng JavaScript của chúng ta có 3 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 này cung cấp các lựa chọn cấu hình cho các 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 họ.

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à nhận xét của bạn hoặc xoá phần đó:

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ã của bạn và nhận xét hoặc xoá phần đó:

const poiConfig = { ...config.poi, ...customConfig.poi };
  • Phần camera

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

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

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

Sau khi xoá một phần, bạn cần phải cập nhật đối tượng 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 bất kỳ tuỳ chỉnh nào. 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 xoá một phần cũng có nghĩa là xoá các phần tử trên giao diện người dùng có liên quan, hãy cập nhật mã tương ứng trong mã html. Ví dụ: nếu bạn muốn xóa một phần cụ thể khỏi Bảng điều khiển quản trị như tốc độ của máy ảnh, bạn phải cập nhật cả mã js và html cho điều đó.

4. Xoá 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 và nhận xét sau đây hoặc xoá nội dung đó:

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 lựa chọn tuỳ chỉnh khác nhau 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. Bằng cách 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 ra trải nghiệm độc đáo và hấp dẫn thể hiện các chế độ cài đặt và địa điểm yêu thích mà bạn đã chọn.

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