התאמה אישית של קווים פוליגוניים של נתיב

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

באמצעות Consumer SDK, אתם יכולים לשלוט במידת החשיפה של קו פוליגוני של מסלול או לעצב את הקו הפוליגוני של מסלול לנסיעה במפה. ה-SDK יוצר אובייקט google.maps.Polyline לכל זוג קואורדינטות בנתיב הפעיל או הנותר של המסלול. לאחר מכן, הספרייה מיישמת את ההתאמות האישיות האלה בשני מצבים:

• לפני שמוסיפים את האובייקטים למפה
• כשהנתונים שמשמשים לאובייקטים משתנים

הגדרת סגנון לקווים פוליגוניים של מסלולים

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

• הפשוטה ביותר: משתמשים ב-PolylineOptions כדי להחיל על כל האובייקטים התואמים Polyline כשהם נוצרים או מתעדכנים.
• מתקדם: מציינים פונקציית התאמה אישית. פונקציות ההתאמה האישית מאפשרות להחיל סגנון אישי על האובייקטים על סמך הנתונים שנשלחים מ-Fleet Engine. הפונקציה יכולה לשנות את הסגנון של כל אובייקט בהתאם למצב הנוכחי של המסלול. לדוגמה, לצבוע את האובייקט Polyline בגוון כהה יותר או להפוך אותו לעבה יותר כשהרכב נע לאט יותר. אפשר אפילו להצטרף למקורות מחוץ ל-Fleet Engine ולעצב את אובייקט Polyline על סמך המידע הזה.

פרמטרים של התאמה אישית

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

• נתיבים של מסעות שכבר הושלמו: משתמשים ב-takenPolylineCustomization.
• נתיב הנסיעה בפועל: משתמשים ב-activePolylineCustomization.
• נתיב שעדיין לא בוצע: משתמשים בremainingPolylineCustomization.

שימוש ב-PolylineOptions

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

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

שימוש בפונקציות של התאמה אישית לעיצוב קווים פוליגוניים של מסלולים

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

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

שליטה בחשיפה של קו פוליגוני של מסלול

כברירת מחדל, כל האובייקטים Polyline גלויים. כדי להסתיר אובייקט Polyline, מגדירים את המאפיין visible שלו:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};