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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בדוגמה הבאה מוסבר איך להגדיר את העיצוב של אובייקט 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();

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