Places UI Kit: Một thư viện có thể sử dụng ngay, cung cấp không gian tuỳ chỉnh và kiểm soát cho nhà phát triển. Hãy dùng thử và chia sẻ ý kiến của bạn về trải nghiệm dùng Bộ giao diện người dùng.

Các phương pháp hay nhất cho Bản đồ 3D

Hướng dẫn này cung cấp thông tin chi tiết về các thành phần web của Bản đồ 3D và những điều cần cân nhắc khi tích hợp với ứng dụng của bạn.

Ví dụ về trường hợp sử dụng cho tính năng tìm kiếm địa điểm và tìm đường. — Ví dụ về tìm kiếm địa điểm và tìm đường đi.

Những điều cần cân nhắc về hiệu suất

Để đảm bảo trải nghiệm mượt mà và phản hồi nhanh cho các thành phần tương tác và trực quan, hãy cân nhắc các phương pháp sau.

Tải bản đồ

Quá trình tải và thiết lập kết xuất ban đầu của Bản đồ 3D kết hợp các kỹ thuật định cấu hình trình duyệt và các phương pháp hay nhất về giao diện người dùng để mang lại trải nghiệm tối ưu cho người dùng.

Tải API: Sử dụng tính năng tải động không đồng bộ của Bản đồ 3D để tải Maps JavaScript API khi tải trang ban đầu.
Thư viện: Tải thư viện theo phương thức lập trình khi cần, chẳng hạn như google.maps.importLibrary("maps3d"). Ngoài ra, nếu bạn sử dụng các thành phần web như <gmp-map-3d> trực tiếp trong trang HTML bằng cách tải tập lệnh, thì các thư viện sẽ tự động tải vào thời điểm thích hợp
Quản lý các đối tượng trên bản đồ cơ sở: Sử dụng mapId tuỳ chỉnh để lọc các điểm đến (POI) trên bản đồ cơ sở (chế độ HYBRID) và kiểm soát mật độ của các điểm đến này, đặc biệt là nếu ứng dụng có một tập hợp các thành phần tuỳ chỉnh riêng, chẳng hạn như điểm đánh dấu hoặc đường nhiều đoạn. Điều này giúp tránh tình trạng lộn xộn về mặt hình ảnh và khả năng chồng chéo. Ngoài ra, bạn có thể tắt các đối tượng của ô vectơ trên bản đồ cơ sở, chẳng hạn như POI, đường nhiều đoạn, tên đường, tên đường phố (chế độ SATELLITE).
Sự kiện: Lắng nghe các sự kiện gmp-steadystate hoặc gmp-error để xây dựng logic tiếp theo, chẳng hạn như tải điểm đánh dấu, tạo ảnh động cho máy ảnh.

Trình tự tải bản đồ — Canvas nền > Ô được thu nhỏ > Lưới địa hình > Lưới bề mặt (ví dụ: toà nhà) > Điểm đến và nhãn đường, các thành phần tuỳ chỉnh đang được tải song song (điểm đánh dấu, mô hình 3D, v.v.)

Lượt tương tác của người dùng: Chờ sự kiện gmp-steadystate trước khi thay đổi nội dung của bản đồ. Nếu người dùng bắt đầu tương tác (di chuyển, thu phóng) với bản đồ trước sự kiện gmp-steadystate ban đầu, thì sự kiện này sẽ chỉ kích hoạt sau khi người dùng ngừng tương tác. Tránh hiển thị hoặc cập nhật nội dung lớp phủ (như điểm đánh dấu hoặc đa giác) trong khi người dùng di chuyển hoặc thu phóng bản đồ, tránh hiển thị hoặc cập nhật nội dung lớp phủ (như điểm đánh dấu hoặc đa giác) bằng cách lắng nghe gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange.
Sử dụng requestAnimationFrame() (rAF) để cập nhật liên tục và tách biệt hoàn toàn các phép tính chuyên sâu khỏi các lệnh gọi vẽ.
- Sử dụng rAF: Đồng bộ hoá các bản cập nhật với tốc độ hiển thị của trình duyệt để tạo ảnh động mượt mà, 60FPS và giảm mức tiêu thụ điện.
- Tránh công việc vẽ chuyên sâu: Không thực hiện các tác vụ nặng, không vẽ trong quá trình cập nhật cuối cùng.
- Tách biệt logic: Thực hiện tất cả logic chuyên sâu trước các lệnh gọi cập nhật thành phần web tối thiểu trong vòng lặp rAF.
Chế độ cài đặt cảnh ban đầu: <gmp-map-3d> Chế độ cài đặt máy ảnh như Độ nghiêng sẽ ảnh hưởng đến tốc độ tải. Cảnh càng được thu phóng hoặc nghiêng, thì các đa giác càng chi tiết sẽ được hiển thị và yêu cầu tải. Mức độ chi tiết cũng sẽ tuỳ thuộc vào vị trí (ví dụ: thành phố có nhiều toà nhà so với vùng nông thôn chỉ có các đối tượng tự nhiên).
- Ưu tiên các chế độ xem ít được thu phóng (độ cao lớn), thấp hoặc không nghiêng.
- Thêm ranh giới (mẫu) vào bản đồ để người dùng tập trung vào một khu vực cụ thể và các ô có thể tải đầy đủ.
Hình ảnh bộ tải trước: Mặc dù <gmp-map-3d> tải cực kỳ nhanh, nhưng có thể mất một chút thời gian để hiển thị ở độ phân giải đầy đủ cho người dùng có thiết bị cấp thấp (GPU thấp) hoặc băng thông (4G chậm). Trong trường hợp này, bạn có thể tạo bộ tải trước bằng hình ảnh, ảnh động hoặc văn bản với cảnh 3D tải ở chế độ nền. Xem sự kiện quan trọng để sử dụng bên dưới:

Ví dụ về trình tải trước — Ví dụ về bộ tải trước

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

Bản đồ 2D:
- Bạn có thể cung cấp một bản đồ 2D thay thế (SATELLITE) cho những người dùng này trong khi vẫn bao gồm dữ liệu địa lý của bạn, chẳng hạn như điểm đánh dấu.

Ngoài ra, bạn có thể hiển thị bản đồ tĩnh 2D bổ sung ở chế độ SATELLITE để người dùng hình dung một địa điểm nhất định trong khi tải.

Hiệu suất và quản lý các thành phần trực quan

Bản đồ 3D cung cấp nhiều cách để hiển thị các thành phần trực quan như điểm đánh dấu, hình nhiều đường, hình nhiều đường và Mô hình 3D với hiệu suất tối ưu và thời gian kết xuất tối thiểu, ngay cả đối với hình ảnh có khối lượng lớn hơn.

Điểm đánh dấu

Lựa chọn tuỳ chỉnh tối ưu:
- PinElement: Đối với các thay đổi cơ bản về điểm đánh dấu (màu sắc, tỷ lệ, đường viền, ký tự văn bản ), hãy sử dụng phần tử <gmp-pin> hoặc lớp PinElement. Đây là phương thức tuỳ chỉnh hiệu quả nhất.
- Sử dụng điểm đánh dấu HTMLImageElement hoặc SVGElement một cách tiết kiệm: Sử dụng để tuỳ chỉnh thêm như thêm độ trong suốt hoặc chèn hình ảnh như biểu tượng vào SVGElement (yêu cầu mã hoá base64). Các điểm đánh dấu này sẽ được chuyển đổi thành raster khi tải và gây ra chi phí hiệu suất. HTMLImageElement và SVGElement phải được gói trong phần tử <template> trước khi gán cho vị trí mặc định của Marker3DElement.
- Hiện tại, bạn không thể thêm HTML hoặc CSS thuần tuý.
Quản lý hành vi xung đột: Tận dụng thuộc tính collisionBehavior của điểm đánh dấu. Đối với các điểm đánh dấu quan trọng phải luôn hiển thị, hãy đặt hành vi cho phù hợp. Đối với các điểm đánh dấu ít quan trọng hơn, hãy cho phép ẩn để duy trì trải nghiệm bản đồ rõ ràng hơn, ít lộn xộn hơn, đặc biệt là ở mức thu phóng cao.
Chỉ các POI quan trọng: Chỉ sử dụng drawsWhenOccluded (hoặc đặt thuộc tính theo phương thức lập trình) cho các điểm đánh dấu phải được nhìn thấy qua các toà nhà hoặc địa hình (ví dụ: mục tiêu cứu hộ, đường dây tiện ích bị chôn vùi hoặc hình đại diện của người dùng).
Kiểm tra độ che khuất: Vì bản đồ là 3D, nên các điểm đánh dấu có thể bị các toà nhà hoặc địa hình che khuất (bị che khuất) về mặt hình ảnh. Kiểm tra các góc máy ảnh và độ cao của điểm đánh dấu khác nhau để đảm bảo các điểm đến quan trọng vẫn hiển thị hoặc triển khai logic để điều chỉnh khả năng hiển thị và độ cao khi bị che khuất.
Tận dụng độ cao: Trong bản đồ 3D, điểm đánh dấu phải sử dụng vị trí có giá trị độ cao. Đối với các điểm đánh dấu được liên kết với địa hình hoặc toà nhà, hãy sử dụng altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' hoặc các chế độ cài đặt tương tự để đảm bảo điểm đánh dấu neo chính xác khi bản đồ bị nghiêng hoặc xoay.

Đa giác và đường nhiều đoạn

Ví dụ về tải đa giác — Tình huống ví dụ: Mất 100–150 ms để tải 1000 đa giác (máy tính xách tay hiện đại: macOS M3 Pro, Chrome)

Đơn giản hoá hình học: Trước khi kết xuất, hãy áp dụng thuật toán đơn giản hoá cho dữ liệu đường dẫn. Điều này giúp giảm số lượng đỉnh trong khi vẫn giữ nguyên hình dạng chung, cải thiện đáng kể tốc độ kết xuất, đặc biệt là đối với các ranh giới hoặc tuyến đường phức tạp.
Giảm số lượng theo mức thu phóng: Đối với các tập dữ liệu rất lớn, hãy cân nhắc chỉ tải hình học chi tiết hơn khi người dùng thu phóng vào khu vực đó. Ở mức thu phóng thấp, chỉ cần phiên bản đơn giản hoá cao của đường nhiều đoạn hoặc đa giác.
Tính toán trước cho đa giác được kéo dài: Nếu đa giác của bạn được kéo dài (extruded: true), thì dữ liệu đường dẫn sẽ xác định khối 3D (lưới). Việc xử lý các đa giác phức tạp, có nhiều đỉnh sẽ tốn nhiều tài nguyên tính toán. Đảm bảo dữ liệu nguồn cho đa giác của bạn đơn giản nhất có thể.
Kiểm tra hiệu suất của đường nhiều đoạn và đa giác: Khi thêm nhiều đường nhiều đoạn/đa giác hoặc đường nhiều đoạn/đa giác phức tạp, đặc biệt là khi được kéo dài cho 3D, hãy đảm bảo chúng không gây ra tình trạng giảm tốc độ khung hình. Giới hạn số lượng đỉnh hoặc sử dụng thuật toán đơn giản hoá nếu cần.
Khi cập nhật hình dạng, hãy sửa đổi toàn bộ mảng đường dẫn trong một thao tác thay vì lặp lại và sửa đổi từng phần tử. Một thao tác gán duy nhất (ví dụ: polyline.path = newPathArray;) hiệu quả hơn nhiều so với nhiều lần cập nhật lặp lại.
Tránh hình nhiều đường được kéo dài (nếu có thể): Mặc dù hình nhiều đường có thể sử dụng giá trị độ cao để đặt trong không gian 3D, nhưng việc kéo dài hình nhiều đường (ví dụ: cho hình nhiều đường chiều rộng nét vẽ và khoảng độ cao lớn) có thể tốn nhiều tài nguyên đồ hoạ. Bất cứ khi nào có thể, hãy sử dụng đường nhiều đoạn 2D trên mặt đất (RELATIVE_TO_GROUND) hoặc chiều rộng nét vẽ tối thiểu để có hiệu suất tốt hơn.
Chỉ sử dụng drawsOccludedSegments cho các thành phần định tuyến quan trọng. Đối với các hình dạng nền hoặc hình dạng theo ngữ cảnh, hãy cho phép chúng bị hình học 3D của bản đồ che khuất một cách tự nhiên. Việc hiển thị hình học ẩn không quan trọng sẽ làm tăng độ phức tạp không cần thiết khi kết xuất.

Mô hình 3D

Quá trình kết xuất mô hình 3D .glb và tính tương tác như sự kiện gmp-click diễn ra rất nhanh trong <gmp-map-3d>.

Giảm thiểu kích thước tệp bằng cách nén: Để đảm bảo tải nhanh, đặc biệt là trên mạng di động, hãy giữ các tệp mô hình .glb phức tạp dưới 5 MB (tốt nhất là ít hơn). Phương thức chính để đạt được điều này là áp dụng tính năng Nén Draco trên dữ liệu lưới trong các tệp .glb, có thể giảm đáng kể kích thước tệp (thường là hơn 50%) với mức giảm chất lượng hình ảnh tối thiểu.
Tâm mô hình gốc: Đảm bảo phần mềm mô hình 3D xuất mô hình có gốc (điểm 0, 0, 0) ở giữa đáy mô hình. Điều này giúp đơn giản hoá việc định vị và xoay trên bản đồ, đảm bảo mô hình neo chính xác vào toạ độ Vĩ độ, Kinh độ.
Quản lý CORS: Nếu các tệp mô hình của bạn được lưu trữ trên một miền hoặc CDN khác với ứng dụng web, thì bạn phải định cấu hình máy chủ lưu trữ để đưa các tiêu đề Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) cần thiết vào (ví dụ: Access-Control-Allow-Origin: *). Nếu không, bản đồ sẽ không tải được mô hình.