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

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

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

Стиль полилиний

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

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

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

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

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

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

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

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

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

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

Стилизовать полилинии маршрута по типу

Чтобы стилизовать полилинии маршрута по типу, измените стиль объектов Polyline с помощью PolylineOptions .

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

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

JavaScript 

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

Машинопись 

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

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

Чтобы стилизовать полилинии маршрута с использованием данных, измените стиль объектов 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();

Что дальше