|
|
@ -26,11 +26,12 @@ import { |
|
|
markerClusteringSettingsSchema, |
|
|
markerClusteringSettingsSchema, |
|
|
markerClusteringSettingsSchemaLeaflet, |
|
|
markerClusteringSettingsSchemaLeaflet, |
|
|
hereMapSettingsSchema, |
|
|
hereMapSettingsSchema, |
|
|
mapProviderSchema |
|
|
mapProviderSchema, |
|
|
|
|
|
mapPolygonSchema |
|
|
} from './schemes'; |
|
|
} from './schemes'; |
|
|
import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface'; |
|
|
import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface'; |
|
|
import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; |
|
|
import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; |
|
|
import { parseFunction, parseArray, parseData, safeExecute } from '@core/utils'; |
|
|
import { parseFunction, parseArray, parseData, safeExecute, parseWithTranslation } from '@core/utils'; |
|
|
import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils'; |
|
|
import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils'; |
|
|
import { forkJoin } from 'rxjs'; |
|
|
import { forkJoin } from 'rxjs'; |
|
|
import { WidgetContext } from '@app/modules/home/models/widget-component.models'; |
|
|
import { WidgetContext } from '@app/modules/home/models/widget-component.models'; |
|
|
@ -40,12 +41,13 @@ import { EntityId } from '@shared/models/id/entity-id'; |
|
|
import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
|
|
import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
|
|
import { AttributeService } from '@core/http/attribute.service'; |
|
|
import { AttributeService } from '@core/http/attribute.service'; |
|
|
import { Type } from '@angular/core'; |
|
|
import { Type } from '@angular/core'; |
|
|
|
|
|
import { TranslateService } from '@ngx-translate/core'; |
|
|
|
|
|
import { UtilsService } from '@app/core/public-api'; |
|
|
|
|
|
|
|
|
// @dynamic
|
|
|
// @dynamic
|
|
|
export class MapWidgetController implements MapWidgetInterface { |
|
|
export class MapWidgetController implements MapWidgetInterface { |
|
|
|
|
|
|
|
|
constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) { |
|
|
constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) { |
|
|
console.log("MapWidgetController -> constructor -> ctx", ctx) |
|
|
|
|
|
if (this.map) { |
|
|
if (this.map) { |
|
|
this.map.map.remove(); |
|
|
this.map.map.remove(); |
|
|
delete this.map; |
|
|
delete this.map; |
|
|
@ -56,15 +58,16 @@ export class MapWidgetController implements MapWidgetInterface { |
|
|
$element = ctx.$container[0]; |
|
|
$element = ctx.$container[0]; |
|
|
} |
|
|
} |
|
|
this.settings = this.initSettings(ctx.settings); |
|
|
this.settings = this.initSettings(ctx.settings); |
|
|
const descriptors = this.ctx.actionsApi.getActionDescriptors('tooltipAction'); |
|
|
this.settings.tooltipAction = this.getDescriptors('tooltipAction'); |
|
|
this.settings.tooltipActions = {}; |
|
|
this.settings.markerClick = this.getDescriptors('markerClick'); |
|
|
descriptors.forEach(descriptor => { |
|
|
this.settings.polygonClick = this.getDescriptors('polygonClick'); |
|
|
this.settings.tooltipActions[descriptor.name] = ($event) => this.onTooltipClick(descriptor, $event); |
|
|
|
|
|
}, this.settings.tooltipActions); |
|
|
// this.settings.
|
|
|
const MapClass = providerSets[this.provider]?.MapClass; |
|
|
const MapClass = providerSets[this.provider]?.MapClass; |
|
|
if (!MapClass) { |
|
|
if (!MapClass) { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
parseWithTranslation.setTranslate(this.translate); |
|
|
this.map = new MapClass($element, this.settings); |
|
|
this.map = new MapClass($element, this.settings); |
|
|
this.map.saveMarkerLocation = this.setMarkerLocation; |
|
|
this.map.saveMarkerLocation = this.setMarkerLocation; |
|
|
} |
|
|
} |
|
|
@ -74,13 +77,13 @@ export class MapWidgetController implements MapWidgetInterface { |
|
|
schema: JsonSettingsSchema; |
|
|
schema: JsonSettingsSchema; |
|
|
data; |
|
|
data; |
|
|
settings: UnitedMapSettings; |
|
|
settings: UnitedMapSettings; |
|
|
actions: Map<string, Map<string, (widgetContext: WidgetContext) => void>>; |
|
|
|
|
|
|
|
|
|
|
|
public static dataKeySettingsSchema(): object { |
|
|
public static dataKeySettingsSchema(): object { |
|
|
return {}; |
|
|
return {}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public static getProvidersSchema() { |
|
|
public static getProvidersSchema(mapProvider: MapProviders) { |
|
|
|
|
|
mapProviderSchema.schema.properties.provider.default = mapProvider; |
|
|
return mergeSchemes([mapProviderSchema, |
|
|
return mergeSchemes([mapProviderSchema, |
|
|
...Object.values(providerSets)?.map( |
|
|
...Object.values(providerSets)?.map( |
|
|
(setting: IProvider) => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]); |
|
|
(setting: IProvider) => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]); |
|
|
@ -88,18 +91,20 @@ export class MapWidgetController implements MapWidgetInterface { |
|
|
|
|
|
|
|
|
public static settingsSchema(mapProvider: MapProviders, drawRoutes: boolean): JsonSettingsSchema { |
|
|
public static settingsSchema(mapProvider: MapProviders, drawRoutes: boolean): JsonSettingsSchema { |
|
|
const schema = initSchema(); |
|
|
const schema = initSchema(); |
|
|
addToSchema(schema, this.getProvidersSchema()); |
|
|
addToSchema(schema, this.getProvidersSchema(mapProvider)); |
|
|
addGroupInfo(schema, 'Map Provider Settings'); |
|
|
if(mapProvider!=='image-map'){ |
|
|
addToSchema(schema, commonMapSettingsSchema); |
|
|
addGroupInfo(schema, 'Map Provider Settings'); |
|
|
|
|
|
addToSchema(schema, mergeSchemes([commonMapSettingsSchema, addCondition(mapPolygonSchema, 'model.showPolygon === true')])); |
|
|
addGroupInfo(schema, 'Common Map Settings'); |
|
|
addGroupInfo(schema, 'Common Map Settings'); |
|
|
if (drawRoutes) { |
|
|
if (drawRoutes) { |
|
|
addToSchema(schema, routeMapSettingsSchema); |
|
|
addToSchema(schema, routeMapSettingsSchema); |
|
|
addGroupInfo(schema, 'Route Map Settings'); |
|
|
addGroupInfo(schema, 'Route Map Settings'); |
|
|
} else if (mapProvider !== 'image-map') { |
|
|
} else if (mapProvider !== 'image-map') { |
|
|
const clusteringSchema = mergeSchemes([markerClusteringSettingsSchemaLeaflet, markerClusteringSettingsSchema]) |
|
|
const clusteringSchema = mergeSchemes([markerClusteringSettingsSchema, |
|
|
|
|
|
addCondition(markerClusteringSettingsSchemaLeaflet, `model.useClusterMarkers === true`)]) |
|
|
addToSchema(schema, clusteringSchema); |
|
|
addToSchema(schema, clusteringSchema); |
|
|
addGroupInfo(schema, 'Markers Clustering Settings'); |
|
|
addGroupInfo(schema, 'Markers Clustering Settings'); |
|
|
} |
|
|
}} |
|
|
return schema; |
|
|
return schema; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -120,14 +125,28 @@ export class MapWidgetController implements MapWidgetInterface { |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
translate = (key: string, defaultTranslation?: string):string => { |
|
|
|
|
|
return (this.ctx.$injector.get(UtilsService).customTranslation(key, defaultTranslation || key) |
|
|
|
|
|
|| this.ctx.$injector.get(TranslateService).instant(key)); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getDescriptors(name: string): { [name: string]: ($event: Event) => void } { |
|
|
|
|
|
const descriptors = this.ctx.actionsApi.getActionDescriptors(name); |
|
|
|
|
|
const actions = {}; |
|
|
|
|
|
descriptors.forEach(descriptor => { |
|
|
|
|
|
actions[descriptor.name] = ($event: Event) => this.onCustomAction(descriptor, $event); |
|
|
|
|
|
}, actions); |
|
|
|
|
|
return actions; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
onInit() { |
|
|
onInit() { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private onTooltipClick(descriptor: WidgetActionDescriptor, $event: any) { |
|
|
private onCustomAction(descriptor: WidgetActionDescriptor, $event: any) { |
|
|
if ($event) { |
|
|
if ($event & $event.stopPropagation) { |
|
|
$event.stopPropagation(); |
|
|
$event?.stopPropagation(); |
|
|
} |
|
|
} |
|
|
// safeExecute(parseFunction(descriptor.customFunction, ['$event', 'widgetContext']), [$event, this.ctx])
|
|
|
// safeExecute(parseFunction(descriptor.customFunction, ['$event', 'widgetContext']), [$event, this.ctx])
|
|
|
const entityInfo = this.ctx.actionsApi.getActiveEntityInfo(); |
|
|
const entityInfo = this.ctx.actionsApi.getActiveEntityInfo(); |
|
|
const entityId = entityInfo ? entityInfo.entityId : null; |
|
|
const entityId = entityInfo ? entityInfo.entityId : null; |
|
|
const entityName = entityInfo ? entityInfo.entityName : null; |
|
|
const entityName = entityInfo ? entityInfo.entityName : null; |
|
|
@ -153,13 +172,17 @@ export class MapWidgetController implements MapWidgetInterface { |
|
|
}] |
|
|
}] |
|
|
); |
|
|
); |
|
|
})).subscribe(res => { |
|
|
})).subscribe(res => { |
|
|
console.log('MapWidgetController -> setMarkerLocation -> res', res) |
|
|
|
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
initSettings(settings: UnitedMapSettings): UnitedMapSettings { |
|
|
initSettings(settings: UnitedMapSettings): UnitedMapSettings { |
|
|
const functionParams = ['data', 'dsData', 'dsIndex']; |
|
|
const functionParams = ['data', 'dsData', 'dsIndex']; |
|
|
this.provider = settings.provider || this.mapProvider; |
|
|
this.provider = settings.provider || this.mapProvider; |
|
|
|
|
|
if (!settings.mapProviderHere) { |
|
|
|
|
|
if (settings.mapProvider && hereProviders.includes(settings.mapProvider)) |
|
|
|
|
|
settings.mapProviderHere = settings.mapProvider |
|
|
|
|
|
else settings.mapProviderHere = hereProviders[0]; |
|
|
|
|
|
} |
|
|
const customOptions = { |
|
|
const customOptions = { |
|
|
provider: this.provider, |
|
|
provider: this.provider, |
|
|
mapUrl: settings?.mapImageUrl, |
|
|
mapUrl: settings?.mapImageUrl, |
|
|
@ -173,7 +196,7 @@ export class MapWidgetController implements MapWidgetInterface { |
|
|
'<b>${entityName}</b><br/><br/><b>Latitude:</b> ${' + |
|
|
'<b>${entityName}</b><br/><br/><b>Latitude:</b> ${' + |
|
|
settings.latKeyName + ':7}<br/><b>Longitude:</b> ${' + settings.lngKeyName + ':7}', |
|
|
settings.latKeyName + ':7}<br/><b>Longitude:</b> ${' + settings.lngKeyName + ':7}', |
|
|
defaultCenterPosition: getDefCenterPosition(settings?.defaultCenterPosition), |
|
|
defaultCenterPosition: getDefCenterPosition(settings?.defaultCenterPosition), |
|
|
currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? { |
|
|
currentImage: (settings.markerImage?.length) ? { |
|
|
url: settings.markerImage, |
|
|
url: settings.markerImage, |
|
|
size: settings.markerImageSize || 34 |
|
|
size: settings.markerImageSize || 34 |
|
|
} : null |
|
|
} : null |
|
|
@ -253,7 +276,7 @@ export const defaultSettings: any = { |
|
|
useDefaultCenterPosition: false, |
|
|
useDefaultCenterPosition: false, |
|
|
showTooltipAction: 'click', |
|
|
showTooltipAction: 'click', |
|
|
autocloseTooltip: false, |
|
|
autocloseTooltip: false, |
|
|
showPolygon: true, |
|
|
showPolygon: false, |
|
|
labelColor: '#000000', |
|
|
labelColor: '#000000', |
|
|
color: '#FE7569', |
|
|
color: '#FE7569', |
|
|
polygonColor: '#0000ff', |
|
|
polygonColor: '#0000ff', |
|
|
@ -267,10 +290,16 @@ export const defaultSettings: any = { |
|
|
strokeOpacity: 1.0, |
|
|
strokeOpacity: 1.0, |
|
|
initCallback: () => { }, |
|
|
initCallback: () => { }, |
|
|
defaultZoomLevel: 8, |
|
|
defaultZoomLevel: 8, |
|
|
dontFitMapBounds: false, |
|
|
|
|
|
disableScrollZooming: false, |
|
|
disableScrollZooming: false, |
|
|
minZoomLevel: 16, |
|
|
minZoomLevel: 16, |
|
|
credentials: '', |
|
|
credentials: '', |
|
|
markerClusteringSetting: null, |
|
|
markerClusteringSetting: null, |
|
|
draggableMarker: false |
|
|
draggableMarker: false, |
|
|
|
|
|
fitMapBounds: true |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export const hereProviders = [ |
|
|
|
|
|
'HERE.normalDay', |
|
|
|
|
|
'HERE.normalNight', |
|
|
|
|
|
'HERE.hybridDay', |
|
|
|
|
|
'HERE.terrainDay'] |
|
|
|
Adsumus
7 years ago