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

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

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

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

چندخطی‌های مسیر را استایل دهید

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

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

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

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

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

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

جاوا اسکریپت 

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

تایپ اسکریپت 

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'});
      }
    }
  };

تایپ اسکریپت 

// 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};

تایپ اسکریپت 

remainingPolylineCustomization = {visible: false};