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

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

@ -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

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.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);
}
}

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;
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;
}