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

Refactoring and added type

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2020-05-18 15:47:13 +03:00
parent 872e9f528c
commit 03df7ac58b
5 changed files with 91 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -343,12 +343,12 @@ export default abstract class LeafletMap {
// Polyline // Polyline
updatePolylines(polyData: FormattedData[][]) { updatePolylines(polyData: FormattedData[][], data?: FormattedData) {
polyData.forEach((data: FormattedData[]) => { polyData.forEach((dataSource) => {
if (data.length) { data = data || dataSource[0];
const dataSource = polyData.map(arr => arr[0]); if (dataSource.length) {
if (this.polylines.get(data[0].entityName)) { if (this.polylines.get(data.$datasource.entityName)) {
this.updatePolyline(data[0].entityName, data, dataSource, this.options); this.updatePolyline(data, dataSource, this.options);
} }
else { else {
this.createPolyline(data, dataSource, this.options); this.createPolyline(data, dataSource, this.options);
@ -357,22 +357,20 @@ export default abstract class LeafletMap {
}) })
} }
createPolyline(data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) { createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
if (data.length) this.ready$.subscribe(() => {
this.ready$.subscribe(() => { const poly = new Polyline(this.map,
const poly = new Polyline(this.map, dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
data.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[0].entityName, poly); });
});
} }
updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) { updatePolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
this.ready$.subscribe(() => { this.ready$.subscribe(() => {
const poly = this.polylines.get(key); const poly = this.polylines.get(data.$datasource.entityName);
poly.updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources); poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
const bounds = poly.leafletPoly.getBounds();
}); });
} }

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

@ -20,7 +20,7 @@ import { Datasource } from '@app/shared/models/widget.models';
import _ from 'lodash'; import _ from 'lodash';
import { Observable, Observer, of } from 'rxjs'; import { Observable, Observer, of } from 'rxjs';
import { map } from 'rxjs/operators'; import { map } from 'rxjs/operators';
import { createLabelFromDatasource, hashCode, isNumber, padValue } from '@core/utils'; import { createLabelFromDatasource, hashCode, isNumber, isUndefined, padValue } from '@core/utils';
export function createTooltip(target: L.Layer, export function createTooltip(target: L.Layer,
settings: MarkerSettings | PolylineSettings | PolygonSettings, settings: MarkerSettings | PolylineSettings | PolygonSettings,
@ -70,6 +70,9 @@ export function interpolateOnLineSegment(
} }
export function findAngle(startPoint: FormattedData, endPoint: FormattedData, latKeyName: string, lngKeyName: string): number { export function findAngle(startPoint: FormattedData, endPoint: FormattedData, latKeyName: string, lngKeyName: string): number {
if(isUndefined(startPoint) || isUndefined(endPoint)){
return 0;
}
let angle = -Math.atan2(endPoint[latKeyName] - startPoint[latKeyName], endPoint[lngKeyName] - startPoint[lngKeyName]); let angle = -Math.atan2(endPoint[latKeyName] - startPoint[latKeyName], endPoint[lngKeyName] - startPoint[lngKeyName]);
angle = angle * 180 / Math.PI; angle = angle * 180 / Math.PI;
return parseInt(angle.toFixed(2), 10); return parseInt(angle.toFixed(2), 10);

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

@ -21,11 +21,11 @@ import { FormattedData, PolygonSettings } from './map-models';
export class Polygon { export class Polygon {
leafletPoly: L.Polygon; leafletPoly: L.Polygon;
tooltip; tooltip: L.Popup;
data; data: FormattedData;
dataSources; dataSources: FormattedData[];
constructor(public map, polyData: FormattedData, dataSources, private settings: PolygonSettings) { constructor(public map, polyData: FormattedData, dataSources: FormattedData[], private settings: PolygonSettings) {
this.dataSources = dataSources; this.dataSources = dataSources;
this.data = polyData; this.data = polyData;
const polygonColor = this.getPolygonColor(settings); const polygonColor = this.getPolygonColor(settings);

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

@ -17,82 +17,83 @@
import L, { PolylineDecoratorOptions } from 'leaflet'; import L, { PolylineDecoratorOptions } from 'leaflet';
import 'leaflet-polylinedecorator'; import 'leaflet-polylinedecorator';
import { PolylineSettings } from './map-models'; import { FormattedData, PolylineSettings } from './map-models';
import { safeExecute } from '@home/components/widget/lib/maps/maps-utils'; import { safeExecute } from '@home/components/widget/lib/maps/maps-utils';
export class Polyline { export class Polyline {
leafletPoly: L.Polyline; leafletPoly: L.Polyline;
polylineDecorator: L.PolylineDecorator; polylineDecorator: L.PolylineDecorator;
dataSources; dataSources: FormattedData[];
data; data: FormattedData;
constructor(private map: L.Map, locations, data, dataSources, settings: PolylineSettings) { constructor(private map: L.Map, locations: L.LatLng[], data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
this.dataSources = dataSources; this.dataSources = dataSources;
this.data = data; this.data = data;
this.leafletPoly = L.polyline(locations, this.leafletPoly = L.polyline(locations,
this.getPolyStyle(settings) this.getPolyStyle(settings)
).addTo(this.map); ).addTo(this.map);
if (settings.usePolylineDecorator) { if (settings.usePolylineDecorator) {
this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map); this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map);
}
}
getDecoratorSettings(settings: PolylineSettings): PolylineDecoratorOptions {
return {
patterns: [
{
offset: settings.decoratorOffset,
endOffset: settings.endDecoratorOffset,
repeat: settings.decoratorRepeat,
symbol: L.Symbol[settings.decoratorSymbol]({
pixelSize: settings.decoratorSymbolSize,
polygon: false,
pathOptions: {
color: settings.useDecoratorCustomColor ? settings.decoratorCustomColor : this.getPolyStyle(settings).color,
stroke: true
}
})
} }
]
} }
}
getDecoratorSettings(settings: PolylineSettings): PolylineDecoratorOptions { updatePolyline(locations: L.LatLng[], data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
return { this.data = data;
patterns: [ this.dataSources = dataSources;
{ this.leafletPoly.setLatLngs(locations);
offset: settings.decoratorOffset, this.leafletPoly.setStyle(this.getPolyStyle(settings));
endOffset: settings.endDecoratorOffset, // this.setPolylineLatLngs(data);
repeat: settings.decoratorRepeat, if (this.polylineDecorator)
symbol: L.Symbol[settings.decoratorSymbol]({ this.polylineDecorator.setPaths(this.leafletPoly);
pixelSize: settings.decoratorSymbolSize, }
polygon: false,
pathOptions: {
color: settings.useDecoratorCustomColor ? settings.decoratorCustomColor : this.getPolyStyle(settings).color,
stroke: true
}
})
}
],
interactive: false,
} as PolylineDecoratorOptions
}
updatePolyline(settings, data, dataSources) { getPolyStyle(settings: PolylineSettings): L.PolylineOptions {
this.data = data; return {
this.dataSources = dataSources; interactive: false,
this.leafletPoly.setStyle(this.getPolyStyle(settings)); color: settings.useColorFunction ?
// this.setPolylineLatLngs(data); safeExecute(settings.colorFunction,
if (this.polylineDecorator) [this.data, this.dataSources, this.data.dsIndex]) : settings.color,
this.polylineDecorator.setPaths(this.leafletPoly); opacity: settings.useStrokeOpacityFunction ?
safeExecute(settings.strokeOpacityFunction,
[this.data, this.dataSources, this.data.dsIndex]) : settings.strokeOpacity,
weight: settings.useStrokeWeightFunction ?
safeExecute(settings.strokeWeightFunction,
[this.data, this.dataSources, this.data.dsIndex]) : settings.strokeWeight,
} }
}
getPolyStyle(settings: PolylineSettings): L.PolylineOptions { removePolyline() {
return { this.map.removeLayer(this.leafletPoly);
color: settings.useColorFunction ? }
safeExecute(settings.colorFunction,
[this.data, this.dataSources, this.dataSources[0]?.dsIndex]) : settings.color,
opacity: settings.useStrokeOpacityFunction ?
safeExecute(settings.strokeOpacityFunction,
[this.data, this.dataSources, this.dataSources[0]?.dsIndex]) : settings.strokeOpacity,
weight: settings.useStrokeWeightFunction ?
safeExecute(settings.strokeWeightFunction,
[this.data, this.dataSources, this.dataSources[0]?.dsIndex]) : settings.strokeWeight,
}
}
removePolyline() { getPolylineLatLngs() {
this.map.removeLayer(this.leafletPoly); return this.leafletPoly.getLatLngs();
} }
getPolylineLatLngs() { setPolylineLatLngs(latLngs) {
return this.leafletPoly.getLatLngs(); this.leafletPoly.setLatLngs(latLngs);
} }
setPolylineLatLngs(latLngs) {
this.leafletPoly.setLatLngs(latLngs);
}
} }

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

@ -136,7 +136,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
this.calcLabel(); this.calcLabel();
this.calcTooltip(); this.calcTooltip();
if (this.mapWidget) { if (this.mapWidget) {
this.mapWidget.map.updatePolylines(this.interpolatedTimeData.map(ds => _.values(ds))); this.mapWidget.map.updatePolylines(this.interpolatedTimeData.map(ds => _.values(ds)), this.activeTrip);
if (this.settings.showPolygon) { if (this.settings.showPolygon) {
this.mapWidget.map.updatePolygons(this.interpolatedTimeData); this.mapWidget.map.updatePolygons(this.interpolatedTimeData);
} }
@ -211,7 +211,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
} else { } else {
result[normalizeTime] = { result[normalizeTime] = {
...originData[i], ...originData[i],
rotationAngle: findAngle(originData[i - 1], originData[i], latKeyName, lngKeyName) + this.settings.rotationAngle rotationAngle: this.settings.rotationAngle + findAngle(originData[i - 1], originData[i], latKeyName, lngKeyName)
}; };
} }
} }