Polylinien für Routen anpassen

In diesem Dokument wird beschrieben, wie Sie Routenpolylinien für die Karte anpassen, die Sie in Ihrer webbasierten App zur Routenverfolgung für Endnutzer und Flottenbetreiber verwenden.

Mit dem Consumer SDK können Sie die Sichtbarkeit von Routenpolylinien steuern oder die Routenpolylinie für die Route einer Fahrt auf der Karte gestalten. Das SDK erstellt ein google.maps.Polyline-Objekt für jedes Koordinatenpaar auf der aktiven oder verbleibenden Route der Fahrt. Die Bibliothek wendet diese Anpassungen dann in zwei Situationen an:

• bevor die Objekte der Karte hinzugefügt werden
• wenn sich die für die Objekte verwendeten Daten geändert haben

Routenpolylinien gestalten

Ähnlich wie bei Markierungen können Sie Routenpolylinien mit Anpassungsparametern gestalten. Dabei konfigurieren Sie das Styling mit einer der folgenden Methoden:

• Einfachste Methode: Verwenden Sie PolylineOptions, um sie auf alle übereinstimmenden Polyline-Objekte anzuwenden, wenn sie erstellt oder aktualisiert werden.
• Erweiterte Methode: Geben Sie eine Anpassungsfunktion an. Mit Anpassungsfunktionen können Objekte basierend auf Daten, die von Fleet Engine gesendet werden, individuell gestaltet werden. Die Funktion kann das Styling jedes Objekts basierend auf dem aktuellen Status der Fahrt ändern, z. B. die Farbe des Polyline-Objekts dunkler machen oder es dicker machen, wenn sich das Fahrzeug langsamer bewegt. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine zusammenführen und das Polyline-Objekt basierend auf diesen Informationen gestalten.

Anpassungsparameter

Beim Gestalten von Routenpolylinien verwenden Sie Parameter, die in FleetEngineShipmentLocationProviderOptions bereitgestellt werden. Diese Parameter bieten verschiedene Routenstatus für die Fahrt des Fahrzeugs:

• Bereits zurückgelegte Routen: Verwenden Sie takenPolylineCustomization.
• Aktuell zurückgelegte Route: Verwenden Sie activePolylineCustomization.
• Noch nicht zurückgelegte Route: Verwenden Sie remainingPolylineCustomization.

PolylineOptions verwenden

Das folgende Beispiel zeigt, wie Sie das Styling für ein Polyline Objekt mit PolylineOptions konfigurieren. Folgen Sie diesem Muster, um das Styling eines beliebigen Polyline-Objekts mit einer der zuvor aufgeführten Polylinienanpassungen anzupassen.

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

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

Anpassungsfunktionen zum Gestalten von Routenpolylinien verwenden

Das folgende Beispiel zeigt, wie Sie das Styling für eine aktive Routenpolylinie konfigurieren. Folgen Sie diesem Muster, um das Styling eines beliebigen Polyline-Objekts mit einem der zuvor aufgeführten Anpassungsparameter für Routenpolylinien anzupassen.

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

Sichtbarkeit von Routenpolylinien steuern

Standardmäßig sind alle Polyline-Objekte sichtbar. Wenn Sie ein Polyline Objekt unsichtbar machen möchten, legen Sie die Eigenschaft visible fest:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};