Personalizza le polilinee del percorso

Questo documento illustra come personalizzare l'aspetto dei percorsi per i veicoli monitorati su una mappa. I percorsi vengono tracciati su una mappa sotto forma di 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 personalizzazioni di 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 stili alle polilinee

Analogamente a come puoi personalizzare gli indicatori, puoi applicare stili alle polilinee del percorso in diversi modi:

1. Applica uno stile ai polilinee del percorso in base al tipo: utilizza PolylineOptions per applicare lo stile a tutti gli oggetti Polyline corrispondenti quando vengono creati o aggiornati. Per un esempio, consulta Applicare stili ai polilinee in base al tipo.

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

   • Dati del monitoraggio della flotta: il monitoraggio della flotta trasmette i dati dei polilinee alla funzione di personalizzazione, inclusi i dati sullo stato corrente 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.

   • Origini esterne: puoi combinare i dati di monitoraggio della flotta con quelli di altre origini esterne a Fleet Engine e impostare lo stile dell'oggetto Polyline in base a queste informazioni.

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

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

4. Mostrare informazioni aggiuntive per un veicolo o un indicatore della posizione: puoi mostrare informazioni aggiuntive utilizzando la proprietà infowindow. Per maggiori dettagli, consulta la sezione Mostrare informazioni aggiuntive per un indicatore di veicolo o posizione di questa guida.

Opzioni di personalizzazione delle polilinee

Le seguenti opzioni di personalizzazione sono disponibili sia in FleetEngineVehicleLocationProviderOptions che in FleetEngineDeliveryVehicleLocationProviderOptions. Puoi impostare personalizzazioni per diversi stati del percorso nel percorso del veicolo:

• Percorso già percorso: utilizza takenPolylineCustomization - Viaggi on demand, riferimento Attività pianificate.

• Percorso in viaggio: utilizza activePolylineCustomization - Viaggi on demand, riferimento Attività pianificate.

• Percorso non ancora percorso: utilizza remainingPolylineCustomization - Viaggi on demand, riferimento Attività pianificate.

Modificare lo stile delle polilinee dei percorsi in base al tipo

Per applicare uno stile alle polilinee del percorso in base al tipo, modifica lo stile degli oggetti Polyline utilizzando PolylineOptions.

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

Esempio per corse on demand o attività pianificate

JavaScript

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

TypeScript

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

Applicare stili alle polilinee dei percorsi utilizzando i dati

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

L'esempio seguente mostra come configurare lo stile di 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 del polilinea elencati in Opzioni di personalizzazione del polilinea in questa guida.

Esempio di corse 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 corse on demand)

Fleet Engine restituisce i dati sulla velocità del traffico per i percorsi attivi e rimanenti del veicolo seguito. 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 un oggetto Polyline invisibile, imposta la relativa proprietà visible su false.

Esempio per corse 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 ulteriori informazioni su un indicatore di veicolo o posizione.

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

Esempio di corse 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

• Applicare uno stile a una mappa
• Personalizzare gli indicatori