Personalizza le polilinee del percorso

Questo documento spiega come personalizzare l'aspetto dei percorsi dei veicoli monitorati su una mappa. I percorsi vengono tracciati su una mappa in polilinee. Per ogni coppia di coordinate nel percorso attivo o rimanente di un veicolo, la libreria crea un oggetto google.maps.Polyline. Puoi applicare uno stile agli oggetti Polyline specificando le personalizzazioni delle polilinee che la libreria applica in due situazioni:

  • Prima di aggiungere gli oggetti alla mappa
  • Quando i dati utilizzati per gli oggetti sono cambiati

Applicare uno stile alle polilinee

Analogamente a come puoi personalizzare gli indicatori, puoi applicare uno stile alle polilinee dei percorsi in diversi modi:

  1. Applica uno stile alle polilinee dei percorsi per tipo: utilizza PolylineOptions per applicare a tutti gli oggetti Polyline corrispondenti quando vengono creati o aggiornati. Per un esempio, consulta la sezione Applicare uno stile alle polilinee per tipo.

  2. Applica uno stile alle polilinee dei percorsi in base ai dati: specifica una funzione di personalizzazione basata sui dati del monitoraggio della flotta o di fonti esterne:

    • Dati del monitoraggio della flotta: il monitoraggio della flotta passa i dati delle polilinee alla funzione di personalizzazione, inclusi i dati sullo stato attuale del veicolo Puoi applicare uno stile alle polilinee in base a questi dati, ad esempio colorando l'oggetto Polyline con una tonalità più scura o rendendolo più spesso quando il veicolo si muove più lentamente.

    • Fonti esterne: puoi combinare i dati del monitoraggio della flotta con i dati di fonti esterne a Fleet Engine e applicare uno stile all'oggetto Polyline in base a queste informazioni.

    Per un esempio, consulta la sezione Applicare uno stile alle polilinee in base ai dati.

  3. Controlla la visibilità delle polilinee dei percorsi: puoi nascondere o mostrare le polilinee utilizzando la proprietà visible. Per maggiori dettagli, consulta la sezione Controllare la visibilità delle polilinee in questa guida.

  4. Visualizza informazioni aggiuntive per un indicatore di veicolo o indicatore di posizione: Puoi mostrare informazioni aggiuntive utilizzando la proprietà infowindow. Per maggiori dettagli, consulta la sezione Visualizzare informazioni aggiuntive per un indicatore di veicolo o di posizione in questa guida.

Opzioni di personalizzazione delle polilinee

Le seguenti opzioni di personalizzazione sono disponibili sia in FleetEngineVehicleLocationProviderOptions sia in FleetEngineDeliveryVehicleLocationProviderOptions. Puoi impostare le personalizzazioni per i diversi stati del percorso durante il viaggio del veicolo:

Applicare uno stile alle polilinee dei percorsi per tipo

Per applicare uno stile alle polilinee dei percorsi per tipo, modifica lo stile degli Polyline oggetti utilizzando PolylineOptions.

L'esempio seguente mostra come configurare lo stile per un Polyline oggetto con PolylineOptions. Segui questo pattern per personalizzare lo stile di qualsiasi Polyline oggetto utilizzando una delle personalizzazioni delle polilinee dei percorsi elencate in Opzioni di personalizzazione delle polilinee in questa guida.

Esempio per viaggi on demand o attività pianificate

JavaScript

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

TypeScript

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

Applicare uno stile alle polilinee dei percorsi utilizzando i dati

Per applicare uno stile alle polilinee dei percorsi utilizzando i dati, modifica lo stile degli oggetti Polyline utilizzando le funzioni di personalizzazione.

L'esempio seguente mostra come configurare lo stile per un percorso attivo utilizzando una funzione di personalizzazione. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando uno dei parametri di personalizzazione delle polilinee elencati in Opzioni di personalizzazione delle polilinee in questa guida.

Esempio di viaggi on demand

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'});
      }
    }
  };

Esempio di attività pianificate

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'});
      }
    }
  };

Esempio di stile basato sul traffico (solo viaggi on demand)

Fleet Engine restituisce i dati sulla velocità del traffico per i percorsi attivi e rimanenti del veicolo monitorato. Puoi utilizzare queste informazioni per applicare uno stile agli oggetti Polyline in base alla velocità del traffico:

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'});
      }
    }
  };

Controllare la visibilità delle polilinee

Per impostazione predefinita, tutti gli oggetti Polyline sono visibili. Per rendere invisibile un oggetto Polyline, imposta la relativa proprietà visible su false.

Esempio per viaggi on demand o attività pianificate

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Visualizzare una finestra informativa per un indicatore di veicolo o posizione

Puoi utilizzare un InfoWindow per visualizzare informazioni aggiuntive su un indicatore di veicolo o posizione.

L'esempio seguente mostra come creare un InfoWindow e collegarlo a un indicatore di veicolo.

Esempio di viaggi on demand

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();

Esempio di attività pianificate

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();

Passaggi successivi