תמיכה

דף זה מפרט בעיות ידועות ופתרונות עקיפים למפות וקטוריים ולתכונות WebGL.

תמיכה בדפדפן/במכשיר

התצוגה המקדימה של התכונה WebGL תומכת באותם דפדפנים ומכשירים כמו ממשק ה-API של JavaScript של מפות Google. כדי לבדוק אם הדפדפן במכשיר מסוים יתמוך ב-WebGL, היכנסו אל get.webgl.org או caniuse.com. חשוב גם לוודא ששיפור המהירות באמצעות חומרה מופעל בהגדרות הדפדפן, אחרת המפות הווקטוריות יחזרו ל-raster.

רסטר או וקטור?

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

בדיקת יכולות הדפדפן ב-Chrome

כדי לבדוק אילו יכולות של שיפור מהירות באמצעות חומרה מופעלות עם התקנה ספציפית של Chrome, עליכם להיכנס לכתובת chrome://gpu/ ולוודא שהפריטים הבאים מופעלים (בירוק):

  • 'OpenGL: Enabled'
  • "WebGL: Hardware Accelerated"
  • "WebGL2: Hardware Accelerated"

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

איך מפעילים את שיפור המהירות באמצעות חומרה

כדי לתמוך במפות וקטוריות, צריך להפעיל את שיפור המהירות באמצעות חומרה ברוב הדפדפנים. כדי להפעיל את שיפור המהירות באמצעות חומרה ב-Chrome וב-Microsoft Edge, פותחים את Settings (הגדרות), בוחרים באפשרות System (מערכת) וודאו שהאפשרות Use Software שיפור (שיפור מהירות באמצעות חומרה) זמינה) מופעלת.

בדיקה פרוגרמטית של רשת נקודות או וקטור

אפשר לבדוק באופן פרוגרמטי אם המפה היא רסטר או וקטור, על ידי קריאה ל-map.getRenderingType(). בדוגמה הבאה מוצג קוד למעקב אחרי האירוע renderingtype_changed, וחלון מידע שבו רואים אם נעשה שימוש במפה וקטורית או רסטר.

TypeScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;
index.ts

JavaScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;
index.js

אפשר גם להשתמש בהקשר של עיבוד WebGL כדי לבדוק אם יש תמיכה ב-WebGL 2:

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

למדו דרכים אחרות לזהות באופן פרוגרמטי הקשר עיבוד WebGL.

תמיכה באינטרנט לנייד

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

באגים

באגים ידועים

  • יש בעיה ידועה ב-Chrome במכשירי macOS מסוימים עם GPU של AMD. זה עלול להיות מבלבל במיוחד כש-macOS עובר באופן דינמי בין GPU במכשירים עם מספר GPU, לכן ייתכן שמפות וקטוריות לא יהיו זמינות, בהתאם לאפליקציות האחרות שפועלות או לצג חיצוני מחובר. במקרים מסוימים, הפעלת הקצה העורפי ANGLE Metal הקרוב של Chrome תפתור את הבעיה. תוכלו לעקוב אחרי תוכניות ההשקה הכלליות בכתובת https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.

דיווח על באגים

  • צריך לעדכן את הדפדפן ואת מנהל ההתקן של יחידת ה-GPU לגרסה האחרונה לפני הדיווח על הבאג.
  • חשוב לוודא שההגדרה של שיפור המהירות באמצעות חומרה ב-chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge) מופעלת. ב-Safari, ההגדרה הזו מופעלת באופן אוטומטי ב-macOS בגרסה 10.15 ואילך. בגרסאות ישנות יותר של MacOS, צריך לעבור להגדרות המתקדמות של Safari ולוודא שהאפשרות 'שימוש בשיפור מהירות באמצעות חומרה' מופעלת.
  • הוספת קישור לקוד לדוגמה של jsfiddle בדוח על באג.
  • כדאי גם לצלם צילום מסך של chrome://gpu (Chrome), about:support (Firefox) או edge://gpu (Microsoft Edge), ולצרף מידע שקשור ל-GPU בדוח הבאג אם נתקלת בבעיות עיבוד.

נשמח לשמוע מה דעתך!

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

  • יש שגיאות או באגים/קריסות חדשים של JavaScript שאתם מזהים באפליקציות האינטרנט.
  • זמן האחזור של הפעלה למפות וקטוריות גרוע משמעותית מזמן האחזור של מפות רסטר. במקרה כזה, מאוד כדאי להיעזר במדדים של רגרסיית זמן האחזור בזמן ההפעלה. באופן כללי, אנחנו רוצים לדעת אם זמן האחזור של ההפעלה נגרס מעבר לערכי הסף המקובלים.
  • החוויה של מפות וקטוריות לא חלקה כמו שהיא יכולה להיות. אם אתם מתעדים מדדי FPS או jank, מה ההבדל ביניהם בין מפות וקטוריות לבין מפות רסטר?
  • יש הבדלים משמעותיים בביצועים בין הדפדפן.

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