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

selected trip on map

Browse Source
This commit is contained in:
Artem Halushko 2020-05-19 14:59:25 +03:00
parent f8af340464
commit e5e2c3f5bb
3 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -346,16 +346,20 @@ export default abstract class LeafletMap {
// Polyline // Polyline
updatePolylines(polyData: FormattedData[][], data?: FormattedData) { updatePolylines(polyData: FormattedData[][], data?: FormattedData) {
polyData.forEach((dataSource) => { polyData.forEach((dataSource: FormattedData[]) => {
if (dataSource.length) {
data = data || dataSource[0]; data = data || dataSource[0];
if (this.polylines.get(data.$datasource.entityName)) { if (dataSource.length && data.entityName === dataSource[0].entityName) {
if (this.polylines.get(data.entityName)) {
this.updatePolyline(data, dataSource, this.options); this.updatePolyline(data, dataSource, this.options);
} }
else { else {
this.createPolyline(data, dataSource, this.options); this.createPolyline(data, dataSource, this.options);
} }
} }
else {
if (data)
this.removePolyline(dataSource[0]?.entityName)
}
}) })
} }
@ -365,7 +369,7 @@ export default abstract class LeafletMap {
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(); const bounds = poly.leafletPoly.getBounds();
this.fitBounds(bounds); 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(() => { this.ready$.subscribe(() => {
const poly = this.polylines.get(data.entityName); const poly = this.polylines.get(data.entityName);
const oldBounds = poly.leafletPoly.getBounds(); 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(); const newBounds = poly.leafletPoly.getBounds();
if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) { if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
this.fitBounds(newBounds); this.fitBounds(newBounds);
} }
}); });
}Я }
removePolyline(name: string) {
const poly = this.polylines.get(name);
if (poly) {
this.map.removeLayer(poly.leafletPoly);
this.polylines.delete(name);
}
}
// Polygon // Polygon

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

@ -65,7 +65,6 @@ export class Polyline {
this.dataSources = dataSources; this.dataSources = dataSources;
this.leafletPoly.setLatLngs(locations); this.leafletPoly.setLatLngs(locations);
this.leafletPoly.setStyle(this.getPolyStyle(settings)); this.leafletPoly.setStyle(this.getPolyStyle(settings));
// this.setPolylineLatLngs(data);
if (this.polylineDecorator) if (this.polylineDecorator)
this.polylineDecorator.setPaths(this.leafletPoly); this.polylineDecorator.setPaths(this.leafletPoly);
} }
@ -92,8 +91,4 @@ export class Polyline {
getPolylineLatLngs() { getPolylineLatLngs() {
return this.leafletPoly.getLatLngs(); return this.leafletPoly.getLatLngs();
} }
setPolylineLatLngs(latLngs) {
this.leafletPoly.setLatLngs(latLngs);
}
} }

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

@ -69,6 +69,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
maxTimeFormat: string; maxTimeFormat: string;
anchors: number[] = []; anchors: number[] = [];
useAnchors: boolean; useAnchors: boolean;
currentTime: number;
static getSettingsSchema(): JsonSettingsSchema { static getSettingsSchema(): JsonSettingsSchema {
const schema = initSchema(); const schema = initSchema();
@ -118,6 +119,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
} }
timeUpdated(time: number) { timeUpdated(time: number) {
this.currentTime = time;
const currentPosition = this.interpolatedTimeData const currentPosition = this.interpolatedTimeData
.map(dataSource => dataSource[time]) .map(dataSource => dataSource[time])
.filter(ds => ds) .filter(ds => ds)
@ -142,7 +144,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
} }
} }
} }
this.activeTrip = currentPosition[0];
this.calcLabel(); this.calcLabel();
this.calcTooltip(); this.calcTooltip();
if (this.mapWidget) { if (this.mapWidget) {
@ -153,7 +154,10 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
if (this.settings.showPoints) { if (this.settings.showPoints) {
this.mapWidget.map.updatePoints(_.values(_.union(this.interpolatedTimeData)[0]), this.calcTooltip); 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); SecurityContext.HTML, tooltipText);
this.cd.detectChanges(); this.cd.detectChanges();
} }
this.activeTrip = point;
return tooltipText; return tooltipText;
} }