Menyesuaikan polyline rute

Dokumen ini membahas cara menyesuaikan polyline rute untuk peta yang Anda gunakan di aplikasi pelacakan perjalanan berbasis web untuk pengguna konsumen dan operator armada.

Dengan Consumer SDK, Anda dapat mengontrol visibilitas polyline rute atau menata gaya polyline rute untuk rute perjalanan di peta. SDK membuat objek google.maps.Polyline untuk setiap pasangan koordinat di jalur aktif atau jalur yang tersisa dalam perjalanan. Kemudian, library menerapkan penyesuaian ini dalam dua situasi:

• sebelum menambahkan objek ke peta
• saat data yang digunakan untuk objek telah berubah

Menata gaya polyline rute

Mirip dengan cara Anda dapat menata penanda, Anda menata polyline rute menggunakan parameter penyesuaian. Dari sana, Anda mengonfigurasi gaya menggunakan salah satu pendekatan berikut:

• Paling sederhana: Gunakan PolylineOptions untuk diterapkan ke semua objek Polyline yang cocok saat dibuat atau diperbarui.
• Lanjutan: Tentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan gaya individual objek berdasarkan data yang dikirim oleh Fleet Engine. Fungsi ini dapat mengubah gaya setiap objek berdasarkan status perjalanan saat ini; misalnya, mewarnai objek Polyline dengan warna yang lebih gelap, atau membuatnya lebih tebal saat kendaraan bergerak lebih lambat. Anda bahkan dapat menggabungkan dari sumber di luar Fleet Engine dan menata objek Polyline berdasarkan informasi tersebut.

Parameter penyesuaian

Saat menata gaya polyline rute, Anda menggunakan parameter yang disediakan di FleetEngineShipmentLocationProviderOptions. Parameter ini menyediakan status jalur yang berbeda dalam perjalanan kendaraan, sebagai berikut:

• Jalur sudah dilalui: Gunakan takenPolylineCustomization.
• Jalur yang sering dilalui: Gunakan activePolylineCustomization.
• Jalur Belum melakukan perjalanan: Gunakan remainingPolylineCustomization.

Gunakan PolylineOptions

Contoh berikut menunjukkan cara mengonfigurasi gaya untuk objek Polyline dengan PolylineOptions. Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline menggunakan salah satu penyesuaian polyline yang tercantum sebelumnya.

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

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

Menggunakan fungsi penyesuaian untuk menata gaya polyline rute

Contoh berikut menunjukkan cara mengonfigurasi gaya untuk polyline rute aktif. Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline menggunakan salah satu parameter penyesuaian polyline rute yang tercantum sebelumnya.

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

Mengontrol visibilitas polyline rute

Secara default, semua objek Polyline terlihat. Untuk membuat objek Polyline tidak terlihat, tetapkan properti visible:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};