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

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

باستخدام 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};