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

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

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