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

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

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

Полилинии стиля

Подобно тому, как можно настраивать маркеры, вы можете оформлять полилинии маршрутов различными способами:

  1. Стилизация полилиний маршрутов по типу : Используйте PolylineOptions , чтобы применить их ко всем соответствующим объектам Polyline при их создании или обновлении. Пример см. в разделе «Стилизация полилиний по типу» .

  2. Стилизация полилиний маршрута на основе данных : Укажите функцию настройки на основе данных из системы отслеживания автопарка или из внешних источников:

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

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

    В качестве примера см. раздел «Стиль полилиний на основе данных» .

  3. Управление видимостью полилиний маршрута : вы можете скрывать или отображать полилинии с помощью свойства visible . Подробнее см. раздел «Управление видимостью полилиний» в этом руководстве.

  4. Отображение дополнительной информации для транспортного средства или маркера местоположения : Вы можете отобразить дополнительную информацию, используя свойство infowindow . Подробнее см. раздел «Отображение дополнительной информации для транспортного средства или маркера местоположения» в этом руководстве.

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

Следующие параметры настройки доступны как в FleetEngineVehicleLocationProviderOptions , так и в FleetEngineDeliveryVehicleLocationProviderOptions . Вы можете задать параметры для различных состояний маршрута в процессе движения транспортного средства:

Тип полилиний маршрута

Для изменения стиля полилиний маршрута в зависимости от типа, используйте PolylineOptions для изменения стиля объектов Polyline .

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

Пример для поездок по требованию или запланированных задач.

JavaScript 

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

Машинопись 

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

Полилинии маршрута, стилизованные под данные.

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

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

Пример поездок по запросу

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

Машинопись 

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

Пример запланированных задач

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

Машинопись 

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

Пример оформления с учетом дорожной ситуации (только для поездок по требованию)

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

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

Машинопись 

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

Управление видимостью полилиний

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

Пример для поездок по требованию или запланированных задач.

JavaScript 

remainingPolylineCustomization = {visible: false};

Машинопись 

remainingPolylineCustomization = {visible: false};

Отобразить информационное окно для указателя транспортного средства или местоположения.

С помощью InfoWindow можно отобразить дополнительную информацию о транспортном средстве или маркере местоположения.

В следующем примере показано, как создать InfoWindow и прикрепить его к маркеру транспортного средства.

Пример поездок по запросу

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();

Машинопись 

// 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();

Пример запланированных задач

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();

Машинопись 

// 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();

Что дальше?