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

Tài liệu này trình bày cách tuỳ chỉnh hình nhiều đường cho bản đồ mà bạn sử dụng ứng dụng theo dõi hành trình dựa trên nền tảng web cho người dùng tiêu dùng và nhà điều hành hệ thống thiết bị.

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

• 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 hình nhiều đường

Tương tự như cách tạo kiểu cho điểm đánh dấu, bạn tạo kiểu hình nhiều đường bằng cách sử dụng thông số tuỳ chỉnh. Từ đó, bạn định cấu hình việc tạo 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ả khớp với các đối tượng Polyline khi chúng được tạo hoặc cập nhật.
• Nâng cao: Chỉ định một hàm tuỳ chỉnh. Các hàm tuỳ chỉnh cho phép tạo kiểu riêng của các đối tượng dựa trên dữ liệu do Fleet Engine gửi. Hàm có thể thay đổi kiểu của mỗi đố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 Polyline đối tượng bóng sâu hơn hoặc làm cho màu sắc dày hơn khi xe ở đang di chuyển chậm hơn. Bạn thậm chí có thể tham gia chống lại từ 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 đó.

Thông số tuỳ chỉnh

Khi tạo kiểu cho hình nhiều đường tuyến, bạn sẽ dùng các tham số được cung cấp trong FleetEngineShipmentLocationProviderOptions. Những thông số này cung cấp cho các trạng thái đường đi khác nhau trong hành trình của phương tiện, như sau:

• Đường dẫn đã di chuyển: Sử dụng takenPolylineCustomization.
• Lộ trình Chủ động di chuyển: Sử dụng activePolylineCustomization.
• Lộ trình Chưa đi được: Sử dụng remainingPolylineCustomization.

Sử dụng PolylineOptions

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

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

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

Dùng các hàm tuỳ chỉnh để tạo kiểu cho các hình nhiều đường

Ví dụ sau đây cho thấy cách định cấu hình định kiểu cho một tuyến đang hoạt động hình nhiều đường. Làm theo mẫu này để tuỳ chỉnh kiểu của mọi đối tượng Polyline bằng cách sử dụng bất kỳ tham số tuỳ chỉnh hình nhiều đườ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ị hình nhiều đường của tuyến đường

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};