রুট পলিলাইন কাস্টমাইজ করা

এই ডকুমেন্টে ম্যাপে ট্র্যাক করা গাড়ির রুটের লুক ও ফিল কাস্টমাইজ করার পদ্ধতি সম্পর্কে বলা আছে। ম্যাপে পলিলাইনের মাধ্যমে রুট আঁকা হয়। গাড়ির অ্যাক্টিভ বা বাকি থাকা পাথ-এর প্রতিটি কোঅর্ডিনেট পেয়ারের জন্য লাইব্রেরি একটি google.maps.Polyline অবজেক্ট তৈরি করে। আপনি পলিলাইন কাস্টমাইজেশন নির্দিষ্ট করে Polyline অবজেক্ট স্টাইল করতে পারেন যা লাইব্রেরি দুটি পরিস্থিতিতে প্রয়োগ করে:

  • ম্যাপে অবজেক্ট যোগ করার আগে
  • অবজেক্টের জন্য ব্যবহৃত ডেটা পরিবর্তন করা হলে

পলিলাইন স্টাইল করা

আপনি যেভাবে মার্কার কাস্টমাইজ করতে পারেন, সেই একই উপায়ে আপনি বিভিন্নভাবে রুট পলিলাইন স্টাইল করতে পারেন:

  1. ধরন অনুযায়ী রুটের পলিলাইন স্টাইল করা: ম্যাচ করা Polyline অবজেক্ট তৈরি বা আপডেট করার সময় সেগুলিতে প্রয়োগ করতে PolylineOptions ব্যবহার করুন। উদাহরণ হিসেবে, ধরন অনুযায়ী পলিলাইন স্টাইল করুন দেখুন।

  2. ডেটার উপর ভিত্তি করে রুট পলিলাইন স্টাইল করা: ফ্লিট ট্র্যাকিং বা বাইরের সোর্স থেকে পাওয়া ডেটার উপর ভিত্তি করে কাস্টমাইজেশন ফাংশন নির্দিষ্ট করুন:

    • ফ্লিট ট্র্যাকিং থেকে পাওয়া ডেটা: ফ্লিট ট্র্যাকিং, কাস্টমাইজেশন ফাংশনে পলিলাইন ডেটা পাস করে, যার মধ্যে বর্তমান গাড়ির স্ট্যাটাস সংক্রান্ত ডেটা অন্তর্ভুক্ত থাকে। এই ডেটার উপর ভিত্তি করে আপনি পলিলাইন স্টাইল করতে পারবেন, এর মধ্যে রয়েছে Polyline অবজেক্টকে আরও গাঢ় রঙে রঙ করা অথবা কোনও গাড়ি ধীরে ধীরে চলার সময় এটিকে আরও মোটা করে তোলা।

    • বাইরের সোর্স: আপনি Fleet Engine-এর বাইরের সোর্স থেকে পাওয়া ডেটার সাথে ফ্লিট ট্র্যাকিং ডেটা একত্রিত করতে পারেন এবং সেই তথ্যের উপর ভিত্তি করে Polyline অবজেক্ট স্টাইল করতে পারেন।

    উদাহরণ হিসেবে, ডেটার উপর ভিত্তি করে পলিলাইন স্টাইল করুন দেখুন।

  3. রুট পলিলাইনের দৃশ্যমানতা কন্ট্রোল করা: আপনি visible প্রপার্টি ব্যবহার করে পলিলাইন লুকিয়ে রাখতে বা দেখাতে পারবেন। বিবরণের জন্য, এই গাইডে পলিলাইন দৃশ্যমানতা নিয়ন্ত্রণ করুন দেখুন।

  4. কোনও যানবাহন বা লোকেশন মার্কারের জন্য অতিরিক্ত তথ্য দেখানো: আপনি infowindow প্রপার্টি ব্যবহার করে অতিরিক্ত তথ্য দেখাতে পারবেন। বিস্তারিত জানতে, এই গাইডে গাড়ি বা লোকেশন মার্কারের জন্য অতিরিক্ত তথ্য দেখুন।

পলিলাইন কাস্টমাইজ করার বিকল্প

নিম্নলিখিত কাস্টমাইজেশন বিকল্পগুলি FleetEngineVehicleLocationProviderOptions এবং FleetEngineDeliveryVehicleLocationProviderOptions, দু'টিতেই উপলভ্য। আপনি গাড়ির জার্নির বিভিন্ন পাথ স্টেটের জন্য কাস্টমাইজেশন সেট করতে পারবেন:

ধরন অনুযায়ী রুটের পলিলাইন স্টাইল করুন

ধরন অনুযায়ী রুটের পলিলাইন স্টাইল করতে, PolylineOptions ব্যবহার করে Polyline অবজেক্টের স্টাইলিং পরিবর্তন করুন।

PolylineOptions-এর সাথে Polyline অবজেক্টের স্টাইলিং কীভাবে কনফিগার করতে হয় তা নিম্নলিখিত উদাহরণে দেখানো হয়েছে। এই নির্দেশিকায় দেওয়া পলাইন কাস্টমাইজেশন বিকল্প Polyline ব্যবহার করে যেকোনও অবজেক্টের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্ন অনুসরণ করুন।

চাহিদা মতো ট্রিপ বা শিডিউল করা টাস্কের উদাহরণ

জাভাস্ক্রিপ্ট

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

TypeScript

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

ডেটা ব্যবহার করে রুটের পলিলাইন স্টাইল করা

ডেটা ব্যবহার করে রুটের পলিলাইন স্টাইল করতে, কাস্টমাইজেশন ফাংশন ব্যবহার করে Polyline অবজেক্টের স্টাইলিং পরিবর্তন করুন।

কাস্টমাইজেশন ফাংশন ব্যবহার করে অ্যাক্টিভ রুটের স্টাইলিং কীভাবে কনফিগার করতে হয় তা নিম্নলিখিত উদাহরণ থেকে দেখুন । এই নির্দেশিকায় উল্লিখিত পলিলাইন কাস্টমাইজেশন বিকল্প-এ তালিকাভুক্ত যেকোনও পলিলাইন কাস্টমাইজেশন প্যারামিটার ব্যবহার করে যেকোনও Polyline অবজেক্টের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্ন অনুসরণ করুন।

চাহিদা মতো ট্রিপের উদাহরণ

জাভাস্ক্রিপ্ট

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

শিডিউল করা টাস্কের উদাহরণ

জাভাস্ক্রিপ্ট

// 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 অবজেক্ট স্টাইল করতে পারবেন:

জাভাস্ক্রিপ্ট

// 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-এ সেট করুন।

চাহিদা মতো ট্রিপ বা শিডিউল করা টাস্কের উদাহরণ

জাভাস্ক্রিপ্ট

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

কোনও গাড়ি বা লোকেশন মার্কারের জন্য তথ্য উইন্ডো দেখানো

আপনি InfoWindow ব্যবহার করে কোনও গাড়ি বা লোকেশন মার্কার সম্পর্কে অতিরিক্ত তথ্য দেখাতে পারেন।

নিচের উদাহরণে দেখানো হয়েছে কীভাবে একটি InfoWindow তৈরি করতে হয় এবং এটি একটি গাড়ির মার্কারের সাথে অ্যাটাচ করতে হয়।

চাহিদা মতো ট্রিপের উদাহরণ

জাভাস্ক্রিপ্ট

// 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();

শিডিউল করা টাস্কের উদাহরণ

জাভাস্ক্রিপ্ট

// 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();

এর পরে কী করতে হবে