Personnaliser les polylignes d'itinéraire

Ce document explique comment personnaliser l'apparence des itinéraires des véhicules suivis sur une carte. Les itinéraires sont tracés sur une carte sous forme de polylignes. Pour chaque paire de coordonnées du chemin 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 que la bibliothèque applique ensuite 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

Comme pour les repères, vous pouvez personnaliser les polylignes de route de différentes manières :

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

  2. Styliser les polylignes d'itinéraire en fonction des données : spécifiez une fonction de personnalisation basée sur les données de suivi de flotte ou provenant de sources externes :

    • Données de suivi de flotte : le suivi de flotte transmet les données de polylignes à la fonction de personnalisation, y compris les données sur l'état actuel du véhicule. Vous pouvez styliser les polylignes en fonction de ces données, par exemple en colorant l'objet Polyline d'une nuance plus foncée ou en l'épaississant lorsque le véhicule se déplace plus lentement.

    • Sources externes : vous pouvez combiner les données de suivi de la flotte avec des données provenant de sources externes à Fleet Engine et styliser l'objet Polyline en fonction de ces informations.

    Pour obtenir un exemple, consultez Styliser des polylignes en fonction des données.

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

  4. Afficher des informations supplémentaires pour un repère de véhicule ou de lieu : vous pouvez afficher des informations supplémentaires à l'aide de la propriété infowindow. Pour en savoir plus, consultez Afficher des informations supplémentaires sur un repère de véhicule ou de lieu 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 du trajet du véhicule :

Styliser les polylignes d'itinéraire par type

Pour styliser les polylignes d'itinéraire par type, modifiez le style des objets Polyline à l'aide de 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 des options de personnalisation des polylignes de route listées dans Options de personnalisation des polylignes 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 styliser les 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'un itinéraire actif à l'aide d'une fonction de personnalisation. Suivez ce modèle pour personnaliser le style de n'importe quel objet Polyline à l'aide de l'un des paramètres de personnalisation de polyligne listés dans 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 (courses à la demande uniquement)

Fleet Engine renvoie des données sur la vitesse du trafic pour les trajets actifs et restants du véhicule suivi. Vous pouvez utiliser ces informations pour styliser les objets Polyline en fonction de leur vitesse 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. Pour rendre 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 repère de véhicule ou de lieu

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

L'exemple suivant montre comment créer un InfoWindow et l'associer à un repère de 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