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

এই ডকুমেন্টে একটি ম্যাপে ট্র্যাক করা যানবাহনের রুটের চেহারা ও অনুভূতি কীভাবে কাস্টমাইজ করা যায়, তা আলোচনা করা হয়েছে। রুটগুলো ম্যাপে পলিলাইনের মাধ্যমে আঁকা হয়। একটি গাড়ির সক্রিয় বা অবশিষ্ট পথের প্রতিটি স্থানাঙ্ক জোড়ার জন্য লাইব্রেরিটি একটি 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();

এরপর কী?