Personnaliser les polylignes d'itinéraire

Ce document explique comment personnaliser les polylignes de route pour la carte que vous utilisez dans votre application Web de suivi de trajet pour les utilisateurs finaux.

Le Consumer SDK vous permet de contrôler la visibilité de la polyligne de l'itinéraire ou de la styliser pour l'itinéraire d'un trajet sur la carte. Le SDK crée un objet google.maps.Polyline pour chaque paire de coordonnées du chemin actif ou restant du trajet. La bibliothèque applique ensuite ces personnalisations dans deux situations :

• avant d'ajouter les objets à la carte.
• lorsque les données utilisées pour les objets ont changé ;

Styliser les polylignes de route

Comme pour les repères, vous pouvez styliser les polylignes d'itinéraire à l'aide de paramètres de personnalisation. À partir de là, vous configurez le style à l'aide de l'une des approches suivantes :

• Le plus simple : utilisez PolylineOptions pour appliquer à tous les objets Polyline correspondants lors de leur création ou de leur mise à jour.
• Avancé : spécifiez une fonction de personnalisation. Les fonctions de personnalisation permettent de styliser individuellement les objets en fonction des données envoyées par Fleet Engine. La fonction peut modifier le style de chaque objet en fonction de l'état actuel du trajet. Par exemple, elle peut colorer l'objet Polyline d'une nuance plus foncée ou l'épaissir lorsque le véhicule se déplace plus lentement. Vous pouvez même effectuer des jointures à partir de sources externes à Fleet Engine et styliser l'objet Polyline en fonction de ces informations.

Paramètres de personnalisation

Lorsque vous stylisez des polylignes de route, vous utilisez les paramètres fournis dans FleetEngineTripLocationProviderOptions. Ces paramètres prévoient différents états de cheminement du véhicule, comme suit :

• Chemins déjà empruntés : utilisez takenPolylineCustomization.
• Chemin activement parcouru : utilisez activePolylineCustomization.
• Chemin Not-yet traveled (Pas encore parcouru) : utilisez remainingPolylineCustomization.

Utiliser 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 polylignes listées précédemment.

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

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

Utiliser des fonctions de personnalisation pour styliser les polylignes d'itinéraire

L'exemple suivant montre comment configurer le style d'une polyligne d'itinéraire actif. Suivez ce modèle pour personnaliser le style de n'importe quel objet Polyline à l'aide des paramètres de personnalisation de la polyligne de route listés précédemment.

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[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'});
      }
    }
  };

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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'});
      }
    }
  };

Contrôler la visibilité de la polyligne de l'itinéraire

Par défaut, tous les objets Polyline sont visibles. Pour rendre un objet Polyline invisible, définissez sa propriété visible :

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};