Personalizar polilinhas do trajeto

Este documento mostra como personalizar a aparência dos trajetos rastreados veículos 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. É possível estilizar os objetos Polyline especificando personalizações de poligonal que a biblioteca aplica em duas situações:

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

Estilo das polilinhas

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

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

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

    • Dados do rastreamento da frota: o rastreamento da frota passa os dados da polilinha para o função de personalização, incluindo dados sobre o veículo atual estado. Você pode estilizar polilinhas com base nesses dados, incluindo cores o objeto Polyline com uma tonalidade mais profunda ou mais espesso quando o o veículo está se movendo mais devagar.

    • Fontes externas: você pode combinar os dados de rastreamento de frota com dados de fora do Fleet Engine e estilizar o objeto Polyline com base nisso informações imprecisas ou inadequadas.

    Para conferir um exemplo, consulte Estilo de 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 Controle a visibilidade das polilinhas neste guia.

  4. Exibir mais informações sobre um veículo ou marcador de local: É possível mostrar mais informações usando a propriedade infowindow. Para detalhes, consulte Exibir informações adicionais para um veículo ou marcador de local em neste guia.

Opções de personalização de polilinhas

As seguintes opções de personalização estão disponíveis em ambos FleetEngineVehicleLocationProviderOptions e FleetEngineDeliveryVehicleLocationProviderOptions Você pode definir personalizações para diferentes estados do caminho no jornada:

Estilizar polilinhas de trajeto por tipo

Para estilizar as polilinhas do 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',
};

Estilizar polilinhas de trajeto usando dados

Para estilizar as polilinhas do 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 este padrão para personalizar o estilo do qualquer objeto Polyline usando qualquer um dos parâmetros de personalização de polilinha listados nas Opções de personalização de polilinhas deste 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 estilização com base no trânsito (somente viagens sob demanda)

O Fleet Engine retorna dados de velocidade de tráfego para os caminhos ativo e restante de o veículo seguido. Use essas informações para definir o estilo de 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 criar um objeto Polyline invisível, defina a propriedade visible como false.

Exemplo para viagens sob demanda ou tarefas programadas

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

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

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

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