Как настроить ломаные линии маршрута

В этом документе рассказывается, как настроить ломаные линии маршрутов для карты, которая используется в веб-версии приложения для отслеживания поездок.

С помощью Consumer SDK вы можете управлять видимостью ломаной линии маршрута или настраивать ее стиль на карте. SDK создает объект google.maps.Polyline для каждой пары координат на активном или оставшемся пути поездки. Библиотека применяет эти настройки в двух ситуациях:

• перед добавлением объектов на карту.
• когда данные, используемые для объектов, изменились;

Как настроить стиль ломаных линий маршрута

Как и в случае с маркерами, вы можете настраивать стиль ломаных линий маршрута с помощью параметров настройки. Затем вы можете настроить стили, используя один из следующих подходов:

• Самый простой вариант. Используйте PolylineOptions, чтобы применить ярлык ко всем соответствующим объектам Polyline при их создании или обновлении.
• Расширенные настройки. Укажите функцию оптимизации. Функции настройки позволяют задавать индивидуальный стиль объектов на основе данных, отправляемых Fleet Engine. Функция может изменять стиль каждого объекта в зависимости от текущего состояния поездки, например окрашивать объект Polyline в более глубокий оттенок или делать его толще, когда транспортное средство движется медленнее. Вы даже можете объединять данные из источников за пределами Fleet Engine и настраивать стиль объекта Polyline на основе этой информации.

Параметры персонализации

При оформлении ломаных линий маршрута используются параметры, указанные в FleetEngineTripLocationProviderOptions. Эти параметры позволяют задавать разные состояния маршрута транспортного средства:

• Пройденные пути: используйте takenPolylineCustomization.
• Активно используемый путь: используйте activePolylineCustomization.
• Непройденный путь: используйте remainingPolylineCustomization.

Использовать помощника (PolylineOptions)

В примере ниже показано, как настроить стиль объекта Polyline с помощью PolylineOptions. Используйте этот шаблон, чтобы настроить стиль любого объекта Polyline с помощью любого из перечисленных выше способов настройки ломаной линии.

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

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

Как использовать функции настройки для оформления ломаных линий маршрутов

В примере ниже показано, как настроить стиль для ломаной линии активного маршрута. По этому шаблону можно настроить стиль любого объекта Polyline, используя любые параметры настройки ломаной линии маршрута, перечисленные выше.

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

Как управлять видимостью ломаной линии маршрута

По умолчанию видны все объекты Polyline. Чтобы сделать объект Polyline невидимым, задайте его свойство visible:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};