Personalizza le polilinee del percorso

Questo documento spiega come personalizzare le polilinee del percorso per la mappa che utilizzi nell'app di monitoraggio degli spostamenti basata sul web per gli utenti privati.

Con il Consumer SDK, puoi controllare la visibilità della polilinea dell'itinerario o applicare uno stile alla polilinea dell'itinerario di un viaggio sulla mappa. L'SDK crea un oggetto google.maps.Polyline per ogni coppia di coordinate nel percorso attivo o rimanente del viaggio. La libreria applica queste personalizzazioni in due situazioni:

• prima di aggiungere gli oggetti alla mappa
• quando i dati utilizzati per gli oggetti sono cambiati

Stilizzare le polilinee dell'itinerario

Analogamente a come puoi definire lo stile dei marcatori, puoi definire lo stile delle polilinee del percorso utilizzando i parametri di personalizzazione. Da qui, configura lo stile utilizzando uno dei seguenti approcci:

• Più semplice: utilizza PolylineOptions per applicare la regola a tutti gli oggetti Polyline corrispondenti quando vengono creati o aggiornati.
• Avanzato: specifica una funzione di personalizzazione. Le funzioni di personalizzazione consentono di applicare uno stile individuale agli oggetti in base ai dati inviati da Fleet Engine. La funzione può modificare lo stile di ogni oggetto in base allo stato attuale del viaggio, ad esempio colorando l'oggetto Polyline con una tonalità più scura o rendendolo più spesso quando il veicolo si muove più lentamente. Puoi anche eseguire un join da origini esterne a Fleet Engine e applicare uno stile all'oggetto Polyline in base a queste informazioni.

Parametri di personalizzazione

Quando applichi uno stile alle polilinee dell'itinerario, utilizzi i parametri forniti in FleetEngineTripLocationProviderOptions. Questi parametri prevedono diversi stati del percorso durante il viaggio del veicolo, come segue:

• Percorsi già percorsi: utilizza takenPolylineCustomization.
• Percorso percorso attivo: utilizza activePolylineCustomization.
• Percorso Non ancora percorso: utilizza remainingPolylineCustomization.

Utilizza 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 della polilinea elencate in precedenza.

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

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

Utilizzare le funzioni di personalizzazione per applicare uno stile alle polilinee del percorso

Il seguente esempio mostra come configurare lo stile di una polilinea di un percorso attivo. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando uno qualsiasi dei parametri di personalizzazione della polilinea dell'itinerario elencati in precedenza.

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

Controllare la visibilità della polilinea dell'itinerario

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};