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

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

  • মানচিত্রে বস্তু যোগ করার আগে
  • যখন বস্তুর জন্য ব্যবহৃত তথ্য পরিবর্তিত হয়

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

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

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

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

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

    • বাইরের উৎস : আপনি ফ্লিট ট্র্যাকিং ডেটা ফ্লিট ইঞ্জিনের বাইরের উৎস থেকে প্রাপ্ত ডেটার সাথে একত্রিত করতে পারেন এবং সেই তথ্যের উপর ভিত্তি করে Polyline অবজেক্টটি স্টাইল করতে পারেন।

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

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

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

পলিলাইন কাস্টমাইজেশন বিকল্পগুলি

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

ধরণ অনুসারে স্টাইল রুট পলিলাইন

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

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

চাহিদা অনুযায়ী ভ্রমণ অথবা নির্ধারিত কাজের উদাহরণ

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

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

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

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

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

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

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

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

ট্র্যাফিক-সচেতন স্টাইলিং উদাহরণ (শুধুমাত্র চাহিদা অনুযায়ী ভ্রমণ)

ফ্লিট ইঞ্জিন অনুসরণ করা গাড়ির জন্য সক্রিয় এবং অবশিষ্ট পথের ট্র্যাফিক গতির ডেটা প্রদান করে। আপনি এই তথ্য ব্যবহার করে 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'});
      }
    }
  };

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

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

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

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

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

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

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

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

এরপর কি?