Praktik terbaik untuk Peta 3D

Panduan ini memberikan gambaran mendetail tentang komponen Web Peta 3D dan pertimbangan saat berintegrasi dengan aplikasi Anda.

Contoh kasus penggunaan untuk penelusuran tempat dan pencarian rute. — Contoh penelusuran tempat dan penemuan rute.

Pertimbangan Performa

Untuk memastikan pengalaman yang lancar dan responsif untuk interaktivitas dan elemen visual, pertimbangkan pendekatan berikut.

Memuat Peta

Penyiapan pemuatan dan rendering awal Peta 3D menggabungkan teknik konfigurasi browser dan praktik terbaik UI untuk pengalaman pengguna yang optimal.

Pemuatan API: Gunakan pemuatan dinamis asinkron Peta 3D untuk memuat Maps JavaScript API saat pemuatan halaman awal.
Library: Muat library secara terprogram jika diperlukan, seperti google.maps.importLibrary("maps3d"). Atau, jika Anda menggunakan komponen web seperti <gmp-map-3d> langsung di halaman HTML dengan pemuatan skrip langsung, library akan dimuat secara otomatis pada waktu yang tepat
Mengelola fitur peta dasar: Gunakan mapId kustom untuk memfilter POI peta dasar (mode HYBRID), dan mengontrol kepadatannya, terutama jika aplikasi memiliki serangkaian elemen kustomnya sendiri seperti penanda atau polyline. Hal ini mencegah kekacauan visual dan potensi tumpang-tindih. Atau, Anda dapat menonaktifkan fitur petak vektor peta dasar seperti POI, polyline jalan, nama jalan, nama jalan (mode SATELIT).
Peristiwa: Dengarkan peristiwa gmp-steadystate atau gmp-error untuk membangun logika berikutnya seperti memuat penanda, menganimasikan kamera.

Urutan pemuatan peta — Kanvas latar belakang > Petak yang di-minify > Mesh medan > Mesh permukaan (misalnya: bangunan) > Label Jalan & Tempat menarik, Elemen kustom yang dimuat secara paralel (penanda, model 3D, dll.)

Interaksi pengguna: Tunggu peristiwa gmp-steadystate sebelum membuat perubahan pada konten peta. Jika pengguna mulai berinteraksi (menggeser, melakukan zoom) dengan peta sebelum peristiwa gmp-steadystate awal, peristiwa tersebut hanya akan dipicu setelah pengguna berhenti berinteraksi. Hindari menampilkan atau mengupdate konten overlay (seperti penanda atau poligon) saat pengguna menggeser atau melakukan zoom pada peta, hindari menampilkan atau mengupdate konten overlay (seperti penanda atau poligon) dengan memproses gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange.
Gunakan requestAnimationFrame() (rAF) untuk update berkelanjutan dan pisahkan secara ketat penghitungan intensif dari panggilan gambar.
- Gunakan rAF: Menyinkronkan update dengan kecepatan tampilan browser untuk animasi 60 FPS yang lancar dan mengurangi konsumsi daya.
- Hindari Pekerjaan Menggambar Intensif: Jangan melakukan tugas berat yang tidak terkait dengan menggambar selama update terakhir.
- Logika Terpisah: Lakukan semua logika intensif sebelum panggilan update komponen web minimal dalam loop rAF.
Setelan adegan awal: <gmp-map-3d> Setelan Kamera seperti Kemiringan akan memengaruhi kecepatan pemuatan. Semakin banyak tampilan di-zoom atau dimiringkan, semakin banyak poligon detail yang akan ditampilkan dan memerlukan pemuatan. Tingkat detail juga akan bergantung pada lokasi (misalnya: kota dengan banyak bangunan versus pedesaan dengan hanya fitur alami).
- Lebih memilih tampilan yang tidak terlalu di-zoom (ketinggian tinggi), rendah, atau tidak miring.
- Tambahkan bounds (sample) ke peta agar pengguna tetap berfokus pada area tertentu dan petak dapat dimuat sepenuhnya.
Visual pra-pemuat: Meskipun <gmp-map-3d> dimuat sangat cepat, mungkin perlu waktu beberapa saat untuk ditampilkan dalam resolusi penuh bagi pengguna dengan perangkat kelas bawah (GPU rendah), atau bandwidth (4G lambat). Dalam hal ini, Anda dapat membuat preloader dengan gambar, animasi, atau teks dengan adegan 3D yang dimuat di latar belakang. Lihat peristiwa utama yang dapat digunakan di bawah:

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

Peta 2D:
- Peta 2D alternatif (SATELLITE) dapat dikirimkan kepada pengguna ini sambil tetap menyertakan data geo Anda seperti penanda.

Atau, Peta statis 2D pelengkap dalam mode SATELIT dapat ditampilkan agar pengguna dapat memvisualisasikan tempat tertentu saat memuat.

Performa dan Pengelolaan Elemen Visual

Peta 3D menawarkan beberapa cara untuk menampilkan elemen visual seperti penanda, polyline, polyline, dan model 3D dengan performa optimal dan waktu rendering minimal, bahkan untuk visual dengan volume yang lebih tinggi.

Penanda

Pilihan Penyesuaian Optimal:
- PinElement: Untuk perubahan penanda dasar (warna, skala, batas, glyph teks), gunakan elemen <gmp-pin> atau class PinElement. Ini adalah metode penyesuaian yang paling berperforma.
- Gunakan Penanda HTMLImageElement atau SVGElement dengan Hemat: Gunakan untuk penyesuaian lebih lanjut seperti menambahkan transparansi atau menyisipkan gambar seperti ikon ke dalam SVGElement (memerlukan encoding base64). Elemen tersebut akan di-raster saat dimuat dan melibatkan overhead performa. HTMLImageElement dan SVGElement harus di-wrap dalam elemen <template> sebelum ditetapkan ke slot default Marker3DElement.
- Menambahkan HTML atau CSS biasa tidak tersedia untuk saat ini.
Mengelola Perilaku Tumpang-Tindih: Manfaatkan properti collisionBehavior penanda. Untuk penanda penting yang harus selalu terlihat, tetapkan perilaku yang sesuai. Untuk penanda yang kurang penting, izinkan penanda tersebut disembunyikan untuk mempertahankan pengalaman peta yang lebih bersih dan tidak terlalu berantakan, terutama pada tingkat zoom tinggi.
POI Penting Saja: Hanya gunakan drawsWhenOccluded (atau tetapkan properti secara terprogram) untuk penanda yang benar-benar harus terlihat melalui bangunan atau medan (misalnya, target penyelamatan, saluran listrik bawah tanah, atau avatar pengguna).
Menguji Oklusi: Karena peta bersifat 3D, penanda dapat terhalang secara visual (teroklusi) oleh bangunan atau medan. Uji sudut kamera dan ketinggian penanda yang berbeda untuk memastikan POI penting tetap terlihat atau terapkan logika untuk menyesuaikan visibilitas dan ketinggian saat terhalang.
Memanfaatkan Ketinggian: Di peta 3D, penanda harus menggunakan posisi dengan nilai ketinggian. Untuk penanda yang terkait dengan medan atau bangunan, gunakan altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH', atau setelan serupa untuk memastikan penanda ditambatkan dengan benar saat peta dimiringkan atau diputar.

Poligon & Polyline

Contoh pemuatan poligon — Contoh skenario: 100-150 md untuk memuat 1000 poligon (laptop modern: macOS M3 Pro, Chrome)

Sederhanakan Geometri: Sebelum merender, terapkan algoritma penyederhanaan ke data jalur Anda. Hal ini mengurangi jumlah verteks sambil mempertahankan bentuk umum, sehingga meningkatkan kecepatan rendering secara drastis, terutama untuk batas atau rute yang kompleks.
Pengecilan dengan Tingkat Zoom: Untuk set data yang sangat besar, pertimbangkan untuk memuat geometri dengan detail yang lebih tinggi hanya saat pengguna melakukan zoom ke area tersebut. Pada tingkat zoom rendah, hanya versi polyline atau poligon yang sangat disederhanakan yang diperlukan.
Pra-hitung untuk Poligon yang Diekstrusi: Jika poligon Anda diekstrusi (extruded: true), data jalur akan menentukan volume 3D (mesh). Memproses poligon kompleks dengan verteks tinggi memerlukan biaya komputasi yang tinggi. Pastikan data sumber untuk poligon Anda sesederhana mungkin.
Uji Performa Polyline dan Poligon: Saat menambahkan banyak atau Polyline/Poligon yang kompleks, terutama saat diekstrusi untuk 3D, pastikan tidak menyebabkan frame rate menurun. Batasi jumlah verteks atau gunakan algoritma penyederhanaan jika diperlukan.
Saat memperbarui bentuk, ubah seluruh array jalur dalam satu operasi, bukan melakukan looping dan mengubah elemen satu per satu. Satu operasi penetapan (misalnya, polyline.path = newPathArray;) jauh lebih efisien daripada beberapa update iteratif.
Hindari Polyline yang Diekstrusi (jika memungkinkan): Meskipun Polyline dapat menggunakan nilai ketinggian untuk ditempatkan dalam ruang 3D, mengekstrusi Polyline (misalnya, memberikan lebar goresan dan rentang ketinggian yang besar) dapat membebani grafis. Jika memungkinkan, gunakan polyline 2D di permukaan (RELATIVE_TO_GROUND) atau lebar goresan minimal untuk performa yang lebih baik.
Hanya gunakan drawsOccludedSegments untuk elemen perutean penting. Untuk bentuk latar belakang atau kontekstual, izinkan bentuk tersebut tertutup secara alami oleh geometri 3D peta. Menampilkan geometri tersembunyi yang tidak penting akan menambah kompleksitas rendering yang tidak perlu.

Model 3D

Rendering dan interaktivitas model 3D .glb seperti peristiwa gmp-click sangat cepat di <gmp-map-3d>.

Minimalkan Ukuran File dengan Kompresi: Untuk memastikan pemuatan yang cepat, terutama di jaringan seluler, pertahankan file model .glb yang kompleks di bawah 5 MB (sebaiknya kurang). Metode utama untuk mencapainya adalah dengan menerapkan Kompresi Draco pada data mesh dalam file .glb, yang dapat mengurangi ukuran file secara signifikan (sering kali lebih dari 50%) dengan kehilangan kualitas visual yang minimal.
Pusatkan Asal Model: Pastikan software pemodelan 3D mengekspor model dengan asalnya (titik 0, 0, 0) yang dipusatkan di dasar model. Tindakan ini menyederhanakan penempatan dan rotasi di peta, sehingga memastikan model di-anchor dengan benar ke koordinat Lat, Lng.
Mengelola CORS: Jika file model dihosting di domain atau CDN yang berbeda dengan aplikasi web Anda, Anda harus mengonfigurasi server hosting untuk menyertakan header Cross-Origin Resource Sharing (CORS) yang diperlukan (misalnya, Access-Control-Allow-Origin: *). Jika tidak, peta tidak dapat memuat model.