Igor Kulikov
2 years ago
56 changed files with 866 additions and 46 deletions
@ -0,0 +1,90 @@ |
|||||
|
import { |
||||
|
defaultOpenStreetMapLayerSettings, |
||||
|
MapLayerSettings, |
||||
|
MapProvider, OpenStreetLayerType, |
||||
|
OpenStreetMapLayerSettings, openStreetMapLayerTranslationMap |
||||
|
} from '@home/components/widget/lib/maps/map.models'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { DeepPartial } from '@shared/models/common'; |
||||
|
import { mergeDeep } from '@core/utils'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; |
||||
|
import L from 'leaflet'; |
||||
|
import { map } from 'rxjs/operators'; |
||||
|
|
||||
|
export abstract class TbMapLayer<S extends MapLayerSettings> { |
||||
|
|
||||
|
static fromSettings(ctx: WidgetContext, |
||||
|
inputSettings: DeepPartial<MapLayerSettings>) { |
||||
|
|
||||
|
switch (inputSettings.provider) { |
||||
|
case MapProvider.google: |
||||
|
break; |
||||
|
case MapProvider.openstreet: |
||||
|
return new TbOpenStreetMapLayer(ctx, inputSettings); |
||||
|
case MapProvider.tencent: |
||||
|
break; |
||||
|
case MapProvider.here: |
||||
|
break; |
||||
|
case MapProvider.custom: |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected settings: S; |
||||
|
|
||||
|
protected constructor(protected ctx: WidgetContext, |
||||
|
protected inputSettings: DeepPartial<MapLayerSettings>) { |
||||
|
this.settings = mergeDeep({} as S, this.defaultSettings(), this.inputSettings as S); |
||||
|
} |
||||
|
|
||||
|
protected abstract defaultSettings(): S; |
||||
|
|
||||
|
protected title(): string { |
||||
|
const customTranslate = this.ctx.$injector.get(CustomTranslatePipe); |
||||
|
if (this.settings.label) { |
||||
|
return customTranslate.transform(this.settings.label); |
||||
|
} else { |
||||
|
return this.generateTitle(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected abstract generateTitle(): string; |
||||
|
|
||||
|
protected abstract createLayer(): Observable<L.Layer>; |
||||
|
|
||||
|
public loadLayer(): Observable<{title: string, layer: L.Layer}> { |
||||
|
return this.createLayer().pipe( |
||||
|
map((layer) => { |
||||
|
return { |
||||
|
title: this.title(), |
||||
|
layer |
||||
|
}; |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
class TbOpenStreetMapLayer extends TbMapLayer<OpenStreetMapLayerSettings> { |
||||
|
|
||||
|
constructor(protected ctx: WidgetContext, |
||||
|
protected inputSettings: DeepPartial<MapLayerSettings>) { |
||||
|
super(ctx, inputSettings); |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): OpenStreetMapLayerSettings { |
||||
|
return defaultOpenStreetMapLayerSettings; |
||||
|
} |
||||
|
|
||||
|
protected generateTitle(): string { |
||||
|
const layerType = OpenStreetLayerType[this.settings.layerType]; |
||||
|
return this.ctx.translate.instant(openStreetMapLayerTranslationMap.get(layerType)); |
||||
|
} |
||||
|
|
||||
|
protected createLayer(): Observable<L.Layer> { |
||||
|
const layer = L.tileLayer.provider(OpenStreetLayerType[this.settings.layerType]); |
||||
|
return of(layer); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,25 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-map-panel" [style.padding]="padding" [style]="backgroundStyle$ | async"> |
||||
|
<div class="tb-map-overlay" [style]="overlayStyle"></div> |
||||
|
<ng-container *ngIf="widgetComponent.dashboardWidget.showWidgetTitlePanel"> |
||||
|
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> |
||||
|
</ng-container> |
||||
|
<div #mapElement> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,38 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
.tb-map-panel { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
padding: 20px 24px 24px 24px; |
||||
|
> div:not(.tb-map-overlay) { |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.tb-map-overlay { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
left: 12px; |
||||
|
bottom: 12px; |
||||
|
right: 12px; |
||||
|
} |
||||
|
div.tb-widget-title { |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,97 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
AfterViewInit, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
Input, |
||||
|
OnDestroy, |
||||
|
OnInit, |
||||
|
Renderer2, |
||||
|
TemplateRef, |
||||
|
ViewChild, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { mapWidgetDefaultSettings, MapWidgetSettings } from '@home/components/widget/lib/maps/map-widget.models'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models'; |
||||
|
import { TbMap } from '@home/components/widget/lib/maps/map'; |
||||
|
import { MapSetting } from '@home/components/widget/lib/maps/map.models'; |
||||
|
import { WidgetComponent } from '@home/components/widget/widget.component'; |
||||
|
import { ImagePipe } from '@shared/pipe/image.pipe'; |
||||
|
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-map-widget', |
||||
|
templateUrl: './map-widget.component.html', |
||||
|
styleUrls: ['./map-widget.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class MapWidgetComponent implements OnInit, OnDestroy, AfterViewInit { |
||||
|
|
||||
|
@ViewChild('mapElement', {static: false}) |
||||
|
mapElement: ElementRef<HTMLElement>; |
||||
|
|
||||
|
settings: MapWidgetSettings; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@Input() |
||||
|
widgetTitlePanel: TemplateRef<any>; |
||||
|
|
||||
|
backgroundStyle$: Observable<ComponentStyle>; |
||||
|
overlayStyle: ComponentStyle = {}; |
||||
|
padding: string; |
||||
|
|
||||
|
private map: TbMap<MapSetting>; |
||||
|
|
||||
|
constructor(public widgetComponent: WidgetComponent, |
||||
|
private imagePipe: ImagePipe, |
||||
|
private sanitizer: DomSanitizer, |
||||
|
private renderer: Renderer2, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.mapWidget = this; |
||||
|
this.settings = {...mapWidgetDefaultSettings, ...this.ctx.settings}; |
||||
|
|
||||
|
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); |
||||
|
this.overlayStyle = overlayStyle(this.settings.background.overlay); |
||||
|
this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding; |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit() { |
||||
|
this.map = TbMap.fromSettings(this.ctx, this.settings, this.mapElement.nativeElement); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
if (this.map) { |
||||
|
this.map.destroy(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public onInit() { |
||||
|
const borderRadius = this.ctx.$widgetElement.css('borderRadius'); |
||||
|
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; |
||||
|
this.cd.detectChanges(); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { defaultMapSettings, MapSetting } from '@home/components/widget/lib/maps/map.models'; |
||||
|
import { BackgroundSettings, BackgroundType } from '@shared/models/widget-settings.models'; |
||||
|
import { mergeDeep } from '@core/utils'; |
||||
|
|
||||
|
export interface MapWidgetSettings extends MapSetting { |
||||
|
background: BackgroundSettings; |
||||
|
padding: string; |
||||
|
} |
||||
|
|
||||
|
export const mapWidgetDefaultSettings: MapWidgetSettings = |
||||
|
mergeDeep({} as MapWidgetSettings, defaultMapSettings as MapWidgetSettings, { |
||||
|
background: { |
||||
|
type: BackgroundType.color, |
||||
|
color: '#fff', |
||||
|
overlay: { |
||||
|
enabled: false, |
||||
|
color: 'rgba(255,255,255,0.72)', |
||||
|
blur: 3 |
||||
|
} |
||||
|
}, |
||||
|
padding: '12px' |
||||
|
} as MapWidgetSettings); |
||||
@ -0,0 +1,310 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { DataKey, DatasourceType } from '@shared/models/widget.models'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { mergeDeep } from '@core/utils'; |
||||
|
|
||||
|
export enum MapType { |
||||
|
geoMap = 'geoMap', |
||||
|
image = 'image' |
||||
|
} |
||||
|
|
||||
|
export interface MapDataSourceSettings { |
||||
|
dsType: DatasourceType; |
||||
|
dsEntityType?: EntityType; |
||||
|
dsEntityId?: string; |
||||
|
dsEntityAliasId?: string; |
||||
|
dsFilterId?: string; |
||||
|
} |
||||
|
|
||||
|
export interface MapDataLayerSettings extends MapDataSourceSettings { |
||||
|
additionalDataKeys?: DataKey[]; |
||||
|
group?: string; |
||||
|
} |
||||
|
|
||||
|
export interface MarkersDataLayerSettings extends MapDataLayerSettings { |
||||
|
xKey: DataKey; |
||||
|
yKey: DataKey; |
||||
|
} |
||||
|
|
||||
|
export const defaultMarkersDataLayerSettings = (mapType: MapType): MarkersDataLayerSettings => ({ |
||||
|
dsType: DatasourceType.entity, |
||||
|
xKey: { |
||||
|
name: MapType.geoMap === mapType ? 'latitude' : 'xPos', |
||||
|
label: MapType.geoMap === mapType ? 'latitude' : 'xPos', |
||||
|
type: DataKeyType.attribute |
||||
|
}, |
||||
|
yKey: { |
||||
|
name: MapType.geoMap === mapType ? 'longitude' : 'yPos', |
||||
|
label: MapType.geoMap === mapType ? 'longitude' : 'yPos', |
||||
|
type: DataKeyType.attribute |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
export interface PolygonsDataLayerSettings extends MapDataLayerSettings { |
||||
|
polygonKey: DataKey; |
||||
|
} |
||||
|
|
||||
|
export const defaultPolygonsDataLayerSettings: PolygonsDataLayerSettings = { |
||||
|
dsType: DatasourceType.entity, |
||||
|
polygonKey: { |
||||
|
name: 'perimeter', |
||||
|
label: 'perimeter', |
||||
|
type: DataKeyType.attribute |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export interface CirclesDataLayerSettings extends MapDataLayerSettings { |
||||
|
circleKey: DataKey; |
||||
|
} |
||||
|
|
||||
|
export const defaultCirclesDataLayerSettings: CirclesDataLayerSettings = { |
||||
|
dsType: DatasourceType.entity, |
||||
|
circleKey: { |
||||
|
name: 'perimeter', |
||||
|
label: 'perimeter', |
||||
|
type: DataKeyType.attribute |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export interface AdditionalMapDataSourceSettings extends MapDataSourceSettings { |
||||
|
dataKeys: DataKey[]; |
||||
|
} |
||||
|
|
||||
|
export enum MapControlsPosition { |
||||
|
topleft = 'topleft', |
||||
|
topright = 'topright', |
||||
|
bottomleft = 'bottomleft', |
||||
|
bottomright = 'bottomright' |
||||
|
} |
||||
|
|
||||
|
export enum MapZoomAction { |
||||
|
scroll = 'scroll', |
||||
|
doubleClick = 'doubleClick', |
||||
|
controlButtons = 'controlButtons' |
||||
|
} |
||||
|
|
||||
|
export interface BaseMapSettings { |
||||
|
mapType: MapType; |
||||
|
markers: MarkersDataLayerSettings[]; |
||||
|
polygons: PolygonsDataLayerSettings[]; |
||||
|
circles: CirclesDataLayerSettings[]; |
||||
|
additionalDataSources: AdditionalMapDataSourceSettings[]; |
||||
|
controlsPosition: MapControlsPosition; |
||||
|
zoomActions: MapZoomAction[]; |
||||
|
fitMapBounds: boolean; |
||||
|
useDefaultCenterPosition: boolean; |
||||
|
defaultCenterPosition?: string; |
||||
|
defaultZoomLevel: number; |
||||
|
mapPageSize: number; |
||||
|
} |
||||
|
|
||||
|
export const DEFAULT_MAP_PAGE_SIZE = 16384; |
||||
|
export const DEFAULT_ZOOM_LEVEL = 8; |
||||
|
|
||||
|
export const defaultBaseMapSettings: BaseMapSettings = { |
||||
|
mapType: MapType.geoMap, |
||||
|
markers: [], |
||||
|
polygons: [], |
||||
|
circles: [], |
||||
|
additionalDataSources: [], |
||||
|
controlsPosition: MapControlsPosition.topleft, |
||||
|
zoomActions: [MapZoomAction.scroll, MapZoomAction.doubleClick, MapZoomAction.controlButtons], |
||||
|
fitMapBounds: true, |
||||
|
useDefaultCenterPosition: false, |
||||
|
defaultCenterPosition: '0,0', |
||||
|
defaultZoomLevel: null, |
||||
|
mapPageSize: DEFAULT_MAP_PAGE_SIZE |
||||
|
}; |
||||
|
|
||||
|
export enum MapProvider { |
||||
|
google = 'google-map', |
||||
|
openstreet = 'openstreet-map', |
||||
|
here = 'here', |
||||
|
tencent = 'tencent-map', |
||||
|
custom = 'custom' |
||||
|
} |
||||
|
|
||||
|
export interface MapLayerSettings { |
||||
|
label?: string; |
||||
|
provider: MapProvider; |
||||
|
} |
||||
|
|
||||
|
export enum GoogleLayerType { |
||||
|
roadmap = 'roadmap', |
||||
|
satellite = 'satellite', |
||||
|
hybrid = 'hybrid', |
||||
|
terrain = 'terrain' |
||||
|
} |
||||
|
|
||||
|
export interface GoogleMapLayerSettings extends MapLayerSettings { |
||||
|
provider: MapProvider.google; |
||||
|
layerType: GoogleLayerType; |
||||
|
apiKey: string; |
||||
|
} |
||||
|
|
||||
|
export const defaultGoogleMapLayerSettings: GoogleMapLayerSettings = { |
||||
|
provider: MapProvider.google, |
||||
|
layerType: GoogleLayerType.roadmap, |
||||
|
apiKey: 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q' |
||||
|
}; |
||||
|
|
||||
|
export enum OpenStreetLayerType { |
||||
|
openStreetMapnik = 'OpenStreetMap.Mapnik', |
||||
|
openStreetHot = 'OpenStreetMap.HOT', |
||||
|
esriWorldStreetMap = 'Esri.WorldStreetMap', |
||||
|
esriWorldTopoMap = 'Esri.WorldTopoMap', |
||||
|
esriWorldImagery = 'Esri.WorldImagery', |
||||
|
cartoDbPositron = 'CartoDB.Positron', |
||||
|
cartoDbDarkMatter = 'CartoDB.DarkMatter' |
||||
|
} |
||||
|
|
||||
|
export const openStreetMapLayerTranslationMap = new Map<OpenStreetLayerType, string>( |
||||
|
[ |
||||
|
[OpenStreetLayerType.openStreetMapnik, 'widgets.maps.openstreet-provider-mapnik'], |
||||
|
[OpenStreetLayerType.openStreetHot, 'widgets.maps.openstreet-provider-hot'], |
||||
|
[OpenStreetLayerType.esriWorldStreetMap, 'widgets.maps.openstreet-provider-esri-street'], |
||||
|
[OpenStreetLayerType.esriWorldTopoMap, 'widgets.maps.openstreet-provider-esri-topo'], |
||||
|
[OpenStreetLayerType.esriWorldImagery, 'widgets.maps.openstreet-provider-esri-imagery'], |
||||
|
[OpenStreetLayerType.cartoDbPositron, 'widgets.maps.openstreet-provider-cartodb-positron'], |
||||
|
[OpenStreetLayerType.cartoDbDarkMatter, 'widgets.maps.openstreet-provider-cartodb-dark-matter'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export interface OpenStreetMapLayerSettings extends MapLayerSettings { |
||||
|
provider: MapProvider.openstreet; |
||||
|
layerType: OpenStreetLayerType; |
||||
|
} |
||||
|
|
||||
|
export const defaultOpenStreetMapLayerSettings: OpenStreetMapLayerSettings = { |
||||
|
provider: MapProvider.openstreet, |
||||
|
layerType: OpenStreetLayerType.openStreetMapnik |
||||
|
} |
||||
|
|
||||
|
export enum HereLayerType { |
||||
|
hereNormalDay = 'HERE.normalDay', |
||||
|
hereNormalNight = 'HERE.normalNight', |
||||
|
hereHybridDay = 'HERE.hybridDay', |
||||
|
hereTerrainDay = 'HERE.terrainDay' |
||||
|
} |
||||
|
|
||||
|
export interface HereMapLayerSettings extends MapLayerSettings { |
||||
|
provider: MapProvider.here; |
||||
|
layerType: HereLayerType; |
||||
|
apiKey: string; |
||||
|
} |
||||
|
|
||||
|
export const defaultHereMapLayerSettings: HereMapLayerSettings = { |
||||
|
provider: MapProvider.here, |
||||
|
layerType: HereLayerType.hereNormalDay, |
||||
|
apiKey: 'kVXykxAfZ6LS4EbCTO02soFVfjA7HoBzNVVH9u7nzoE' |
||||
|
} |
||||
|
|
||||
|
export enum TencentLayerType { |
||||
|
roadmap = 'roadmap', |
||||
|
satellite = 'satellite', |
||||
|
hybrid = 'hybrid' |
||||
|
} |
||||
|
|
||||
|
export interface TencentMapLayerSettings extends MapLayerSettings { |
||||
|
provider: MapProvider.tencent; |
||||
|
layerType: TencentLayerType |
||||
|
apiKey: string; |
||||
|
} |
||||
|
|
||||
|
export const defaultTencentMapLayerSettings: TencentMapLayerSettings = { |
||||
|
provider: MapProvider.tencent, |
||||
|
layerType: TencentLayerType.roadmap, |
||||
|
apiKey: '84d6d83e0e51e481e50454ccbe8986b' |
||||
|
} |
||||
|
|
||||
|
export interface CustomMapLayerSettings extends MapLayerSettings { |
||||
|
provider: MapProvider.custom; |
||||
|
tileUrl: string; |
||||
|
} |
||||
|
|
||||
|
export const defaultCustomMapLayerSettings: CustomMapLayerSettings = { |
||||
|
provider: MapProvider.custom, |
||||
|
tileUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' |
||||
|
} |
||||
|
|
||||
|
export const defaultMapLayerSettings = (provider: MapProvider): MapLayerSettings => { |
||||
|
switch (provider) { |
||||
|
case MapProvider.google: |
||||
|
return defaultGoogleMapLayerSettings; |
||||
|
case MapProvider.openstreet: |
||||
|
return defaultOpenStreetMapLayerSettings; |
||||
|
case MapProvider.here: |
||||
|
return defaultHereMapLayerSettings; |
||||
|
case MapProvider.tencent: |
||||
|
return defaultTencentMapLayerSettings; |
||||
|
case MapProvider.custom: |
||||
|
return defaultCustomMapLayerSettings; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export const defaultMapLayers: MapLayerSettings[] = (Object.keys(OpenStreetLayerType) as OpenStreetLayerType[]).map(type => ({ |
||||
|
provider: MapProvider.openstreet, |
||||
|
layerType: type |
||||
|
})); |
||||
|
|
||||
|
export interface GeoMapSettings extends BaseMapSettings { |
||||
|
layers?: MapLayerSettings[]; |
||||
|
} |
||||
|
|
||||
|
export const defaultGeoMapSettings: GeoMapSettings = { |
||||
|
mapType: MapType.geoMap, |
||||
|
layers: mergeDeep([], defaultMapLayers), |
||||
|
...mergeDeep({} as BaseMapSettings, defaultBaseMapSettings) |
||||
|
}; |
||||
|
|
||||
|
export enum ImageSourceType { |
||||
|
image = 'image', |
||||
|
attribute = 'attribute' |
||||
|
} |
||||
|
|
||||
|
export interface ImageMapSettings extends BaseMapSettings { |
||||
|
imageSourceType?: ImageSourceType; |
||||
|
imageUrl?: string; |
||||
|
imageEntityAlias?: string; |
||||
|
imageUrlAttribute?: string; |
||||
|
} |
||||
|
|
||||
|
export const defaultImageMapSettings: ImageMapSettings = { |
||||
|
mapType: MapType.image, |
||||
|
imageSourceType: ImageSourceType.image, |
||||
|
imageUrl: 'data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMiIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtOTUyLjM2KSI+CiAgPHJlY3QgaWQ9InJlY3Q0Njg0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBoZWlnaHQ9Ijk5LjAxIiB3aWR0aD0iOTkuMDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB5PSI5NTIuODYiIHg9Ii40OTUwNSIgc3Ryb2tlLXdpZHRoPSIuOTkwMTAiIGZpbGw9IiNlZWUiLz4KICA8dGV4dCBpZD0idGV4dDQ2ODYiIHN0eWxlPSJ3b3JkLXNwYWNpbmc6MHB4O2xldHRlci1zcGFjaW5nOjBweDt0ZXh0LWFuY2hvcjptaWRkbGU7dGV4dC1hbGlnbjpjZW50ZXIiIGZvbnQtd2VpZ2h0PSJib2xkIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmb250LXNpemU9IjEwcHgiIGxpbmUtaGVpZ2h0PSIxMjUlIiB5PSI5NzAuNzI4MDkiIHg9IjQ5LjM5NjQ3NyIgZm9udC1mYW1pbHk9IlJvYm90byIgZmlsbD0iIzY2NjY2NiI+PHRzcGFuIGlkPSJ0c3BhbjQ2OTAiIHg9IjUwLjY0NjQ3NyIgeT0iOTcwLjcyODA5Ij5JbWFnZSBiYWNrZ3JvdW5kIDwvdHNwYW4+PHRzcGFuIGlkPSJ0c3BhbjQ2OTIiIHg9IjQ5LjM5NjQ3NyIgeT0iOTgzLjIyODA5Ij5pcyBub3QgY29uZmlndXJlZDwvdHNwYW4+PC90ZXh0PgogIDxyZWN0IGlkPSJyZWN0NDY5NCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaGVpZ2h0PSIxOS4zNiIgd2lkdGg9IjY5LjM2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeT0iOTkyLjY4IiB4PSIxNS4zMiIgc3Ryb2tlLXdpZHRoPSIuNjM5ODYiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+Cg==', |
||||
|
...mergeDeep({} as BaseMapSettings, defaultBaseMapSettings) |
||||
|
} |
||||
|
|
||||
|
export type MapSetting = GeoMapSettings & ImageMapSettings; |
||||
|
|
||||
|
export const defaultMapSettings: MapSetting = defaultGeoMapSettings; |
||||
|
|
||||
|
export function parseCenterPosition(position: string | [number, number]): [number, number] { |
||||
|
if (typeof (position) === 'string') { |
||||
|
const parts = position.split(','); |
||||
|
if (parts.length === 2) { |
||||
|
return [Number(parts[0]), Number(parts[1])]; |
||||
|
} |
||||
|
} |
||||
|
if (typeof (position) === 'object') { |
||||
|
return position; |
||||
|
} |
||||
|
return [0, 0]; |
||||
|
} |
||||
@ -0,0 +1,19 @@ |
|||||
|
.tb-map-layout { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
min-width: 0; |
||||
|
min-height: 0; |
||||
|
flex: 1; |
||||
|
&.tb-sidebar-left { |
||||
|
flex-direction: row-reverse; |
||||
|
} |
||||
|
&.tb-sidebar-right { |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
.tb-map { |
||||
|
flex: 1; |
||||
|
} |
||||
|
.tb-map-sidebar { |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,196 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
BaseMapSettings, |
||||
|
DEFAULT_ZOOM_LEVEL, |
||||
|
defaultGeoMapSettings, |
||||
|
defaultImageMapSettings, |
||||
|
GeoMapSettings, |
||||
|
ImageMapSettings, |
||||
|
MapSetting, |
||||
|
MapType, |
||||
|
MapZoomAction, |
||||
|
parseCenterPosition |
||||
|
} from '@home/components/widget/lib/maps/map.models'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { mergeDeep } from '@core/utils'; |
||||
|
import { DeepPartial } from '@shared/models/common'; |
||||
|
import L from 'leaflet'; |
||||
|
import { forkJoin, Observable, of } from 'rxjs'; |
||||
|
import { TbMapLayer } from '@home/components/widget/lib/maps/map-layer'; |
||||
|
import { map } from 'rxjs/operators'; |
||||
|
|
||||
|
export abstract class TbMap<S extends BaseMapSettings> { |
||||
|
|
||||
|
static fromSettings(ctx: WidgetContext, |
||||
|
inputSettings: DeepPartial<MapSetting>, |
||||
|
mapElement: HTMLElement): TbMap<MapSetting> { |
||||
|
switch (inputSettings.mapType) { |
||||
|
case MapType.geoMap: |
||||
|
return new TbGeoMap(ctx, inputSettings, mapElement); |
||||
|
case MapType.image: |
||||
|
return new TbImageMap(ctx, inputSettings, mapElement); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected settings: S; |
||||
|
protected map: L.Map; |
||||
|
|
||||
|
protected defaultCenterPosition: [number, number]; |
||||
|
protected bounds: L.LatLngBounds; |
||||
|
protected layerControl: L.Control.Layers; |
||||
|
|
||||
|
protected mapElement: HTMLElement; |
||||
|
protected sidebarElement: HTMLElement; |
||||
|
|
||||
|
protected constructor(protected ctx: WidgetContext, |
||||
|
protected inputSettings: DeepPartial<S>, |
||||
|
protected containerElement: HTMLElement) { |
||||
|
this.settings = mergeDeep({} as S, this.defaultSettings(), this.inputSettings as S); |
||||
|
$(containerElement).empty(); |
||||
|
$(containerElement).addClass('tb-map-layout'); |
||||
|
if (this.settings.controlsPosition.endsWith('left')) { |
||||
|
$(containerElement).addClass('tb-sidebar-left'); |
||||
|
} else { |
||||
|
$(containerElement).addClass('tb-sidebar-right'); |
||||
|
} |
||||
|
const mapElement = $('<div class="tb-map"></div>'); |
||||
|
const sidebarElement = $('<div class="tb-map-sidebar"></div>'); |
||||
|
$(containerElement).append(mapElement); |
||||
|
$(containerElement).append(sidebarElement); |
||||
|
|
||||
|
this.mapElement = mapElement[0]; |
||||
|
this.sidebarElement = sidebarElement[0]; |
||||
|
|
||||
|
this.defaultCenterPosition = parseCenterPosition(this.settings.defaultCenterPosition); |
||||
|
|
||||
|
this.layerControl = L.control.layers({}, {}, {position: this.settings.controlsPosition, collapsed: true}); |
||||
|
this.createMap().subscribe((map) => { |
||||
|
this.map = map; |
||||
|
this.initMap(); |
||||
|
}); |
||||
|
L.TB = { |
||||
|
sidebar: (s) => { return null;} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private initMap() { |
||||
|
this.map.zoomControl.setPosition(this.settings.controlsPosition); |
||||
|
this.layerControl.addTo(this.map); |
||||
|
this.map.on('move', () => { |
||||
|
this.ctx.updatePopoverPositions(); |
||||
|
}); |
||||
|
this.map.on('zoomstart', () => { |
||||
|
this.ctx.setPopoversHidden(true); |
||||
|
}); |
||||
|
this.map.on('zoomend', () => { |
||||
|
this.ctx.setPopoversHidden(false); |
||||
|
this.ctx.updatePopoverPositions(); |
||||
|
setTimeout(() => { |
||||
|
this.ctx.updatePopoverPositions(); |
||||
|
}); |
||||
|
}); |
||||
|
if (this.settings.useDefaultCenterPosition) { |
||||
|
this.map.panTo(this.defaultCenterPosition); |
||||
|
this.bounds = this.map.getBounds(); |
||||
|
} else { |
||||
|
this.bounds = new L.LatLngBounds(null, null); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected abstract defaultSettings(): S; |
||||
|
|
||||
|
protected abstract createMap(): Observable<L.Map>; |
||||
|
|
||||
|
public destroy() { |
||||
|
if (this.map) { |
||||
|
this.map.remove(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
class TbGeoMap extends TbMap<GeoMapSettings> { |
||||
|
|
||||
|
constructor(protected ctx: WidgetContext, |
||||
|
protected inputSettings: DeepPartial<GeoMapSettings>, |
||||
|
protected containerElement: HTMLElement) { |
||||
|
super(ctx, inputSettings, containerElement); |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): GeoMapSettings { |
||||
|
return defaultGeoMapSettings; |
||||
|
} |
||||
|
|
||||
|
protected createMap(): Observable<L.Map> { |
||||
|
const theMap = L.map(this.mapElement, { |
||||
|
scrollWheelZoom: this.settings.zoomActions.includes(MapZoomAction.scroll), |
||||
|
doubleClickZoom: this.settings.zoomActions.includes(MapZoomAction.doubleClick), |
||||
|
zoomControl: this.settings.zoomActions.includes(MapZoomAction.controlButtons) |
||||
|
}).setView(this.defaultCenterPosition, this.settings.defaultZoomLevel || DEFAULT_ZOOM_LEVEL); |
||||
|
return this.loadLayers().pipe( |
||||
|
map((layers) => { |
||||
|
if (layers.length) { |
||||
|
const layer = layers[0]; |
||||
|
layer.layer.addTo(theMap); |
||||
|
if (layers.length > 1) { |
||||
|
layers.forEach(l => { |
||||
|
this.layerControl.addBaseLayer(l.layer, l.title); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
return theMap; |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private loadLayers(): Observable<{title: string, layer: L.Layer}[]> { |
||||
|
const layers = this.settings.layers.map(settings => TbMapLayer.fromSettings(this.ctx, settings)); |
||||
|
return forkJoin(layers.map(layer => layer.loadLayer())); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
class TbImageMap extends TbMap<ImageMapSettings> { |
||||
|
|
||||
|
private maxZoom = 4; |
||||
|
|
||||
|
constructor(protected ctx: WidgetContext, |
||||
|
protected inputSettings: DeepPartial<ImageMapSettings>, |
||||
|
protected mapElement: HTMLElement) { |
||||
|
super(ctx, inputSettings, mapElement); |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): ImageMapSettings { |
||||
|
return defaultImageMapSettings; |
||||
|
} |
||||
|
|
||||
|
protected createMap(): Observable<L.Map> { |
||||
|
const map = L.map(this.mapElement, { |
||||
|
scrollWheelZoom: this.settings.zoomActions.includes(MapZoomAction.scroll), |
||||
|
doubleClickZoom: this.settings.zoomActions.includes(MapZoomAction.doubleClick), |
||||
|
zoomControl: this.settings.zoomActions.includes(MapZoomAction.controlButtons), |
||||
|
minZoom: 1, |
||||
|
maxZoom: this.maxZoom, |
||||
|
zoom: 1, |
||||
|
crs: L.CRS.Simple, |
||||
|
attributionControl: false |
||||
|
}).setView(this.defaultCenterPosition, this.settings.defaultZoomLevel || DEFAULT_ZOOM_LEVEL); |
||||
|
return of(map); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue