Personaliza las polilíneas de rutas

En este documento, se explica cómo personalizar las polilíneas de rutas para el mapa que usas en su aplicación de seguimiento del recorrido basada en la Web para usuarios consumidores.

Con el SDK del consumidor, puedes controlar la visibilidad de la polilínea de la ruta o aplicar diseño al polilínea de ruta para la ruta de un viaje en el mapa. El SDK crea un un objeto google.maps.Polyline por cada par de coordenadas en la ruta del viaje la ruta de acceso activa o restante. Luego, la biblioteca aplica esas personalizaciones dos situaciones:

• antes de agregar los objetos al mapa
• cuando cambian los datos que se usan para los objetos

Cómo aplicar diseño a las polilíneas de rutas

Así como puedes aplicar ajustes de diseño a los marcadores, debes aplicar ajustes de diseño a las polilíneas de rutas parámetros de personalización. Desde allí, configurarás el estilo con una de las los siguientes enfoques:

• El más simple: usa PolylineOptions para aplicar a todos los coinciden con los objetos Polyline cuando se crean o actualizan.
• Avanzado: Especifica una función de personalización. Las funciones de personalización permiten aplicar estilos individuales a los objetos según que envió Fleet Engine. La función puede cambiar el diseño de cada objeto según el estado actual del viaje; por ejemplo, puede darle un tono más oscuro al objeto Polyline o hacerlo más grueso cuando el vehículo se mueve más lento. Incluso puedes unirte desde fuentes fuera de Fleet Engine y definir el diseño del objeto Polyline según esa información.

Parámetros de personalización

Al definir el diseño de polilíneas de rutas, se usan los parámetros proporcionados en FleetEngineTripLocationProviderOptions Estos parámetros proporcionan diferentes estados de ruta en el viaje del vehículo, como se indica a continuación:

• Rutas ya recorridas: Usa takenPolylineCustomization.
• Ruta recorrida activamente: Usa activePolylineCustomization.
• Ruta aún no recorrida: Usa remainingPolylineCustomization.

Usa PolylineOptions

En el siguiente ejemplo, se muestra cómo configurar el diseño de un objeto Polyline con PolylineOptions. Sigue este patrón para personalizar el diseño de cualquier objeto Polyline con cualquiera de las personalizaciones de polilíneas que se mencionaron antes.

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

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

Usa funciones de personalización para aplicar diseño a las polilíneas de ruta

En el siguiente ejemplo, se muestra cómo configurar el diseño de una ruta activa polilínea. Sigue este patrón para personalizar el diseño de cualquier objeto Polyline con cualquiera de los parámetros de personalización de polilíneas de ruta que se enumeraron 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'});
      }
    }
  };

Cómo controlar la visibilidad de la polilínea de la ruta

De forma predeterminada, todos los objetos Polyline son visibles. Sigue estos pasos para crear un objeto Polyline: invisible, establece su propiedad visible:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};