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

Applica stile 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 di monitoraggio del parco risorse o di 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 definire lo stile delle polilinee in base a questi dati, tra cui la colorazione all'oggetto Polyline una tonalità più profonda o più spesso quando il veicolo è più lento.

    • 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. Mostra 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 veicolo percorso:

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 schema per personalizzare lo stile di Polyline oggetto che utilizza una qualsiasi delle personalizzazioni delle polilinee di route elencate Opzioni di personalizzazione dei 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 uno stile alle polilinee di route utilizzando i dati

Per applicare uno stile alle polilinee di percorso 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 schema per personalizzare lo stile qualsiasi oggetto Polyline utilizzando uno dei parametri di personalizzazione delle polilinee elencati nella sezione Opzioni di personalizzazione dei polilinea di 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 creare un oggetto Polyline invisibile, imposta la 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