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

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

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