tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

add typing

pull/2535/head
Adsumus 7 years ago
parent
f064f28053
commit
97e99dc338
14 changed files with 209 additions and 137 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
  2. 121
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
  3. 4
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
  4. 7
      ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
  5. 23
      ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
  6. 19
      ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
  7. 61
      ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts
  8. 4
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
  9. 5
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts
  10. 4
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
  11. 4
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
  12. 4
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts
  13. 7
      ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
  14. 15
      ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.ts

68
ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
View File

@ -21,7 +21,7 @@ import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css' import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import 'leaflet.markercluster/dist/leaflet.markercluster' import 'leaflet.markercluster/dist/leaflet.markercluster'
import { MapOptions, MarkerSettings } from './map-models'; import { MapSettings, MarkerSettings, FormattedData } from './map-models';
import { Marker } from './markers'; import { Marker } from './markers';
import { Observable, of, BehaviorSubject, Subject } from 'rxjs'; import { Observable, of, BehaviorSubject, Subject } from 'rxjs';
import { filter } from 'rxjs/operators'; import { filter } from 'rxjs/operators';
@ -38,15 +38,15 @@ export default abstract class LeafletMap {
map: L.Map; map: L.Map;
map$: BehaviorSubject<L.Map> = new BehaviorSubject(null); map$: BehaviorSubject<L.Map> = new BehaviorSubject(null);
ready$: Observable<L.Map> = this.map$.pipe(filter(map => !!map)); ready$: Observable<L.Map> = this.map$.pipe(filter(map => !!map));
options: MapOptions; options: MapSettings & MarkerSettings;
isMarketCluster: boolean; isMarketCluster: boolean;
bounds: L.LatLngBounds; bounds: L.LatLngBounds;
constructor($container: HTMLElement, options: MapOptions) { constructor($container: HTMLElement, options: MapSettings & MarkerSettings) {
this.options = options; this.options = options;
} }
public initSettings(options: MapOptions) { public initSettings(options: MapSettings) {
const { initCallback, const { initCallback,
defaultZoomLevel, defaultZoomLevel,
dontFitMapBounds, dontFitMapBounds,
@ -56,7 +56,7 @@ export default abstract class LeafletMap {
credentials, credentials,
defaultCenterPosition, defaultCenterPosition,
draggebleMarker, draggebleMarker,
markerClusteringSetting }: MapOptions = options; markerClusteringSetting }: MapSettings = options;
if (disableScrollZooming) { if (disableScrollZooming) {
this.map.scrollWheelZoom.disable(); this.map.scrollWheelZoom.disable();
} }
@ -86,16 +86,12 @@ export default abstract class LeafletMap {
} }
} as any); } as any);
L.control.addMarker = function (opts) { L.control.addMarker = (opts) => {
return new L.Control.AddMarker(opts); return new L.Control.AddMarker(opts);
} }
L.control.addMarker({ position: 'topright' }).addTo(this.map); L.control.addMarker({ position: 'topright' }).addTo(this.map);
} }
/*inited() {/// !!!!
return !!this.map;
}*/
public setMap(map: L.Map) { public setMap(map: L.Map) {
this.map = map; this.map = map;
if (this.options.useDefaultCenterPosition) { if (this.options.useDefaultCenterPosition) {
@ -117,10 +113,6 @@ export default abstract class LeafletMap {
} }
getContainer() {
return this.map;
}
createLatLng(lat: number, lng: number): L.LatLng { createLatLng(lat: number, lng: number): L.LatLng {
return L.latLng(lat, lng); return L.latLng(lat, lng);
} }
@ -147,8 +139,13 @@ export default abstract class LeafletMap {
return this.map.getCenter(); return this.map.getCenter();
} }
convertPosition(expression: any): L.LatLng { convertPosition(expression: object): L.LatLng {
return L.latLng(expression[this.options.latKeyName], expression[this.options.lngKeyName]) as L.LatLng; const lat = expression[this.options.latKeyName];
const lng = expression[this.options.lngKeyName];
if (isNaN(lat) || isNaN(lng))
return null;
else
return L.latLng(lat, lng) as L.LatLng;
} }
convertToCustomFormat(position: L.LatLng): object { convertToCustomFormat(position: L.LatLng): object {
@ -161,24 +158,26 @@ export default abstract class LeafletMap {
// Markers // Markers
updateMarkers(markersData) { updateMarkers(markersData) {
markersData.forEach(data => { markersData.forEach(data => {
if (data.rotationAngle) { if (this.convertPosition(data)) {
this.options.icon = L.divIcon({ if (data.rotationAngle) {
html: `<div class="arrow" style="transform: rotate(${data.rotationAngle}deg)"><div>` this.options.icon = L.divIcon({
}) html: `<div class="arrow" style="transform: rotate(${data.rotationAngle}deg)"><div>`
} })
else { }
this.options.icon = null; else {
} this.options.icon = null;
if (this.markers.get(data.aliasName)) { }
this.updateMarker(data.aliasName, data, markersData, this.options as MarkerSettings) if (this.markers.get(data.aliasName)) {
} this.updateMarker(data.aliasName, data, markersData, this.options)
else { }
this.createMarker(data.aliasName, data, markersData, this.options as MarkerSettings); else {
this.createMarker(data.aliasName, data, markersData, this.options as MarkerSettings);
}
} }
}); });
} }
private createMarker(key, data, dataSources, settings: MarkerSettings) { private createMarker(key, data: FormattedData, dataSources, settings: MarkerSettings) {
this.ready$.subscribe(() => { this.ready$.subscribe(() => {
const newMarker = new Marker(this.map, this.convertPosition(data), settings, data, dataSources); const newMarker = new Marker(this.map, this.convertPosition(data), settings, data, dataSources);
this.map.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); this.map.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
@ -219,10 +218,11 @@ export default abstract class LeafletMap {
}) })
} }
createPolyline(data, dataSources, settings) { createPolyline(data: any[], dataSources, settings) {
if (data.length) if (data.length)
this.ready$.subscribe(() => { this.ready$.subscribe(() => {
this.poly = new Polyline(this.map, data.map(data => this.convertPosition(data)), data, dataSources, settings); this.poly = new Polyline(this.map,
data.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds()); const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
if (bounds.isValid()) { if (bounds.isValid()) {
this.map.fitBounds(bounds); this.map.fitBounds(bounds);
@ -237,7 +237,7 @@ export default abstract class LeafletMap {
}); });
} }
// polygon // Polygon
updatePolygons(polyData: Array<Array<any>>) { updatePolygons(polyData: Array<Array<any>>) {
polyData.forEach((data: any) => { polyData.forEach((data: any) => {
@ -268,7 +268,7 @@ export default abstract class LeafletMap {
updatePolygon(data, dataSources, settings) { updatePolygon(data, dataSources, settings) {
this.ready$.subscribe(() => { this.ready$.subscribe(() => {
// this.polygon.updatePolygon(settings, data, dataSources); // this.polygon.updatePolygon(settings, data, dataSources);
}); });
} }
} }

121
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
View File

@ -1,40 +1,43 @@
/// ///
/// Copyright © 2016-2020 The Thingsboard Authors /// Copyright © 2016-2020 The Thingsboard Authors
/// ///
/// Licensed under the Apache License, Version 2.0 (the "License"); /// Licensed under the Apache License; Version 2.0 (the "License");
/// you may not use this file except in compliance with the License. /// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at /// You may obtain a copy of the License at
/// ///
/// http://www.apache.org/licenses/LICENSE-2.0 /// http://www.apache.org/licenses/LICENSE-2.0
/// ///
/// Unless required by applicable law or agreed to in writing, software /// Unless required by applicable law or agreed to in writing; software
/// distributed under the License is distributed on an "AS IS" BASIS, /// distributed under the License is distributed on an "AS IS" BASIS;
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. /// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND; either express or implied.
/// See the License for the specific language governing permissions and /// See the License for the specific language governing permissions and
/// limitations under the License. /// limitations under the License.
/// ///
import { LatLngExpression, LatLngTuple } from 'leaflet'; import { LatLngTuple } from 'leaflet';
export interface MapOptions { export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
export type MapSettings = {
polygonKeyName: any; polygonKeyName: any;
draggebleMarker: any; draggebleMarker: any;
initCallback?: Function, initCallback?: () => any;
defaultZoomLevel?: number, defaultZoomLevel?: number;
dontFitMapBounds?: boolean, dontFitMapBounds?: boolean;
disableScrollZooming?: boolean, disableScrollZooming?: boolean;
minZoomLevel?: number, minZoomLevel?: number;
latKeyName?: string, latKeyName?: string;
lngKeyName?: string, lngKeyName?: string;
xPosKeyName?: string, xPosKeyName?: string;
yPosKeyName?: string, yPosKeyName?: string;
mapProvider: MapProviders, mapProvider: MapProviders;
mapUrl?: string; mapUrl?: string;
credentials?: any, // declare credentials format credentials?: any; // declare credentials format
defaultCenterPosition?: LatLngTuple, defaultCenterPosition?: LatLngTuple;
markerClusteringSetting?, markerClusteringSetting?;
useDefaultCenterPosition?: boolean, useDefaultCenterPosition?: boolean;
gmDefaultMapType?: string, gmDefaultMapType?: string;
useLabelFunction: string; useLabelFunction: string;
icon?: any; icon?: any;
} }
@ -47,15 +50,73 @@ export enum MapProviders {
tencent = 'tencent-map' tencent = 'tencent-map'
} }
export interface MarkerSettings extends MapOptions { export type MarkerSettings = {
tooltipPattern?: any; tooltipPattern?: any;
icon?: any; icon?: any;
showLabel?: boolean, showLabel?: boolean;
draggable?: boolean, label: string;
showTooltip?: boolean, labelColor: string;
color?: string, labelText: string;
useLabelFunction: boolean;
draggable?: boolean;
showTooltip?: boolean;
color?: string;
autocloseTooltip: boolean;
displayTooltipAction: string;
currentImage?: string; currentImage?: string;
useMarkerImageFunction?: boolean, useMarkerImageFunction?: boolean;
markerImages?: string[], markerImages?: string[];
markerImageFunction?: Function;
} labelFunction: GenericFunction;
markerImageFunction?: MarkerImageFunction;
}
export interface FormattedData {
aliasName: string;
entityName: string;
$datasource: string;
dsIndex: number;
deviceType: string
}
export type PolygonSettings = {
showPolygon: boolean;
showTooltip: any;
polygonStrokeOpacity: number;
polygonOpacity: number;
polygonStrokeWeight: number;
polygonStrokeColor: string;
polygonColor: string;
autocloseTooltip: boolean;
displayTooltipAction: string;
}
export type PolylineSettings = {
usePolylineDecorator: any;
autocloseTooltip: boolean;
displayTooltipAction: string;
useColorFunction: any;
color: string;
useStrokeOpacityFunction: any;
strokeOpacity: number;
useStrokeWeightFunction: any;
strokeWeight: number;
decoratorOffset: string | number;
endDecoratorOffset: string | number;
decoratorRepeat: string | number;
decoratorSymbol: any;
decoratorSymbolSize: any;
useDecoratorCustomColor: any;
decoratorCustomColor: any;
colorFunction(colorFunction: any, arg1: any[]): string;
strokeOpacityFunction(strokeOpacityFunction: any, arg1: any[]): number;
strokeWeightFunction(strokeWeightFunction: any, arg1: any[]): number;
}
export interface HistorySelectSettings {
buttonColor: string;
}
export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolygonSettings;

4
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { MapProviders, MapOptions } from './map-models'; import { MapProviders, MapSettings, MarkerSettings, PolygonSettings, UnitedMapSettings } from './map-models';
import LeafletMap from './leaflet-map'; import LeafletMap from './leaflet-map';
import { import {
openstreetMapSettingsSchema, openstreetMapSettingsSchema,
@ -63,7 +63,7 @@ export class MapWidgetController implements MapWidgetInterface {
provider: MapProviders; provider: MapProviders;
schema; schema;
data; data;
settings; settings:UnitedMapSettings;
public static dataKeySettingsSchema(): Object { public static dataKeySettingsSchema(): Object {
return {}; return {};

7
ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
View File

@ -16,12 +16,13 @@
import L from 'leaflet'; import L from 'leaflet';
import _ from 'lodash'; import _ from 'lodash';
import { MarkerSettings, PolylineSettings, PolygonSettings } from './map-models';
export function createTooltip(target: L.Layer, settings): L.Popup { export function createTooltip(target: L.Layer, settings: MarkerSettings | PolylineSettings | PolygonSettings): L.Popup {
const popup = L.popup(); const popup = L.popup();
popup.setContent(''); popup.setContent('');
target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false }); target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false });
if (settings.displayTooltipAction == 'hover') { if (settings.displayTooltipAction === 'hover') {
target.off('click'); target.off('click');
target.on('mouseover', function () { target.on('mouseover', function () {
this.openPopup(); this.openPopup();
@ -40,6 +41,6 @@ export function getRatio(firsMoment: number, secondMoment: number, intermediateM
export function findAngle(startPoint, endPoint) { export function findAngle(startPoint, endPoint) {
let angle = -Math.atan2(endPoint.latitude - startPoint.latitude, endPoint.longitude - startPoint.longitude); let angle = -Math.atan2(endPoint.latitude - startPoint.latitude, endPoint.longitude - startPoint.longitude);
angle = angle * 180 / Math.PI; angle = angle * 180 / Math.PI;
return parseInt(angle.toFixed(2)); return parseInt(angle.toFixed(2), 10);
} }

23
ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
View File

@ -15,23 +15,20 @@
/// ///
import L from 'leaflet'; import L from 'leaflet';
import { MarkerSettings } from './map-models'; import { MarkerSettings, FormattedData } from './map-models';
import { aspectCache, safeExecute, parseTemplate } from '@app/core/utils'; import { aspectCache, safeExecute, parseTemplate } from '@app/core/utils';
import { createTooltip } from './maps-utils'; import { createTooltip } from './maps-utils';
export class Marker { export class Marker {
leafletMarker: L.Marker; leafletMarker: L.Marker;
tooltipOffset: [number, number];
tooltipOffset; tooltip: L.Popup;
tooltip; location: L.LatLngExpression;
location; data: FormattedData;
data; dataSources: FormattedData[];
dataSources;
constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data?, dataSources?, onClickListener?, onDragendListener?) { constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data?, dataSources?, onClickListener?, onDragendListener?) {
// this.map = map;
this.location = location;
this.setDataSources(data, dataSources); this.setDataSources(data, dataSources);
this.leafletMarker = L.marker(location, { this.leafletMarker = L.marker(location, {
draggable: settings.draggable draggable: settings.draggable
@ -58,12 +55,12 @@ export class Marker {
} }
} }
setDataSources(data, dataSources) { setDataSources(data: FormattedData, dataSources: FormattedData[]) {
this.data = data; this.data = data;
this.dataSources = dataSources; this.dataSources = dataSources;
} }
updateMarkerTooltip(data) { updateMarkerTooltip(data: FormattedData) {
this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data)); this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data));
} }
@ -71,7 +68,7 @@ export class Marker {
this.leafletMarker.setLatLng(position); this.leafletMarker.setLatLng(position);
} }
updateMarkerLabel(settings) { updateMarkerLabel(settings: MarkerSettings) {
this.leafletMarker.unbindTooltip(); this.leafletMarker.unbindTooltip();
if (settings.showLabel) { if (settings.showLabel) {
@ -90,7 +87,7 @@ export class Marker {
}); });
} }
updateMarkerIcon(settings) { updateMarkerIcon(settings: MarkerSettings) {
this.createMarkerIcon((iconInfo) => { this.createMarkerIcon((iconInfo) => {
this.leafletMarker.setIcon(iconInfo.icon); this.leafletMarker.setIcon(iconInfo.icon);
this.tooltipOffset = [0, -iconInfo.size[1] + 10]; this.tooltipOffset = [0, -iconInfo.size[1] + 10];

19
ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
View File

@ -14,15 +14,16 @@
/// limitations under the License. /// limitations under the License.
/// ///
import L from 'leaflet'; import L, { LatLngExpression } from 'leaflet';
import { createTooltip } from './maps-utils'; import { createTooltip } from './maps-utils';
import { PolygonSettings } from './map-models';
export class Polygon { export class Polygon {
leafletPoly: L.Polygon; leafletPoly: L.Polygon;
tooltip; tooltip;
constructor(public map, coordinates, dataSources, settings, onClickListener?) { constructor(public map, coordinates, dataSources, settings: PolygonSettings, onClickListener?) {
this.leafletPoly = L.polygon(coordinates, { this.leafletPoly = L.polygon(coordinates, {
fill: true, fill: true,
fillColor: settings.polygonColor, fillColor: settings.polygonColor,
@ -33,7 +34,7 @@ export class Polygon {
}).addTo(this.map); }).addTo(this.map);
if (settings.showTooltip) { if (settings.showTooltip) {
this.tooltip = createTooltip(this.leafletPoly, settings); this.tooltip = createTooltip(this.leafletPoly, settings);
} }
if (onClickListener) { if (onClickListener) {
this.leafletPoly.on('click', onClickListener); this.leafletPoly.on('click', onClickListener);
@ -44,11 +45,13 @@ export class Polygon {
this.map.removeLayer(this.leafletPoly); this.map.removeLayer(this.leafletPoly);
} }
updatePolygonColor(settings, color) { updatePolygonColor(settings) {
const style = { console.log('Polygon -> updatePolygonColor -> settings', settings)
const style: L.PathOptions = {
fill: true, fill: true,
fillColor: color, fillColor: settings.color,
color, color: settings.color,
weight: settings.polygonStrokeWeight, weight: settings.polygonStrokeWeight,
fillOpacity: settings.polygonOpacity, fillOpacity: settings.polygonOpacity,
opacity: settings.polygonStrokeOpacity opacity: settings.polygonStrokeOpacity
@ -60,7 +63,7 @@ export class Polygon {
return this.leafletPoly.getLatLngs(); return this.leafletPoly.getLatLngs();
} }
setPolygonLatLngs(latLngs) { setPolygonLatLngs(latLngs: LatLngExpression[]) {
this.leafletPoly.setLatLngs(latLngs); this.leafletPoly.setLatLngs(latLngs);
this.leafletPoly.redraw(); this.leafletPoly.redraw();
} }

61
ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts
View File

@ -18,51 +18,62 @@ import L, { PolylineDecoratorOptions } from 'leaflet';
import 'leaflet-polylinedecorator'; import 'leaflet-polylinedecorator';
import { safeExecute } from '@app/core/utils'; import { safeExecute } from '@app/core/utils';
import { PolylineSettings, PolygonSettings } from './map-models';
export class Polyline { export class Polyline {
leafletPoly: L.Polyline; leafletPoly: L.Polyline;
polylineDecorator: L.PolylineDecorator;
dataSources; dataSources;
data; data;
constructor(private map: L.Map, locations, data, dataSources, settings) { constructor(private map: L.Map, locations, data, dataSources, settings: PolylineSettings) {
this.dataSources = dataSources; this.dataSources = dataSources;
this.data = data; this.data = data;
this.leafletPoly = L.polyline(locations, this.leafletPoly = L.polyline(locations,
this.getPolyStyle(settings, data, dataSources) this.getPolyStyle(settings)
).addTo(this.map); ).addTo(this.map);
if (settings.usePolylineDecorator) { if (settings.usePolylineDecorator) {
L.polylineDecorator(this.leafletPoly, { this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map);
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, data, dataSources).color,
stroke: true
}
})
}
],
interactive: false,
} as PolylineDecoratorOptions).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
}
})
}
],
interactive: false,
} as PolylineDecoratorOptions
}
updatePolyline(settings, data, dataSources) { updatePolyline(settings, data, dataSources) {
this.leafletPoly.setStyle(this.getPolyStyle(settings, data, dataSources)); this.leafletPoly.setStyle(this.getPolyStyle(settings));
this.setPolylineLatLngs(data);
this.polylineDecorator.setPaths(this.leafletPoly);
} }
getPolyStyle(settings, data, dataSources): L.PolylineOptions { getPolyStyle(settings: PolylineSettings): L.PolylineOptions {
return { return {
color: settings.useColorFunction ? safeExecute(settings.colorFunction, [data, dataSources, data[0]?.dsIndex]) : settings.color, color: settings.useColorFunction ?
opacity: settings.useStrokeOpacityFunction ? safeExecute(settings.strokeOpacityFunction, [data, dataSources, data[0]?.dsIndex]) : settings.strokeOpacity, safeExecute(settings.colorFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.color,
weight: settings.useStrokeWeightFunction ? safeExecute(settings.strokeWeightFunction, [data, dataSources, data[0]?.dsIndex]) : settings.strokeWeight, opacity: settings.useStrokeOpacityFunction ?
safeExecute(settings.strokeOpacityFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.strokeOpacity,
weight: settings.useStrokeWeightFunction ?
safeExecute(settings.strokeWeightFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.strokeWeight,
} }
} }

4
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
View File

@ -17,14 +17,14 @@
import L from 'leaflet'; import L from 'leaflet';
import LeafletMap from '../leaflet-map'; import LeafletMap from '../leaflet-map';
import { MapOptions } from '../map-models'; import { MapSettings, UnitedMapSettings } from '../map-models';
import 'leaflet.gridlayer.googlemutant'; import 'leaflet.gridlayer.googlemutant';
let googleLoaded = false; let googleLoaded = false;
export class GoogleMap extends LeafletMap { export class GoogleMap extends LeafletMap {
constructor($container, options: MapOptions) { constructor($container, options: UnitedMapSettings) {
super($container, options); super($container, options);
this.loadGoogle(() => { this.loadGoogle(() => {

5
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts
View File

@ -16,11 +16,10 @@
import L from 'leaflet'; import L from 'leaflet';
import LeafletMap from '../leaflet-map'; import LeafletMap from '../leaflet-map';
import { MapOptions } from '../map-models'; import { MapSettings, UnitedMapSettings } from '../map-models';
export class HEREMap extends LeafletMap { export class HEREMap extends LeafletMap {
constructor($container, options: MapOptions) { constructor($container, options: UnitedMapSettings) {
console.log('HEREMap -> constructor -> options', options)
const defaultCredentials = const defaultCredentials =
{ {
app_id: 'AhM6TzD9ThyK78CT3ptx', app_id: 'AhM6TzD9ThyK78CT3ptx',

4
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
View File

@ -16,7 +16,7 @@
import L from 'leaflet'; import L from 'leaflet';
import LeafletMap from '../leaflet-map'; import LeafletMap from '../leaflet-map';
import { MapOptions } from '../map-models'; import { MapSettings, UnitedMapSettings } from '../map-models';
import { aspectCache } from '@app/core/utils'; import { aspectCache } from '@app/core/utils';
const maxZoom = 4;// ? const maxZoom = 4;// ?
@ -28,7 +28,7 @@ export class ImageMap extends LeafletMap {
width = 0; width = 0;
height = 0; height = 0;
constructor(private $container: HTMLElement, options: MapOptions) { constructor(private $container: HTMLElement, options: UnitedMapSettings) {
super($container, options); super($container, options);
aspectCache(options.mapUrl).subscribe(aspect => { aspectCache(options.mapUrl).subscribe(aspect => {
this.aspect = aspect; this.aspect = aspect;

4
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
View File

@ -16,10 +16,10 @@
import L from 'leaflet'; import L from 'leaflet';
import LeafletMap from '../leaflet-map'; import LeafletMap from '../leaflet-map';
import { MapOptions } from '../map-models'; import { MapSettings, UnitedMapSettings } from '../map-models';
export class OpenStreetMap extends LeafletMap { export class OpenStreetMap extends LeafletMap {
constructor($container, options: MapOptions) { constructor($container, options: UnitedMapSettings) {
super($container, options); super($container, options);
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
const tileLayer = (L.tileLayer as any).provider('OpenStreetMap.Mapnik'); const tileLayer = (L.tileLayer as any).provider('OpenStreetMap.Mapnik');

4
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts
View File

@ -17,10 +17,10 @@
import L from 'leaflet'; import L from 'leaflet';
import LeafletMap from '../leaflet-map'; import LeafletMap from '../leaflet-map';
import { MapOptions } from '../map-models'; import { MapSettings, UnitedMapSettings } from '../map-models';
export class TencentMap extends LeafletMap { export class TencentMap extends LeafletMap {
constructor($container, options: MapOptions) { constructor($container, options: UnitedMapSettings) {
super($container, options); super($container, options);
const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0'; const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0';
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);

7
ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
View File

@ -97,7 +97,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
timeUpdated(time: number) { timeUpdated(time: number) {
const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]); const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]);
this.activeTrip = currentPosition[0]; this.activeTrip = currentPosition[0];
console.log("TripAnimationComponent -> timeUpdated -> this.interpolatedData", this.interpolatedData)
if (this.settings.showPolygon) { if (this.settings.showPolygon) {
this.mapWidget.map.updatePolygons(this.interpolatedData); this.mapWidget.map.updatePolygons(this.interpolatedData);
} }
@ -120,11 +119,11 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
} }
showHideTooltip() { showHideTooltip() {
const tooltipText: string = this.settings.useTooltipFunction ? safeExecute(this.settings.tooolTipFunction, [this.activeTrip, this.historicalData, 0]) const tooltipText: string = this.settings.useTooltipFunction ?
safeExecute(this.settings.tooolTipFunction, [this.activeTrip, this.historicalData, 0])
: this.settings.tooltipPattern; : this.settings.tooltipPattern;
this.mainTooltip = this.sanitizer.sanitize(SecurityContext.HTML, parseTemplate(tooltipText, this.activeTrip)) this.mainTooltip = this.sanitizer.sanitize(SecurityContext.HTML, parseTemplate(tooltipText, this.activeTrip))
console.log("TripAnimationComponent -> showHideTooltip -> this.mainTooltip", this.mainTooltip)
this.visibleTooltip = !this.visibleTooltip; this.visibleTooltip = !this.visibleTooltip;
} }
@ -132,7 +131,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
const result = {}; const result = {};
for (let i = 1, j = 0; i < originData.length, j < interpolatedIntervals.length;) { for (let i = 1, j = 0; i < originData.length && j < interpolatedIntervals.length;) {
const currentTime = interpolatedIntervals[j]; const currentTime = interpolatedIntervals[j];
while (originData[i].time < currentTime) i++; while (originData[i].time < currentTime) i++;
const before = originData[i - 1]; const before = originData[i - 1];

15
ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.ts
View File

@ -17,6 +17,7 @@
import { Component, OnInit, OnChanges, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core'; import { Component, OnInit, OnChanges, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { interval, Subscription, Subscriber, SubscriptionLike, Observer } from 'rxjs'; import { interval, Subscription, Subscriber, SubscriptionLike, Observer } from 'rxjs';
import { filter, tap } from 'rxjs/operators'; import { filter, tap } from 'rxjs/operators';
import { HistorySelectSettings } from '@app/modules/home/components/widget/lib/maps/map-models';
@Component({ @Component({
selector: 'tb-history-selector', selector: 'tb-history-selector',
@ -25,10 +26,10 @@ import { filter, tap } from 'rxjs/operators';
}) })
export class HistorySelectorComponent implements OnInit, OnChanges { export class HistorySelectorComponent implements OnInit, OnChanges {
@Input() settings @Input() settings: HistorySelectSettings
@Input() intervals = []; @Input() intervals = [];
@Output() onTimeUpdated: EventEmitter<number> = new EventEmitter(); @Output() timeUpdated: EventEmitter<number> = new EventEmitter();
animationTime; animationTime;
minTimeIndex = 0; minTimeIndex = 0;
@ -58,7 +59,7 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
tap(() => this.index++)).subscribe(() => { tap(() => this.index++)).subscribe(() => {
if (this.index < this.maxTimeIndex) { if (this.index < this.maxTimeIndex) {
this.cd.detectChanges(); this.cd.detectChanges();
this.onTimeUpdated.emit(this.intervals[this.index]); this.timeUpdated.emit(this.intervals[this.index]);
} }
else { else {
this.interval.complete(); this.interval.complete();
@ -70,12 +71,12 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
this.playing = false; this.playing = false;
this.interval = null; this.interval = null;
this.cd.detectChanges(); this.cd.detectChanges();
}); });
} }
reeneble() { reeneble() {
if (this.playing) { if (this.playing) {
let position = this.index; const position = this.index;
this.interval.complete(); this.interval.complete();
this.index = position; this.index = position;
this.play(); this.play();
@ -85,7 +86,7 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
pause() { pause() {
this.playing = false; this.playing = false;
this.cd.detectChanges(); this.cd.detectChanges();
this.onTimeUpdated.emit(this.intervals[this.index]); this.timeUpdated.emit(this.intervals[this.index]);
} }
moveNext() { moveNext() {
@ -113,6 +114,6 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
} }
changeIndex() { changeIndex() {
this.onTimeUpdated.emit(this.intervals[this.index]); this.timeUpdated.emit(this.intervals[this.index]);
} }
} }

Write Preview
Loading…
Cancel
Save