Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Praktik terbaik untuk Peta 3D

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

Contoh kasus penggunaan untuk penelusuran tempat dan pencarian rute. — Contoh penelusuran tempat dan pencarian 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 sesuai
Mengelola fitur peta dasar: Gunakan mapId kustom untuk memfilter POI peta dasar (mode HYBRID), dan mengontrol kepadatannya, terutama jika aplikasi memiliki kumpulan elemen kustomnya sendiri seperti penanda atau polyline. Hal ini mencegah kekacauan visual dan potensi tumpang-tindih. Atau, Anda dapat menonaktifkan fitur ubin 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 > Kotak yang diminifikasi > Mesh medan > Mesh permukaan (misalnya: bangunan) > Lokasi Menarik & Label jalan, 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, memperbesar) dengan peta sebelum peristiwa gmp-steadystate awal, peristiwa tersebut hanya akan dipicu setelah pengguna berhenti berinteraksi. Hindari menampilkan atau memperbarui konten overlay (seperti penanda atau poligon) saat pengguna menggeser atau men-zoom peta, hindari menampilkan atau memperbarui 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 penghitungan intensif dari panggilan gambar secara ketat.
- Gunakan rAF: Menyinkronkan update dengan kecepatan tampilan browser untuk animasi 60 FPS yang lancar dan konsumsi daya yang lebih rendah.
- Hindari Pekerjaan Gambar Intensif: Jangan melakukan tugas berat non-gambar selama update akhir.
- Pisahkan Logika: Lakukan semua logika intensif sebelum panggilan update komponen web minimal dalam loop rAF.
Setelan tampilan awal: Setelan Kamera <gmp-map-3d> seperti Kemiringan akan memengaruhi kecepatan pemuatan. Semakin banyak scene diperbesar atau dimiringkan, semakin banyak poligon mendetail yang akan ditampilkan dan perlu dimuat. Tingkat detailnya juga akan bergantung pada lokasi (misalnya: kota dengan banyak bangunan versus pedesaan yang hanya memiliki fitur alami).
- Pilih tampilan yang tidak terlalu diperbesar (ketinggian tinggi), rendah, atau tidak miring.
- Tambahkan batas (contoh) ke peta agar pengguna tetap fokus pada area tertentu dan ubin dapat dimuat sepenuhnya.
Visual preloader: Meskipun <gmp-map-3d> dimuat dengan sangat cepat, mungkin perlu waktu beberapa saat untuk menampilkan 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 scene 3D yang dimuat di latar belakang. Lihat peristiwa utama yang akan 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, sekaligus menyertakan data geografis 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 render minimal, bahkan untuk visual bervolume lebih tinggi.

Penanda

Pilihan Penyesuaian yang 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 Seperlunya: Gunakan untuk penyesuaian lebih lanjut seperti menambahkan transparansi atau memasukkan gambar seperti ikon ke dalam SVGElement (memerlukan enkode base64). Gambar tersebut akan dirasterisasi saat dimuat dan melibatkan overhead performa. HTMLImageElement dan SVGElement harus digabungkan dalam elemen <template> sebelum ditetapkan ke slot default Marker3DElement.
- Menambahkan HTML atau CSS biasa saat ini tidak tersedia.
Mengelola Perilaku Saat Tumpang Tindih: Manfaatkan properti collisionBehavior penanda. Untuk penanda penting yang harus selalu terlihat, tetapkan perilaku yang sesuai. Untuk penanda yang kurang penting, sembunyikan penanda tersebut untuk mempertahankan pengalaman peta yang lebih bersih dan tidak berantakan, terutama pada tingkat zoom tinggi.
Hanya POI Penting: Hanya gunakan drawsWhenOccluded (atau tetapkan properti secara terprogram) untuk penanda yang benar-benar harus terlihat melalui bangunan atau medan (misalnya, target penyelamatan, jalur utilitas yang terkubur, atau avatar pengguna).
Uji Oklusi: Karena peta bersifat 3D, penanda dapat terhalang secara visual (oklusi) oleh bangunan atau medan. Uji berbagai sudut kamera dan ketinggian penanda untuk memastikan POI penting tetap terlihat atau terapkan logika untuk menyesuaikan visibilitas dan ketinggian saat terhalang.
Manfaatkan Ketinggian: Di peta 3D, penanda harus menggunakan posisi dengan nilai ketinggian. Untuk penanda yang terkait dengan medan atau bangunan, gunakan setelan altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH', atau setelan serupa untuk memastikan penanda tertambat dengan benar saat peta dimiringkan atau diputar.

Poligon & Polyline

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

Sederhanakan Geometri: Sebelum merender, terapkan algoritma penyederhanaan ke data jalur Anda. Hal ini mengurangi jumlah verteks sekaligus mempertahankan bentuk umum, sehingga meningkatkan kecepatan rendering secara drastis, terutama untuk batas atau rute yang kompleks.
Desimasi menurut Tingkat Zoom: Untuk set data yang sangat besar, pertimbangkan untuk memuat geometri dengan detail yang lebih tinggi hanya saat pengguna memperbesar area. Pada tingkat zoom rendah, hanya versi polyline atau poligon yang sangat disederhanakan yang diperlukan.
Pra-perhitungan 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 kompleks Polyline/Poligon, terutama saat diekstrusi untuk 3D, pastikan tidak menyebabkan penurunan kecepatan frame. Batasi jumlah verteks atau gunakan algoritma penyederhanaan jika perlu.
Saat memperbarui bentuk, ubah seluruh array jalur dalam satu operasi, bukan mengulang dan mengubah elemen satu per satu. Satu operasi penetapan (misalnya, polyline.path = newPathArray;) jauh lebih efisien daripada beberapa update berulang.
Hindari Polyline yang Diekstrusi (jika memungkinkan): Meskipun Polyline dapat menggunakan nilai ketinggian untuk ditempatkan di ruang 3D, mengekstrusi Polyline (misalnya, memberinya stroke-width dan rentang ketinggian yang besar) dapat memerlukan banyak resource grafis. Jika memungkinkan, gunakan polyline 2D di permukaan tanah (RELATIVE_TO_GROUND) atau lebar goresan minimal untuk performa yang lebih baik.
Hanya gunakan drawsOccludedSegments untuk elemen pemilihan rute yang penting. Untuk bentuk latar belakang atau kontekstual, biarkan 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 .glb model 3D seperti peristiwa gmp-click sangat cepat di <gmp-map-3d>.

Minimalkan Ukuran File dengan Kompresi: Untuk memastikan pemuatan cepat, terutama di jaringan seluler, pastikan ukuran file model .glb yang kompleks tidak lebih dari 5 MB (idealnya lebih kecil). Metode utama untuk mencapai hal ini adalah dengan menerapkan Kompresi Draco pada data mesh dalam file .glb, yang dapat mengurangi ukuran file secara signifikan (sering kali lebih dari 50%) dengan penurunan kualitas visual yang minimal.
Pusatkan Titik Asal Model: Pastikan software pemodelan 3D mengekspor model dengan titik asalnya (titik 0, 0, 0) berada di tengah dasar model. Hal ini menyederhanakan penentuan posisi dan rotasi pada peta, sehingga memastikan model tertambat dengan benar ke koordinat Lintang, Bujur.
Kelola CORS: Jika file model Anda 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.