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

במסמך הזה מוסבר איך להתאים אישית את המראה והתחושה של מסלולים של כלי רכב במפה. המסלולים מצוירים במפה כקווים פוליגונים. הספרייה יוצרת אובייקט 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();

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