Настройка полилиний маршрута

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

С помощью 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};