תמיכה

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

תמיכה בדפדפן או במכשיר

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

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

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

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

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

• ‫"OpenGL: Enabled" (ה-OpenGL מופעל)
• "WebGL: Hardware accelerated"
• "WebGL2: Hardware accelerated" (שיפור מהירות באמצעות חומרה)

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

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

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

• איך משנים את ההעדפות של האתרים ב-Safari
• מידע על הגדרות הביצועים של Firefox

בדיקה תוכנתית של רסטר או וקטור

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

/**
 * 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

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