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 dessinés sur une carte en polylignes. Pour chaque paire de coordonnées du trajet 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. Appliquer un style aux polylignes d'itinéraire par type: utilisez PolylineOptions à appliquer à tous les objets Polyline correspondants lorsqu'ils créées ou mises à jour. Pour obtenir un exemple, consultez la section Appliquer un style aux 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 du parc: le suivi de parc transmet les données de polylignes à la fonction de personnalisation, y compris des données sur le véhicule actuel de l'état. 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 d'itinéraire: vous pouvez masquer ou afficher polylignes à l'aide de la propriété visible. Pour en savoir plus, consultez Contrôlez la visibilité des polylignes dans ce guide.

  4. Afficher des informations supplémentaires sur un véhicule ou un repère de position: 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 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 un objet Polyline utilisant l'une des personnalisations de polyligne d'itinéraire répertoriées dans Les options de personnalisation des polylignes sont disponibles dans 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 listé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 appliquer un style à Polyline en fonction de la vitesse de leur 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