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 dùng trong ứng dụng theo dõi hành trình dựa trên nền tảng web cho người dùng thông thường và người vận hành nhóm 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 hoặc tạo kiểu cho hình nhiều đường cho một tuyến đường trên bản đồ. SDK 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 còn lại của hành trình. Sau đó, thư viện sẽ áp dụng cá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 nhiều đường của tuyến đường

Tương tự như cách tạo kiểu cho điểm đánh dấu, bạn sẽ tạo kiểu cho các hình nhiều đường bằng cách sử dụng tham số tuỳ chỉnh. Từ đó, bạn có thể đị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ả các đối tượng Polyline phù hợp khi các đối tượ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 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 với sắc thái sâu hơn hoặc làm cho đối tượng dày hơn khi xe đang di chuyển chậm hơn. Bạn thậm chí có thể tham gia dựa trên 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ẽ sử dụng các tham số được cung cấp trong FleetEngineShipmentLocationProviderOptions. Các thông số này cung cấp nhiều trạng thái đường dẫn trong hành trình của xe, như sau:

Sử dụng PolylineOptions

Ví dụ sau cho biết cách định cấu hình định kiểu cho đối tượng Polyline bằng PolylineOptions. Hãy 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 các tuỳ chọn tuỳ chỉnh hình nhiều đường được liệt kê trước đó.

JavaScript

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

TypeScript

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

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

Ví dụ sau đây cho thấy cách định cấu hình định kiểu cho một hình nhiều đường đang hoạt động. Hãy 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 các tham số tuỳ chỉnh hình nhiều đường được liệt kê trước đó.

JavaScript

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

TypeScript

// 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 đa tuyến của tuyến đường

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};