Dostosuj linie łamane trasy

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

Dzięki pakietowi Consumer SDK możesz kontrolować widoczność linii łamanej trasy lub stylizować linię łamaną dla trasy podróży na mapie. 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.

Stylizowanie linii łamanych 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:

• Najprostsza: 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 określają różne stany ścieżki w trasie pojazdu:

• Już przebyty: użyj takenPolylineCustomization.
• Aktywnie przebyta trasa: użyj activePolylineCustomization.
• Nieprzebyty: użyj remainingPolylineCustomization.

Używaj klawisza PolylineOptions

Ten przykład pokazuje, jak skonfigurować styl obiektu Polyline z PolylineOptions. Aby dostosować styl dowolnego obiektu Polyline, postępuj zgodnie z tym wzorcem, korzystając z dowolnej z opcji dostosowywania wielolinii wymienionych wcześniej.

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

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

Używanie funkcji dostosowywania do stylizowania odcinków trasy

W tym przykładzie pokazujemy, 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.

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

Sterowanie widocznością linii łamanej trasy

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};