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

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

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

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

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

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

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

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

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

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

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

    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, ולבחור אפשרות (וקטור או רסטר). מסמנים את האפשרויות הטיה וסיבוב כדי להפעיל את ההטיה והסיבוב במפה. כך תוכלו לשנות את הערכים האלה באופן פרוגרמטי, וגם לאפשר למשתמשים לשנות את ההטיה והכיוון ישירות במפה. אם השימוש בהטיה או בכיוון ישפיע לרעה על האפליקציה, אל תסמנו את האפשרויות Tilt ו-Rotation כדי שהמשתמשים לא יוכלו לשנות את ההטיה והסיבוב.

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

בשלב הבא, מעדכנים את קוד האתחול של המפה באמצעות מזהה המפה שיצרתם. אפשר למצוא את מזהי המפות בדף ניהול מפות. מציינים מזהה מפה כשיוצרים מופע של המפה באמצעות המאפיין 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()}`);
  });```