Ce document explique comment personnaliser les polylignes d'itinéraire pour la carte que vous utilisez dans votre application de suivi de parcours Web pour les utilisateurs.
Le SDK grand public vous permet de contrôler la visibilité des polylignes d'itinéraire ou de leur appliquer un style 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 tracé 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 d'itinéraire
De la même manière que vous pouvez styliser les repères, vous appliquez un style aux polylignes d'itinéraire à l'aide de paramètres de personnalisation. Vous pouvez ensuite configurer le style à l'aide de l'une des approches suivantes :
- Plus simple : utilisez
PolylineOptions
pour appliquer la modification à tous les objetsPolyline
correspondants lorsqu'ils sont créés ou mis à 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 teinte plus foncée ou l'épaissir lorsque le véhicule se déplace plus lentement. Vous pouvez même effectuer une jointure à partir de sources externes à Fleet Engine et styliser l'objetPolyline
en fonction de ces informations.
Paramètres de personnalisation
Lorsque vous appliquez un style aux polylignes d'itinéraire, vous utilisez les paramètres fournis dans FleetEngineTripLocationProviderOptions
. Ces paramètres permettent de définir différents états de parcours dans le trajet du véhicule, comme suit :
- Chemins déjà empruntés: utilisez
takenPolylineCustomization
. - Chemin suivi actif: utilisez
activePolylineCustomization
. - Chemin pas encore emprunté: 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 indiquées précédemment.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Utiliser des fonctions de personnalisation pour appliquer un style aux polylignes d'itinéraire
L'exemple suivant montre comment configurer le style d'une polyligne de parcours active. Suivez ce modèle pour personnaliser le style de n'importe quel objet Polyline
à l'aide des paramètres de personnalisation de la polyligne d'itinéraire listés précédemment.
JavaScript
// 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'});
}
}
};
TypeScript
// 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é des polylignes d'itinéraire
Par défaut, tous les objets Polyline
sont visibles. Pour rendre un objet Polyline
invisible, définissez sa propriété visible
:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};