Tuỳ chỉnh hình nhiều đường

Tài liệu này trình bày cách tuỳ chỉnh đường gấp khúc của tuyến đường cho bản đồ mà bạn sử dụng trong ứng dụng theo dõi hành trình dựa trên web dành cho người dùng là người tiêu dùng và nhà điều hành đội xe.

Với Consumer SDK, bạn có thể kiểm soát khả năng hiển thị hình nhiều đường của tuyến đường hoặc tạo kiểu cho hình nhiều đường của tuyến đường cho tuyến đường của một hành trình trên bản đồ. SDK này tạo một đối tượng google.maps.Polyline cho mỗi cặp toạ độ trong đường dẫn đang hoạt động hoặc đường dẫn còn lại của hành trình. Sau đó, thư viện sẽ áp dụng các chế độ tuỳ chỉnh này trong 2 trường hợp:

• trước khi thêm các đối tượng vào bản đồ
• khi dữ liệu dùng cho các đối tượng đã thay đổi

Tạo kiểu cho đường gấp khúc của tuyến đường

Tương tự như cách bạn có thể tạo kiểu cho điểm đánh dấu, bạn có thể tạo kiểu cho đường gấp khúc của tuyến đường bằng tham số tuỳ chỉnh. Từ đó, bạn định cấu hình kiểu bằng một trong các phương pháp sau:

• Đơn giản nhất: Sử dụng PolylineOptions để áp dụng cho tất cả các đối tượng Polyline được so khớp khi chúng được tạo hoặc cập nhật.
• Nâng cao: Chỉ định một hàm tuỳ chỉnh. Hàm tuỳ chỉnh cho phép tạo kiểu riêng cho các đối tượng dựa trên dữ liệu do Fleet Engine gửi. Hàm này có thể thay đổi kiểu của từng đối tượng dựa trên trạng thái hiện tại của hành trình; ví dụ: tô màu đối tượng Polyline thành màu đậm hơn hoặc làm cho đối tượng này dày hơn khi xe di chuyển chậm hơn. Bạn thậm chí có thể kết hợp với các nguồn bên ngoài Fleet Engine và tạo kiểu cho đối tượng Polyline dựa trên thông tin đó.

Tham số tuỳ chỉnh

Khi tạo kiểu cho đường gấp khúc của tuyến đường, bạn sẽ sử dụng các tham số được cung cấp trong FleetEngineShipmentLocationProviderOptions. Các tham số này cung cấp các trạng thái đường dẫn khác nhau trong hành trình của xe như sau:

• Đường dẫn đã đi: Sử dụng takenPolylineCustomization.
• Đường dẫn đang đi: Sử dụng activePolylineCustomization.
• Đường dẫn chưa đi: Sử dụng .remainingPolylineCustomization

Sử dụng PolylineOptions

Ví dụ sau đây cho biết cách định cấu hình kiểu cho đối tượng Polyline bằng PolylineOptions. Hãy làm theo mẫu này để tuỳ chỉnh định kiểu của bất kỳ đối tượng Polyline nào bằng cách sử dụng bất kỳ chế độ tuỳ chỉnh hình nhiều đường nào được liệt kê trước đó.

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

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

Sử dụng hàm tuỳ chỉnh để tạo kiểu cho đường gấp khúc của tuyến đường

Ví dụ sau đây cho biết cách định cấu hình định kiểu cho đường gấp khúc của tuyến đường đang hoạt động. Hãy làm theo mẫu này để tuỳ chỉnh định kiểu của bất kỳ đối tượng Polyline nào bằng cách sử dụng bất kỳ tham số tuỳ chỉnh đường gấp khúc của tuyến đường nào được liệt kê trước đó.

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

Kiểm soát chế độ hiển thị đường gấp khúc của tuyến đường

Theo mặc định, tất cả các đối tượng Polyline đều hiển thị. Để ẩn đối tượng Polyline, hãy đặt thuộc tính visible của đối tượng đó:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};