Personalizar polilinhas do trajeto

Este documento aborda como personalizar polilinhas de rotas para o mapa usado no app de rastreamento de viagens baseado na Web para usuários finais.

Com o SDK Consumer, é possível controlar a visibilidade da polilinha de rota ou definir o estilo dela para o trajeto de uma viagem no mapa. O SDK cria um google.maps.Polyline objeto para cada par de coordenadas no caminho ativo ou restante da viagem. Em seguida, a biblioteca aplica essas personalizações em duas situações:

• antes de adicionar os objetos ao mapa
• quando os dados usados para os objetos mudaram

Polilinhas de rotas de estilo

Assim como você pode estilizar marcadores, as polilinhas de rotas são estilizadas usando parâmetros de personalização. A partir daí, você configura o estilo usando uma das seguintes abordagens:

• Mais simples: use PolylineOptions para aplicar a todos os objetos Polyline correspondentes quando eles forem criados ou atualizados.
• Avançado: especifique uma função de personalização. As funções de personalização permitem o estilo individual dos objetos com base nos dados enviados pelo Fleet Engine. A função pode mudar o estilo de cada objeto com base no estado atual da jornada. Por exemplo, colorir o objeto Polyline com um tom mais escuro ou torná-lo mais espesso quando o veículo estiver se movendo mais lentamente. Você pode até mesmo fazer uma junção de fontes externas ao Fleet Engine e estilizar o objeto Polyline com base nessas informações.

Parâmetros de personalização

Ao estilizar polilinhas de rotas, você usa parâmetros fornecidos em FleetEngineTripLocationProviderOptions. Esses parâmetros fornecem diferentes estados de caminho na jornada do veículo, da seguinte maneira:

• Caminhos já percorridos: use takenPolylineCustomization.
• Caminho percorrido ativamente: use .activePolylineCustomization
• Caminho ainda não percorrido: use remainingPolylineCustomization.

Usar PolylineOptions

O exemplo a seguir mostra como configurar o estilo de um Polyline objeto com PolylineOptions. Siga esse padrão para personalizar o estilo de qualquer objeto Polyline usando qualquer uma das personalizações de polilinha listadas anteriormente.

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

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

Usar funções de personalização para estilizar polilinhas de rotas

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

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

Controlar a visibilidade da polilinha de rota

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};