diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index 5fd366d081..91576ec22b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -20,12 +20,12 @@ import 'leaflet-providers'; import 'leaflet.markercluster/dist/leaflet.markercluster'; import { - FormattedData, - MapSettings, - MarkerSettings, - PolygonSettings, - PolylineSettings, - UnitedMapSettings + FormattedData, + MapSettings, + MarkerSettings, + PolygonSettings, + PolylineSettings, + UnitedMapSettings } from './map-models'; import { Marker } from './markers'; import { BehaviorSubject, Observable } from 'rxjs'; @@ -346,26 +346,30 @@ export default abstract class LeafletMap { // Polyline updatePolylines(polyData: FormattedData[][], data?: FormattedData) { - polyData.forEach((dataSource) => { - if (dataSource.length) { - data = data || dataSource[0]; - if (this.polylines.get(data.$datasource.entityName)) { + polyData.forEach((dataSource: FormattedData[]) => { + data = data || dataSource[0]; + if (dataSource.length && data.entityName === dataSource[0].entityName) { + if (this.polylines.get(data.entityName)) { this.updatePolyline(data, dataSource, this.options); } else { this.createPolyline(data, dataSource, this.options); } } + else { + if (data) + this.removePolyline(dataSource[0]?.entityName) + } }) } createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) { this.ready$.subscribe(() => { const poly = new Polyline(this.map, - dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); + dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); const bounds = poly.leafletPoly.getBounds(); this.fitBounds(bounds); - this.polylines.set(data.$datasource.entityName, poly); + this.polylines.set(data.entityName, poly); }); } @@ -373,13 +377,21 @@ export default abstract class LeafletMap { this.ready$.subscribe(() => { const poly = this.polylines.get(data.entityName); const oldBounds = poly.leafletPoly.getBounds(); - poly.updatePolyline(settings, data.map(el => this.convertPosition(el)).filter(el => !!el), dataSources); + poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); const newBounds = poly.leafletPoly.getBounds(); if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) { this.fitBounds(newBounds); } }); - }Я + } + + removePolyline(name: string) { + const poly = this.polylines.get(name); + if (poly) { + this.map.removeLayer(poly.leafletPoly); + this.polylines.delete(name); + } + } // Polygon diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts index 774dbc0b72..543f4a718a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts @@ -65,7 +65,6 @@ export class Polyline { this.dataSources = dataSources; this.leafletPoly.setLatLngs(locations); this.leafletPoly.setStyle(this.getPolyStyle(settings)); - // this.setPolylineLatLngs(data); if (this.polylineDecorator) this.polylineDecorator.setPaths(this.leafletPoly); } @@ -92,8 +91,4 @@ export class Polyline { getPolylineLatLngs() { return this.leafletPoly.getLatLngs(); } - - setPolylineLatLngs(latLngs) { - this.leafletPoly.setLatLngs(latLngs); - } } diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts index c89892f5a3..bc22326593 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts @@ -69,6 +69,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { maxTimeFormat: string; anchors: number[] = []; useAnchors: boolean; + currentTime: number; static getSettingsSchema(): JsonSettingsSchema { const schema = initSchema(); @@ -118,6 +119,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { } timeUpdated(time: number) { + this.currentTime = time; const currentPosition = this.interpolatedTimeData .map(dataSource => dataSource[time]) .filter(ds => ds) @@ -142,7 +144,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { } } } - this.activeTrip = currentPosition[0]; this.calcLabel(); this.calcTooltip(); if (this.mapWidget) { @@ -153,7 +154,10 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { if (this.settings.showPoints) { this.mapWidget.map.updatePoints(_.values(_.union(this.interpolatedTimeData)[0]), this.calcTooltip); } - this.mapWidget.map.updateMarkers(currentPosition, this.calcTooltip); + this.mapWidget.map.updateMarkers(currentPosition, (trip) => { + this.activeTrip = trip; + this.timeUpdated(this.currentTime) + }); } } @@ -193,6 +197,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { SecurityContext.HTML, tooltipText); this.cd.detectChanges(); } + this.activeTrip = point; return tooltipText; }