dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zoom fix

Browse Source
This commit is contained in:
Artem Halushko 2020-05-19 11:02:36 +03:00
parent 54a1b0da76
commit 0ee3f77d9e
3 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
View File

@ -158,9 +158,9 @@ export default abstract class LeafletMap {
this.map = map; this.map = map;
if (this.options.useDefaultCenterPosition) { if (this.options.useDefaultCenterPosition) {
this.map.panTo(this.options.defaultCenterPosition); 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) { if (this.options.draggableMarker) {
this.addMarkerControl(); this.addMarkerControl();
} }
@ -279,8 +279,8 @@ export default abstract class LeafletMap {
private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, callback?) { private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, callback?) {
this.ready$.subscribe(() => { this.ready$.subscribe(() => {
const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker); const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker);
if(callback) if (callback)
newMarker.leafletMarker.on('click', ()=>{callback(data, true)}); newMarker.leafletMarker.on('click', () => { callback(data, true) });
if (this.bounds) if (this.bounds)
this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
this.markers.set(key, newMarker); this.markers.set(key, newMarker);
@ -373,8 +373,12 @@ export default abstract class LeafletMap {
updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) { updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) {
this.ready$.subscribe(() => { this.ready$.subscribe(() => {
const poly = this.polylines.get(key); const poly = this.polylines.get(key);
const oldBounds = poly.leafletPoly.getBounds();
poly.updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources); 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) { updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
this.ready$.subscribe(() => { this.ready$.subscribe(() => {
const poly = this.polygons.get(polyData.entityName); const poly = this.polygons.get(polyData.entityName);
const oldBounds = poly.leafletPoly.getBounds();
poly.updatePolygon(polyData, dataSources, settings); poly.updatePolygon(polyData, dataSources, settings);
const newBounds = poly.leafletPoly.getBounds();
if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
this.fitBounds(newBounds);
}
}); });
} }
} }

2
ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
View File

@ -198,7 +198,7 @@ export function parseArray(input: any[]): any[] {
time: el[0], time: el[0],
deviceType: null 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] = entity?.data[i][1];
obj[entity?.dataKey?.label + '|ts'] = entity?.data[0][0]; obj[entity?.dataKey?.label + '|ts'] = entity?.data[0][0];
if (entity?.dataKey?.label === 'type') { if (entity?.dataKey?.label === 'type') {

27
ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
View File

@ -47,7 +47,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
mapWidget: MapWidgetController; mapWidget: MapWidgetController;
historicalData; historicalData;
intervals=[]; intervals = [];
normalizationStep = 1000; normalizationStep = 1000;
interpolatedData = []; interpolatedData = [];
widgetConfig: WidgetConfig; widgetConfig: WidgetConfig;
@ -91,12 +91,12 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
this.normalizationStep = this.settings.normalizationStep; this.normalizationStep = this.settings.normalizationStep;
const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
if (subscription) subscription.callbacks.onDataUpdated = () => { if (subscription) subscription.callbacks.onDataUpdated = () => {
this.historicalData = parseArray(this.ctx.data).filter(arr=>arr.length); this.historicalData = parseArray(this.ctx.data).filter(arr => arr.length);
if(this.historicalData.length){ if (this.historicalData.length) {
this.activeTrip = this.historicalData[0][0]; this.activeTrip = this.historicalData[0][0];
this.calculateIntervals(); this.calculateIntervals();
this.timeUpdated(this.intervals[0]); this.timeUpdated(this.intervals[0]);
} }
this.mapWidget.map.map?.invalidateSize(); this.mapWidget.map.map?.invalidateSize();
this.cd.detectChanges(); this.cd.detectChanges();
} }
@ -110,11 +110,14 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
timeUpdated(time: number) { timeUpdated(time: number) {
this.minTime = moment(this.intervals[this.intervals.length - 1]).format('YYYY-MM-DD HH:mm:ss'); 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'); this.maxTime = moment(this.intervals[0]).format('YYYY-MM-DD HH:mm:ss');
const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]).map(ds => { const currentPosition = this.interpolatedData
ds.minTime = this.minTime; .map(dataSource => dataSource[time])
ds.maxTime = this.maxTime; .filter(ds => ds)
return ds; .map(ds => {
}); ds.minTime = this.minTime;
ds.maxTime = this.maxTime;
return ds;
});
this.activeTrip = currentPosition[0]; this.activeTrip = currentPosition[0];
this.calcLabel(); this.calcLabel();
this.calcTooltip(); this.calcTooltip();