diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index 7e00d16664..8ee031d433 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -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); }); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts index cdb4662cbe..899e608296 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts @@ -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); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts index 3c90db3ba7..2af02b2878 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts @@ -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); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts index ba001d7c1e..774dbc0b72 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts @@ -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); + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts index 5a293a3d58..647b419e12 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts @@ -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) }; } }