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

Styliser des polylignes

Comme vous pouvez personnaliser les repères, vous pouvez styliser les polylignes de parcours de 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. Styler les polylignes de parcours en fonction des données: spécifiez une fonction de personnalisation basée sur les données de suivi de la flotte ou sur des 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 styliser les polylignes en fonction de ces données, par exemple en colorant l'objet Polyline d'une teinte plus foncée ou en l'épaississant lorsque le véhicule se déplace plus lentement.

    • Sources externes: vous pouvez combiner des 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 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 en savoir plus, consultez la section Afficher des informations supplémentaires pour un véhicule ou un repère de 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 parcours dans le trajet du véhicule:

Styliser les polylignes de parcours par type

Pour styliser les polylignes de parcours 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 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 de parcours à l'aide de données

Pour styliser les polylignes de parcours à 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 des polylignes listés dans la section 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 les données de vitesse du trafic pour les voies actives et restantes du 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. 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&#39;informations pour un repère de véhicule ou de lieu

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

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