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 gezeichnet. 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 dann in zwei Situationen anwendet:

  • Vor dem Hinzufügen der Objekte zur Karte
  • Wenn sich die für die Objekte verwendeten Daten geändert haben

Polylinien gestalten

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

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

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

    • Daten aus der Flottenverfolgung: Bei der Flottenverfolgung werden Polyliniendaten 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 Daten aus der Flottenverfolgung 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 Routenpolylinien steuern: Mit der Eigenschaft visible können Sie Polylinien ein- oder ausblenden. Weitere Informationen finden Sie unter Sichtbarkeit von Polylinien steuern in diesem Leitfaden.

  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 unter Zusätzliche Informationen für eine Fahrzeug- oder Standortmarkierung anzeigen in diesem Leitfaden.

Optionen zur Polylinienanpassung

Die folgenden Anpassungsoptionen sind sowohl in FleetEngineVehicleLocationProviderOptions als auch in FleetEngineDeliveryVehicleLocationProviderOptionsverfügbar. Sie können Anpassungen für verschiedene Pfadstatus auf der Fahrt des Fahrzeugs festlegen:

Routenpolylinien nach Typ gestalten

Wenn Sie Routenpolylinien nach Typ gestalten möchten, ändern Sie den Stil von Polyline Objekten mit PolylineOptions.

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 in diesem Leitfaden unter Optionen zur Polylinienanpassung aufgeführten Routenpolylinienanpassungen anzupassen.

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

JavaScript

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

TypeScript

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

Routenpolylinien mit Daten gestalten

Wenn Sie Routenpolylinien mit Daten gestalten möchten, ändern Sie den Stil von Polyline-Objekten mit Anpassungsfunktionen.

Das folgende Beispiel zeigt, wie Sie den Stil 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 zur Polylinienanpassung aufgeführten Parameter zur Polylinienanpassung 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ängige Gestaltung (nur On-Demand-Fahrten)

Fleet Engine gibt Daten zur Verkehrsgeschwindigkeit für die aktiven und verbleibenden Pfade des verfolgten Fahrzeugs zurück. Anhand dieser Informationen können Sie Polyline-Objekte entsprechend der 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, setzen Sie die Eigenschaft visible auf false.

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Informationsfenster für eine Fahrzeug- oder Standortmarkierung anzeigen

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

Das folgende Beispiel zeigt, wie Sie ein InfoWindow erstellen und an eine Fahrzeugmarkierung anhängen.

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