Dostosuj linie łamane trasy

W tym dokumencie opisujemy, jak dostosować na mapie wygląd i styl tras śledzonych pojazdów. Trasy są zaznaczane na mapie w postaci linii złożonych. Dla każdej pary współrzędnych na aktywnej lub pozostałej ścieżce pojazdu biblioteka tworzy obiekt google.maps.Polyline. Stylowanie obiektów Polyline możesz wykonać, określając dostosowywanie wielolinii, które biblioteka zastosuje w 2 sytuacjach:

  • Przed dodaniem obiektów do mapy
  • Gdy dane używane na potrzeby obiektów zmienią się

Nadawanie stylów liniom łamanym

Podobnie jak w przypadku dostosowywania znaczników, linie łamane trasy możesz określać na różne sposoby:

  1. Stylizacja odcinków trasy według typu: użyj parametru PolylineOptions, aby zastosować go do wszystkich obiektów Polyline, które pasują do kryteriów, gdy są tworzone lub aktualizowane. Przykład znajdziesz w sekcji Nadawanie stylu poligonom według typu.

  2. Określ styl linii łamanych trasy na podstawie danych: określ funkcję dostosowywania na podstawie danych ze śledzenia floty lub ze źródeł zewnętrznych:

    • Dane z śledzenia floty: śledzenie floty przekazuje funkcji personalizacji dane dotyczące ścieżki, w tym dane o bieżącym stanie pojazdu. Na podstawie tych danych można określić styl linii łamanych, na przykład pokolorować obiekt Polyline, dodając głębszy odcień lub zwiększając jego gęstość, gdy pojazd porusza się wolniej.

    • Źródła zewnętrzne: możesz połączyć dane śledzenia floty z danymi ze źródeł spoza Fleet Engine i na podstawie tych informacji określić styl obiektu Polyline.

    Przykład znajdziesz w artykule Nadawanie stylu poligonom na podstawie danych.

  3. Kontrolowanie widoczności linii łamanych trasy: za pomocą właściwości visible możesz ukryć lub pokazać linie łamane. Więcej informacji znajdziesz w sekcji Zarządzanie widocznością ścieżek poliliniowych w tym przewodniku.

  4. Wyświetlanie dodatkowych informacji dotyczących pojazdu lub znacznika lokalizacji: za pomocą właściwości infowindow możesz wyświetlać dodatkowe informacje. Więcej informacji znajdziesz w sekcji na temat wyświetlania dodatkowych informacji o pojazdach lub znacznikach lokalizacji w tym przewodniku.

Opcje dostosowywania linii łamanej

Te opcje dostosowywania są dostępne w wersjach FleetEngineVehicleLocationProviderOptions i FleetEngineDeliveryVehicleLocationProviderOptions. Możesz ustawić dostosowania dla różnych stanów na trasie przejazdu pojazdu:

Nadawanie stylów liniom łamanym tras według typu

Aby stylizować linie łamane trasy według typu, zmień styl obiektów Polyline za pomocą PolylineOptions.

Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline za pomocą PolylineOptions. Aby dostosować styl obiektu Polyline, postępuj zgodnie z tym wzorcem, korzystając z dowolnej opcji dostosowywania wielokąta trasy wymienionej w sekcji Opcje dostosowywania wielokąta w tym przewodniku.

Przykład podróży na żądanie lub zaplanowanych zadań

JavaScript

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

TypeScript

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

Zmienianie stylu linii łamanych trasy na podstawie danych

Aby stylizować linie ścieżek za pomocą danych, zmień styl obiektów Polyline za pomocą funkcji dostosowywania.

Ten przykład pokazuje, jak skonfigurować styl aktywnej trasy za pomocą funkcji dostosowania. Aby dostosować styl dowolnego obiektu Polyline, postępuj zgodnie z tym wzorcem, używając dowolnego parametru dostosowywania wielokąta wymienionego w sekcji Opcje dostosowywania wielokąta w tym przewodniku.

Przykład podróży na żądanie

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

TypeScript

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

Przykład zaplanowanych zadań

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

TypeScript

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

Przykład stylu uwzględniającego natężenie ruchu (tylko podróże na żądanie)

Fleet Engine zwraca dane o prędkości ruchu na bieżącej i pozostałych ścieżkach pojazdu, którego ruch jest śledzony. Na podstawie tych informacji możesz dostosowywać styl obiektów do Polyline zgodnie z jego szybkością ruchu:

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

TypeScript

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

Sterowanie widocznością ścieżek

Domyślnie wszystkie obiekty Polyline są widoczne. Aby obiekt Polyline był niewidoczny, ustaw właściwość visible na false.

Przykład dotyczący przejazdów na żądanie lub zaplanowanych zadań

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Wyświetlanie okna informacyjnego z pojazdem lub znacznikiem lokalizacji

Możesz użyć InfoWindow, aby wyświetlić dodatkowe informacje o środku transportu lub znaczniku lokalizacji.

Ten przykład pokazuje, jak utworzyć InfoWindow i dołączyć go do znacznika pojazdu.

Przykład przejazdów na żądanie

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

TypeScript

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

Przykład zaplanowanych zadań

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

TypeScript

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

Co dalej?