סוג הרינדור (רסטרים ווקטוריים)

‫Maps JavaScript API מציע שני יישומים שונים של המפה: רסטר ו-vector. המפה מבוססת-פיקסלים נטענת כמטריצה של קטעי מפה ראסטריים מבוססי-פיקסלים, שנוצרים בצד השרת של Google Maps Platform, ואז מוצגים באפליקציית האינטרנט. המפה הווקטורית מורכבת מקטעי מפה מבוססי-ווקטור, שמצוירים בזמן הטעינה בצד הלקוח באמצעות WebGL, טכנולוגיית אינטרנט שמאפשרת לדפדפן לגשת ל-GPU במכשיר של המשתמש כדי לרנדר גרפיקה דו-ממדית ותלת-ממדית.

מומלץ להשתמש בסוג המפה הווקטורית כדי לספק את חוויית השימוש הטובה ביותר, כי היא מספקת דיוק חזותי משופר, שמירה במטמון טובה יותר במפות, וגם אפשרות לשלוט בהטיה ובכיוון ביחס לצפון במפה. מידע נוסף על התכונות של מפות וקטוריות

סוג ברירת המחדל של הרינדור

סוג העיבוד שמוגדר כברירת מחדל במפה משתנה בהתאם להטמעה.

  • במפות שמשתמשות ברכיב <gmp-map>, ברירת המחדל היא סוג העיבוד הווקטורי.

  • מפות שמשתמשות ברכיב <div> עם google.maps.Map כברירת מחדל, מוצגות כסוג רנדרינג של רסטר.

מגדירים את סוג העיבוד של מפה על ידי ציון האפשרות renderingType map או על ידי הגדרת האפשרות במזהה מפה משויך. האפשרות renderingType מבטלת את ההגדרות של סוג העיבוד שנקבעו בהגדרת מזהה המפה.

מציינים את האפשרות renderingType

אפשר להשתמש באפשרות renderingType כדי לציין את סוג העיבוד של המפה (רסטר או וקטור) (לא נדרש מזהה מפה). במפות שנטענות באמצעות רכיב div ו-JavaScript, סוג העיבוד שמוגדר כברירת מחדל הוא google.maps.RenderingType.RASTER. כדי להגדיר את האפשרות renderingType פועלים לפי השלבים הבאים:

  1. טוענים את ספריית RenderingType. אפשר לעשות זאת כשמטעינים את ספריית Maps:

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

  2. כשמאתחלים את המפה, משתמשים באפשרות renderingType כדי לציין את RenderingType.VECTOR או את RenderingType.RASTER:

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

כשמגדירים את סוג העיבוד של מפת הווקטור, צריך להגדיר את האפשרויות של התכונות הנדרשות.

  • כדי להפעיל את הטיית המפה, מגדירים את אפשרות המפה tiltInteractionEnabled ל-true או מתקשרים אל map.setTiltInteractionEnabled(true).
  • כדי להפעיל את ההזזה, מגדירים את אפשרות המפה headingInteractionEnabled ל-true או קוראים ל-map.setHeadingInteractionEnabled(true).

במפות שנטענות באמצעות רכיב <gmp-map>, סוג העיבוד שמוגדר כברירת מחדל הוא google.maps.RenderingType.VECTOR, עם הפעלה של שליטה בהטיה ובכיוון. כדי להגדיר את סוג העיבוד באמצעות הרכיב <gmp-map>, צריך להשתמש במאפיין rendering-type.

שימוש במזהה מפה כדי להגדיר את סוג העיבוד

אפשר גם לציין את סוג העיבוד באמצעות מזהה מפה. יוצרים מזהה מפה לפי השלבים במאמר שימוש בעיצוב מפות מבוסס-ענן – קבלת מזהה מפה. חשוב להגדיר את סוג המפה ל-JavaScript ולבחור באחת מהאפשרויות (Vector או Raster). מסמנים את התיבות הטיה וסיבוב כדי להפעיל הטיה וסיבוב במפה. כך תוכלו לשנות את הערכים האלה באופן אוטומטי, וגם לאפשר למשתמשים לשנות את ההטיה והכיוון ישירות במפה. אם שימוש בהטיה או בכיוון ישפיע לרעה על האפליקציה, אל תסמנו את התיבות הטיה וסיבוב כדי שהמשתמשים לא יוכלו לשנות את ההטיה והסיבוב.

יצירת מזהה מפה וקטורית

לאחר מכן, מעדכנים את קוד ההפעלה של המפה עם מזהה המפה שיצרתם. אפשר למצוא את מזהי המפות בדף ניהול מפות. מזינים מזהה מפה כשיוצרים מופע של המפה באמצעות המאפיין mapId, כמו שמוצג כאן:

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

זיהוי סוג העיבוד שנמצא בשימוש

כדי לזהות את סוג הרינדור שבו נעשה שימוש, מפעילים את getRenderingType() באובייקט המפה, כמו בדוגמה הבאה:

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