From 7f53d531639967a18bbe6a1d298eb0e8d95cd9b4 Mon Sep 17 00:00:00 2001 From: Vladyslav Date: Fri, 8 May 2020 15:50:13 +0300 Subject: [PATCH] [3.0] Fixed polygon functionality (#2747) * Add default setting and title for group * Fix polygon: updateColor, functions tooltip and color polygon, update coordinate polygon * Improvement code * Refactoring code --- .../components/widget/lib/maps/leaflet-map.ts | 23 +++++----- .../components/widget/lib/maps/map-widget2.ts | 3 +- .../components/widget/lib/maps/polygon.ts | 45 +++++++++++-------- .../components/widget/lib/maps/schemes.ts | 13 +++--- 4 files changed, 47 insertions(+), 37 deletions(-) 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 982c29105d..40e3948ae3 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 @@ -14,7 +14,7 @@ /// 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.markercluster/dist/leaflet.markercluster'; @@ -32,8 +32,7 @@ import { BehaviorSubject, Observable } from 'rxjs'; import { filter } from 'rxjs/operators'; import { Polyline } from './polyline'; import { Polygon } from './polygon'; -import { DatasourceData } from '@app/shared/models/widget.models'; -import { safeExecute, createTooltip } from '@home/components/widget/lib/maps/maps-utils'; +import { createTooltip, safeExecute } from '@home/components/widget/lib/maps/maps-utils'; export default abstract class LeafletMap { @@ -379,13 +378,13 @@ export default abstract class LeafletMap { // Polygon - updatePolygons(polyData: DatasourceData[]) { - polyData.forEach((data: DatasourceData) => { - if (data.data.length && data.dataKey.name === this.options.polygonKeyName) { - if (typeof (data?.data[0][1]) === 'string') { - data.data = JSON.parse(data.data[0][1]) as LatLngTuple[]; + updatePolygons(polyData: FormattedData[]) { + polyData.forEach((data: FormattedData) => { + if (data.hasOwnProperty(this.options.polygonKeyName)) { + if (typeof (data[this.options.polygonKeyName]) === 'string') { + 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); } 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(() => { const polygon = new Polygon(this.map, polyData, dataSources, settings); const bounds = polygon.leafletPoly.getBounds(); 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(() => { const poly = this.polygons.get(polyData.datasource.entityName); poly.updatePolygon(polyData.data, dataSources, settings); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts index fb3e6662f3..aaaf6875c1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts @@ -217,6 +217,7 @@ export class MapWidgetController implements MapWidgetInterface { tooltipFunction: parseFunction(settings.tooltipFunction, functionParams), colorFunction: parseFunction(settings.colorFunction, functionParams), polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), + polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams), markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), labelColor: this.ctx.widgetConfig.color, polygonKeyName: settings.polKeyName ? settings.polKeyName : settings.polygonKeyName, @@ -236,7 +237,7 @@ export class MapWidgetController implements MapWidgetInterface { if (this.drawRoutes) this.map.updatePolylines(parseArray(this.data)); if (this.settings.showPolygon) { - this.map.updatePolygons(this.data); + this.map.updatePolygons(parseData(this.data)); } if (this.settings.draggableMarker) { this.map.setDataSources(parseData(this.data)); 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 6954d122c2..9e169f5b8c 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 @@ -16,8 +16,7 @@ import L, { LatLngExpression, LatLngTuple, LeafletMouseEvent } from 'leaflet'; import { createTooltip, parseWithTranslation, safeExecute } from './maps-utils'; -import { PolygonSettings } from './map-models'; -import { DatasourceData } from '@app/shared/models/widget.models'; +import { FormattedData, PolygonSettings } from './map-models'; export class Polygon { @@ -26,19 +25,22 @@ export class Polygon { data; dataSources; - constructor(public map, polyData: DatasourceData, dataSources, private settings: PolygonSettings) { - this.leafletPoly = L.polygon(polyData.data, { - fill: true, - fillColor: settings.polygonColor, - color: settings.polygonStrokeColor, - weight: settings.polygonStrokeWeight, - fillOpacity: settings.polygonOpacity, - opacity: settings.polygonStrokeOpacity - }).addTo(this.map); + constructor(public map, polyData: FormattedData, dataSources, private settings: PolygonSettings) { this.dataSources = dataSources; this.data = polyData; + const polygonColor = this.getPolygonColor(settings); + + this.leafletPoly = L.polygon(polyData[this.settings.polygonKeyName], { + fill: true, + fillColor: polygonColor, + color: settings.polygonStrokeColor, + weight: settings.polygonStrokeWeight, + fillOpacity: settings.polygonOpacity, + opacity: settings.polygonStrokeOpacity + }).addTo(this.map); + if (settings.showPolygonTooltip) { - this.tooltip = createTooltip(this.leafletPoly, settings, polyData.datasource); + this.tooltip = createTooltip(this.leafletPoly, settings, polyData.$datasource); this.updateTooltip(polyData); } if (settings.polygonClick) { @@ -52,17 +54,17 @@ export class Polygon { } } - updateTooltip(data: DatasourceData) { + updateTooltip(data: FormattedData) { const pattern = this.settings.usePolygonTooltipFunction ? safeExecute(this.settings.polygonTooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.polygonTooltipPattern; 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.dataSources = dataSources; - this.leafletPoly.setLatLngs(data); + this.leafletPoly.setLatLngs(data[this.settings.polygonKeyName]); if (settings.showPolygonTooltip) this.updateTooltip(this.data); this.updatePolygonColor(settings); @@ -73,11 +75,10 @@ export class Polygon { } updatePolygonColor(settings: PolygonSettings) { - const color = settings.usePolygonColorFunction ? - safeExecute(settings.polygonColorFunction, [this.data, this.dataSources, this.data.dsIndex]) : settings.polygonColor; + const polygonColor = this.getPolygonColor(settings); const style: L.PathOptions = { fill: true, - fillColor: color, + fillColor: polygonColor, color: settings.polygonStrokeColor, weight: settings.polygonStrokeWeight, fillOpacity: settings.polygonOpacity, @@ -94,4 +95,12 @@ export class Polygon { this.leafletPoly.setLatLngs(latLngs); 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; + } + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts index 4f8808e3e4..411f55706e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts @@ -22,7 +22,8 @@ export const googleMapSettingsSchema = properties: { gmApiKey: { title: 'Google Maps API Key', - type: 'string' + type: 'string', + default: 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q' }, gmDefaultMapType: { title: 'Default map type', @@ -30,8 +31,7 @@ export const googleMapSettingsSchema = default: 'roadmap' } }, - required: [ - ] + required: [] }, form: [ 'gmApiKey', @@ -69,7 +69,8 @@ export const tencentMapSettingsSchema = properties: { tmApiKey: { title: 'Tencent Maps API Key', - type: 'string' + type: 'string', + default: '84d6d83e0e51e481e50454ccbe8986b' }, tmDefaultMapType: { title: 'Default map type', @@ -77,8 +78,7 @@ export const tencentMapSettingsSchema = default: 'roadmap' } }, - required: [ - ] + required: [] }, form: [ 'tmApiKey', @@ -117,6 +117,7 @@ export const hereMapSettingsSchema = }, credentials: { type: 'object', + title: 'Credentials', properties: { app_id: { title: 'HERE app id',