Personalizza le polilinee del percorso

Questo documento spiega come personalizzare l'aspetto dei percorsi monitorati veicoli su una mappa. I percorsi sono tracciati su una mappa in polilinee. Per ogni coppia di le coordinate nel percorso attivo o rimanente di un veicolo, la biblioteca crea un google.maps.Polyline. Puoi definire lo stile degli oggetti Polyline specificando le personalizzazioni delle polilinee che quindi si applica in due situazioni:

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

Applicare stili alle polilinee

Come per la personalizzazione degli indicatori, puoi definire lo stile delle polilinee in vari modi:

  1. Applicare uno stile alle polilinee di percorso per tipo: utilizza PolylineOptions: da applicare a tutti gli oggetti Polyline corrispondenti quando creato o aggiornato. Per un esempio, vedi Applicare uno stile alle polilinee per tipo.

  2. Applicare uno stile alle polilinee di route in base ai dati: specifica una funzione di personalizzazione. in base ai dati ricavati dal monitoraggio del parco risorse o da fonti esterne:

    • Dati derivanti dal monitoraggio del parco risorse: il monitoraggio del parco risorse trasmette i dati della polilinea al funzione di personalizzazione, inclusi i dati sul veicolo corrente stato. Puoi applicare uno stile alle polilinee in base a questi dati, ad esempio colorare l'oggetto Polyline con una tonalità più scura o renderlo più spesso quando il veicolo si muove più lentamente.

    • Origini esterne: puoi combinare i dati di monitoraggio del parco risorse con i dati provenienti da all'esterno di Fleet Engine e definire lo stile dell'oggetto Polyline in base a informazioni.

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

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

  4. Mostrare informazioni aggiuntive per un veicolo o un indicatore di posizione: puoi mostrare informazioni aggiuntive utilizzando la proprietà infowindow. Per i dettagli, vedi Mostra informazioni aggiuntive su un veicolo o un indicatore di posizione in questa guida.

Opzioni di personalizzazione dei polilinea

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

Applica uno stile alle polilinee di percorso per tipo

Per definire lo stile delle polilinee di percorso in base al tipo, modifica lo stile degli oggetti Polyline utilizzando 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 del polilinea del percorso elencate in Opzioni di personalizzazione del polilinea in questa guida.

Esempio di viaggi on demand o attività programmate

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 di route usando 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 dei polilinee elencati in Opzioni di personalizzazione dei 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 sensibile al traffico (solo corse on demand)

Fleet Engine restituisce i dati sulla velocità del traffico per i percorsi attivi e rimanenti per il veicolo seguito. Puoi usare queste informazioni per applicare uno stile a Polyline a seconda della 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 di viaggi on demand o attività programmate

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Mostra una finestra informativa di un veicolo o di un indicatore di posizione

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

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

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