Personalizza le polilinee del percorso

Questo documento spiega come personalizzare le polilinee del percorso per la mappa in uso. un'app di monitoraggio del percorso per i consumatori basata sul web.

Con l'SDK consumer, puoi controllare la visibilità della polilinea della route o definire lo stile polilinea del percorso di un viaggio sulla mappa. L'SDK crea un google.maps.Polyline per ogni coppia di coordinate nel percorso attivo o rimanente. La libreria applica quindi queste personalizzazioni due situazioni:

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

Assegna uno stile alle polilinee del percorso

Come per gli indicatori, puoi assegnare uno stile alle polilinee parametri di personalizzazione. Da qui, puoi configurare lo stile utilizzando una delle i seguenti approcci:

• Il più semplice: utilizza PolylineOptions per applicare a tutti i corrisponde a Polyline oggetti quando vengono creati o aggiornati.
• Avanzata: specifica una funzione di personalizzazione. Le funzioni di personalizzazione consentono di applicare stili individuali agli oggetti in base ai dati inviati da Fleet Engine. La funzione può modificare lo stile di ogni in base allo stato attuale del percorso; ad esempio, colorando Polyline l'oggetto ha una tonalità più profonda o diventa più spesso quando il veicolo è in movimento a muoversi più lentamente. Puoi anche utilizzare origini esterne a Fleet Engine e definire lo stile dell'oggetto Polyline in base a queste informazioni.

Parametri di personalizzazione

Quando applichi uno stile alle polilinee di percorso, utilizzi i parametri forniti in FleetEngineTripLocationProviderOptions Questi parametri offrono diversi stati del percorso del veicolo, come segue:

• Percorsi già percorsi: utilizza takenPolylineCustomization.
• Percorso percorso attivamente: utilizza activePolylineCustomization.
• Percorso non ancora percorso: utilizza remainingPolylineCustomization.

Utilizza PolylineOptions

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

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

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

Utilizzare funzioni di personalizzazione per definire le polilinee di route

L'esempio seguente mostra come configurare lo stile per un percorso attivo polilinea. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando uno dei parametri di personalizzazione delle polilinee di route 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'});
      }
    }
  };

Controlla la visibilità della polilinea del percorso

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};