תמיכה

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

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

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

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

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

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

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

  • "OpenGL: Enabled"
  • "WebGL: חומרה מואצת"
  • "WebGL2: שיפור המהירות באמצעות חומרה"

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

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

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

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

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

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