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

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

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

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

סגנון של קווים פוליגוניים

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

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

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

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

• נתיבים שכבר נסעתם בהם: משתמשים ב-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.taskTrackingInfo.remainingDrivingDistanceMeters;
    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: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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};