تخصيص الخطوط المتعددة للمسار

يتناول هذا المستند كيفية تخصيص شكل ومسارات المركبات التي يتم تتبُّعها على الخريطة. يتم رسم المسارات على الخريطة باستخدام خطوط متعددة. لكل زوج من الإحداثيات في مسار المركبة النشط أو المتبقّي، تنشئ المكتبة عنصر google.maps.Polyline. يمكنك تصميم عناصر Polyline من خلال تحديد تخصيصات الخطوط المتعددة التي تطبّقها المكتبة بعد ذلك في حالتَين:

• قبل إضافة العناصر إلى الخريطة
• عند تغيير البيانات المستخدَمة للكائنات

أنماط الخطوط المتعددة

على غرار طريقة تخصيص العلامات، يمكنك تصميم الخطوط المتعددة للمسارات بطرق مختلفة:

1. تنسيق الخطوط المتعددة للمسار حسب النوع: استخدِم PolylineOptions للتطبيق على جميع عناصر Polyline المطابقة عند إنشائها أو تعديلها. للحصول على مثال، اطّلِع على تنسيق الخطوط المتعددة حسب النوع.

2. تنسيق الخطوط المتعددة للمسار استنادًا إلى البيانات: حدِّد وظيفة تخصيص استنادًا إلى بيانات من تتبُّع الأسطول أو من مصادر خارجية:

   • البيانات من تتبُّع الأسطول: تُرسِل ميزة تتبُّع الأسطول بيانات الخطوط المتعددة إلى دالة customisation، بما في ذلك بيانات حالة المركبة الحالية. يمكنك تصميم الخطوط المتعددة استنادًا إلى هذه البيانات، بما في ذلك تلوين جسم Polyline بدرجة أغمق، أو جعله أكثر سمكًا عندما تتحرك المركبة ببطء.

   • المصادر الخارجية: يمكنك دمج بيانات تتبُّع الأسطول مع بيانات من مصادر خارج Fleet Engine وتنسيق عنصر Polyline استنادًا إلى تلك المعلومات.

   على سبيل المثال، اطّلِع على تنسيق الخطوط المتعددة المستندة إلى البيانات.

3. التحكّم في مستوى عرض الخطوط المتعددة للمسار: يمكنك إخفاء الخطوط المتعددة أو عرضها باستخدام السمة visible. لمعرفة التفاصيل، يُرجى الاطّلاع على التحكّم في مستوى رؤية الخطوط المتعددة في هذا الدليل.

4. عرض معلومات إضافية لمركبة أو علامة موقع جغرافي: يمكنك عرض معلومات إضافية باستخدام السمة infowindow. للاطّلاع على التفاصيل، يُرجى الاطّلاع على عرض معلومات إضافية لمركبة أو علامة موقع جغرافي في هذا الدليل.

خيارات تخصيص الخطوط المتعددة

تتوفّر خيارات التخصيص التالية في كل من FleetEngineVehicleLocationProviderOptions و FleetEngineDeliveryVehicleLocationProviderOptions. يمكنك ضبط تخصيصات لحالات المسار المختلفة في رحلة المركبة:

• المسار الذي تمّ قطعه من قبل: استخدِم takenPolylineCustomization - الرحلات عند الطلب، المهام المُجدوَلة.

• مسار التنقّل النشط: استخدِم activePolylineCustomization - الرحلات عند الطلب، المهام المُجدوَلة.

• المسار الذي لم يتم التنقّل فيه بعد: استخدِم remainingPolylineCustomization - الرحلات عند الطلب، المهام المُجدوَلة.

تنسيق الخطوط المتعددة للمسار حسب النوع

لتنسيق الخطوط المتعددة للمسار حسب النوع، غيِّر تنسيق كائنات 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();

الخطوات التالية

• منح الخريطة نمطًا
• تخصيص العلامات