Dostosuj linie łamane trasy

W tym dokumencie wyjaśniamy, jak dostosować linie ścieżki do mapy, której używasz w swojej internetowej aplikacji do śledzenia tras dla użytkowników i operatorów floty.

Dzięki pakietowi Consumer SDK możesz kontrolować widoczność linii na mapie lub stylizować linię na mapie dla trasy podróży. SDK tworzy obiekt google.maps.Polyline dla każdej pary współrzędnych na aktywnej lub pozostałej ścieżce podróży. Biblioteka stosuje te ustawienia w 2 sytuacjach:

  • przed dodaniem obiektów do mapy.
  • gdy dane używane do obiektów ulegną zmianie.

Nadawanie stylów liniom łamanym tras

Podobnie jak w przypadku znaczników, stylowanie linii trasy odbywa się za pomocą parametrów personalizacji. Następnie skonfiguruj styl, korzystając z jednego z tych sposobów:

  • Najprostszy: użyj PolylineOptions, aby zastosować regułę do wszystkich dopasowanych obiektów Polyline podczas ich tworzenia lub aktualizowania.
  • Zaawansowane: określ funkcję personalizacji. Funkcje personalizacji umożliwiają stylizację obiektów na podstawie danych wysyłanych przez silnik floty. Funkcja może zmieniać styl każdego obiektu w zależności od bieżącego stanu podróży, np. nadawać obiektowi Polyline ciemniejszy odcień lub robić go grubszy, gdy pojazd porusza się wolniej. Możesz nawet złączać dane ze źródeł spoza Fleet Engine i stylizować obiekt Polyline na podstawie tych informacji.

Parametry dostosowywania

Do stylizacji odcinków trasy używasz parametrów podanych w FleetEngineShipmentLocationProviderOptions. Te parametry umożliwiają uwzględnianie różnych stanów ścieżki w trasie pojazdu:

Użyj konta PolylineOptions

Ten przykład pokazuje, jak skonfigurować styl obiektu Polyline z PolylineOptions. Aby dostosować styl dowolnego obiektu Polyline, korzystaj z dowolnych opcji dostosowywania wielolinii wymienionych wcześniej.

JavaScript

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

TypeScript

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

Używanie funkcji dostosowywania do stylizowania odcinków trasy

Ten przykład pokazuje, jak skonfigurować stylizację aktywnej trasy (polilinii). Aby dostosować styl obiektu Polyline, postępuj zgodnie z tym wzorcem, używając dowolnego z wymienionych wcześniej parametrów dostosowywania wielokąta 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'});
      }
    }
  };

Sterowanie widocznością linii złożonej trasy

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};