Polylinien für Routen anpassen

In diesem Dokument wird beschrieben, wie Sie Routen-Polylinien für die Karte anpassen, die Sie in Ihrer webbasierten App zur Fahrtenverfolgung für Nutzer und Flottenbetreiber verwenden.

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

• bevor Sie die Objekte der Karte hinzufügen.
• wenn sich die für die Objekte verwendeten Daten geändert haben

Routenpolylinien gestalten

Ähnlich wie Markierungen können Sie auch Routenpolylinien mithilfe von Anpassungsparametern gestalten. Anschließend konfigurieren Sie die Stile mit einem der folgenden Ansätze:

• Am einfachsten: Verwenden Sie PolylineOptions, um die Richtlinie auf alle übereinstimmenden Polyline-Objekte anzuwenden, wenn sie erstellt oder aktualisiert werden.
• Erweitert: Geben Sie eine Anpassungsfunktion an. Mit Anpassungsfunktionen können die Objekte basierend auf den von Fleet Engine gesendeten Daten individuell gestaltet werden. Die Funktion kann den Stil jedes Objekts basierend auf dem aktuellen Status der Fahrt ändern. Beispielsweise kann das Objekt Polyline dunkler eingefärbt oder dicker dargestellt werden, wenn sich das Fahrzeug langsamer bewegt. Sie können sogar Daten aus Quellen außerhalb der Fleet Engine verknüpfen und das Polyline-Objekt anhand dieser Informationen gestalten.

Anpassungsparameter

Wenn Sie Polylinien für Routen gestalten, verwenden Sie die Parameter in FleetEngineShipmentLocationProviderOptions. Diese Parameter ermöglichen verschiedene Pfadstatus während der Fahrt des Fahrzeugs:

• Bereits zurückgelegte Pfade: Verwenden Sie takenPolylineCustomization.
• Aktiv zurückgelegter Pfad: Verwenden Sie activePolylineCustomization.
• Noch nicht zurückgelegter Weg: Verwenden Sie remainingPolylineCustomization.

„PolylineOptions“ verwenden

Das folgende Beispiel zeigt, wie Sie den Stil für ein Polyline-Objekt mit PolylineOptions konfigurieren. Folgen Sie diesem Muster, um den Stil eines beliebigen Polyline-Objekts mit einer der oben aufgeführten Polylinien-Anpassungen anzupassen.

JavaScript

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

TypeScript

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

Anpassungsfunktionen zum Gestalten von Routenpolylinien verwenden

Das folgende Beispiel zeigt, wie Sie den Stil für die Polylinie einer aktiven Route konfigurieren. Nach diesem Muster können Sie den Stil jedes Polyline-Objekts mit den oben aufgeführten Anpassungsparametern für Routenpolylinien anpassen.

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

Sichtbarkeit der Routenpolylinie steuern

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};