From ed841e0c673354bce993b77001995ad193b37196 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 17 Jul 2020 13:18:13 +0300 Subject: [PATCH] Fixed show polygon on image map widget --- .../components/widget/lib/maps/leaflet-map.ts | 81 +++++++++++-------- .../components/widget/lib/maps/maps-utils.ts | 4 +- .../widget/lib/maps/providers/image-map.ts | 11 +++ 3 files changed, 61 insertions(+), 35 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 c67801d85b..c332ed5765 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,25 +14,32 @@ /// limitations under the License. /// -import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions, MarkerClusterGroup } from 'leaflet'; +import L, { + FeatureGroup, + LatLngBounds, + LatLngTuple, + markerClusterGroup, + MarkerClusterGroup, + MarkerClusterGroupOptions +} from 'leaflet'; import 'leaflet-providers'; import 'leaflet.markercluster/dist/leaflet.markercluster'; import { - FormattedData, - MapSettings, - MarkerSettings, - PolygonSettings, - PolylineSettings, - UnitedMapSettings + FormattedData, + MapSettings, + MarkerSettings, + PolygonSettings, + PolylineSettings, + UnitedMapSettings } from './map-models'; import { Marker } from './markers'; import { BehaviorSubject, Observable, of } from 'rxjs'; import { filter } from 'rxjs/operators'; import { Polyline } from './polyline'; import { Polygon } from './polygon'; -import { createTooltip, parseArray, parseData, safeExecute } from '@home/components/widget/lib/maps/maps-utils'; +import { createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils'; import { WidgetContext } from '@home/models/widget-component.models'; import { DatasourceData } from '@shared/models/widget.models'; @@ -246,6 +253,12 @@ export default abstract class LeafletMap { return L.latLng(lat, lng) as L.LatLng; } + convertPositionPolygon(expression: Array<[number, number]>): L.LatLngExpression[] { + return expression.map((el) => { + return el.length === 2 && !el.some(isNaN) ? el : null + }).filter(el => !!el) + } + convertToCustomFormat(position: L.LatLng): object { return { [this.options.latKeyName]: position.lat % 90, @@ -465,31 +478,33 @@ export default abstract class LeafletMap { // Polygon - updatePolygons(polyData: FormattedData[], updateBounds = true) { - const keys: string[] = []; - polyData.forEach((data: FormattedData) => { - if (data && 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.entityName)) { - this.updatePolygon(data, polyData, this.options, updateBounds); - } else { - this.createPolygon(data, polyData, this.options, updateBounds); - } - keys.push(data.entityName); - } - }); - const toDelete: string[] = []; - this.polygons.forEach((v, mKey) => { - if (!keys.includes(mKey)) { - toDelete.push(mKey); - } - }); - toDelete.forEach((key) => { - this.removePolygon(key); - }); - } + updatePolygons(polyData: FormattedData[], updateBounds = true) { + const keys: string[] = []; + polyData.forEach((data: FormattedData) => { + if (data && data.hasOwnProperty(this.options.polygonKeyName) && data[this.options.polygonKeyName] !== null) { + if (typeof (data[this.options.polygonKeyName]) === 'string') { + data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]); + } + data[this.options.polygonKeyName] = this.convertPositionPolygon(data[this.options.polygonKeyName]); + + if (this.polygons.get(data.entityName)) { + this.updatePolygon(data, polyData, this.options, updateBounds); + } else { + this.createPolygon(data, polyData, this.options, updateBounds); + } + keys.push(data.entityName); + } + }); + const toDelete: string[] = []; + this.polygons.forEach((v, mKey) => { + if (!keys.includes(mKey)) { + toDelete.push(mKey); + } + }); + toDelete.forEach((key) => { + this.removePolygon(key); + }); + } createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) { this.ready$.subscribe(() => { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts index 576e594df6..51fdef7075 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts @@ -249,8 +249,8 @@ export function parseData(input: DatasourceData[]): FormattedData[] { deviceType: null }; entityArray.filter(el => el.data.length).forEach(el => { - obj[el?.dataKey?.label] = el?.data[0][1]; - obj[el?.dataKey?.label + '|ts'] = el?.data[0][0]; + obj[el?.dataKey?.label] = el?.data[0][0] ? el?.data[0][1] : null; + obj[el?.dataKey?.label + '|ts'] = el?.data[0][0] || null; if (el?.dataKey?.label === 'type') { obj.deviceType = el?.data[0][1]; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts index 7d38477f14..9f97aed2ac 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts @@ -215,6 +215,17 @@ export class ImageMap extends LeafletMap { expression.y * this.height); } + convertPositionPolygon(expression: Array<[number, number]>): L.LatLngExpression[] { + return expression.map((el) => { + if (el.length === 2 && !el.some(isNaN)) { + return this.pointToLatLng( + el[0] * this.width, + el[1] * this.height) + } + return null; + }).filter(el => !!el) + } + pointToLatLng(x, y): L.LatLng { return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1); }