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

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

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

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

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

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

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

מגדירים את סוג העיבוד של מפה על ידי ציון האפשרות 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()}`);
  });```