Personalizar polilinhas do trajeto

Neste documento, mostramos como personalizar polilinhas de trajeto para o mapa usado no seu app de rastreamento de jornada baseado na Web para usuários consumidores e operadores de frota.

Com o SDK para consumidores, você pode controlar a visibilidade ou estilizar a polilinha de uma rota no mapa. O SDK cria um objeto google.maps.Polyline para cada par de coordenadas no caminho ativo ou restante da jornada. A biblioteca aplica essas personalizações em duas situações:

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

Estilizar polilinhas de trajeto

Da mesma forma que você define o estilo dos marcadores, estiliza as polilinhas de trajeto usando parâmetros de personalização. Em seguida, configure 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 aplicar estilos individuais aos 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 em uma tonalidade mais profunda ou deixá-lo mais espesso quando o veículo estiver mais lento. Você pode até mesclar com origens fora do Fleet Engine e estilizar o objeto Polyline com base nessas informações.

Parâmetros de personalização

Ao estilizar polilinhas de trajeto, use parâmetros fornecidos em FleetEngineShipmentLocationProviderOptions. Esses parâmetros fornecem diferentes estados de caminho no percurso 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 objeto Polyline 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 trajeto

O exemplo a seguir mostra como configurar o estilo de uma polilinha de trajeto 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 trajeto listados anteriormente.

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

Controlar a visibilidade da polilinha do trajeto

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};