سفارشی کردن چند خطوط مسیر

این سند نحوه سفارشی‌سازی چند خطوط مسیر را برای نقشه‌ای که در برنامه ردیابی سفر مبتنی بر وب خود برای کاربران مصرف‌کننده و اپراتورهای ناوگان استفاده می‌کنید را پوشش می‌دهد.

با Consumer SDK، می‌توانید دید چند خط مسیر را کنترل کنید یا چند خط مسیر را برای مسیر سفر روی نقشه سبک کنید. SDK یک شی google.maps.Polyline برای هر جفت مختصات در مسیر فعال یا باقیمانده سفر ایجاد می کند. سپس کتابخانه این سفارشی سازی ها را در دو موقعیت اعمال می کند:

  • قبل از اضافه کردن اشیا به نقشه
  • هنگامی که داده های مورد استفاده برای اشیاء تغییر کرده است

چند خط مسیر سبک

مشابه نحوه استایل دادن به نشانگرها، چند خط مسیر را با استفاده از پارامترهای سفارشی‌سازی استایل می‌دهید. از آنجا، استایل را با استفاده از یکی از رویکردهای زیر پیکربندی می‌کنید:

  • ساده‌ترین : از PolylineOptions برای اعمال بر روی تمام اشیاء Polyline منطبق هنگام ایجاد یا به‌روزرسانی استفاده کنید.
  • پیشرفته : یک تابع سفارشی سازی را مشخص کنید. توابع سفارشی‌سازی امکان استایل‌سازی فردی اشیاء را بر اساس داده‌های ارسال شده توسط Fleet Engine فراهم می‌کنند. این تابع می تواند استایل هر شی را بر اساس وضعیت فعلی سفر تغییر دهد. به عنوان مثال، شیء Polyline را با سایه عمیق تر رنگ آمیزی کنید، یا زمانی که وسیله نقلیه کندتر حرکت می کند، آن را ضخیم تر کنید. حتی می‌توانید از منابع خارج از Fleet Engine به آن بپیوندید و شی Polyline را بر اساس آن اطلاعات استایل دهید.

پارامترهای سفارشی سازی

هنگام استایل کردن چند خطوط مسیر، از پارامترهای ارائه شده در FleetEngineShipmentLocationProviderOptions استفاده می کنید. این پارامترها حالت های مسیر متفاوتی را در سفر وسیله نقلیه به شرح زیر ارائه می کنند:

از PolylineOptions استفاده کنید

مثال زیر نحوه پیکربندی یک ظاهر طراحی شده برای یک شی Polyline را با PolylineOptions نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از سفارشی‌سازی‌های چند خطی که قبلاً ذکر شد، استایل هر شی Polyline را سفارشی کنید.

جاوا اسکریپت 

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

TypeScript 

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

از توابع سفارشی سازی برای استایل کردن چند خط مسیر استفاده کنید

مثال زیر نحوه پیکربندی استایل را برای چند خط مسیر فعال نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از پارامترهای سفارشی سازی مسیر چند خطی که قبلا ذکر شد، استایل هر شی Polyline را سفارشی کنید.

جاوا اسکریپت 

// 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 آن را تنظیم کنید:

جاوا اسکریپت 

remainingPolylineCustomization = {visible: false};

TypeScript 

remainingPolylineCustomization = {visible: false};