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

Fixed show polygon on image map widget

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2020-07-17 13:18:13 +03:00
parent 6b95683307
commit ed841e0c67
3 changed files with 61 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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(() => {

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

@ -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];
}

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

@ -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);
}