简柏林 / 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 343
344 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 353 else {
354 354 this.createPolyline(data, dataSource, this.options);
... ... @@ -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 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 20 import _ from 'lodash';
21 21 import { Observable, Observer, of } from 'rxjs';
22 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 25 export function createTooltip(target: L.Layer,
26 26 settings: MarkerSettings | PolylineSettings | PolygonSettings,
... ... @@ -70,6 +70,9 @@ export function interpolateOnLineSegment(
70 70 }
71 71
72 72 export function findAngle(startPoint: FormattedData, endPoint: FormattedData, latKeyName: string, lngKeyName: string): number {
  73 + if(isUndefined(startPoint) || isUndefined(endPoint)){
  74 + return 0;
  75 + }
73 76 let angle = -Math.atan2(endPoint[latKeyName] - startPoint[latKeyName], endPoint[lngKeyName] - startPoint[lngKeyName]);
74 77 angle = angle * 180 / Math.PI;
75 78 return parseInt(angle.toFixed(2), 10);
... ...
... ... @@ -21,11 +21,11 @@ import { FormattedData, PolygonSettings } from './map-models';
21 21 export class Polygon {
22 22
23 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 29 this.dataSources = dataSources;
30 30 this.data = polyData;
31 31 const polygonColor = this.getPolygonColor(settings);
... ...
... ... @@ -17,82 +17,83 @@
17 17 import L, { PolylineDecoratorOptions } from 'leaflet';
18 18 import 'leaflet-polylinedecorator';
19 19
20   -import { PolylineSettings } from './map-models';
  20 +import { FormattedData, PolylineSettings } from './map-models';
21 21 import { safeExecute } from '@home/components/widget/lib/maps/maps-utils';
22 22
23 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 136 this.calcLabel();
137 137 this.calcTooltip();
138 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 140 if (this.settings.showPolygon) {
141 141 this.mapWidget.map.updatePolygons(this.interpolatedTimeData);
142 142 }
... ... @@ -211,7 +211,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
211 211 } else {
212 212 result[normalizeTime] = {
213 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 }
... ...