Dostosuj linie łamane trasy

Z tego dokumentu dowiesz się, jak dostosować linie łamane tras na mapie używanej w aplikacji internetowej do śledzenia podróży dla użytkowników i operatorów flot.

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

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

Stylizowanie linii łamanych tras

Podobnie jak w przypadku stylizowania znaczników, linie łamane tras stylizujesz za pomocą parametrów dostosowywania. Następnie skonfiguruj stylizowanie, korzystając z jednej z tych metod:

• Najprostsza: użyj PolylineOptions, aby zastosować je do wszystkich pasujących obiektów Polyline podczas ich tworzenia lub aktualizowania.
• Zaawansowana: określ funkcję dostosowywania. Funkcje dostosowywania umożliwiają indywidualne stylizowanie obiektów na podstawie danych wysyłanych przez Fleet Engine. Funkcja może zmieniać stylizowanie każdego obiektu na podstawie bieżącego stanu podróży, np. zmieniać kolor obiektu Polyline na ciemniejszy lub zwiększać jego grubość, gdy pojazd porusza się wolniej. Możesz nawet połączyć się ze źródłami spoza Fleet Engine i stylizować obiekt Polyline na podstawie tych informacji.

Parametry dostosowywania

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

• Ścieżki już przebyte: użyj .takenPolylineCustomization
• Ścieżka aktualnie przebywana: użyj activePolylineCustomization.
• Ścieżka jeszcze nie przebyta: użyj remainingPolylineCustomization.

Używanie PolylineOptions

Poniższy przykład pokazuje, jak skonfigurować stylizowanie obiektu Polyline za pomocą PolylineOptions. Postępuj zgodnie z tym wzorcem, aby dostosować stylizowanie dowolnego obiektu Polyline za pomocą dowolnego z wymienionych wcześniej dostosowań linii łamanej.

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

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

Stylizowanie linii łamanych tras za pomocą funkcji dostosowywania

Poniższy przykład pokazuje, jak skonfigurować stylizowanie aktywnej linii łamanej trasy. Postępuj zgodnie z tym wzorcem, aby dostosować stylizowanie dowolnego obiektu Polyline za pomocą dowolnego z wymienionych wcześniej parametrów dostosowywania linii łamanej.

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

Kontrolowanie widoczności linii łamanej trasy

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};