Polylinien für Routen anpassen

In diesem Dokument wird beschrieben, wie Sie das Erscheinungsbild von Routen für verfolgte Fahrzeuge auf einer Karte anpassen. Routen werden auf einer Karte als 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 gestalten, indem Sie Polylinienanpassungen angeben, die die Bibliothek in zwei Situationen anwendet:

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

Polylinien gestalten

Ähnlich wie bei Markierungen können Sie Routenpolylinien auf verschiedene Weise gestalten:

  1. Polylinien für Routen nach Typ gestalten: Verwenden Sie PolylineOptions, um sie auf alle übereinstimmenden Polyline-Objekte anzuwenden, wenn sie erstellt oder aktualisiert werden. Ein Beispiel finden Sie unter Polylinien nach Typ formatieren.

  2. Routenpolylinien basierend auf Daten gestalten: Geben Sie eine Anpassungsfunktion basierend auf Daten aus der Flottenverfolgung oder aus externen Quellen an:

    • Daten aus der Flottenverfolgung: Bei der Flottenverfolgung werden Polylinien-Daten an die Anpassungsfunktion übergeben, einschließlich Daten zum aktuellen Fahrzeugstatus. Sie können Polylinien basierend auf diesen Daten gestalten, z. B. das Polyline-Objekt in einem dunkleren Farbton darstellen oder es dicker machen, wenn sich das Fahrzeug langsamer bewegt.

    • Externe Quellen: Sie können Flottenverfolgungsdaten mit Daten aus Quellen außerhalb von Fleet Engine kombinieren und das Polyline-Objekt basierend auf diesen Informationen gestalten.

    Ein Beispiel finden Sie unter Polylinien basierend auf Daten gestalten.

  3. Sichtbarkeit von Routen-Polylinien steuern: Mit der visible-Eigenschaft 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 Eigenschaft infowindow können Sie zusätzliche Informationen anzeigen. Weitere Informationen finden Sie in diesem Leitfaden unter Zusätzliche Informationen für eine Fahrzeug- oder Ortsmarkierung anzeigen.

Optionen für die Polylinienanpassung

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

Routenpolylinien nach Typ gestalten

Wenn Sie Routenpolylinien nach Typ gestalten möchten, ändern Sie das Styling von Polyline-Objekten 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 mit einer der in diesem Leitfaden unter Optionen für die Anpassung von Polylinien aufgeführten Anpassungen für Routenpolylinien anzupassen.

Beispiel für On-Demand-Fahrten oder geplante Aufgaben

JavaScript

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

TypeScript

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

Routenpolylinien mithilfe von Daten gestalten

Wenn Sie Routen-Polylinien mit Daten gestalten möchten, ändern Sie die Formatierung von Polyline-Objekten mit Anpassungsfunktionen.

Das folgende Beispiel zeigt, wie Sie das Styling für eine aktive Route mit einer Anpassungsfunktion konfigurieren. Folgen Sie diesem Muster, um den Stil eines beliebigen Polyline-Objekts mit einem der in diesem Leitfaden unter Optionen für die Anpassung von Polylinien aufgeführten Parameter anzupassen.

Beispiel für On-Demand-Fahrten

JavaScript

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

TypeScript

// 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

JavaScript

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

TypeScript

// 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 verkehrsabhängiges Styling (nur On-Demand-Fahrten)

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

JavaScript

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

TypeScript

// 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. Wenn Sie ein Polyline-Objekt unsichtbar machen möchten, legen Sie die Eigenschaft visible auf false fest.

Beispiel für On-Demand-Fahrten oder geplante Aufgaben

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Infofenster für eine Fahrzeug- oder Ortsmarkierung anzeigen

Mit einem InfoWindow können Sie zusätzliche Informationen zu einer Fahrzeug- oder Ortsmarkierung anzeigen.

Im folgenden Beispiel wird gezeigt, wie ein InfoWindow erstellt und an eine Fahrzeugmarkierung angehängt wird.

Beispiel für On-Demand-Fahrten

JavaScript

// 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();

TypeScript

// 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

JavaScript

// 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();

TypeScript

// 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