3D Area Explorer là một giải pháp giúp bạn khám phá các cộng đồng ở dạng 3D hấp dẫn. 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, Place Details, và Autocomplete API.
Bắt đầu:
Bật
Tuỳ chỉnh trải nghiệm
Giải pháp 3D Area Explorer có khả năng tuỳ chỉnh cao, cho phép bạn điều chỉnh trải nghiệm theo hành trình của khách hàng. Bạn có thể tuỳ chỉnh bằng cách sử dụng bảng điều khiển trên giao diện người dùng hoặc bằng cách sử dụng tệp config.json.
Bạn đã sẵn sàng tuỳ chỉnh chưa? Cách làm như sau:
Thông tin vị trí
Xác định điểm xuất phát 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 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 tròn cổ điển hoặc đường hình sin hấp dẫn.
Quỹ đạo cố định:
Đây là một quỹ đạo tròn ở độ cao cố định và xung quanh một địa điểm yêu thích cụ thể.
Xem quỹ đạo cố định trong thực tế bằng cách khám phá văn phòng Google Sydney office.
Quỹ đạo động:
Camera di chuyển mượt mà theo quỹ đạo hình sin xung 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 sống động và chân thực.
Xem quỹ đạo động trong thực tế bằng cách khám phá tháp Eiffel tower.
Địa điểm yêu thích (POI):
- Tuỳ chỉnh hoạt động khám phá bằng cách xác định các loại địa điểm 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
typestrongconfig.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 địa điểm ẩ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 hoạt động khám phá: Khám phá sâu hơn bằng tính năng tuỳ chỉnh URL
3D Area Explorer giúp bạn xác định trước hoạt động khám phá bằng tính năng tuỳ chỉnh URL. Tính năng này giúp loại bỏ nhu cầu định cấu hình thủ công, giúp đơn giản hoá trải nghiệm người dùng.
Tạo URL hoàn hảo:
Chỉ cần thêm các tham số cụ thể vào URL của Area Explorer để đặ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, ngay lập tức đưa bạn đến vị trí đã chọn. Các tham số hiện có:
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 POI tối đa đã chọn.poi.searchRadius: Bán kính để tìm kiếm các POI gần đó.camera.speed: Tốc độ quỹ đạo của camera.camera.orbitType: Loại quỹ đạo của camera ("fixed-orbit" hoặc "dynamic-orbit").
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 bạn chọn.
- Chia sẻ hành trình được nhắm mục tiêu với các vị trí và POI cụ thể được tải sẵn.
- Nhúng liền mạch trải nghiệm Area Explorer được định cấu hình sẵn vào trang web.
Bằng cách tận dụng tính năng tuỳ chỉnh URL, bạn có thể tạo trải nghiệm riêng biệt và mời người khác tham gia vào các cuộc phiêu lưu được tuyển chọn.
Các lựa chọn tuỳ chỉnh khác
Phần trước đã khám phá các điều chỉnh có thể truy cập 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 lựa chọn 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. Bạn có thể thay đổi các biến sau để thay đổi giao diện và cảm nhận của ứng dụng
Chiều cao của camera
Kiểm soát vị trí camera khi bay về một điểm bằng cách điều chỉnh giá trị CAMERA_HEIGHT. Giá trị càng cao thì chế độ xem càng thu nhỏ và toàn cảnh hơn, trong khi giá trị càng thấp thì bạn càng thấy rõ các chi tiết của khu vực
// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
- Tùy chọn cài đặt:
CAMERA_HEIGHT - Giá trị mặc định: 100
- Nội dung mô tả: Xác định chiều cao của camera so với vị trí mục tiêu khi bay đến một điểm.
- Giá trị mẫu:
- 50: Chế độ xem gần hơn, nhấn mạnh các chi tiết.
- 200: Góc nhìn toàn cảnh hơn.
Góc nghiêng của camera
Độ nghiêng ban đầu của camera được xác định bởi BASE_PITCH. Sử dụng giá trị âm để nghiêng xuống và giá trị dương để xem lên trên. Để thêm chuyển động động tinh tế vào hoạt động khám phá, 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;
- Tùy chọn cài đặt:
BASE_PITCHvàAUTO_ORBIT_PITCH_AMPLITUDE - Giá trị mặc định:
BASE_PITCH: -30 (nghiêng xuống 30 độ)AUTO_ORBIT_PITCH_AMPLITUDE: 10 (thay đổi độ nghiêng theo thời gian 10 độ)
Nội dung mô tả: Góc nghiêng của camera là độ nghiêng trực quan của bản đồ, được đo bằng độ. Đây còn được gọi là độ nghiêng. Các chế độ cài đặt này xác định độ nghiêng ban đầu của camera và điều chỉnh độ nghiêng động trong quá trình xoay tự động.
Giá trị mẫu:
BASE_PITCH: 0 (camera ngang bằng)AUTO_ORBIT_PITCH_AMPLITUDE: 0 (không có sự thay đổi độ nghiêng)
Phạm vi và mức thu phóng của camera
Các tham số này đặt mức thu phóng được áp dụng khi tập trung vào các điểm cụ thể. Giá trị càng nhỏ thì mức thu phóng càng gầ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;
Tùy chọn cài đặt: RANGE_AMPLITUDE_RELATIVE và ZOOM_FACTOR
Giá trị mặc định:
RANGE_AMPLITUDE_RELATIVE: 0,55 (biến đổi khoảng cách tương đối)ZOOM_FACTOR: 20 (hệ số thu phóng của camera)
Nội dung mô tả: Các chế độ cài đặt này xác định sự biến đổi phạm vi trong quá trình di chuyển của camera và mức thu phóng để xem kỹ hơn.
Giá trị mẫu:
RANGE_AMPLITUDE_RELATIVE: 1 (biến đổi phạm vi đầy đủ)ZOOM_FACTOR: 10 (ít thu phóng 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 camera
Khi người dùng muốn đặt lại camera 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 hướng (độ xoay), độ nghiêng và phạm vi (khoảng cách từ camera đến tâm).
- Tùy chọn cài đặt:
CAMERA_OFFSET - Giá trị mặc định:
heading: 0 (không có độ lệch xoay)pitch: Cesium.Math.toRadians(-30) (nghiêng xuống 30 độ)range: 800 (cách tâm 800 mét)
- Nội dung mô tả: Xác định hướng, độ nghiêng và phạm vi của camera để đặt lại chế độ xem.
- Giá trị mẫu:
heading: 45 (độ, chế độ xem hướng tây bắc)range: 1.500 mét (xa tâm hơn)
Toạ độ bắt đầu:
START_COORDINATES xác định kinh độ, vĩ độ và chiều cao ban đầu cho camera. Đây là nơi hoạt động khám phá sẽ bắt đầu, vì vậy, hãy đặt thành khu vực mà bạn muốn người dùng nhìn thấy trước 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
};
- Tùy chọn cài đặt:
START_COORDINATES Giá trị mặc định:
longitude: 0latitude: 60height: 15000000 (15.000 km so với 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 tâm của khu vực. Đây là điểm quan sát 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 camera
di chuyển đến trước. Điều chỉnh các giá trị này để đặt camera đến 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 bắt đầu ứng dụng Trình điều hướng địa điểm 3D được thu phóng vào 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 để lấy toạ độ vĩ độ và kinh độ của một địa chỉ hoặc tên địa điểm bằng cách chỉ định trong đối tượng vị trí:
- Truy cập vào Công cụ mã hoá địa lý.
- Tạo yêu cầu mã hoá địa lý Nhấp vào phần "Dùng thử" rồi 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à các địa danh.
- Tạo toạ độ Nhấp vào nút "Chạy" để gửi yêu cầu. 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 độ được hiển thị trong phần
geometry.location. - Sử dụng mã địa lý Sao chép các giá trị vĩ độ và kinh độ đã truy xuất từ phản hồi rồi dán vào đối tượng
coordinatestrong cấu hình của bạn.
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 ở Mountain View, California và khởi chạy ứng dụng Trình điều hướng địa điểm 3D với camera được đặt ở vị trí đó.
Các lựa chọn tuỳ chỉnh nâng cao
Bạn có thể thực hiện các lựa chọn tuỳ chỉnh khác bằng cách khám phá sâu hơn về mã. Phần sau đây sẽ hướng dẫn bạn một số lựa chọn
Thêm đường dẫn camera mới
Giải pháp này triển khai 2 đường dẫn camera 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 camera mới mà bạn có thể triển khai bằng cách sử dụng
/src/utils/cesium.js trong hàm calculateAutoOrbitFrame.
Để sử dụng tính năng 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 nhiều loại địa điểm
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ó 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 thay đổi nguồn bản minh hoạ, bạn chỉ cần thêm các loại địa điểm đó vào tệp config.json trong poi.types
Tuỳ chỉnh kiểu (css)
Đối với các kiểu, chúng tôi đã sử dụng các biến CSS. Các biến 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 ở một vị trí trung tâm và 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 đây, bạn có thể điều chỉnh màu sắc, chế độ cài đặt phông chữ và phần đệm hoặc lề cho toàn bộ ứng dụng.
Lớp phủ dữ liệu bổ sung
Để lớp 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 được tham chiếu theo đị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 tôi 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 nhiều khía cạnh 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
- Phần vị trí
Để xoá phần location, hãy tìm dòng sau trong mã của bạn rồi nhận xét hoặc xoá dòng đó:
const locationConfig = { ...config.location, ...customConfig.location };
- Phần POI
Để xoá phần poi, hãy tìm dòng sau trong mã của bạn rồi nhận xét hoặc xoá dòng đó:
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 rồi nhận xét hoặc xoá dòng đó:
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 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 mọi lựa chọn 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ã tương ứng trong mã html. Ví dụ: nếu bạn muốn xoá một phần cụ thể khỏi bảng điều khiển Quản trị như tốc độ camera, bạn phải cập nhật cả mã js và html cho phần đó.
4. Xoá phần cài đặt camera
Để xoá phần cài đặt camera khỏi giao diện người dùng, hãy tìm dòng sau rồi nhận xét hoặc xoá dòng đó:
const cameraSettingsSecgetCameraSettingsSection(cameraConfig);
Tóm tắt về việc xoá phần vị trí
const locationSection = await getLocationSettingsSection(locationConfig);
Kết luận
Trong tài liệu này, chúng ta đã khám phá nhiều lựa chọn tuỳ chỉnh có trong Area Explorer để điều chỉnh trải nghiệm khám phá 3D. Bằng cách sửa đổi hành vi của camera, điều chỉnh độ nghiêng trực quan và thay đổi mức thu phóng, bạn có thể tạo ra những 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 nhiều cấu hình 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 tính năng tuỳ chỉnh, bạn có thể tạo ra những hành trình chân thực và được cá nhân hoá, thu hút khán giả và biến tầm nhìn của bạn thành hiện thực.