Polylinien für Routen anpassen

In diesem Dokument wird beschrieben, wie Sie das Erscheinungsbild von Routen für getrackte Fahrzeuge auf einer Karte anpassen. Routen werden auf einer Karte in Polylinien dargestellt. Für jedes Koordinatenpaar im aktiven oder verbleibenden Pfad eines Fahrzeugs erstellt die Bibliothek ein google.maps.Polyline-Objekt. Sie können die Polyline-Objekte durch Festlegen von Polylinienanpassungen stylen, die die Bibliothek dann in zwei Situationen anwendet:

• Bevor Sie die Objekte der Karte hinzufügen
• Wenn sich die für die Objekte verwendeten Daten geändert haben

Polylinien gestalten

Ähnlich wie bei Markierungen können Sie auch Polylinien für Routen auf verschiedene Arten gestalten:

1. Polylinien für Routen nach Typ formatieren: Verwenden Sie PolylineOptions, um alle übereinstimmenden Polyline-Objekte beim Erstellen oder Aktualisieren zu formatieren. Ein Beispiel finden Sie unter Polylinien nach Typ formatieren.

2. Stil für Routenpolylinien basierend auf Daten festlegen: Sie können eine Anpassungsfunktion basierend auf Daten aus der Flottenverfolgung oder aus externen Quellen angeben:

   • Daten aus dem Flotten-Tracking: Beim Flotten-Tracking werden Polyliniendaten an die Anpassungsfunktion übergeben, einschließlich Daten zum aktuellen Fahrzeugstatus. Sie können Polylinien basierend auf diesen Daten formatieren, z. B. das Polyline-Objekt in einem dunkleren Farbton einfärben oder es dicker darstellen, wenn sich das Fahrzeug langsamer bewegt.

   • Externe Quellen: Sie können Daten aus der Flottenverfolgung mit Daten aus Quellen außerhalb von Fleet Engine kombinieren und das Polyline-Objekt anhand dieser Informationen formatieren.

   Ein Beispiel finden Sie unter Polylinien anhand von Daten formatieren.

3. Sichtbarkeit von Polylinien für Routen festlegen: Mit der Eigenschaft visible können Sie Polylinien ein- oder ausblenden. Weitere Informationen finden Sie in diesem Leitfaden unter Sichtbarkeit von Polylinien steuern.

4. Zusätzliche Informationen für eine Fahrzeug- oder Standortmarkierung anzeigen: Mit der Property infowindow können Sie zusätzliche Informationen anzeigen. Weitere Informationen finden Sie in diesem Leitfaden unter Weitere Informationen für eine Fahrzeug- oder Standortmarkierung anzeigen.

Optionen zur Polylinienanpassung

Die folgenden Anpassungsoptionen sind sowohl in FleetEngineVehicleLocationProviderOptions als auch in FleetEngineDeliveryVehicleLocationProviderOptions verfügbar. Sie können Anpassungen für verschiedene Pfadzustände auf der Fahrt des Fahrzeugs festlegen:

• Bereits zurückgelegter Weg: Siehe takenPolylineCustomization – On-Demand-Fahrten, Geplante Aufgaben.

• Aktuell zurückgelegter Weg: Siehe activePolylineCustomization – On-Demand-Fahrten, Geplante Aufgaben.

• Noch nicht zurückgelegter Weg: Verwenden Sie remainingPolylineCustomization – On-Demand-Fahrten, Geplante Aufgaben.

Routenpolylinien nach Typ gestalten

Wenn Sie Routenpolylinien nach Typ formatieren möchten, ändern Sie den Stil der Polyline-Objekte mit PolylineOptions.

Im folgenden Beispiel wird gezeigt, wie das Styling für ein Polyline-Objekt mit PolylineOptions konfiguriert wird. Folgen Sie diesem Muster, um den Stil eines beliebigen Polyline-Objekts mithilfe einer der in diesem Leitfaden unter Optionen für die Polylinienanpassung aufgeführten Anpassungen für Routenpolylinien anzupassen.

Beispiel für Fahrten auf Abruf oder geplante Aufgaben

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

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

Stil für Routenpolylinien mithilfe von Daten festlegen

Wenn Sie Routenpolylinien mithilfe von Daten formatieren möchten, ändern Sie das Format der Polyline-Objekte mithilfe von Anpassungsfunktionen.

Das folgende Beispiel zeigt, wie Sie das Design für eine aktive Route mithilfe einer Anpassungsfunktion konfigurieren. So können Sie den Stil eines beliebigen Polyline-Objekts mithilfe der in diesem Leitfaden unter Optionen für die Polylinienanpassung aufgeführten Parameter anpassen.

Beispiel für Fahrten auf Abruf

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    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'});
      }
    }
  };

Beispiel für geplante Aufgaben

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

Beispiel für ein verkehrsorientiertes Design (nur On-Demand-Fahrten)

Fleet Engine gibt Verkehrsgeschwindigkeitsdaten für die aktiven und verbleibenden Pfade für das verfolgte Fahrzeug zurück. Anhand dieser Informationen können Sie Polyline-Objekte entsprechend ihrer Verkehrsgeschwindigkeit gestalten:

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Sichtbarkeit von Polylinien steuern

Standardmäßig sind alle Polyline-Objekte sichtbar. Um ein Polyline-Objekt unsichtbar zu machen, setze seine visible-Eigenschaft auf false.

Beispiel für Fahrten auf Abruf oder geplante Aufgaben

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Infofenster für eine Fahrzeug- oder Standortmarkierung anzeigen

Mit einem InfoWindow lassen sich zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzeigen.

Im folgenden Beispiel wird gezeigt, wie Sie eine InfoWindow erstellen und an eine Fahrzeugmarkierung anhängen.

Beispiel für Fahrten auf Abruf

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Beispiel für geplante Aufgaben

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Nächste Schritte

• Karte gestalten
• Markierungen anpassen