Подключил я карту 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>