תמיכה

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

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

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

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

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

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

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

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

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

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

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

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

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

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