From 5d33da4b09eb578649081e069bc750d56f996e81 Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Fri, 6 Mar 2020 14:24:35 +0200 Subject: [PATCH] labels support --- .../components/widget/lib/maps/leaflet-map.ts | 23 ++------- .../components/widget/lib/maps/map-models.ts | 4 +- .../components/widget/lib/maps/map-widget2.ts | 11 ++--- .../components/widget/lib/maps/maps-utils.ts | 9 +++- .../components/widget/lib/maps/markers.ts | 48 +++++++++++++++---- .../widget/lib/maps/providers/google-map.ts | 2 +- 6 files changed, 59 insertions(+), 38 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 852ce4b880..397b71fe2e 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 @@ -61,24 +61,8 @@ export default abstract class LeafletMap { } getContainer() { - return /* this.isMarketCluster ? this.markersCluster :*/ this.map; + return this.map; } - /* - fitBounds(bounds, useDefaultZoom) { - if (bounds.isValid()) { - if ((this.dontFitMapBounds || useDefaultZoom) && this.defaultZoomLevel) { - this.map.setZoom(this.defaultZoomLevel, { animate: false }); - this.map.panTo(bounds.getCenter(), { animate: false }); - } else { - this.map.once('zoomend', () => { - if (!this.defaultZoomLevel && this.map.getZoom() > this.minZoomLevel) { - this.map.setZoom(this.minZoomLevel, { animate: false }); - } - }); - this.map.fitBounds(bounds, { padding: [50, 50], animate: false }); - } - } - }*/ createLatLng(lat, lng) { return L.latLng(lat, lng); @@ -161,7 +145,8 @@ export default abstract class LeafletMap { if (!location.equals(marker.location)) { marker.updateMarkerPosition(location); } - marker.updateMarkerIcon(settings, data, dataSources); + marker.setDataSources(data, dataSources); + marker.updateMarkerIcon(settings); } private deleteMarker() { @@ -173,7 +158,7 @@ export default abstract class LeafletMap { updatePolylines(polyData: Array>) { polyData.forEach(data => { if (data.length) { - let dataSource = polyData.map(arr=>arr[0]); + let dataSource = polyData.map(arr => arr[0]); if (this.poly) { this.updatePolyline(data, dataSource, this.options); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts index 8c13220d79..8256c7b275 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts @@ -15,7 +15,9 @@ export interface MapOptions { credentials?: any, // declare credentials format defaultCenterPosition?: LatLngTuple, markerClusteringSetting?, - useDefaultCenterPosition?: boolean + useDefaultCenterPosition?: boolean, + gmDefaultMapType?: string, + useLabelFunction: string; } export enum MapProviders { 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 58c9e6f3e1..9272f96d16 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 @@ -50,7 +50,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { const functionParams = ['data', 'dsData', 'dsIndex']; this.provider = settings.provider ? settings.provider : this.mapProvider; const customOptions = { - mapProvider: this.provider, + provider: this.provider, mapUrl: settings?.mapImageUrl, labelFunction: parseFunction(settings.labelFunction, functionParams), tooltipFunction: parseFunction(settings.tooltipFunction, functionParams), @@ -59,8 +59,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), tooltipPattern: settings.tooltipPattern || "${entityName}

Latitude: ${" + settings.latKeyName + ":7}
Longitude: ${" + settings.lngKeyName + ":7}", - label: settings.label || "${entityName}", - defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0,0], + defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0, 0], currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? { url: settings.markerImage, size: settings.markerImageSize || 34 @@ -82,7 +81,6 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { this.map.onResize();//not work } - resize() { this.map?.invalidateSize(); this.map.onResize(); @@ -239,7 +237,8 @@ const defaultSettings = { latKeyName: 'latitude', lngKeyName: 'longitude', polygonKeyName: 'coordinates', - showLabel: false, + showLabel: true, + label: "${entityName}", showTooltip: false, useDefaultCenterPosition: false, showTooltipAction: "click", @@ -252,7 +251,7 @@ const defaultSettings = { polygonOpacity: 0.5, polygonStrokeOpacity: 1, polygonStrokeWeight: 1, - useLabelFunction: true, + useLabelFunction: false, markerImages: [], strokeWeight: 2, strokeOpacity: 1.0, 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 75b44ac90a..1c4029c1df 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 @@ -34,6 +34,9 @@ export function parseArray(input: any[]): any[] { alliasArray.forEach(el => { obj[el?.dataKey?.label] = el?.data[i][1]; obj[el?.dataKey?.label + '|ts'] = el?.data[0][0]; + if (el?.dataKey?.label == 'type') { + obj['deviceType'] = el?.data[0][1]; + } }); return obj; }) @@ -44,18 +47,22 @@ export function parseData(input: any[]): any[] { return _(input).groupBy(el => el?.datasource?.aliasName).values().value().map((alliasArray, i) => { const obj = { aliasName: alliasArray[0]?.datasource?.aliasName, + entityName: alliasArray[0]?.datasource?.entityName, $datasource: alliasArray[0]?.datasource, dsIndex: i }; alliasArray.forEach(el => { obj[el?.dataKey?.label] = el?.data[0][1]; obj[el?.dataKey?.label + '|ts'] = el?.data[0][0]; + if (el?.dataKey?.label == 'type') { + obj['deviceType'] = el?.data[0][1]; + } }); return obj; }); } -export function safeExecute(func: Function, params = []) { +export function safeExecute(func: Function, params = []) { let res = null; if (func && typeof (func) == "function") { try { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts index e116d4cbfb..649af2b2e9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts @@ -1,5 +1,5 @@ import L from 'leaflet'; -import { createTooltip, safeExecute } from './maps-utils'; +import { createTooltip, safeExecute, parseFunction } from './maps-utils'; import { MarkerSettings } from './map-models'; import { aspectCache } from '@app/core/utils'; @@ -16,13 +16,12 @@ export class Marker { constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data, dataSources, onClickListener?, markerArgs?, onDragendListener?) { //this.map = map; this.location = location; - this.data = data; - this.dataSources = dataSources; + this.setDataSources(data, dataSources) this.leafletMarker = L.marker(location, { draggable: settings.draggable }); - this.createMarkerIcon(dataSources, (iconInfo) => { + this.createMarkerIcon((iconInfo) => { this.leafletMarker.setIcon(iconInfo.icon); if (settings.showLabel) { this.tooltipOffset = [0, -iconInfo.size[1] + 10]; @@ -47,15 +46,45 @@ export class Marker { } + setDataSources(data, dataSources) { + this.data = data; + this.dataSources = dataSources; + } + updateMarkerPosition(position: L.LatLngExpression) { this.leafletMarker.setLatLng(position); } + + updateMarkerLabel(settings) { + + function getText(template, data) { + let res = null; + try { + let variables = ''; + for (let key in data) { + if (!key.includes('|')) + variables += `var ${key} = '${data[key]}';`; + } + res = safeExecute(parseFunction(variables + 'return' + '`' + template + '`')); + } + catch (ex) { + } + return res; + } + + this.leafletMarker.unbindTooltip(); - if (settings.showLabel) + if (settings.showLabel) { + if (settings.useLabelFunction) { + settings.labelText = safeExecute(settings.labelFunction, [this.data, this.dataSources, this.data.dsIndex]) + } + else settings.labelText = getText(settings.label, this.data); + this.leafletMarker.bindTooltip(`
${settings.labelText}
`, { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset }); + } } updateMarkerColor(color) { @@ -64,9 +93,8 @@ export class Marker { }); } - updateMarkerIcon(settings, data, dataSources) { - this.data = data; - this.createMarkerIcon(dataSources, (iconInfo) => { + updateMarkerIcon(settings) { + this.createMarkerIcon((iconInfo) => { this.leafletMarker.setIcon(iconInfo.icon); if (settings.showLabel) { this.tooltipOffset = [0, -iconInfo.size[1] + 10]; @@ -75,9 +103,9 @@ export class Marker { }); } - createMarkerIcon(dataSources, onMarkerIconReady) { + createMarkerIcon(onMarkerIconReady) { const currentImage = this.settings.useMarkerImageFunction ? - safeExecute(this.settings.markerImageFunction, [this.data, this.settings.markerImages, dataSources, this.data.dsIndex]) : this.settings.currentImage; + safeExecute(this.settings.markerImageFunction, [this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage; // var opMap = this; if (currentImage && currentImage.url) { aspectCache(currentImage.url).subscribe( diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts index 949b02cc42..6c5c3e002b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts @@ -14,7 +14,7 @@ export class GoogleMap extends LeafletMap { this.loadGoogle(() => { const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); var roads = (L.gridLayer as any).googleMutant({ - type: 'roadmap' // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid' + type: options?.gmDefaultMapType || 'roadmap' // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid' }).addTo(map); super.setMap(map); }, options.credentials.apiKey);