Jenis rendering (raster dan vektor)

Maps JavaScript API menawarkan dua implementasi peta yang berbeda: raster dan vektor. Peta raster memuat peta sebagai petak ubin gambar raster berbasis piksel, yang dihasilkan oleh Google Maps Platform di sisi server, lalu disajikan ke aplikasi web Anda. Peta vektor terdiri dari ubin berbasis vektor, yang digambar pada waktu pemuatan di sisi klien menggunakan WebGL, teknologi web yang memungkinkan browser mengakses GPU di perangkat pengguna untuk merender grafik 2D dan 3D.

Jenis peta vektor direkomendasikan untuk pengalaman pengguna terbaik, karena memberikan fidelitas visual yang lebih baik, penyimpanan ke cache yang lebih baik di seluruh peta, serta kemampuan untuk mengontrol kemiringan dan arah pada peta. Pelajari lebih lanjut fitur peta vektor.

Jenis rendering default

Jenis rendering default peta bervariasi, bergantung pada implementasi Anda.

  • Peta yang menggunakan elemen <gmp-map> secara default menggunakan jenis rendering vektor.

  • Peta yang menggunakan elemen <div> dengan google.maps.Map secara default menggunakan jenis rendering raster.

Tetapkan jenis rendering untuk peta dengan menentukan opsi peta renderingType, atau dengan menetapkan opsi pada ID peta terkait. Opsi renderingType akan mengganti setelan jenis rendering yang dibuat dengan mengonfigurasi ID peta.

Menentukan opsi renderingType

Gunakan opsi renderingType untuk menentukan jenis rendering raster atau vektor untuk peta Anda (tidak memerlukan ID peta). Untuk peta yang dimuat menggunakan elemen div dan JavaScript, jenis rendering defaultnya adalah google.maps.RenderingType.RASTER. Lakukan langkah-langkah berikut untuk menetapkan opsi renderingType:

  1. Muat library RenderingType; hal ini dapat dilakukan saat memuat library Maps:

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. Saat melakukan inisialisasi peta, gunakan opsi renderingType untuk menentukan RenderingType.VECTOR atau RenderingType.RASTER:

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

Saat jenis rendering peta vektor ditetapkan, Anda harus menetapkan opsi untuk fitur yang diperlukan.

  • Untuk mengaktifkan kemiringan, tetapkan opsi peta tiltInteractionEnabled ke true atau panggil map.setTiltInteractionEnabled(true).
  • Untuk mengaktifkan penggeseran, tetapkan opsi peta headingInteractionEnabled ke true atau panggil map.setHeadingInteractionEnabled(true).

Untuk peta yang dimuat menggunakan elemen <gmp-map>, jenis rendering defaultnya adalah google.maps.RenderingType.VECTOR, dengan kontrol kemiringan dan arah diaktifkan. Untuk menetapkan jenis rendering menggunakan elemen <gmp-map>, gunakan atribut rendering-type.

Menggunakan ID peta untuk menetapkan jenis rendering

Anda juga dapat menentukan jenis rendering menggunakan ID peta. Buat ID peta dengan mengikuti langkah-langkah di Menggunakan Gaya Visual Peta Berbasis Cloud - Dapatkan ID peta. Pastikan untuk menetapkan Jenis peta ke JavaScript, lalu pilih salah satu opsi (Vector atau Raster). Centang Tilt dan Rotation untuk mengaktifkan kemiringan dan rotasi pada peta. Dengan melakukan hal tersebut, Anda dapat menyesuaikan nilai ini secara terprogram, dan juga memungkinkan pengguna menyesuaikan kemiringan dan arah secara langsung di peta. Jika penggunaan kemiringan atau arah akan berdampak buruk pada aplikasi Anda, biarkan Tilt dan Rotation tidak dicentang agar pengguna tidak dapat menyesuaikan kemiringan dan rotasi.

Membuat ID Peta Vektor

Selanjutnya, perbarui kode inisialisasi peta Anda dengan ID peta yang Anda buat. Anda dapat menemukan ID peta di halaman Maps Management. Berikan ID peta saat Anda membuat instance peta menggunakan properti mapId seperti yang ditunjukkan di sini:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

Mendeteksi jenis rendering yang digunakan

Untuk mendeteksi jenis rendering yang digunakan, panggil getRenderingType() pada objek peta, seperti yang ditunjukkan dalam contoh berikut:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```