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

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

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

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

Полилинии маршрута стиля

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

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

Параметры настройки

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

• Уже пройденные пути: используйте 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.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'});
      }
    }
  };

видимость полилинии маршрута управления

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};