Personnaliser les polylignes d'itinéraire

Ce document explique comment personnaliser l'apparence des routes pour le suivi les véhicules sur une carte. Les itinéraires sont représentés sur une carte sous forme de polylignes. Pour chaque paire de coordonnées du parcours actif ou restant d'un véhicule, la bibliothèque crée un objet google.maps.Polyline. Vous pouvez styliser les objets Polyline en spécifiant des personnalisations de polylignes qui : la bibliothèque s'applique alors dans deux situations:

  • Avant d'ajouter les objets à la carte
  • Lorsque les données utilisées pour les objets ont changé

Appliquer un style aux polylignes

De la même manière que vous pouvez personnaliser les repères, vous pouvez styliser les polylignes d'itinéraire dans différentes manières:

  1. Styler les polylignes de parcours par type : utilisez PolylineOptions pour appliquer le style à tous les objets Polyline correspondants lorsqu'ils sont créés ou mis à jour. Pour obtenir un exemple, consultez Styler des polylignes par type.

  2. Appliquer un style aux polylignes d'itinéraire en fonction des données: spécifiez une fonction de personnalisation. en fonction de données issues du suivi du parc ou de sources externes:

    • Données de suivi de la flotte : le suivi de la flotte transmet des données de polyligne à la fonction de personnalisation, y compris des données sur l'état actuel du véhicule. Vous pouvez appliquer un style aux polylignes à partir de ces données, y compris en les colorant une nuance plus profonde pour l'objet Polyline, ou en le rendant plus épais lorsque la le véhicule est plus lent.

    • Sources externes: vous pouvez combiner les données de suivi du parc avec les données des sources externes à Fleet Engine et appliquez un style à l'objet Polyline en fonction des informations.

    Pour obtenir un exemple, consultez la section Appliquer un style aux polylignes en fonction des données.

  3. Contrôler la visibilité des polylignes de parcours : vous pouvez masquer ou afficher des polylignes à l'aide de la propriété visible. Pour en savoir plus, consultez la section Contrôler la visibilité des polylignes de ce guide.

  4. Afficher des informations supplémentaires pour un véhicule ou un repère : vous pouvez afficher des informations supplémentaires à l'aide de la propriété infowindow. Pour détails, consultez Afficher des informations supplémentaires sur un véhicule ou un repère de position dans ce guide.

Options de personnalisation des polylignes

Les options de personnalisation suivantes sont disponibles dans FleetEngineVehicleLocationProviderOptions et FleetEngineDeliveryVehicleLocationProviderOptions. Vous pouvez définir des personnalisations pour différents états de chemin dans les parcours:

Styliser les polylignes d'itinéraire par type

Pour appliquer un style aux polylignes d'itinéraire par type, modifiez le style des objets Polyline avec PolylineOptions.

L'exemple suivant montre comment configurer le style d'un objet Polyline avec PolylineOptions. Suivez ce modèle pour personnaliser le style de n'importe quel objet Polyline à l'aide de l'une des personnalisations de la polyligne de parcours listées dans la section Options de personnalisation de la polyligne de ce guide.

Exemple pour les trajets à la demande ou les tâches planifiées

JavaScript

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

TypeScript

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

Styliser les polylignes d'itinéraire à l'aide de données

Pour appliquer un style aux polylignes d'itinéraire à l'aide de données, modifiez le style des objets Polyline à l'aide de fonctions de personnalisation.

L'exemple suivant montre comment configurer le style d'une route active à l'aide d'une fonction de personnalisation. Suivez ce modèle pour personnaliser le style de N'importe quel objet Polyline utilisant l'un des paramètres de personnalisation de polyligne répertoriés dans les Options de personnalisation des polylignes de ce guide.

Exemple de trajets à la demande

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

Exemple de tâches planifiées

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

Exemple de style tenant compte du trafic (trajets à la demande uniquement)

Fleet Engine renvoie des données sur la vitesse du trafic pour les chemins actifs et restants pour le véhicule suivi. Vous pouvez utiliser ces informations pour styliser les objets Polyline en fonction de leurs vitesses de trafic :

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

Contrôler la visibilité des polylignes

Par défaut, tous les objets Polyline sont visibles. Créer un objet Polyline invisible, définissez sa propriété visible sur false.

Exemple pour les trajets à la demande ou les tâches planifiées

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Afficher une fenêtre d'informations pour un véhicule ou un repère de position

Vous pouvez utiliser un InfoWindow pour afficher des informations supplémentaires sur une d'un véhicule ou d'un repère de position.

L'exemple suivant montre comment créer un InfoWindow et l'associer à un le repère du véhicule.

Exemple de trajets à la demande

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

Exemple de tâches planifiées

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

Étape suivante