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

[3.0] Fixed polygon functionality (#2747)

Browse Source 
* Add default setting and title for group

* Fix polygon: updateColor, functions tooltip and color polygon, update coordinate polygon

* Improvement code

* Refactoring code
This commit is contained in:
Vladyslav 2020-05-08 15:50:13 +03:00 committed by GitHub
parent 76300e400e
commit 7f53d53163
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import L, { LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions, FeatureGroup, LayerGroup } from 'leaflet'; import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions } from 'leaflet';
import 'leaflet-providers'; import 'leaflet-providers';
import 'leaflet.markercluster/dist/leaflet.markercluster'; import 'leaflet.markercluster/dist/leaflet.markercluster';
@ -32,8 +32,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
import { filter } from 'rxjs/operators'; import { filter } from 'rxjs/operators';
import { Polyline } from './polyline'; import { Polyline } from './polyline';
import { Polygon } from './polygon'; import { Polygon } from './polygon';
import { DatasourceData } from '@app/shared/models/widget.models'; import { createTooltip, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
import { safeExecute, createTooltip } from '@home/components/widget/lib/maps/maps-utils';
export default abstract class LeafletMap { export default abstract class LeafletMap {
@ -379,13 +378,13 @@ export default abstract class LeafletMap {
// Polygon // Polygon
updatePolygons(polyData: DatasourceData[]) { updatePolygons(polyData: FormattedData[]) {
polyData.forEach((data: DatasourceData) => { polyData.forEach((data: FormattedData) => {
if (data.data.length && data.dataKey.name === this.options.polygonKeyName) { if (data.hasOwnProperty(this.options.polygonKeyName)) {
if (typeof (data?.data[0][1]) === 'string') { if (typeof (data[this.options.polygonKeyName]) === 'string') {
data.data = JSON.parse(data.data[0][1]) as LatLngTuple[]; data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]) as LatLngTuple[];
} }
if (this.polygons.get(data.datasource.entityName)) { if (this.polygons.get(data.$datasource.entityName)) {
this.updatePolygon(data, polyData, this.options); this.updatePolygon(data, polyData, this.options);
} }
else { else {
@ -395,16 +394,16 @@ export default abstract class LeafletMap {
}); });
} }
createPolygon(polyData: DatasourceData, dataSources: DatasourceData[], settings: PolygonSettings) { createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
this.ready$.subscribe(() => { this.ready$.subscribe(() => {
const polygon = new Polygon(this.map, polyData, dataSources, settings); const polygon = new Polygon(this.map, polyData, dataSources, settings);
const bounds = polygon.leafletPoly.getBounds(); const bounds = polygon.leafletPoly.getBounds();
this.fitBounds(bounds); this.fitBounds(bounds);
this.polygons.set(polyData.datasource.entityName, polygon); this.polygons.set(polyData.$datasource.entityName, polygon);
}); });
} }
updatePolygon(polyData: DatasourceData, dataSources: DatasourceData[], settings: PolygonSettings) { updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
this.ready$.subscribe(() => { this.ready$.subscribe(() => {
const poly = this.polygons.get(polyData.datasource.entityName); const poly = this.polygons.get(polyData.datasource.entityName);
poly.updatePolygon(polyData.data, dataSources, settings); poly.updatePolygon(polyData.data, dataSources, settings);

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

@ -217,6 +217,7 @@ export class MapWidgetController implements MapWidgetInterface {
tooltipFunction: parseFunction(settings.tooltipFunction, functionParams), tooltipFunction: parseFunction(settings.tooltipFunction, functionParams),
colorFunction: parseFunction(settings.colorFunction, functionParams), colorFunction: parseFunction(settings.colorFunction, functionParams),
polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams),
polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams),
markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
labelColor: this.ctx.widgetConfig.color, labelColor: this.ctx.widgetConfig.color,
polygonKeyName: settings.polKeyName ? settings.polKeyName : settings.polygonKeyName, polygonKeyName: settings.polKeyName ? settings.polKeyName : settings.polygonKeyName,
@ -236,7 +237,7 @@ export class MapWidgetController implements MapWidgetInterface {
if (this.drawRoutes) if (this.drawRoutes)
this.map.updatePolylines(parseArray(this.data)); this.map.updatePolylines(parseArray(this.data));
if (this.settings.showPolygon) { if (this.settings.showPolygon) {
this.map.updatePolygons(this.data); this.map.updatePolygons(parseData(this.data));
} }
if (this.settings.draggableMarker) { if (this.settings.draggableMarker) {
this.map.setDataSources(parseData(this.data)); this.map.setDataSources(parseData(this.data));

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

@ -16,8 +16,7 @@
import L, { LatLngExpression, LatLngTuple, LeafletMouseEvent } from 'leaflet'; import L, { LatLngExpression, LatLngTuple, LeafletMouseEvent } from 'leaflet';
import { createTooltip, parseWithTranslation, safeExecute } from './maps-utils'; import { createTooltip, parseWithTranslation, safeExecute } from './maps-utils';
import { PolygonSettings } from './map-models'; import { FormattedData, PolygonSettings } from './map-models';
import { DatasourceData } from '@app/shared/models/widget.models';
export class Polygon { export class Polygon {
@ -26,19 +25,22 @@ export class Polygon {
data; data;
dataSources; dataSources;
constructor(public map, polyData: DatasourceData, dataSources, private settings: PolygonSettings) { constructor(public map, polyData: FormattedData, dataSources, private settings: PolygonSettings) {
this.leafletPoly = L.polygon(polyData.data, { this.dataSources = dataSources;
this.data = polyData;
const polygonColor = this.getPolygonColor(settings);
this.leafletPoly = L.polygon(polyData[this.settings.polygonKeyName], {
fill: true, fill: true,
fillColor: settings.polygonColor, fillColor: polygonColor,
color: settings.polygonStrokeColor, color: settings.polygonStrokeColor,
weight: settings.polygonStrokeWeight, weight: settings.polygonStrokeWeight,
fillOpacity: settings.polygonOpacity, fillOpacity: settings.polygonOpacity,
opacity: settings.polygonStrokeOpacity opacity: settings.polygonStrokeOpacity
}).addTo(this.map); }).addTo(this.map);
this.dataSources = dataSources;
this.data = polyData;
if (settings.showPolygonTooltip) { if (settings.showPolygonTooltip) {
this.tooltip = createTooltip(this.leafletPoly, settings, polyData.datasource); this.tooltip = createTooltip(this.leafletPoly, settings, polyData.$datasource);
this.updateTooltip(polyData); this.updateTooltip(polyData);
} }
if (settings.polygonClick) { if (settings.polygonClick) {
@ -52,17 +54,17 @@ export class Polygon {
} }
} }
updateTooltip(data: DatasourceData) { updateTooltip(data: FormattedData) {
const pattern = this.settings.usePolygonTooltipFunction ? const pattern = this.settings.usePolygonTooltipFunction ?
safeExecute(this.settings.polygonTooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : safeExecute(this.settings.polygonTooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) :
this.settings.polygonTooltipPattern; this.settings.polygonTooltipPattern;
this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true)); this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true));
} }
updatePolygon(data: LatLngTuple[], dataSources: DatasourceData[], settings: PolygonSettings) { updatePolygon(data: LatLngTuple[], dataSources: FormattedData[], settings: PolygonSettings) {
this.data = data; this.data = data;
this.dataSources = dataSources; this.dataSources = dataSources;
this.leafletPoly.setLatLngs(data); this.leafletPoly.setLatLngs(data[this.settings.polygonKeyName]);
if (settings.showPolygonTooltip) if (settings.showPolygonTooltip)
this.updateTooltip(this.data); this.updateTooltip(this.data);
this.updatePolygonColor(settings); this.updatePolygonColor(settings);
@ -73,11 +75,10 @@ export class Polygon {
} }
updatePolygonColor(settings: PolygonSettings) { updatePolygonColor(settings: PolygonSettings) {
const color = settings.usePolygonColorFunction ? const polygonColor = this.getPolygonColor(settings);
safeExecute(settings.polygonColorFunction, [this.data, this.dataSources, this.data.dsIndex]) : settings.polygonColor;
const style: L.PathOptions = { const style: L.PathOptions = {
fill: true, fill: true,
fillColor: color, fillColor: polygonColor,
color: settings.polygonStrokeColor, color: settings.polygonStrokeColor,
weight: settings.polygonStrokeWeight, weight: settings.polygonStrokeWeight,
fillOpacity: settings.polygonOpacity, fillOpacity: settings.polygonOpacity,
@ -94,4 +95,12 @@ export class Polygon {
this.leafletPoly.setLatLngs(latLngs); this.leafletPoly.setLatLngs(latLngs);
this.leafletPoly.redraw(); this.leafletPoly.redraw();
} }
private getPolygonColor(settings: PolygonSettings): string | null {
if (settings.usePolygonColorFunction) {
return safeExecute(settings.polygonColorFunction, [this.data, this.dataSources, this.data.dsIndex]);
} else {
return settings.polygonColor;
}
}
} }

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

@ -22,7 +22,8 @@ export const googleMapSettingsSchema =
properties: { properties: {
gmApiKey: { gmApiKey: {
title: 'Google Maps API Key', title: 'Google Maps API Key',
type: 'string' type: 'string',
default: 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q'
}, },
gmDefaultMapType: { gmDefaultMapType: {
title: 'Default map type', title: 'Default map type',
@ -30,8 +31,7 @@ export const googleMapSettingsSchema =
default: 'roadmap' default: 'roadmap'
} }
}, },
required: [ required: []
]
}, },
form: [ form: [
'gmApiKey', 'gmApiKey',
@ -69,7 +69,8 @@ export const tencentMapSettingsSchema =
properties: { properties: {
tmApiKey: { tmApiKey: {
title: 'Tencent Maps API Key', title: 'Tencent Maps API Key',
type: 'string' type: 'string',
default: '84d6d83e0e51e481e50454ccbe8986b'
}, },
tmDefaultMapType: { tmDefaultMapType: {
title: 'Default map type', title: 'Default map type',
@ -77,8 +78,7 @@ export const tencentMapSettingsSchema =
default: 'roadmap' default: 'roadmap'
} }
}, },
required: [ required: []
]
}, },
form: [ form: [
'tmApiKey', 'tmApiKey',
@ -117,6 +117,7 @@ export const hereMapSettingsSchema =
}, },
credentials: { credentials: {
type: 'object', type: 'object',
title: 'Credentials',
properties: { properties: {
app_id: { app_id: {
title: 'HERE app id', title: 'HERE app id',