简柏林 / thingskit · Commits

Commit 03df7ac58b555d9ed794bb65a12764e163ac6dc9

Authored by Vladyslav_Prykhodko
1 parent 872e9f52

Refactoring and added type

Inline Side-by-side
Showing 5 changed files with 90 additions and 88 deletions
@@ -343,12 +343,12 @@ export default abstract class LeafletMap { @@ -343,12 +343,12 @@ export default abstract class LeafletMap {
343 343
344 // Polyline 344 // Polyline
345 345
346 - updatePolylines(polyData: FormattedData[][]) {  
347 - polyData.forEach((data: FormattedData[]) => {  
348 - if (data.length) {  
349 - const dataSource = polyData.map(arr => arr[0]);  
350 - if (this.polylines.get(data[0].entityName)) {  
351 - this.updatePolyline(data[0].entityName, data, dataSource, this.options); 346 + updatePolylines(polyData: FormattedData[][], data?: FormattedData) {
  347 + polyData.forEach((dataSource) => {
  348 + data = data || dataSource[0];
  349 + if (dataSource.length) {
  350 + if (this.polylines.get(data.$datasource.entityName)) {
  351 + this.updatePolyline(data, dataSource, this.options);
352 } 352 }
353 else { 353 else {
354 this.createPolyline(data, dataSource, this.options); 354 this.createPolyline(data, dataSource, this.options);
@@ -357,22 +357,20 @@ export default abstract class LeafletMap { @@ -357,22 +357,20 @@ export default abstract class LeafletMap {
357 }) 357 })
358 } 358 }
359 359
360 - createPolyline(data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) {  
361 - if (data.length)  
362 - this.ready$.subscribe(() => {  
363 - const poly = new Polyline(this.map,  
364 - data.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);  
365 - const bounds = poly.leafletPoly.getBounds();  
366 - this.fitBounds(bounds);  
367 - this.polylines.set(data[0].entityName, poly);  
368 - }); 360 + createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
  361 + this.ready$.subscribe(() => {
  362 + const poly = new Polyline(this.map,
  363 + dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
  364 + const bounds = poly.leafletPoly.getBounds();
  365 + this.fitBounds(bounds);
  366 + this.polylines.set(data.$datasource.entityName, poly);
  367 + });
369 } 368 }
370 369
371 - updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) { 370 + updatePolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
372 this.ready$.subscribe(() => { 371 this.ready$.subscribe(() => {
373 - const poly = this.polylines.get(key);  
374 - poly.updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources);  
375 - const bounds = poly.leafletPoly.getBounds(); 372 + const poly = this.polylines.get(data.$datasource.entityName);
  373 + poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
376 }); 374 });
377 } 375 }
378 376
@@ -20,7 +20,7 @@ import { Datasource } from '@app/shared/models/widget.models'; @@ -20,7 +20,7 @@ import { Datasource } from '@app/shared/models/widget.models';
20 import _ from 'lodash'; 20 import _ from 'lodash';
21 import { Observable, Observer, of } from 'rxjs'; 21 import { Observable, Observer, of } from 'rxjs';
22 import { map } from 'rxjs/operators'; 22 import { map } from 'rxjs/operators';
23 -import { createLabelFromDatasource, hashCode, isNumber, padValue } from '@core/utils'; 23 +import { createLabelFromDatasource, hashCode, isNumber, isUndefined, padValue } from '@core/utils';
24 24
25 export function createTooltip(target: L.Layer, 25 export function createTooltip(target: L.Layer,
26 settings: MarkerSettings | PolylineSettings | PolygonSettings, 26 settings: MarkerSettings | PolylineSettings | PolygonSettings,
@@ -70,6 +70,9 @@ export function interpolateOnLineSegment( @@ -70,6 +70,9 @@ export function interpolateOnLineSegment(
70 } 70 }
71 71
72 export function findAngle(startPoint: FormattedData, endPoint: FormattedData, latKeyName: string, lngKeyName: string): number { 72 export function findAngle(startPoint: FormattedData, endPoint: FormattedData, latKeyName: string, lngKeyName: string): number {
  73 + if(isUndefined(startPoint) || isUndefined(endPoint)){
  74 + return 0;
  75 + }
73 let angle = -Math.atan2(endPoint[latKeyName] - startPoint[latKeyName], endPoint[lngKeyName] - startPoint[lngKeyName]); 76 let angle = -Math.atan2(endPoint[latKeyName] - startPoint[latKeyName], endPoint[lngKeyName] - startPoint[lngKeyName]);
74 angle = angle * 180 / Math.PI; 77 angle = angle * 180 / Math.PI;
75 return parseInt(angle.toFixed(2), 10); 78 return parseInt(angle.toFixed(2), 10);
@@ -21,11 +21,11 @@ import { FormattedData, PolygonSettings } from './map-models'; @@ -21,11 +21,11 @@ import { FormattedData, PolygonSettings } from './map-models';
21 export class Polygon { 21 export class Polygon {
22 22
23 leafletPoly: L.Polygon; 23 leafletPoly: L.Polygon;
24 - tooltip;  
25 - data;  
26 - dataSources; 24 + tooltip: L.Popup;
  25 + data: FormattedData;
  26 + dataSources: FormattedData[];
27 27
28 - constructor(public map, polyData: FormattedData, dataSources, private settings: PolygonSettings) { 28 + constructor(public map, polyData: FormattedData, dataSources: FormattedData[], private settings: PolygonSettings) {
29 this.dataSources = dataSources; 29 this.dataSources = dataSources;
30 this.data = polyData; 30 this.data = polyData;
31 const polygonColor = this.getPolygonColor(settings); 31 const polygonColor = this.getPolygonColor(settings);
@@ -17,82 +17,83 @@ @@ -17,82 +17,83 @@
17 import L, { PolylineDecoratorOptions } from 'leaflet'; 17 import L, { PolylineDecoratorOptions } from 'leaflet';
18 import 'leaflet-polylinedecorator'; 18 import 'leaflet-polylinedecorator';
19 19
20 -import { PolylineSettings } from './map-models'; 20 +import { FormattedData, PolylineSettings } from './map-models';
21 import { safeExecute } from '@home/components/widget/lib/maps/maps-utils'; 21 import { safeExecute } from '@home/components/widget/lib/maps/maps-utils';
22 22
23 export class Polyline { 23 export class Polyline {
24 24
25 - leafletPoly: L.Polyline;  
26 - polylineDecorator: L.PolylineDecorator;  
27 - dataSources;  
28 - data; 25 + leafletPoly: L.Polyline;
  26 + polylineDecorator: L.PolylineDecorator;
  27 + dataSources: FormattedData[];
  28 + data: FormattedData;
29 29
30 - constructor(private map: L.Map, locations, data, dataSources, settings: PolylineSettings) {  
31 - this.dataSources = dataSources;  
32 - this.data = data; 30 + constructor(private map: L.Map, locations: L.LatLng[], data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
  31 + this.dataSources = dataSources;
  32 + this.data = data;
33 33
34 - this.leafletPoly = L.polyline(locations,  
35 - this.getPolyStyle(settings)  
36 - ).addTo(this.map); 34 + this.leafletPoly = L.polyline(locations,
  35 + this.getPolyStyle(settings)
  36 + ).addTo(this.map);
37 37
38 - if (settings.usePolylineDecorator) {  
39 - this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map);  
40 - } 38 + if (settings.usePolylineDecorator) {
  39 + this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map);
41 } 40 }
  41 + }
42 42
43 - getDecoratorSettings(settings: PolylineSettings): PolylineDecoratorOptions {  
44 - return {  
45 - patterns: [  
46 - {  
47 - offset: settings.decoratorOffset,  
48 - endOffset: settings.endDecoratorOffset,  
49 - repeat: settings.decoratorRepeat,  
50 - symbol: L.Symbol[settings.decoratorSymbol]({  
51 - pixelSize: settings.decoratorSymbolSize,  
52 - polygon: false,  
53 - pathOptions: {  
54 - color: settings.useDecoratorCustomColor ? settings.decoratorCustomColor : this.getPolyStyle(settings).color,  
55 - stroke: true  
56 - }  
57 - })  
58 - }  
59 - ],  
60 - interactive: false,  
61 - } as PolylineDecoratorOptions 43 + getDecoratorSettings(settings: PolylineSettings): PolylineDecoratorOptions {
  44 + return {
  45 + patterns: [
  46 + {
  47 + offset: settings.decoratorOffset,
  48 + endOffset: settings.endDecoratorOffset,
  49 + repeat: settings.decoratorRepeat,
  50 + symbol: L.Symbol[settings.decoratorSymbol]({
  51 + pixelSize: settings.decoratorSymbolSize,
  52 + polygon: false,
  53 + pathOptions: {
  54 + color: settings.useDecoratorCustomColor ? settings.decoratorCustomColor : this.getPolyStyle(settings).color,
  55 + stroke: true
  56 + }
  57 + })
  58 + }
  59 + ]
62 } 60 }
  61 + }
63 62
64 - updatePolyline(settings, data, dataSources) {  
65 - this.data = data;  
66 - this.dataSources = dataSources;  
67 - this.leafletPoly.setStyle(this.getPolyStyle(settings));  
68 - // this.setPolylineLatLngs(data);  
69 - if (this.polylineDecorator)  
70 - this.polylineDecorator.setPaths(this.leafletPoly);  
71 - } 63 + updatePolyline(locations: L.LatLng[], data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
  64 + this.data = data;
  65 + this.dataSources = dataSources;
  66 + this.leafletPoly.setLatLngs(locations);
  67 + this.leafletPoly.setStyle(this.getPolyStyle(settings));
  68 + // this.setPolylineLatLngs(data);
  69 + if (this.polylineDecorator)
  70 + this.polylineDecorator.setPaths(this.leafletPoly);
  71 + }
72 72
73 - getPolyStyle(settings: PolylineSettings): L.PolylineOptions {  
74 - return {  
75 - color: settings.useColorFunction ?  
76 - safeExecute(settings.colorFunction,  
77 - [this.data, this.dataSources, this.dataSources[0]?.dsIndex]) : settings.color,  
78 - opacity: settings.useStrokeOpacityFunction ?  
79 - safeExecute(settings.strokeOpacityFunction,  
80 - [this.data, this.dataSources, this.dataSources[0]?.dsIndex]) : settings.strokeOpacity,  
81 - weight: settings.useStrokeWeightFunction ?  
82 - safeExecute(settings.strokeWeightFunction,  
83 - [this.data, this.dataSources, this.dataSources[0]?.dsIndex]) : settings.strokeWeight,  
84 - } 73 + getPolyStyle(settings: PolylineSettings): L.PolylineOptions {
  74 + return {
  75 + interactive: false,
  76 + color: settings.useColorFunction ?
  77 + safeExecute(settings.colorFunction,
  78 + [this.data, this.dataSources, this.data.dsIndex]) : settings.color,
  79 + opacity: settings.useStrokeOpacityFunction ?
  80 + safeExecute(settings.strokeOpacityFunction,
  81 + [this.data, this.dataSources, this.data.dsIndex]) : settings.strokeOpacity,
  82 + weight: settings.useStrokeWeightFunction ?
  83 + safeExecute(settings.strokeWeightFunction,
  84 + [this.data, this.dataSources, this.data.dsIndex]) : settings.strokeWeight,
85 } 85 }
  86 + }
86 87
87 - removePolyline() {  
88 - this.map.removeLayer(this.leafletPoly);  
89 - } 88 + removePolyline() {
  89 + this.map.removeLayer(this.leafletPoly);
  90 + }
90 91
91 - getPolylineLatLngs() {  
92 - return this.leafletPoly.getLatLngs();  
93 - } 92 + getPolylineLatLngs() {
  93 + return this.leafletPoly.getLatLngs();
  94 + }
94 95
95 - setPolylineLatLngs(latLngs) {  
96 - this.leafletPoly.setLatLngs(latLngs);  
97 - } 96 + setPolylineLatLngs(latLngs) {
  97 + this.leafletPoly.setLatLngs(latLngs);
  98 + }
98 } 99 }
@@ -136,7 +136,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { @@ -136,7 +136,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
136 this.calcLabel(); 136 this.calcLabel();
137 this.calcTooltip(); 137 this.calcTooltip();
138 if (this.mapWidget) { 138 if (this.mapWidget) {
139 - this.mapWidget.map.updatePolylines(this.interpolatedTimeData.map(ds => _.values(ds))); 139 + this.mapWidget.map.updatePolylines(this.interpolatedTimeData.map(ds => _.values(ds)), this.activeTrip);
140 if (this.settings.showPolygon) { 140 if (this.settings.showPolygon) {
141 this.mapWidget.map.updatePolygons(this.interpolatedTimeData); 141 this.mapWidget.map.updatePolygons(this.interpolatedTimeData);
142 } 142 }
@@ -211,7 +211,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { @@ -211,7 +211,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
211 } else { 211 } else {
212 result[normalizeTime] = { 212 result[normalizeTime] = {
213 ...originData[i], 213 ...originData[i],
214 - rotationAngle: findAngle(originData[i - 1], originData[i], latKeyName, lngKeyName) + this.settings.rotationAngle 214 + rotationAngle: this.settings.rotationAngle + findAngle(originData[i - 1], originData[i], latKeyName, lngKeyName)
215 }; 215 };
216 } 216 }
217 } 217 }