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

يتناول هذا المستند كيفية تخصيص خطوط مسار متعدّدة للخرائط التي تستخدمها في تطبيق تتبُّع الرحلات المستند إلى الويب والمخصّص للمستهلكين ومشغّلي أساطيل المركبات.

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

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

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

على غرار كيفية تحديد نمط العلامات، يمكنك تحديد نمط خطوط المسار المتعدّدة باستخدام مَعلمات التخصيص. من هناك، يمكنك ضبط النمط باستخدام أحد الأسلوبَين التاليَين:

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

مَعلمات التخصيص

عند تحديد نمط خطوط المسار المتعدّدة، يمكنك استخدام المَعلمات المقدَّمة في FleetEngineShipmentLocationProviderOptions. توفّر هذه المَعلمات حالات مسار مختلفة في رحلة المركبة، على النحو التالي:

استخدام PolylineOptions

يوضّح المثال التالي كيفية ضبط نمط كائن Polyline باستخدام PolylineOptions. اتّبِع هذا النمط لتخصيص نمط أي كائن Polyline باستخدام أي من عمليات تخصيص الخطوط المتعدّدة المذكورة سابقًا.

JavaScript

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

TypeScript

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

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

يوضّح المثال التالي كيفية ضبط نمط خط مسار متعدّد نشط. اتّبِع هذا النمط لتخصيص نمط أي كائن Polyline باستخدام أي من مَعلمات تخصيص خطوط المسار المتعدّدة المذكورة سابقًا.

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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 route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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'});
      }
    }
  };

التحكّم في مستوى ظهور خطوط المسار المتعدّدة

تكون جميع كائنات Polyline مرئية تلقائيًا. لإخفاء كائن Polyline ، اضبط السمة visible على:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};