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

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

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

עיצוב קווים פוליגוניים

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

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

2. עיצוב קווים של מסלולים על סמך נתונים: אפשר לציין פונקציית התאמה אישית על סמך נתונים ממעקב אחרי צי רכב או ממקורות חיצוניים:

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

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

   לדוגמה, ראו עיצוב קווים פוליגוניים על סמך נתונים.

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

4. הצגת מידע נוסף על רכב או על סמן מיקום: אפשר להציג מידע נוסף באמצעות המאפיין infowindow. פרטים נוספים זמינים במאמר הצגת מידע נוסף על רכב או על סמן מיקום במדריך הזה.

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

אפשרויות ההתאמה האישית הבאות זמינות גם ב-FleetEngineVehicleLocationProviderOptions וגם ב-FleetEngineDeliveryVehicleLocationProviderOptions. אתם יכולים להגדיר התאמות אישיות למצבים שונים של המסלול במהלך הנסיעה ברכב:

• נתיב שכבר עברו בו: שימוש ב-takenPolylineCustomization - נסיעות על פי דרישה, משימות מתוזמנות.

• נתיב נסיעה פעיל: שימוש בactivePolylineCustomization – נסיעות על פי דרישה, משימות מתוזמנות.

• נתיב שלא נוסעים בו עדיין: משתמשים בהפניה remainingPolylineCustomization – נסיעות לפי דרישה, משימות מתוזמנות.

הגדרת סגנון לקווי מסלול מסוג פוליגון

כדי לשנות את הסגנון של קווים שבורים של מסלולים לפי סוג, משתמשים ב-PolylineOptions כדי לשנות את הסגנון של אובייקטים מסוג Polyline.

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

דוגמה לשימוש בנסיעות על פי דרישה או במשימות מתוזמנות

JavaScript

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

TypeScript

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

עיצוב קווים שבורים של מסלולים באמצעות נתונים

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

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

דוגמה לנסיעות לפי דרישה

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[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'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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'});
      }
    }
  };

דוגמה למשימות מתוזמנות

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

דוגמה לעיצוב בהתאם לתנועת הגולשים (לנסיעות על פי דרישה בלבד)

‫Fleet Engine מחזיר נתונים של מהירות התנועה לגבי הנתיבים הפעילים והנתיבים שנותרו לרכב המעקב. אפשר להשתמש במידע הזה כדי לעצב Polyline אובייקטים בהתאם למהירויות התנועה שלהם:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

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

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

דוגמה לשימוש בנסיעות על פי דרישה או במשימות מתוזמנות

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

הצגת חלון מידע לסמן של רכב או מיקום

אפשר להשתמש בInfoWindow כדי להציג מידע נוסף על רכב או על סמן מיקום.

בדוגמה הבאה אפשר לראות איך ליצור InfoWindow ולצרף אותו לסמן של רכב.

דוגמה לנסיעות לפי דרישה

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

דוגמה למשימות מתוזמנות

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

המאמרים הבאים

• הגדרת סגנון למפה
• התאמה אישית של הסמנים