Refactoring and added type
This commit is contained in:
Vladyslav_Prykhodko
parent
872e9f528c
commit
03df7ac58b
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user