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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 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 אובייקטים בהתאם למהירויות התנועה שלהם:

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

// 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.

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

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

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

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

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

// 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();

// 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();

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

// 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();

// 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();

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

• עיצוב מפה
• התאמה אישית של הסמנים