From 0ee3f77d9e883831af2bf57ba1e3981aa5898af1 Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Tue, 19 May 2020 11:02:36 +0300 Subject: [PATCH] zoom fix --- .../components/widget/lib/maps/leaflet-map.ts | 19 +++++++++---- .../components/widget/lib/maps/maps-utils.ts | 2 +- .../trip-animation.component.ts | 27 ++++++++++--------- 3 files changed, 30 insertions(+), 18 deletions(-) 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 78a5b916f6..189a73ad83 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 @@ -158,9 +158,9 @@ export default abstract class LeafletMap { this.map = map; if (this.options.useDefaultCenterPosition) { this.map.panTo(this.options.defaultCenterPosition); - this.bounds = map.getBounds(); + this.bounds = map.getBounds(); } - else this.bounds = new L.LatLngBounds(null, null); + else this.bounds = new L.LatLngBounds(null, null); if (this.options.draggableMarker) { this.addMarkerControl(); } @@ -279,8 +279,8 @@ export default abstract class LeafletMap { private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, callback?) { this.ready$.subscribe(() => { const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker); - if(callback) - newMarker.leafletMarker.on('click', ()=>{callback(data, true)}); + if (callback) + newMarker.leafletMarker.on('click', () => { callback(data, true) }); if (this.bounds) this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); this.markers.set(key, newMarker); @@ -373,8 +373,12 @@ export default abstract class LeafletMap { updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) { this.ready$.subscribe(() => { const poly = this.polylines.get(key); + const oldBounds = poly.leafletPoly.getBounds(); poly.updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources); - const bounds = poly.leafletPoly.getBounds(); + const newBounds = poly.leafletPoly.getBounds(); + if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) { + this.fitBounds(newBounds); + } }); } @@ -408,7 +412,12 @@ export default abstract class LeafletMap { updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) { this.ready$.subscribe(() => { const poly = this.polygons.get(polyData.entityName); + const oldBounds = poly.leafletPoly.getBounds(); poly.updatePolygon(polyData, dataSources, settings); + const newBounds = poly.leafletPoly.getBounds(); + if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) { + this.fitBounds(newBounds); + } }); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts index 742e024a09..a876c1d4cb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts @@ -198,7 +198,7 @@ export function parseArray(input: any[]): any[] { time: el[0], deviceType: null }; - entityArray.filter(e => e.data.length).forEach(entity => { + entityArray.filter(e => e.data.length && e.data[i]).forEach(entity => { obj[entity?.dataKey?.label] = entity?.data[i][1]; obj[entity?.dataKey?.label + '|ts'] = entity?.data[0][0]; if (entity?.dataKey?.label === 'type') { 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 a12feae0e0..2951ddd2f9 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 @@ -47,7 +47,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { mapWidget: MapWidgetController; historicalData; - intervals=[]; + intervals = []; normalizationStep = 1000; interpolatedData = []; widgetConfig: WidgetConfig; @@ -91,12 +91,12 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { this.normalizationStep = this.settings.normalizationStep; const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; if (subscription) subscription.callbacks.onDataUpdated = () => { - this.historicalData = parseArray(this.ctx.data).filter(arr=>arr.length); - if(this.historicalData.length){ - this.activeTrip = this.historicalData[0][0]; - this.calculateIntervals(); - this.timeUpdated(this.intervals[0]); - } + this.historicalData = parseArray(this.ctx.data).filter(arr => arr.length); + if (this.historicalData.length) { + this.activeTrip = this.historicalData[0][0]; + this.calculateIntervals(); + this.timeUpdated(this.intervals[0]); + } this.mapWidget.map.map?.invalidateSize(); this.cd.detectChanges(); } @@ -110,11 +110,14 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { timeUpdated(time: number) { this.minTime = moment(this.intervals[this.intervals.length - 1]).format('YYYY-MM-DD HH:mm:ss'); this.maxTime = moment(this.intervals[0]).format('YYYY-MM-DD HH:mm:ss'); - const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]).map(ds => { - ds.minTime = this.minTime; - ds.maxTime = this.maxTime; - return ds; - }); + const currentPosition = this.interpolatedData + .map(dataSource => dataSource[time]) + .filter(ds => ds) + .map(ds => { + ds.minTime = this.minTime; + ds.maxTime = this.maxTime; + return ds; + }); this.activeTrip = currentPosition[0]; this.calcLabel(); this.calcTooltip();