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

Merge branch 'develop/angular18' of github.com:thingsboard/thingsboard into develop/angular18

Browse Source
This commit is contained in:
Igor Kulikov 2024-10-04 18:30:29 +03:00
commit a20967d488
14 changed files with 103 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui-ngx/package.json
View File

@ -30,7 +30,7 @@
"@flowjs/flow.js": "^2.14.1", "@flowjs/flow.js": "^2.14.1",
"@flowjs/ngx-flow": "~0.8.1", "@flowjs/ngx-flow": "~0.8.1",
"@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/fontawesome-svg-core": "^6.6.0",
"@geoman-io/leaflet-geoman-free": "2.14.2", "@geoman-io/leaflet-geoman-free": "2.17.0",
"@iplab/ngx-color-picker": "^18.0.1", "@iplab/ngx-color-picker": "^18.0.1",
"@mat-datetimepicker/core": "~14.0.0", "@mat-datetimepicker/core": "~14.0.0",
"@mdi/svg": "^7.4.47", "@mdi/svg": "^7.4.47",
@ -68,9 +68,9 @@
"jstree": "^3.3.17", "jstree": "^3.3.17",
"jstree-bootstrap-theme": "^1.0.1", "jstree-bootstrap-theme": "^1.0.1",
"jszip": "^3.10.1", "jszip": "^3.10.1",
"leaflet": "1.8.0", "leaflet": "1.9.4",
"leaflet-polylinedecorator": "1.6.0", "leaflet-polylinedecorator": "1.6.0",
"leaflet-providers": "1.13.0", "leaflet-providers": "2.0.0",
"leaflet.gridlayer.googlemutant": "0.14.1", "leaflet.gridlayer.googlemutant": "0.14.1",
"leaflet.markercluster": "1.5.3", "leaflet.markercluster": "1.5.3",
"libphonenumber-js": "^1.11.10", "libphonenumber-js": "^1.11.10",
@ -131,7 +131,7 @@
"@types/flowjs": "^2.13.14", "@types/flowjs": "^2.13.14",
"@types/jquery": "^3.5.31", "@types/jquery": "^3.5.31",
"@types/js-beautify": "^1.14.3", "@types/js-beautify": "^1.14.3",
"@types/leaflet": "1.8.0", "@types/leaflet": "1.9.12",
"@types/leaflet-polylinedecorator": "1.6.4", "@types/leaflet-polylinedecorator": "1.6.4",
"@types/leaflet-providers": "1.2.4", "@types/leaflet-providers": "1.2.4",
"@types/leaflet.gridlayer.googlemutant": "0.4.9", "@types/leaflet.gridlayer.googlemutant": "0.4.9",

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

@ -14,7 +14,6 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { MapProviders } from '@home/components/widget/lib/maps/map-models';
import { import {
createLabelFromDatasource, createLabelFromDatasource,
hashCode, hashCode,
@ -58,7 +57,7 @@ export function findAngle(startPoint: FormattedData, endPoint: FormattedData, la
} }
export function getDefCenterPosition(position): [number, number] { export function getDefCenterPosition(position: string | [number, number]): [number, number] {
if (typeof (position) === 'string') { if (typeof (position) === 'string') {
const parts = position.split(','); const parts = position.split(',');
if (parts.length === 2) { if (parts.length === 2) {
@ -258,8 +257,8 @@ export const parseWithTranslation = {
} }
}; };
export function functionValueCalculator(useFunction: boolean, func: (...args: any[]) => any, params = [], defaultValue: any) { export function functionValueCalculator<T>(useFunction: boolean, func: (...args: any[]) => any, params = [], defaultValue: T): T {
let res; let res: T;
if (useFunction && isDefined(func) && isFunction(func)) { if (useFunction && isDefined(func) && isFunction(func)) {
try { try {
res = func(...params); res = func(...params);

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

@ -14,10 +14,10 @@
/// limitations under the License. /// limitations under the License.
/// ///
import L, { FeatureGroup, LatLngBounds, LatLngTuple, Projection } from 'leaflet'; import L, { FeatureGroup, LatLngBounds, LatLngTuple, PointExpression, Projection } from 'leaflet';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import 'leaflet-providers'; import 'leaflet-providers';
import { MarkerClusterGroup, MarkerClusterGroupOptions } from 'leaflet.markercluster/dist/leaflet.markercluster'; import 'leaflet.markercluster';
import '@geoman-io/leaflet-geoman-free'; import '@geoman-io/leaflet-geoman-free';
import { import {
@ -41,7 +41,8 @@ import {
entitiesParseName, entitiesParseName,
isCutPolygon, isCutPolygon,
isJSON, isJSON,
isValidLatLng isValidLatLng,
LabelSettings
} from '@home/components/widget/lib/maps/maps-utils'; } from '@home/components/widget/lib/maps/maps-utils';
import { checkLngLat, createLoadingDiv } from '@home/components/widget/lib/maps/common-maps-utils'; import { checkLngLat, createLoadingDiv } from '@home/components/widget/lib/maps/common-maps-utils';
import { WidgetContext } from '@home/models/widget-component.models'; import { WidgetContext } from '@home/models/widget-component.models';
@ -76,7 +77,7 @@ export default abstract class LeafletMap {
options: WidgetUnitedMapSettings; options: WidgetUnitedMapSettings;
bounds: L.LatLngBounds; bounds: L.LatLngBounds;
datasources: FormattedData[]; datasources: FormattedData[];
markersCluster: MarkerClusterGroup; markersCluster: L.MarkerClusterGroup;
points: FeatureGroup; points: FeatureGroup;
markersData: FormattedData[] = []; markersData: FormattedData[] = [];
polygonsData: FormattedData[] = []; polygonsData: FormattedData[] = [];
@ -99,9 +100,7 @@ export default abstract class LeafletMap {
selectedEntity: FormattedData; selectedEntity: FormattedData;
ignoreUpdateBounds = false; ignoreUpdateBounds = false;
initDragModeIgnoreUpdateBoundsSet = false; initDragModeIgnoreUpdateBoundsSet = false;
// eslint-disable-next-line @typescript-eslint/dot-notation
southWest = new L.LatLng(-Projection.SphericalMercator['MAX_LATITUDE'], -180); southWest = new L.LatLng(-Projection.SphericalMercator['MAX_LATITUDE'], -180);
// eslint-disable-next-line @typescript-eslint/dot-notation
northEast = new L.LatLng(Projection.SphericalMercator['MAX_LATITUDE'], 180); northEast = new L.LatLng(Projection.SphericalMercator['MAX_LATITUDE'], 180);
saveLocation: (e: FormattedData, values: {[key: string]: any}) => Observable<any>; saveLocation: (e: FormattedData, values: {[key: string]: any}) => Observable<any>;
saveMarkerLocation: (e: FormattedData, lat?: number, lng?: number) => Observable<any>; saveMarkerLocation: (e: FormattedData, lat?: number, lng?: number) => Observable<any>;
@ -109,7 +108,7 @@ export default abstract class LeafletMap {
translateService: TranslateService; translateService: TranslateService;
tooltipInstances: ITooltipsterInstance[] = []; tooltipInstances: ITooltipsterInstance[] = [];
clusteringSettings: MarkerClusterGroupOptions; clusteringSettings: L.MarkerClusterGroupOptions;
protected constructor(public ctx: WidgetContext, protected constructor(public ctx: WidgetContext,
public $container: HTMLElement, public $container: HTMLElement,
@ -185,13 +184,13 @@ export default abstract class LeafletMap {
if (markerClusteringSettings.maxZoom && markerClusteringSettings.maxZoom >= 0 && markerClusteringSettings.maxZoom < 19) { if (markerClusteringSettings.maxZoom && markerClusteringSettings.maxZoom >= 0 && markerClusteringSettings.maxZoom < 19) {
this.clusteringSettings.disableClusteringAtZoom = Math.floor(markerClusteringSettings.maxZoom); this.clusteringSettings.disableClusteringAtZoom = Math.floor(markerClusteringSettings.maxZoom);
} }
this.markersCluster = new MarkerClusterGroup(this.clusteringSettings); this.markersCluster = new L.MarkerClusterGroup(this.clusteringSettings);
} }
} }
private selectEntityWithoutLocationDialog(shapes: L.PM.SUPPORTED_SHAPES): Observable<FormattedData> { private selectEntityWithoutLocationDialog(shapes: L.PM.SUPPORTED_SHAPES): Observable<FormattedData> {
let entities; let entities: FormattedData[];
let labelSettings; let labelSettings: LabelSettings;
switch (shapes) { switch (shapes) {
case 'Polygon': case 'Polygon':
case 'Rectangle': case 'Rectangle':
@ -244,8 +243,8 @@ export default abstract class LeafletMap {
if (data !== null) { if (data !== null) {
this.selectedEntity = data; this.selectedEntity = data;
this.toggleDrawMode(type); this.toggleDrawMode(type);
let tooltipText; let tooltipText: string;
let customTranslation; let customTranslation: L.PM.Translations;
switch (type) { switch (type) {
case 'tbMarker': case 'tbMarker':
tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.entityParseName}); tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.entityParseName});
@ -310,7 +309,7 @@ export default abstract class LeafletMap {
this.map.pm.Toolbar.copyDrawControl('Marker', { this.map.pm.Toolbar.copyDrawControl('Marker', {
name: 'tbMarker', name: 'tbMarker',
afterClick: () => this.selectEntityWithoutLocation('tbMarker'), afterClick: () => this.selectEntityWithoutLocation('tbMarker'),
disabled: true, disabled: false,
actions actions
}); });
} }
@ -336,14 +335,14 @@ export default abstract class LeafletMap {
this.map.pm.Toolbar.copyDrawControl('Rectangle', { this.map.pm.Toolbar.copyDrawControl('Rectangle', {
name: 'tbRectangle', name: 'tbRectangle',
afterClick: () => this.selectEntityWithoutLocation('tbRectangle'), afterClick: () => this.selectEntityWithoutLocation('tbRectangle'),
disabled: true, disabled: false,
actions: rectangleActions actions: rectangleActions
}); });
this.map.pm.Toolbar.copyDrawControl('Polygon', { this.map.pm.Toolbar.copyDrawControl('Polygon', {
name: 'tbPolygon', name: 'tbPolygon',
afterClick: () => this.selectEntityWithoutLocation('tbPolygon'), afterClick: () => this.selectEntityWithoutLocation('tbPolygon'),
disabled: true, disabled: false,
actions: polygonActions actions: polygonActions
}); });
} }
@ -426,7 +425,7 @@ export default abstract class LeafletMap {
switch (e.shape) { switch (e.shape) {
case 'tbMarker': case 'tbMarker':
// @ts-ignore // @ts-ignore
this.saveLocation(this.selectedEntity, this.convertToCustomFormat(e.layer.getLatLng())).subscribe(() => {}); this.saveLocation(this.selectedEntity, this.convertToCustomFormat(e.marker.getLatLng())).subscribe(() => {});
break; break;
case 'tbRectangle': case 'tbRectangle':
case 'tbPolygon': case 'tbPolygon':
@ -567,8 +566,8 @@ export default abstract class LeafletMap {
} }
$(this.ctx.$container) $(this.ctx.$container)
.find('a[role="button"]:not(.leaflet-pm-action)') .find('a[role="button"]:not(.leaflet-pm-action)')
.each((index, element) => { .each((_index, element) => {
let title; let title: string;
if (element.title) { if (element.title) {
title = element.title; title = element.title;
$(element).removeAttr('title'); $(element).removeAttr('title');
@ -589,7 +588,12 @@ export default abstract class LeafletMap {
}, },
side: 'right', side: 'right',
distance: 2, distance: 2,
trackOrigin: true trackOrigin: true,
functionBefore: (instance, helper) => {
if (helper.origin.ariaDisabled === 'true' || helper.origin.parentElement.classList.contains('active')) {
return false;
}
},
} }
); );
this.tooltipInstances.push(tooltip.tooltipster('instance')); this.tooltipInstances.push(tooltip.tooltipster('instance'));
@ -623,7 +627,7 @@ export default abstract class LeafletMap {
return this.map.getCenter(); return this.map.getCenter();
} }
fitBounds(bounds: LatLngBounds, padding?: LatLngTuple) { fitBounds(bounds: LatLngBounds, padding?: PointExpression) {
if (bounds.isValid()) { if (bounds.isValid()) {
this.bounds = !!this.bounds ? this.bounds.extend(bounds) : bounds; this.bounds = !!this.bounds ? this.bounds.extend(bounds) : bounds;
if (!this.options.fitMapBounds && this.options.defaultZoomLevel) { if (!this.options.fitMapBounds && this.options.defaultZoomLevel) {
@ -669,7 +673,7 @@ export default abstract class LeafletMap {
return L.latLng(position.x, position.y) as L.LatLng; return L.latLng(position.x, position.y) as L.LatLng;
} }
convertPosition(data: FormattedData, dsData: FormattedData[]): L.LatLng { convertPosition(data: FormattedData, _dsData: FormattedData[]): L.LatLng {
const position = this.extractPosition(data); const position = this.extractPosition(data);
if (position) { if (position) {
return this.positionToLatLng(position); return this.positionToLatLng(position);
@ -1075,7 +1079,7 @@ export default abstract class LeafletMap {
} }
}); });
const toDelete: string[] = []; const toDelete: string[] = [];
this.polylines.forEach((v, mKey) => { this.polylines.forEach((_v, mKey) => {
if (!keys.includes(mKey)) { if (!keys.includes(mKey)) {
toDelete.push(mKey); toDelete.push(mKey);
} }
@ -1145,7 +1149,7 @@ export default abstract class LeafletMap {
} }
}); });
const toDelete: string[] = []; const toDelete: string[] = [];
this.polygons.forEach((v, mKey) => { this.polygons.forEach((_v, mKey) => {
if (!keys.includes(mKey)) { if (!keys.includes(mKey)) {
toDelete.push(mKey); toDelete.push(mKey);
} }

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

@ -51,7 +51,7 @@ export interface CircleData {
export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
export type MarkerImageFunction = (data: FormattedData, markerImages: string[], export type MarkerImageFunction = (data: FormattedData, markerImages: string[],
dsData: FormattedData[], dsIndex: number) => MarkerImageInfo; dsData: FormattedData[], dsIndex: number) => MarkerImageInfo;
export type PosFunction = (origXPos, origYPos, data: FormattedData, export type PosFunction = (origXPos: number, origYPos: number, data: FormattedData,
dsData: FormattedData[], dsIndex: number, aspect: number) => { x: number, y: number }; dsData: FormattedData[], dsIndex: number, aspect: number) => { x: number, y: number };
export type MarkerIconReadyFunction = (icon: MarkerIconInfo) => void; export type MarkerIconReadyFunction = (icon: MarkerIconInfo) => void;

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

@ -18,9 +18,9 @@ import LeafletMap from '@home/components/widget/lib/maps/leaflet-map';
export interface MapWidgetInterface { export interface MapWidgetInterface {
map?: LeafletMap; map?: LeafletMap;
resize(); resize(): void;
update(); update(): void;
destroy(); destroy(): void;
} }
export interface MapWidgetStaticInterface { export interface MapWidgetStaticInterface {

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

@ -150,7 +150,7 @@ export class MapWidgetController implements MapWidgetInterface {
} }
setMarkerLocation(e: FormattedData, lat?: number, lng?: number) { setMarkerLocation(e: FormattedData, lat?: number, lng?: number) {
let markerValue; let markerValue: {[p: string]: any};
if (isDefined(lat) && isDefined(lng)) { if (isDefined(lat) && isDefined(lng)) {
const point = lat != null && lng !== null ? L.latLng(lat, lng) : null; const point = lat != null && lng !== null ? L.latLng(lat, lng) : null;
markerValue = this.map.convertToCustomFormat(point); markerValue = this.map.convertToCustomFormat(point);
@ -169,7 +169,7 @@ export class MapWidgetController implements MapWidgetInterface {
} }
savePolygonLocation(e: FormattedData, coordinates?: Array<any>) { savePolygonLocation(e: FormattedData, coordinates?: Array<any>) {
let polygonValue; let polygonValue: {[p: string]: any};
if (isDefined(coordinates)) { if (isDefined(coordinates)) {
polygonValue = this.map.convertToPolygonFormat(coordinates); polygonValue = this.map.convertToPolygonFormat(coordinates);
} else { } else {

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

@ -87,14 +87,14 @@ export function isJSON(data: string): boolean {
} }
} }
interface labelSettings { export interface LabelSettings {
showLabel: boolean; showLabel: boolean;
useLabelFunction: boolean; useLabelFunction: boolean;
parsedLabelFunction: GenericFunction; parsedLabelFunction: GenericFunction;
label: string; label: string;
} }
export function entitiesParseName(entities: FormattedData[], labelSettings: labelSettings): FormattedData[] { export function entitiesParseName(entities: FormattedData[], labelSettings: LabelSettings): FormattedData[] {
const div = document.createElement('div'); const div = document.createElement('div');
for (const entity of entities) { for (const entity of entities) {
if (labelSettings?.showLabel) { if (labelSettings?.showLabel) {

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

@ -30,7 +30,7 @@ export class Marker {
private editing = false; private editing = false;
leafletMarker: L.Marker; leafletMarker: L.Marker;
labelOffset: L.LatLngTuple; labelOffset: L.PointTuple;
tooltipOffset: L.LatLngTuple; tooltipOffset: L.LatLngTuple;
markerOffset: L.LatLngTuple; markerOffset: L.LatLngTuple;
tooltip: L.Popup; tooltip: L.Popup;
@ -40,10 +40,10 @@ export class Marker {
private location: L.LatLng, private location: L.LatLng,
private settings: Partial<WidgetMarkersSettings>, private settings: Partial<WidgetMarkersSettings>,
private data?: FormattedData, private data?: FormattedData,
private dataSources?, private dataSources?: FormattedData[],
private onDragendListener?, private onDragendListener?,
snappable = false) { snappable = false) {
this.leafletMarker = L.marker(location, { this.leafletMarker = L.marker(this.location, {
pmIgnore: !settings.draggableMarker, pmIgnore: !settings.draggableMarker,
snapIgnore: !snappable, snapIgnore: !snappable,
tbMarkerData: this.data tbMarkerData: this.data
@ -78,7 +78,7 @@ export class Marker {
} }
if (settings.draggableMarker && onDragendListener) { if (settings.draggableMarker && onDragendListener) {
this.leafletMarker.on('pm:dragstart', (e) => { this.leafletMarker.on('pm:dragstart', () => {
(this.leafletMarker.dragging as any)._draggable = { _moved: true }; (this.leafletMarker.dragging as any)._draggable = { _moved: true };
(this.leafletMarker.dragging as any)._enabled = true; (this.leafletMarker.dragging as any)._enabled = true;
this.editing = true; this.editing = true;
@ -134,7 +134,7 @@ export class Marker {
} }
} }
updateMarkerColor(color) { updateMarkerColor(color: tinycolor.Instance) {
this.createDefaultMarkerIcon(color, (iconInfo) => { this.createDefaultMarkerIcon(color, (iconInfo) => {
this.leafletMarker.setIcon(iconInfo.icon); this.leafletMarker.setIcon(iconInfo.icon);
}); });
@ -179,8 +179,8 @@ export class Marker {
loadImageWithAspect(this.map.ctx.$injector.get(ImagePipe), currentImage.url).subscribe( loadImageWithAspect(this.map.ctx.$injector.get(ImagePipe), currentImage.url).subscribe(
(aspectImage) => { (aspectImage) => {
if (aspectImage?.aspect) { if (aspectImage?.aspect) {
let width; let width: number;
let height; let height: number;
if (aspectImage.aspect > 1) { if (aspectImage.aspect > 1) {
width = currentImage.size; width = currentImage.size;
height = currentImage.size / aspectImage.aspect; height = currentImage.size / aspectImage.aspect;
@ -263,7 +263,7 @@ export class Marker {
this.leafletMarker.addTo(map))*/ this.leafletMarker.addTo(map))*/
} }
extendBoundsWithMarker(bounds) { extendBoundsWithMarker(bounds: L.LatLngBounds) {
bounds.extend(this.leafletMarker.getLatLng()); bounds.extend(this.leafletMarker.getLatLng());
} }
@ -271,7 +271,7 @@ export class Marker {
return this.leafletMarker.getLatLng(); return this.leafletMarker.getLatLng();
} }
setMarkerPosition(latLng) { setMarkerPosition(latLng: L.LatLngExpression) {
this.leafletMarker.setLatLng(latLng); this.leafletMarker.setLatLng(latLng);
} }
} }

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

@ -31,7 +31,7 @@ interface GmGlobal {
export class GoogleMap extends LeafletMap { export class GoogleMap extends LeafletMap {
private resource: ResourcesService; private resource: ResourcesService;
constructor(ctx: WidgetContext, $container, options: WidgetUnitedMapSettings) { constructor(ctx: WidgetContext, $container: HTMLElement, options: WidgetUnitedMapSettings) {
super(ctx, $container, options); super(ctx, $container, options);
this.resource = ctx.$injector.get(ResourcesService); this.resource = ctx.$injector.get(ResourcesService);
this.loadGoogle(() => { this.loadGoogle(() => {
@ -47,20 +47,20 @@ export class GoogleMap extends LeafletMap {
}, options.gmApiKey); }, options.gmApiKey);
} }
private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') { private loadGoogle(callback: () => void, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
if (gmGlobals[apiKey]) { if (gmGlobals[apiKey]) {
callback(); callback();
} else { } else {
this.resource.loadResource(`https://maps.googleapis.com/maps/api/js?key=${apiKey}`).subscribe( this.resource.loadResource(`https://maps.googleapis.com/maps/api/js?key=${apiKey}`).subscribe({
() => { next: () => {
gmGlobals[apiKey] = true; gmGlobals[apiKey] = true;
callback(); callback();
}, },
(error) => { error: (error) => {
gmGlobals[apiKey] = false; gmGlobals[apiKey] = false;
console.error(`Google map api load failed!`, error); console.error(`Google map api load failed!`, error);
} }
); });
} }
} }
} }

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

@ -21,7 +21,7 @@ import { WidgetContext } from '@home/models/widget-component.models';
import { isDefinedAndNotNull } from '@core/utils'; import { isDefinedAndNotNull } from '@core/utils';
export class HEREMap extends LeafletMap { export class HEREMap extends LeafletMap {
constructor(ctx: WidgetContext, $container, options: WidgetUnitedMapSettings) { constructor(ctx: WidgetContext, $container: HTMLElement, options: WidgetUnitedMapSettings) {
super(ctx, $container, options); super(ctx, $container, options);
const map = L.map($container, { const map = L.map($container, {
doubleClickZoom: !this.options.disableDoubleClickZooming, doubleClickZoom: !this.options.disableDoubleClickZooming,

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

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import L, { LatLngBounds, LatLngLiteral, LatLngTuple } from 'leaflet'; import L, { LatLngBounds, LatLngLiteral, LatLngTuple, PointExpression } from 'leaflet';
import LeafletMap from '../leaflet-map'; import LeafletMap from '../leaflet-map';
import { import {
CircleData, CircleData,
@ -24,10 +24,8 @@ import {
WidgetUnitedMapSettings WidgetUnitedMapSettings
} from '../map-models'; } from '../map-models';
import { Observable, of, ReplaySubject, switchMap } from 'rxjs'; import { Observable, of, ReplaySubject, switchMap } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators'; import { catchError } from 'rxjs/operators';
import { import { calculateNewPointCoordinate, loadImageWithAspect } from '@home/components/widget/lib/maps/common-maps-utils';
calculateNewPointCoordinate, loadImageWithAspect
} from '@home/components/widget/lib/maps/common-maps-utils';
import { WidgetContext } from '@home/models/widget-component.models'; import { WidgetContext } from '@home/models/widget-component.models';
import { DataSet, DatasourceType, FormattedData, widgetType } from '@shared/models/widget.models'; import { DataSet, DatasourceType, FormattedData, widgetType } from '@shared/models/widget.models';
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@ -135,7 +133,7 @@ export class ImageMap extends LeafletMap {
} }
} }
), ),
catchError((e) => this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl)) catchError(() => this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl))
); );
} }
@ -158,13 +156,13 @@ export class ImageMap extends LeafletMap {
return this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl); return this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl);
} }
}), }),
catchError((e) => this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl)) catchError(() => this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl))
); );
}) })
); );
} }
updateBounds(updateImage?: boolean, lastCenterPos?) { updateBounds(updateImage?: boolean, lastCenterPos?: L.Point) {
const w = this.width; const w = this.width;
const h = this.height; const h = this.height;
this.southWest = this.pointToLatLng(0, h); this.southWest = this.pointToLatLng(0, h);
@ -233,7 +231,7 @@ export class ImageMap extends LeafletMap {
} }
} }
fitBounds(bounds: LatLngBounds, padding?: LatLngTuple) { } fitBounds(_bounds: LatLngBounds, _padding?: PointExpression) { }
initMap(updateImage?: boolean) { initMap(updateImage?: boolean) {
if (!this.map && this.aspect > 0) { if (!this.map && this.aspect > 0) {
@ -271,7 +269,7 @@ export class ImageMap extends LeafletMap {
position.y * this.height); position.y * this.height);
} }
convertPosition(data, dsData: FormattedData[]): L.LatLng { convertPosition(data: FormattedData, dsData: FormattedData[]): L.LatLng {
const position = this.extractPosition(data); const position = this.extractPosition(data);
if (position) { if (position) {
const converted = this.posFunction(position.x, position.y, data, dsData, data.dsIndex, this.aspect) || {x: 0, y: 0}; const converted = this.posFunction(position.x, position.y, data, dsData, data.dsIndex, this.aspect) || {x: 0, y: 0};
@ -296,7 +294,7 @@ export class ImageMap extends LeafletMap {
}).filter(el => !!el); }).filter(el => !!el);
} }
pointToLatLng(x, y): L.LatLng { pointToLatLng(x: number, y: number): L.LatLng {
return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1); return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1);
} }
@ -304,7 +302,7 @@ export class ImageMap extends LeafletMap {
return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1); return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1);
} }
convertToCustomFormat(position: L.LatLng, offset = 0, width = this.width, height = this.height): {[key: string]: any} { convertToCustomFormat(position: L.LatLng, _offset = 0, width = this.width, height = this.height): {[key: string]: any} {
if (!position) { if (!position) {
return { return {
[this.options.xPosKeyName]: null, [this.options.xPosKeyName]: null,

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

@ -20,17 +20,17 @@ import { DEFAULT_ZOOM_LEVEL, WidgetUnitedMapSettings } from '../map-models';
import { WidgetContext } from '@home/models/widget-component.models'; import { WidgetContext } from '@home/models/widget-component.models';
export class OpenStreetMap extends LeafletMap { export class OpenStreetMap extends LeafletMap {
constructor(ctx: WidgetContext, $container, options: WidgetUnitedMapSettings) { constructor(ctx: WidgetContext, $container: HTMLElement, options: WidgetUnitedMapSettings) {
super(ctx, $container, options); super(ctx, $container, options);
const map = L.map($container, { const map = L.map($container, {
doubleClickZoom: !this.options.disableDoubleClickZooming, doubleClickZoom: !this.options.disableDoubleClickZooming,
zoomControl: !this.options.disableZoomControl zoomControl: !this.options.disableZoomControl
}).setView(options?.parsedDefaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL); }).setView(options?.parsedDefaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL);
let tileLayer; let tileLayer: L.TileLayer;
if (options.useCustomProvider) { if (options.useCustomProvider) {
tileLayer = L.tileLayer(options.customProviderTileUrl); tileLayer = L.tileLayer(options.customProviderTileUrl);
} else { } else {
tileLayer = (L.tileLayer as any).provider(options.mapProvider || 'OpenStreetMap.Mapnik'); tileLayer = L.tileLayer.provider(options.mapProvider || 'OpenStreetMap.Mapnik');
} }
tileLayer.addTo(map); tileLayer.addTo(map);
super.setMap(map); super.setMap(map);

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

@ -21,9 +21,9 @@ import { DEFAULT_ZOOM_LEVEL, WidgetUnitedMapSettings } from '../map-models';
import { WidgetContext } from '@home/models/widget-component.models'; import { WidgetContext } from '@home/models/widget-component.models';
export class TencentMap extends LeafletMap { export class TencentMap extends LeafletMap {
constructor(ctx: WidgetContext, $container, options: WidgetUnitedMapSettings) { constructor(ctx: WidgetContext, $container: HTMLElement, options: WidgetUnitedMapSettings) {
super(ctx, $container, options); super(ctx, $container, options);
const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0'; const txUrl = 'https://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0';
const map = L.map($container, { const map = L.map($container, {
doubleClickZoom: !this.options.disableDoubleClickZooming, doubleClickZoom: !this.options.disableDoubleClickZooming,
zoomControl: !this.options.disableZoomControl zoomControl: !this.options.disableZoomControl
@ -31,7 +31,7 @@ export class TencentMap extends LeafletMap {
const txLayer = L.tileLayer(txUrl, { const txLayer = L.tileLayer(txUrl, {
subdomains: '0123', subdomains: '0123',
tms: true, tms: true,
attribution: '&copy;2021 Tencent - GS(2020)2236号- Data&copy; NavInfo' attribution: '&copy;2024 Tencent - GS(2023)1171号'
}).addTo(map); }).addTo(map);
txLayer.addTo(map); txLayer.addTo(map);
super.setMap(map); super.setMap(map);

59
ui-ngx/yarn.lock
View File

@ -1863,17 +1863,17 @@
dependencies: dependencies:
"@fortawesome/fontawesome-common-types" "6.6.0" "@fortawesome/fontawesome-common-types" "6.6.0"
"@geoman-io/leaflet-geoman-free@2.14.2": "@geoman-io/leaflet-geoman-free@2.17.0":
version "2.14.2" version "2.17.0"
resolved "https://registry.yarnpkg.com/@geoman-io/leaflet-geoman-free/-/leaflet-geoman-free-2.14.2.tgz#c84c2115c263f34d11dc0b43859551639fe3d56b" resolved "https://registry.yarnpkg.com/@geoman-io/leaflet-geoman-free/-/leaflet-geoman-free-2.17.0.tgz#9c8fce5c7a85e5d7ece3a7e5d0b82dbf2329bd81"
integrity sha512-6lIyG8RvSVdFjVjiQgBPyNASjymSyqzsiUeBW0pA+q41lB5fAg4SDC6SfJvWdEyDHa81Jb5FWjUkCc9O+u0gbg== integrity sha512-vAY9tKB2I/Ui8d3QUBuebWnunI2sGjsfAUTXMMcf5UpISvPz67io4hpbKXid9GNsW6P4LGv1+ZzrmkpM78GzHA==
dependencies: dependencies:
"@turf/boolean-contains" "^6.5.0" "@turf/boolean-contains" "^6.5.0"
"@turf/kinks" "^6.5.0" "@turf/kinks" "^6.5.0"
"@turf/line-intersect" "^6.5.0" "@turf/line-intersect" "^6.5.0"
"@turf/line-split" "^6.5.0" "@turf/line-split" "^6.5.0"
lodash "4.17.21" lodash "4.17.21"
polygon-clipping "0.15.3" polyclip-ts "^0.16.5"
"@humanwhocodes/config-array@^0.13.0": "@humanwhocodes/config-array@^0.13.0":
version "0.13.0" version "0.13.0"
@ -3295,20 +3295,13 @@
dependencies: dependencies:
"@types/leaflet" "*" "@types/leaflet" "*"
"@types/leaflet@*": "@types/leaflet@*", "@types/leaflet@1.9.12":
version "1.9.12" version "1.9.12"
resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.12.tgz#a6626a0b3fba36fd34723d6e95b22e8024781ad6" resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.12.tgz#a6626a0b3fba36fd34723d6e95b22e8024781ad6"
integrity sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg== integrity sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==
dependencies: dependencies:
"@types/geojson" "*" "@types/geojson" "*"
"@types/leaflet@1.8.0":
version "1.8.0"
resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.8.0.tgz#dc92d3e868fb6d5067b4b59fa08cd4441f84fabe"
integrity sha512-+sXFmiJTFdhaXXIGFlV5re9AdqtAODoXbGAvxx02e5SHXL3ir7ClP5J7pahO8VmzKY3dth4RUS1nf2BTT+DW1A==
dependencies:
"@types/geojson" "*"
"@types/lodash@^4.17.10": "@types/lodash@^4.17.10":
version "4.17.10" version "4.17.10"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.10.tgz#64f3edf656af2fe59e7278b73d3e62404144a6e6" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.10.tgz#64f3edf656af2fe59e7278b73d3e62404144a6e6"
@ -4114,6 +4107,11 @@ big.js@^5.2.2:
resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
bignumber.js@^9.1.0:
version "9.1.2"
resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==
binary-extensions@^2.0.0: binary-extensions@^2.0.0:
version "2.3.0" version "2.3.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
@ -7296,10 +7294,10 @@ leaflet-polylinedecorator@1.6.0:
dependencies: dependencies:
leaflet-rotatedmarker "^0.2.0" leaflet-rotatedmarker "^0.2.0"
leaflet-providers@1.13.0: leaflet-providers@2.0.0:
version "1.13.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/leaflet-providers/-/leaflet-providers-1.13.0.tgz#10c843a23d5823a65096d40ad53f27029e13434b" resolved "https://registry.yarnpkg.com/leaflet-providers/-/leaflet-providers-2.0.0.tgz#dfdab9ca2dccc57c79e1462bc3dd20f78910afcb"
integrity sha512-f/sN5wdgBbVA2jcCYzScIfYNxKdn2wBJP9bu+5cRX9Xj6g8Bt1G9Sr8WgJAt/ckIFIc3LVVxCBNFpSCfTuUElg== integrity sha512-CWwKEnHd66Qsx0m4o5q5ZOa60s00B91pMxnlr4Y22msubfs7dhbZhdMIz8bvZQkrZqi67ppI1fsZRS6vtrLcOA==
leaflet-rotatedmarker@^0.2.0: leaflet-rotatedmarker@^0.2.0:
version "0.2.0" version "0.2.0"
@ -7316,10 +7314,10 @@ leaflet.markercluster@1.5.3:
resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056" resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA== integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
leaflet@1.8.0: leaflet@1.9.4:
version "1.8.0" version "1.9.4"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.8.0.tgz#4615db4a22a304e8e692cae9270b983b38a2055e" resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
integrity sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA== integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
less-loader@12.2.0: less-loader@12.2.0:
version "12.2.0" version "12.2.0"
@ -8601,12 +8599,13 @@ points-on-path@^0.2.1:
path-data-parser "0.1.0" path-data-parser "0.1.0"
points-on-curve "0.2.0" points-on-curve "0.2.0"
polygon-clipping@0.15.3: polyclip-ts@^0.16.5:
version "0.15.3" version "0.16.5"
resolved "https://registry.yarnpkg.com/polygon-clipping/-/polygon-clipping-0.15.3.tgz#0215840438470ba2e9e6593625e4ea5c1087b4b7" resolved "https://registry.yarnpkg.com/polyclip-ts/-/polyclip-ts-0.16.5.tgz#053e073e640449f1b1a1d88471f8758779d0b030"
integrity sha512-ho0Xx5DLkgxRx/+n4O74XyJ67DcyN3Tu9bGYKsnTukGAW6ssnuak6Mwcyb1wHy9MZc9xsUWqIoiazkZB5weECg== integrity sha512-ZchnG0zGZReHgEo3EYzEUi6UmfQFFzNnj6AFU+gBm+IJJ4qG9gL4CwjtCV6oi/PittUPpJLiLJxcn/AgrCBO+g==
dependencies: dependencies:
splaytree "^3.1.0" bignumber.js "^9.1.0"
splaytree-ts "^1.0.1"
possible-typed-array-names@^1.0.0: possible-typed-array-names@^1.0.0:
version "1.0.0" version "1.0.0"
@ -9689,10 +9688,10 @@ spdy@^4.0.2:
select-hose "^2.0.0" select-hose "^2.0.0"
spdy-transport "^3.0.0" spdy-transport "^3.0.0"
splaytree@^3.1.0: splaytree-ts@^1.0.1:
version "3.1.2" version "1.0.1"
resolved "https://registry.yarnpkg.com/splaytree/-/splaytree-3.1.2.tgz#d1db2691665a3c69d630de98d55145a6546dc166" resolved "https://registry.yarnpkg.com/splaytree-ts/-/splaytree-ts-1.0.1.tgz#4ddcfe2684da017d02b599d53d67f6d07a90745b"
integrity sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A== integrity sha512-B+VzCm33/KEchi/fzT6/3NRHm8k5+Kf37SBQO3meHHS/tK2xBnIm4ZvusQ1wUpHgKMCCqEWgXnwFXAa1nD289g==
split.js@^1.6.5: split.js@^1.6.5:
version "1.6.5" version "1.6.5"