Showing
3 changed files
with
30 additions
and
18 deletions
... | ... | @@ -158,9 +158,9 @@ export default abstract class LeafletMap { |
158 | 158 | this.map = map; |
159 | 159 | if (this.options.useDefaultCenterPosition) { |
160 | 160 | this.map.panTo(this.options.defaultCenterPosition); |
161 | - this.bounds = map.getBounds(); | |
161 | + this.bounds = map.getBounds(); | |
162 | 162 | } |
163 | - else this.bounds = new L.LatLngBounds(null, null); | |
163 | + else this.bounds = new L.LatLngBounds(null, null); | |
164 | 164 | if (this.options.draggableMarker) { |
165 | 165 | this.addMarkerControl(); |
166 | 166 | } |
... | ... | @@ -279,8 +279,8 @@ export default abstract class LeafletMap { |
279 | 279 | private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, callback?) { |
280 | 280 | this.ready$.subscribe(() => { |
281 | 281 | const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker); |
282 | - if(callback) | |
283 | - newMarker.leafletMarker.on('click', ()=>{callback(data, true)}); | |
282 | + if (callback) | |
283 | + newMarker.leafletMarker.on('click', () => { callback(data, true) }); | |
284 | 284 | if (this.bounds) |
285 | 285 | this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); |
286 | 286 | this.markers.set(key, newMarker); |
... | ... | @@ -373,8 +373,12 @@ export default abstract class LeafletMap { |
373 | 373 | updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) { |
374 | 374 | this.ready$.subscribe(() => { |
375 | 375 | const poly = this.polylines.get(key); |
376 | + const oldBounds = poly.leafletPoly.getBounds(); | |
376 | 377 | poly.updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources); |
377 | - const bounds = poly.leafletPoly.getBounds(); | |
378 | + const newBounds = poly.leafletPoly.getBounds(); | |
379 | + if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) { | |
380 | + this.fitBounds(newBounds); | |
381 | + } | |
378 | 382 | }); |
379 | 383 | } |
380 | 384 | |
... | ... | @@ -408,7 +412,12 @@ export default abstract class LeafletMap { |
408 | 412 | updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) { |
409 | 413 | this.ready$.subscribe(() => { |
410 | 414 | const poly = this.polygons.get(polyData.entityName); |
415 | + const oldBounds = poly.leafletPoly.getBounds(); | |
411 | 416 | poly.updatePolygon(polyData, dataSources, settings); |
417 | + const newBounds = poly.leafletPoly.getBounds(); | |
418 | + if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) { | |
419 | + this.fitBounds(newBounds); | |
420 | + } | |
412 | 421 | }); |
413 | 422 | } |
414 | 423 | } | ... | ... |
... | ... | @@ -198,7 +198,7 @@ export function parseArray(input: any[]): any[] { |
198 | 198 | time: el[0], |
199 | 199 | deviceType: null |
200 | 200 | }; |
201 | - entityArray.filter(e => e.data.length).forEach(entity => { | |
201 | + entityArray.filter(e => e.data.length && e.data[i]).forEach(entity => { | |
202 | 202 | obj[entity?.dataKey?.label] = entity?.data[i][1]; |
203 | 203 | obj[entity?.dataKey?.label + '|ts'] = entity?.data[0][0]; |
204 | 204 | if (entity?.dataKey?.label === 'type') { | ... | ... |
... | ... | @@ -47,7 +47,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { |
47 | 47 | |
48 | 48 | mapWidget: MapWidgetController; |
49 | 49 | historicalData; |
50 | - intervals=[]; | |
50 | + intervals = []; | |
51 | 51 | normalizationStep = 1000; |
52 | 52 | interpolatedData = []; |
53 | 53 | widgetConfig: WidgetConfig; |
... | ... | @@ -91,12 +91,12 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { |
91 | 91 | this.normalizationStep = this.settings.normalizationStep; |
92 | 92 | const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; |
93 | 93 | if (subscription) subscription.callbacks.onDataUpdated = () => { |
94 | - this.historicalData = parseArray(this.ctx.data).filter(arr=>arr.length); | |
95 | - if(this.historicalData.length){ | |
96 | - this.activeTrip = this.historicalData[0][0]; | |
97 | - this.calculateIntervals(); | |
98 | - this.timeUpdated(this.intervals[0]); | |
99 | - } | |
94 | + this.historicalData = parseArray(this.ctx.data).filter(arr => arr.length); | |
95 | + if (this.historicalData.length) { | |
96 | + this.activeTrip = this.historicalData[0][0]; | |
97 | + this.calculateIntervals(); | |
98 | + this.timeUpdated(this.intervals[0]); | |
99 | + } | |
100 | 100 | this.mapWidget.map.map?.invalidateSize(); |
101 | 101 | this.cd.detectChanges(); |
102 | 102 | } |
... | ... | @@ -110,11 +110,14 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { |
110 | 110 | timeUpdated(time: number) { |
111 | 111 | this.minTime = moment(this.intervals[this.intervals.length - 1]).format('YYYY-MM-DD HH:mm:ss'); |
112 | 112 | this.maxTime = moment(this.intervals[0]).format('YYYY-MM-DD HH:mm:ss'); |
113 | - const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]).map(ds => { | |
114 | - ds.minTime = this.minTime; | |
115 | - ds.maxTime = this.maxTime; | |
116 | - return ds; | |
117 | - }); | |
113 | + const currentPosition = this.interpolatedData | |
114 | + .map(dataSource => dataSource[time]) | |
115 | + .filter(ds => ds) | |
116 | + .map(ds => { | |
117 | + ds.minTime = this.minTime; | |
118 | + ds.maxTime = this.maxTime; | |
119 | + return ds; | |
120 | + }); | |
118 | 121 | this.activeTrip = currentPosition[0]; |
119 | 122 | this.calcLabel(); |
120 | 123 | this.calcTooltip(); | ... | ... |