Personalizza le polilinee del percorso

Questo documento spiega come personalizzare le polilinee del percorso per la mappa che utilizzi nella tua app di monitoraggio dei percorsi basata sul web per gli utenti consumer e gli operatori del parco risorse.

Con l'SDK consumer, puoi controllare la visibilità delle polilinee del percorso o definire la polilinea di un percorso sulla mappa. L'SDK crea un oggetto google.maps.Polyline per ogni coppia di coordinate nel percorso attivo o rimanente del percorso. La libreria applica quindi queste personalizzazioni in 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

Analogamente a come puoi applicare stili ai marcatori, puoi applicare stili alle polilinee dei percorsi utilizzando parametri di personalizzazione. A questo punto, puoi configurare lo stile utilizzando uno dei seguenti approcci:

• Più semplice: utilizza PolylineOptions per applicare l'azione a tutti gli oggetti Polyline corrispondenti 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 oggetto in base allo stato corrente del viaggio, ad esempio colorandolo Polyline di una tonalità più scura o rendendolo più spesso quando il veicolo si muove più lentamente. Puoi anche unire dati provenienti da origini esterne a Fleet Engine e applicare uno stile all'oggetto Polyline in base a queste informazioni.

Parametri di personalizzazione

Quando stili le polilinee del percorso, utilizza i parametri forniti in FleetEngineShipmentLocationProviderOptions. Questi parametri prevedono diversi stati del percorso nel tragitto 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 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 una polilinea di route attiva. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando uno dei parametri di personalizzazione del polilinea del percorso elencati in precedenza.

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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 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};