Showing
5 changed files
with
67 additions
and
10 deletions
... | ... | @@ -224,7 +224,7 @@ function scrollParents(node: Node): Node[] { |
224 | 224 | function hashCode(str) { |
225 | 225 | let hash = 0; |
226 | 226 | let i, char; |
227 | - if (str.length == 0) return hash; | |
227 | + if (str.length === 0) return hash; | |
228 | 228 | for (i = 0; i < str.length; i++) { |
229 | 229 | char = str.charCodeAt(i); |
230 | 230 | hash = ((hash << 5) - hash) + char; | ... | ... |
... | ... | @@ -294,6 +294,9 @@ export default abstract class LeafletMap { |
294 | 294 | } |
295 | 295 | } |
296 | 296 | |
297 | + setImageAlias(alias:Observable<any>){ | |
298 | + } | |
299 | + | |
297 | 300 | // Polyline |
298 | 301 | |
299 | 302 | updatePolylines(polyData: FormattedData[][]) { |
... | ... | @@ -323,7 +326,7 @@ export default abstract class LeafletMap { |
323 | 326 | |
324 | 327 | updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) { |
325 | 328 | this.ready$.subscribe(() => { |
326 | - this.polylines.get(key).updatePolyline(settings, data, dataSources); | |
329 | + this.polylines.get(key).updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources); | |
327 | 330 | }); |
328 | 331 | } |
329 | 332 | ... | ... |
... | ... | @@ -23,6 +23,7 @@ export type MapSettings = { |
23 | 23 | polygonKeyName: any; |
24 | 24 | draggableMarker: boolean; |
25 | 25 | initCallback?: () => any; |
26 | + posFunction: (rigXPos, origYPos) => { x, y }; | |
26 | 27 | defaultZoomLevel?: number; |
27 | 28 | disableScrollZooming?: boolean; |
28 | 29 | minZoomLevel?: number; |
... | ... | @@ -31,6 +32,8 @@ export type MapSettings = { |
31 | 32 | lngKeyName?: string; |
32 | 33 | xPosKeyName?: string; |
33 | 34 | yPosKeyName?: string; |
35 | + imageEntityAlias: string; | |
36 | + imageUrlAttribute: string; | |
34 | 37 | mapProvider: MapProviders; |
35 | 38 | mapProviderHere: string; |
36 | 39 | mapUrl?: string; | ... | ... |
... | ... | @@ -33,12 +33,12 @@ import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.inter |
33 | 33 | import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; |
34 | 34 | import { parseFunction, parseArray, parseData, safeExecute, parseWithTranslation } from '@core/utils'; |
35 | 35 | import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils'; |
36 | -import { forkJoin } from 'rxjs'; | |
36 | +import { forkJoin, of, Observable } from 'rxjs'; | |
37 | 37 | import { WidgetContext } from '@app/modules/home/models/widget-component.models'; |
38 | 38 | import { getDefCenterPosition } from './maps-utils'; |
39 | -import { JsonSettingsSchema, WidgetActionDescriptor } from '@shared/models/widget.models'; | |
39 | +import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType } from '@shared/models/widget.models'; | |
40 | 40 | import { EntityId } from '@shared/models/id/entity-id'; |
41 | -import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; | |
41 | +import { AttributeScope, DataKeyType } from '@shared/models/telemetry/telemetry.models'; | |
42 | 42 | import { AttributeService } from '@core/http/attribute.service'; |
43 | 43 | import { Type } from '@angular/core'; |
44 | 44 | import { TranslateService } from '@ngx-translate/core'; |
... | ... | @@ -48,7 +48,7 @@ import { UtilsService } from '@core/services/utils.service'; |
48 | 48 | export class MapWidgetController implements MapWidgetInterface { |
49 | 49 | |
50 | 50 | constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) { |
51 | - console.log("MapWidgetController -> constructor -> ctx", ctx) | |
51 | + console.log('MapWidgetController -> constructor -> ctx', ctx) | |
52 | 52 | if (this.map) { |
53 | 53 | this.map.map.remove(); |
54 | 54 | delete this.map; |
... | ... | @@ -70,6 +70,7 @@ export class MapWidgetController implements MapWidgetInterface { |
70 | 70 | } |
71 | 71 | parseWithTranslation.setTranslate(this.translate); |
72 | 72 | this.map = new MapClass($element, this.settings); |
73 | + this.map.setImageAlias(this.subscribeForImageAttribute()); | |
73 | 74 | this.map.saveMarkerLocation = this.setMarkerLocation; |
74 | 75 | } |
75 | 76 | |
... | ... | @@ -84,7 +85,7 @@ export class MapWidgetController implements MapWidgetInterface { |
84 | 85 | } |
85 | 86 | |
86 | 87 | public static getProvidersSchema(mapProvider: MapProviders) { |
87 | - console.log("MapWidgetController -> getProvidersSchema -> mapProvider", mapProvider) | |
88 | + console.log('MapWidgetController -> getProvidersSchema -> mapProvider', mapProvider) | |
88 | 89 | mapProviderSchema.schema.properties.provider.default = mapProvider; |
89 | 90 | return mergeSchemes([mapProviderSchema, |
90 | 91 | ...Object.keys(providerSets)?.map( |
... | ... | @@ -227,6 +228,44 @@ export class MapWidgetController implements MapWidgetInterface { |
227 | 228 | this.map.onResize(); |
228 | 229 | } |
229 | 230 | |
231 | + subscribeForImageAttribute() { | |
232 | + const imageEntityAlias = this.settings.imageEntityAlias; | |
233 | + const imageUrlAttribute = this.settings.imageUrlAttribute; | |
234 | + if (!imageEntityAlias || !imageUrlAttribute) { | |
235 | + return of(false); | |
236 | + } | |
237 | + const entityAliasId = this.ctx.aliasController.getEntityAliasId(imageEntityAlias); | |
238 | + if (!entityAliasId) { | |
239 | + return of(false); | |
240 | + } | |
241 | + const datasources = [ | |
242 | + { | |
243 | + type: DatasourceType.entity, | |
244 | + name: imageEntityAlias, | |
245 | + aliasName: imageEntityAlias, | |
246 | + entityAliasId, | |
247 | + dataKeys: [ | |
248 | + { | |
249 | + type: DataKeyType.attribute, | |
250 | + name: imageUrlAttribute, | |
251 | + label: imageUrlAttribute, | |
252 | + settings: {}, | |
253 | + _hash: Math.random() | |
254 | + } | |
255 | + ] | |
256 | + } | |
257 | + ]; | |
258 | + const imageUrlSubscriptionOptions = { | |
259 | + datasources, | |
260 | + useDashboardTimewindow: false, | |
261 | + type: widgetType.latest, | |
262 | + callbacks: { | |
263 | + onDataUpdated: (subscription, apply) => { } | |
264 | + } | |
265 | + }; | |
266 | + return this.ctx.subscriptionApi.createSubscription(imageUrlSubscriptionOptions, true); | |
267 | + } | |
268 | + | |
230 | 269 | onDestroy() { |
231 | 270 | } |
232 | 271 | } | ... | ... |
... | ... | @@ -17,7 +17,9 @@ |
17 | 17 | import L, { LatLngLiteral } from 'leaflet'; |
18 | 18 | import LeafletMap from '../leaflet-map'; |
19 | 19 | import { MapSettings, UnitedMapSettings } from '../map-models'; |
20 | -import { aspectCache } from '@app/core/utils'; | |
20 | +import { aspectCache, parseFunction } from '@app/core/utils'; | |
21 | +import { Observable } from 'rxjs'; | |
22 | +import { skipLast, map, filter, switchMap } from 'rxjs/operators'; | |
21 | 23 | |
22 | 24 | const maxZoom = 4;// ? |
23 | 25 | |
... | ... | @@ -30,6 +32,7 @@ export class ImageMap extends LeafletMap { |
30 | 32 | |
31 | 33 | constructor($container: HTMLElement, options: UnitedMapSettings) { |
32 | 34 | super($container, options); |
35 | + options.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as ((rigXPos, origYPos) => { x, y }); | |
33 | 36 | aspectCache(options.mapUrl).subscribe(aspect => { |
34 | 37 | this.aspect = aspect; |
35 | 38 | this.onResize(); |
... | ... | @@ -38,6 +41,14 @@ export class ImageMap extends LeafletMap { |
38 | 41 | }); |
39 | 42 | } |
40 | 43 | |
44 | + setImageAlias(alias: Observable<any>) { | |
45 | + alias.pipe(filter(result => result), | |
46 | + map(subscription => subscription.data[1])).subscribe(res => { | |
47 | + console.log("ImageMap -> setImageAlias -> res", res) | |
48 | + | |
49 | + }) | |
50 | + } | |
51 | + | |
41 | 52 | updateBounds(updateImage?, lastCenterPos?) { |
42 | 53 | const w = this.width; |
43 | 54 | const h = this.height; |
... | ... | @@ -116,6 +127,7 @@ export class ImageMap extends LeafletMap { |
116 | 127 | } |
117 | 128 | |
118 | 129 | convertPosition(expression): L.LatLng { |
130 | + console.log("ImageMap -> expression", expression) | |
119 | 131 | return this.pointToLatLng( |
120 | 132 | expression[this.options.xPosKeyName] * this.width, |
121 | 133 | expression[this.options.yPosKeyName] * this.height); |
... | ... | @@ -129,10 +141,10 @@ export class ImageMap extends LeafletMap { |
129 | 141 | return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1); |
130 | 142 | } |
131 | 143 | |
132 | - /* convertToCustomFormat(position: L.LatLng): object { | |
144 | + convertToCustomFormat(position: L.LatLng): object { | |
133 | 145 | return { |
134 | 146 | [this.options.xPosKeyName]: (position.lng + 180) / 360, |
135 | 147 | [this.options.yPosKeyName]: (position.lat + 180) / 360 |
136 | 148 | } |
137 | - }*/ | |
149 | + } | |
138 | 150 | } |
\ No newline at end of file | ... | ... |