@sdgroup14

Как создать группу маршрутов(Route-machine) в leaflet Angular2+?

Подключил я карту leaflet настроил маркеры, научился управлять коллекцией маркеров удалять добавлять и т.д.... Но теперь задача стала построить маршруты для машины. По сути получилось... Но мне нужно отображать десятки маршрутов и так же их потом добавлять или удалять... Ниже приведу пример кода рабочий для 1 маршрута, как можно сделать коллекцию их?

buildRoutes(cars) {
    let waypoints = [
      L.latLng(cars[0].events[0].lat_start, cars[0].events[0].lon_start),
      L.latLng(cars[0].events[0].lat_end, cars[0].events[0].lon_end)
    ];

    let route = L.Routing.control({
      waypoints: waypoints,
      lineOptions: {
        linetouched: false,
        addWaypoints: true,
        styles: [
          {
            color: 'red',
            opacity: 1,
            weight: 5,
            className: 'staticRoute',
          }
        ]
      }
    }).addTo(this.map);
  };


Я бы хотел отформатировать этот код так, чтобы работал как Маркеры :). Не могу нагуглить как создать такуюже штуку как с Маркерами. Код маркеров приведен ниже.

public layers: Marker[] = [];
  
  buildMarkers(cars) {
    for (const i in cars) {
      let lat: number = cars[i].coordinates.lat;
      let lon: number = cars[i].coordinates.lon;
      const pin = cars[i].pin;
      const singleMarkers = new Marker([lat, lon], {
        icon: new DivIcon({
          className: 'my-div-icon',
          html: this.getHtmlMarker(cars, pin)
        })
      });
      this.layers.push(singleMarkers);
    }
  }

  public mapReady(map) {
    this.map = map;
    const that = this;
    that.buildMarkers(this.cars);
  }


<div class="map"
       leaflet
       (leafletMapReady)="mapReady($event)"
       [leafletOptions]="mapOptions"
  >
    <div class="pit-marker" *ngFor=" let l of layers "  [leafletLayer]="l"></div>
 </div>
  • Вопрос задан
  • 188 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы