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

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

באמצעות 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};