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

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

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