Personalizar polilinhas do trajeto

Este documento aborda como personalizar a aparência das rotas de veículos rastreados em um mapa. Os trajetos são desenhados em um mapa em polilinhas. Para cada par de coordenadas no caminho ativo ou restante de um veículo, a biblioteca cria um objeto google.maps.Polyline. Você pode estilizar os objetos Polyline especificando personalizações de polilinha que a biblioteca aplica em duas situações:

  • Antes de adicionar os objetos ao mapa
  • Quando os dados usados para os objetos mudarem

Estilo de polilinhas

Assim como é possível personalizar marcadores, você pode estilizar polilinhas de rota de diferentes maneiras:

  1. Estilizar polilinhas de rota por tipo: use PolylineOptions para aplicar a todos os objetos Polyline correspondentes quando eles forem criados ou atualizados. Para conferir um exemplo, consulte Estilo de polilinhas por tipo.

  2. Estilizar polilinhas de rota com base em dados: especifique uma função de personalização com base nos dados do rastreamento de frota ou de fontes externas:

    • Dados do rastreamento de frota: o rastreamento de frota transmite dados de linha poligonal para a função de personalização, incluindo dados sobre o estado atual do veículo. Você pode definir o estilo das polilinhas com base nesses dados, incluindo colorir o objeto Polyline com uma tonalidade mais profunda ou torná-lo mais espesso quando o veículo estiver se movendo mais devagar.

    • Fontes externas: é possível combinar dados de rastreamento de frota com dados de origens fora do Fleet Engine e estilizar o objeto Polyline com base nessas informações.

    Para ver um exemplo, consulte Estilizar polilinhas com base em dados.

  3. Controlar a visibilidade das polilinhas de rota: é possível ocultar ou mostrar polilinhas usando a propriedade visible. Para mais detalhes, consulte Controlar a visibilidade de polilinhas neste guia.

  4. Mostrar mais informações sobre um veículo ou marcador de local: você pode mostrar outras informações usando a propriedade infowindow. Para mais detalhes, consulte Mostrar mais informações sobre um marcador de veículo ou local neste guia.

Opções de personalização de polilinhas

As opções de personalização a seguir estão disponíveis em FleetEngineVehicleLocationProviderOptions e FleetEngineDeliveryVehicleLocationProviderOptions. É possível definir personalizações para diferentes estados de caminho na jornada do veículo:

Estilo das polilinhas de rota por tipo

Para estilizar polilinhas de trajeto por tipo, mude o estilo dos objetos Polyline usando PolylineOptions.

O exemplo a seguir mostra como configurar o estilo de um objeto Polyline com PolylineOptions. Siga este padrão para personalizar o estilo de qualquer objeto Polyline usando qualquer uma das personalizações de polilinha de rota listadas em Opções de personalização de polilinha neste guia.

Exemplo para viagens sob demanda ou tarefas programadas

JavaScript

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

TypeScript

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

Estilo das polilinhas de rota usando dados

Para definir o estilo das polilinhas de trajeto usando dados, mude o estilo dos objetos Polyline usando funções de personalização.

O exemplo a seguir mostra como configurar o estilo de uma rota ativa usando uma função de personalização. Siga esse padrão para personalizar o estilo de qualquer objeto Polyline usando qualquer um dos parâmetros de personalização de polilinha listados em Opções de personalização de polilinha neste guia.

Exemplo de viagens sob demanda

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

Exemplo de tarefas programadas

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

Exemplo de estilo com consciência de trânsito (somente viagens sob demanda)

O Fleet Engine retorna dados de velocidade do tráfego para os caminhos ativos e restantes do veículo seguido. É possível usar essas informações para estilizar objetos Polyline de acordo com as velocidades de tráfego:

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

Controlar a visibilidade de polilinhas

Por padrão, todos os objetos Polyline ficam visíveis. Para tornar um objeto Polyline invisível, defina a propriedade visible dele como false.

Exemplo para viagens sob demanda ou tarefas programadas

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Mostrar uma janela de informações para um marcador de veículo ou local

Você pode usar um InfoWindow para mostrar mais informações sobre um marcador de veículo ou local.

O exemplo a seguir mostra como criar um InfoWindow e anexá-lo a um marcador de veículo.

Exemplo de viagens sob demanda

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();

Exemplo de tarefas programadas

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();

A seguir