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

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

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

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

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

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

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

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