dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

map fixes

Browse Source
This commit is contained in:
Artem Halushko 2020-04-27 14:46:43 +03:00
parent 852d4ec954
commit 26e5f69b32
10 changed files with 84 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui-ngx/package-lock.json generated
View File

@ -1816,8 +1816,7 @@
"@types/geojson": {
"version": "7946.0.7",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
"dev": true
"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
},
"@types/glob": {
"version": "7.1.1",
@ -1881,11 +1880,18 @@
"version": "1.5.12",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.12.tgz",
"integrity": "sha512-61HRMIng+bWvnnAIqUWLBlrd/TQZc4gU+gN1JL4K47EDtwIrcMEhWgi7PdcpbG1YmpH4F0EfOimkvV82gJIl9w==",
"dev": true,
"requires": {
"@types/geojson": "*"
}
},
"@types/leaflet-markercluster": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@types/leaflet-markercluster/-/leaflet-markercluster-1.0.3.tgz",
"integrity": "sha1-ZBUb5FP2SQ6HUVAEgt65YQZOeCw=",
"requires": {
"@types/leaflet": "*"
}
},
"@types/leaflet-polylinedecorator": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@types/leaflet-polylinedecorator/-/leaflet-polylinedecorator-1.6.0.tgz",
@ -7670,9 +7676,9 @@
"integrity": "sha1-RGf0n5jRv9VpWb2cZwUgPdJgEnc="
},
"leaflet.gridlayer.googlemutant": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.9.0.tgz",
"integrity": "sha512-hkLEHLcdcCaq1OKgUla5ar6fCaUK6yBYIY9HyAclPcMwhnpJTnLmYYPbVJbq3Niz0YiO75gls4A6D6jkBJXpuw=="
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.8.0.tgz",
"integrity": "sha512-Ain+jgDKRhlM6qNDDj2QFJa9vXUqV096N0PmpHO3DoNLS4I7EynTQCJXN+9qY4C51ZpV4Q4CI+apNv5XiP5aUA=="
},
"leaflet.markercluster": {
"version": "1.4.1",

3
ui-ngx/package.json
View File

@ -39,6 +39,7 @@
"@ngx-share/core": "^7.1.4",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",
"@types/leaflet-markercluster": "^1.0.3",
"ace-builds": "^1.4.11",
"angular-gridster2": "^9.1.0",
"angular2-hotkeys": "^2.2.0",
@ -62,7 +63,7 @@
"leaflet-geometryutil": "^0.9.3",
"leaflet-polylinedecorator": "^1.6.0",
"leaflet-providers": "^1.9.1",
"leaflet.gridlayer.googlemutant": "^0.9.0",
"leaflet.gridlayer.googlemutant": "0.8.0",
"leaflet.markercluster": "^1.4.1",
"material-design-icons": "^3.0.1",
"messageformat": "^2.3.0",

36
ui-ngx/src/app/core/utils.ts
View File

@ -525,7 +525,6 @@ export function parseFunction(source: any, params: string[] = ['def']): Function
export function parseTemplate(template: string, data: object, translateFn?: (key: string) => string) {
let res = '';
let variables = '';
try {
if (template.match(/<link-act/g)) {
template = template.replace(/<link-act/g, '<a').replace(/link-act>/g, 'a>').replace(/name=(\'|")(.*?)(\'|")/g, `class='tb-custom-action' id='$2'`);
@ -536,27 +535,26 @@ export function parseTemplate(template: string, data: object, translateFn?: (key
template = template.replace(match, translateFn(match.match(translateRegexp)[1]));
});
}
/*
const expressions = template.match(/\{(.*?)\}/g);
if (expressions) {
const clearMatches = template.match(/\$\{([^}]*?)\}/g);
for (const key in data) {
if (!key.includes('|'))
variables += `var ${key} = '${clearMatches[key] ? padValue(data[key], +clearMatches[key]) : data[key]}';`;
}
template = template.replace(/\:\d+\}/g, '}');
const interpolator = new Interpolator({delimeter: ['${', '}']});
interpolator.parse(template, data);
res = safeExecute(parseFunction(variables + ' return' + '`' + template + '`'));
const formatted = template.match(/\$\{([^}]*)\:\d*\}/g);
if (formatted)
formatted.forEach(value => {
const [variable, digits] = value.replace('${', '').replace('}', '').split(':');
data[variable] = padValue(data[variable], +digits)
template = template.replace(value, '${' + variable + '}');
});
const variables = template.match(/\$\{.*?\}/g);
if (variables) {
variables.forEach(variable => {
variable = variable.replace('${', '').replace('}', '');
if (!data[variable])
data[variable] = '';
})
}
else res = template;*/
const compiled = _.template(template, {
interpolate: /${([\s\S]+?)}/g
});
res = compiled(data)
const compiled = _.template(template);
res = compiled(data);
}
catch (ex) {
console.log(ex, variables, template)
console.log(ex, template)
}
return res;
}

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

@ -14,12 +14,10 @@
/// limitations under the License.
///
import L, { LatLngTuple, LatLngBounds, Point } from 'leaflet';
import L, { LatLngTuple, LatLngBounds, Point, MarkerClusterGroupOptions, markerClusterGroup} from 'leaflet';
import 'leaflet-providers';
import 'leaflet.markercluster/dist/MarkerCluster.css';
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
import LM from 'leaflet.markercluster/dist/leaflet.markercluster';
import 'leaflet.markercluster/dist/leaflet.markercluster';
import { MapSettings, MarkerSettings, FormattedData, UnitedMapSettings, PolygonSettings, PolylineSettings } from './map-models';
import { Marker } from './markers';
@ -43,7 +41,7 @@ export default abstract class LeafletMap {
bounds: L.LatLngBounds;
newMarker: L.Marker;
datasources: FormattedData[];
markersCluster: LM.markerClusterGroup;
markersCluster;
constructor(public $container: HTMLElement, options: UnitedMapSettings) {
this.options = options;
@ -67,7 +65,7 @@ export default abstract class LeafletMap {
setTimeout(options.initCallback, 0);
}
if (useClusterMarkers) {
const clusteringSettings: LM.MarkerClusterGroupOptions = {
const clusteringSettings: MarkerClusterGroupOptions = {
zoomToBoundsOnClick: zoomOnClick,
showCoverageOnHover,
removeOutsideVisibleBounds,
@ -80,7 +78,7 @@ export default abstract class LeafletMap {
if (maxZoom && maxZoom >= 0 && maxZoom < 19) {
clusteringSettings.disableClusteringAtZoom = Math.floor(maxZoom);
}
this.markersCluster = LM.markerClusterGroup(clusteringSettings);
this.markersCluster = markerClusterGroup(clusteringSettings);
this.ready$.subscribe(map => map.addLayer(this.markersCluster));
}
}
@ -208,7 +206,7 @@ export default abstract class LeafletMap {
});
this.map.fitBounds(bounds, { padding: padding || [50, 50], animate: false });
}
this.bounds = this.bounds.extend(bounds);
this.bounds = bounds;
}
}
@ -259,7 +257,9 @@ export default abstract class LeafletMap {
private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings) {
this.ready$.subscribe(() => {
const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker);
this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()), settings.draggableMarker && this.markers.size > 2);
console.log(this.bounds);
this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()), settings.draggableMarker && this.markers.size < 2);
this.markers.set(key, newMarker);
if (this.options.useClusterMarkers) {
this.markersCluster.addLayer(newMarker.leafletMarker);

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

@ -48,6 +48,7 @@ import { UtilsService } from '@core/services/utils.service';
export class MapWidgetController implements MapWidgetInterface {
constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) {
console.log("MapWidgetController -> constructor -> ctx", ctx)
if (this.map) {
this.map.map.remove();
delete this.map;
@ -83,6 +84,7 @@ export class MapWidgetController implements MapWidgetInterface {
}
public static getProvidersSchema(mapProvider: MapProviders) {
console.log("MapWidgetController -> getProvidersSchema -> mapProvider", mapProvider)
mapProviderSchema.schema.properties.provider.default = mapProvider;
return mergeSchemes([mapProviderSchema,
...Object.keys(providerSets)?.map(
@ -94,8 +96,10 @@ export class MapWidgetController implements MapWidgetInterface {
addToSchema(schema, this.getProvidersSchema(mapProvider));
if (mapProvider !== 'image-map') {
addGroupInfo(schema, 'Map Provider Settings');
addToSchema(schema, mergeSchemes([commonMapSettingsSchema, addCondition(mapPolygonSchema, 'model.showPolygon === true')]));
addToSchema(schema, commonMapSettingsSchema);
addGroupInfo(schema, 'Common Map Settings');
addToSchema(schema, addCondition(mapPolygonSchema, 'model.showPolygon === true'));
addGroupInfo(schema, 'Polygon Settings');
if (drawRoutes) {
addToSchema(schema, routeMapSettingsSchema);
addGroupInfo(schema, 'Route Map Settings');
@ -127,8 +131,10 @@ export class MapWidgetController implements MapWidgetInterface {
}
translate = (key: string, defaultTranslation?: string): string => {
return (this.ctx.$injector.get(UtilsService).customTranslation(key, defaultTranslation || key)
|| this.ctx.$injector.get(TranslateService).instant(key));
if (key)
return (this.ctx.$injector.get(UtilsService).customTranslation(key, defaultTranslation || key)
|| this.ctx.$injector.get(TranslateService).instant(key));
else return '';
}
getDescriptors(name: string): { [name: string]: ($event: Event) => void } {
@ -156,24 +162,25 @@ export class MapWidgetController implements MapWidgetInterface {
}
setMarkerLocation = (e) => {
console.log("setMarkerLocation -> e", e)
const attributeService = this.ctx.$injector.get(AttributeService);
forkJoin(
this.data.filter(data => !!e[data.dataKey.name])
.map(data => {
const entityId: EntityId = {
entityType: data.datasource.entityType,
id: data.datasource.entityId
};
return attributeService.saveEntityAttributes(
entityId,
AttributeScope.SHARED_SCOPE,
[{
key: data.dataKey.name,
value: e[data.dataKey.name]
}]
);
})).subscribe(res => {
});
const entityId: EntityId = {
entityType: e.$datasource.entityType,
id: e.$datasource.entityId
};
const keys = e.$datasource.dataKeys.map(key => {
return {
key: key.name,
value: e[key.name]
}
})
return attributeService.saveEntityAttributes(
entityId,
AttributeScope.SHARED_SCOPE,
keys
).subscribe(res => {
});
}
initSettings(settings: UnitedMapSettings): UnitedMapSettings {
@ -214,8 +221,7 @@ export class MapWidgetController implements MapWidgetInterface {
if (this.settings.draggableMarker) {
this.map.setDataSources(parseData(this.data));
}
else
this.map.updateMarkers(parseData(this.data));
this.map.updateMarkers(parseData(this.data));
}
resize() {

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

@ -17,7 +17,6 @@
import L from 'leaflet';
import _ from 'lodash';
import { MarkerSettings, PolylineSettings, PolygonSettings } from './map-models';
import { parseWithTranslation } from '@app/core/utils';
export function createTooltip(target: L.Layer,
settings: MarkerSettings | PolylineSettings | PolygonSettings,

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

@ -336,11 +336,6 @@ export const commonMapSettingsSchema =
title: 'Color function: f(data, dsData, dsIndex)',
type: 'string'
},
showPolygon: {
title: 'Show polygon',
type: 'boolean',
default: false
},
markerImage: {
title: 'Custom marker image',
type: 'string'
@ -439,8 +434,7 @@ export const commonMapSettingsSchema =
type: 'image'
}
]
},
'showPolygon',
}
]
};
@ -450,6 +444,11 @@ export const mapPolygonSchema =
title: 'Map Polygon Configuration',
type: 'object',
properties: {
showPolygon: {
title: 'Show polygon',
type: 'boolean',
default: false
},
polygonKeyName: {
title: 'Polygon key name',
type: 'string',
@ -491,6 +490,7 @@ export const mapPolygonSchema =
required: []
},
form: [
'showPolygon',
'polygonKeyName',
{
key: 'polygonColor',

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

@ -17,7 +17,7 @@
-->
<div class="trip-animation-widget">
<div class="trip-animation-label-container" *ngIf="settings.showLabel">
{{label }}
{{label}}
</div>
<div class="trip-animation-container" fxLayout="column">
<div class="map" #map></div>

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

@ -100,8 +100,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
timeUpdated(time: number) {
const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]);
this.activeTrip = currentPosition[0];
this.minTime = moment(this.historicalData[0][this.historicalData.length - 1]?.time).format('YYYY-MM-DD HH:mm:ss')
this.maxTime = moment(this.historicalData[0][0]?.time).format('YYYY-MM-DD HH:mm:ss')
this.minTime = moment(this.intervals[this.intervals.length - 1]).format('YYYY-MM-DD HH:mm:ss')
this.maxTime = moment(this.intervals[0]).format('YYYY-MM-DD HH:mm:ss')
this.calcLabel();
this.calcTooltip();
if (this.mapWidget) {

6
ui-ngx/src/tsconfig.app.json
View File

@ -2,7 +2,11 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["node", "jquery", "flot", "tooltipster", "tinycolor2", "js-beautify", "react", "react-dom", "jstree", "raphael", "canvas-gauges"]
"typeRoots": [
"node_modules/@types"
],
"types": ["node", "jquery", "flot", "tooltipster", "tinycolor2", "js-beautify",
"react", "react-dom", "jstree", "raphael", "canvas-gauges", "leaflet", "leaflet-markercluster"]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true