Dostosuj linie łamane trasy

W tym dokumencie znajdziesz informacje o sposobie dostosowywania linii brzegowej trasy na mapie, której używasz w internetowej aplikacji do śledzenia przejazdów przeznaczonej 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. Pakiet SDK tworzy obiekt google.maps.Polyline dla każdej pary współrzędnych na aktywnej lub pozostałej ścieżce. Biblioteka stosuje te ustawienia w 2 sytuacjach:

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

Określanie stylu linii łamanych trasy

Podobnie jak w przypadku znaczników określasz styl linii łamanych trasy, korzystając z parametrów dostosowywania. Następnie możesz skonfigurować styl, korzystając z jednej z tych metod:

  • Najprostsza: użyj PolylineOptions, aby zastosować regułę do wszystkich dopasowanych obiektów Polyline podczas ich tworzenia lub aktualizowania.
  • Zaawansowane: określ funkcję dostosowywania. Funkcje dostosowywania pozwalają na określanie indywidualnego stylu obiektów na podstawie danych przesłanych przez Fleet Engine. Ta funkcja może zmieniać styl każdego obiektu w zależności od bieżącego stanu podróży. Na przykład możesz nadać obiektowi Polyline głębszy odcień lub zwiększyć jego grubość, gdy pojazd porusza się wolniej. Możesz nawet złączać dane ze źródeł spoza Fleet Engine i określać styl obiektu Polyline na podstawie tych informacji.

Parametry dostosowywania

Aby nadać styl liniom ścieżki, użyj parametrów podanych w FleetEngineShipmentLocationProviderOptions. Te parametry umożliwiają uwzględnienie różnych stanów ścieżki w trasie pojazdu:

Użyj konta PolylineOptions

Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline za pomocą 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

Poniższy przykład pokazuje, jak skonfigurować styl aktywnej linii łamanej. 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'});
      }
    }
  };

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