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

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

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

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

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

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

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

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

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

שימוש ב-PolylineOptions

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

JavaScript

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

TypeScript

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

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

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

JavaScript

// 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'});
      }
    }
  };

TypeScript

// 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 שלו:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};