Dostosuj linie łamane trasy

W tym dokumencie opisujemy, jak dostosować linie łamane trasy na mapie używanej w internetowej aplikacji do śledzenia podróży dla użytkowników indywidualnych i operatorów flot.

Za pomocą pakietu Consumer SDK możesz kontrolować widoczność linii łamanej trasy lub określać jej styl na mapie. Pakiet SDK tworzy obiekt google.maps.Polyline dla każdej pary współrzędnych na aktywnej lub pozostałej trasie przejazdu. Biblioteka stosuje te dostosowania w 2 sytuacjach:

• przed dodaniem obiektów do mapy.
• gdy zmienią się dane używane w przypadku obiektów;

Stylizowanie linii łamanych trasy

Podobnie jak w przypadku znaczników, polilinie trasy możesz stylizować za pomocą parametrów dostosowywania. Następnie skonfiguruj stylizację, korzystając z jednego z tych sposobów:

• Najprostsze: użyj PolylineOptions, aby zastosować warunek do wszystkich pasujących obiektów Polyline podczas ich tworzenia lub aktualizowania.
• Zaawansowane: określ funkcję dostosowywania. Funkcje dostosowywania umożliwiają indywidualne stylowanie obiektów na podstawie danych wysyłanych przez Fleet Engine. Funkcja może zmieniać styl każdego obiektu w zależności od aktualnego stanu podróży, np. nadawać obiektowi Polyline ciemniejszy odcień lub sprawiać, że będzie grubszy, gdy pojazd porusza się wolniej. Możesz nawet dołączyć do źródeł spoza Fleet Engine i dostosować styl obiektu Polyline na podstawie tych informacji.

Parametry dostosowywania

Podczas stylizowania linii łamanych trasy używasz parametrów podanych w FleetEngineShipmentLocationProviderOptions. Te parametry określają różne stany ścieżki podczas podróży pojazdu:

• Ścieżki już przebyte: użyj takenPolylineCustomization.
• Ścieżka aktywnie pokonywana: użyj activePolylineCustomization.
• Ścieżka jeszcze nieprzejechana: użyj remainingPolylineCustomization.

Używaj klawisza PolylineOptions

Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline z elementem PolylineOptions. Aby dostosować styl dowolnego Polyline obiektu, postępuj zgodnie z tym wzorcem, korzystając z dowolnych opcji dostosowywania polilinii wymienionych wcześniej.

JavaScript

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

TypeScript

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

Używanie funkcji dostosowywania do określania stylu linii łamanych trasy

Poniższy przykład pokazuje, jak skonfigurować stylizację aktywnej linii łamanej trasy. Aby dostosować styl dowolnego obiektu Polyline, użyj dowolnego z wymienionych wcześniej parametrów dostosowywania polilinii trasy.

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

Kontrolowanie widoczności linii łamanej trasy

Domyślnie widoczne są wszystkie obiekty Polyline. Aby obiekt Polyline był niewidoczny, ustaw jego właściwość visible:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};