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

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 { Observable, Observer, of } from 'rxjs';
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,
settings: MarkerSettings | PolylineSettings | PolygonSettings,
@ -70,6 +70,9 @@ export function interpolateOnLineSegment(
}
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]);
angle = angle * 180 / Math.PI;
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 {
leafletPoly: L.Polygon;
tooltip;
data;
dataSources;
tooltip: L.Popup;
data: FormattedData;
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.data = polyData;
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 'leaflet-polylinedecorator';
import { PolylineSettings } from './map-models';
import { FormattedData, PolylineSettings } from './map-models';
import { safeExecute } from '@home/components/widget/lib/maps/maps-utils';
export class Polyline {
leafletPoly: L.Polyline;
polylineDecorator: L.PolylineDecorator;
dataSources;
data;
leafletPoly: L.Polyline;
polylineDecorator: L.PolylineDecorator;
dataSources: FormattedData[];
data: FormattedData;
constructor(private map: L.Map, locations, data, dataSources, settings: PolylineSettings) {
this.dataSources = dataSources;
this.data = data;
constructor(private map: L.Map, locations: L.LatLng[], data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
this.dataSources = dataSources;
this.data = data;
this.leafletPoly = L.polyline(locations,
this.getPolyStyle(settings)
).addTo(this.map);
this.leafletPoly = L.polyline(locations,
this.getPolyStyle(settings)
).addTo(this.map);
if (settings.usePolylineDecorator) {
this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map);
if (settings.usePolylineDecorator) {
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 {
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
}
})
}
],
interactive: false,
} as PolylineDecoratorOptions
}
updatePolyline(locations: L.LatLng[], data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
this.data = data;
this.dataSources = dataSources;
this.leafletPoly.setLatLngs(locations);
this.leafletPoly.setStyle(this.getPolyStyle(settings));
// this.setPolylineLatLngs(data);
if (this.polylineDecorator)
this.polylineDecorator.setPaths(this.leafletPoly);
}
updatePolyline(settings, data, dataSources) {
this.data = data;
this.dataSources = dataSources;
this.leafletPoly.setStyle(this.getPolyStyle(settings));
// this.setPolylineLatLngs(data);
if (this.polylineDecorator)
this.polylineDecorator.setPaths(this.leafletPoly);
getPolyStyle(settings: PolylineSettings): L.PolylineOptions {
return {
interactive: false,
color: settings.useColorFunction ?
safeExecute(settings.colorFunction,
[this.data, this.dataSources, this.data.dsIndex]) : settings.color,
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 {
return {
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() {
this.map.removeLayer(this.leafletPoly);
}
removePolyline() {
this.map.removeLayer(this.leafletPoly);
}
getPolylineLatLngs() {
return this.leafletPoly.getLatLngs();
}
getPolylineLatLngs() {
return this.leafletPoly.getLatLngs();
}
setPolylineLatLngs(latLngs) {
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.calcTooltip();
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) {
this.mapWidget.map.updatePolygons(this.interpolatedTimeData);
}
@ -211,7 +211,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
} else {
result[normalizeTime] = {
...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)
};
}
}