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.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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 để tìm kiếm địa điểm và tìm đường đi. — Ví dụ về tì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à hình ảnh, hãy cân nhắc các phương pháp sau.

Tải bản đồ

Quá trình tải ban đầu và thiết lập kết xuất 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 trực tiếp các thành phần web như <gmp-map-3d> trong trang HTML của mình 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 địa điểm yêu thích (POI) trên bản đồ cơ sở (chế độ HYBRID) và kiểm soát mật độ của chúng, đặc biệt nếu ứng dụng có bộ 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 rối mắt và chồng chéo. Ngoài ra, bạn có thể tắt các đối tượng trên bản đồ cơ sở như POI, đường nhiều đoạn, tên đường, tên phố (chế độ SATELLITE).
Sự kiện: Theo dõi 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ác ô được thu nhỏ > Lưới địa hình > Lưới bề mặt (ví dụ: toà nhà) > Nhãn POI và đườ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) 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 theo dõi 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 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à ở tốc độ 60 khung hình/giây và giảm mức tiêu thụ điện.
- Tránh công việc vẽ chuyên sâu: Đừng thực hiện các tác vụ nặng, không vẽ trong bản 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 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àng có nhiều đa giác chi tiết được hiển thị và cần tải. Mức độ chi tiết cũng sẽ phụ 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), ít hoặc không nghiêng.
- Thêm ranh giới (ví dụ) 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 trình tải trước: Mặc dù <gmp-map-3d> tải cực 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 trình 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 cần sử dụng bên dưới:

// 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 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 hình ảnh

Bản đồ 3D cung cấp nhiều cách để hiển thị các thành phần hình ảnh như điểm đánh dấu, đường nhiều đoạn, đường nhiều đoạn 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ó số lượng lớn hơn.

Điểm đánh dấu

Lựa chọn tuỳ chỉnh tối ưu:
- PinElement: Để thay đổi điểm đánh dấu cơ bản (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, chẳng hạn 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). Chúng sẽ được chuyển 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 túy.
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 chúng ẩn để duy trì trải nghiệm bản đồ sạch hơn, ít lộn xộn hơn, đặc biệt là ở mức thu phóng cao.
Chỉ 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 điện thoại bị chôn 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). Kiểm tra các góc máy ảnh và độ cao điểm đánh dấu khác nhau để đảm bảo các POI 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, các đ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 được 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, bạn 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 đùn: Nếu đa giác của bạn được đùn (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ẽ rất tốn 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 đùn cho 3D, hãy đảm bảo chúng không làm 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 duy nhất 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 đường nhiều đoạn được đùn (nếu có thể): Mặc dù đường nhiều đoạn có thể sử dụng giá trị độ cao để đặt trong không gian 3D, nhưng việc đùn đường nhiều đoạn (ví dụ: cho đường nhiều đoạn 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 nền hoặc hình 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 và tương tác mô hình 3D .glb 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 pháp chính để đạt được điều này là áp dụng tính năng Nén Draco cho 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.
Mô hình trung tâm: Đảm bảo phần mềm mô hình 3D xuất mô hình có nguồn gốc (điểm 0, 0, 0) ở giữa chân 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 được neo chính xác vào toạ độ Lat, Lng.
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 của bạn, thì bạn phải định cấu hình máy chủ lưu trữ để bao gồm các tiêu đề Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) cần thiết (ví dụ: Access-Control-Allow-Origin: *). Nếu không, bản đồ sẽ không tải được mô hình.