tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Map widgets fixes

pull/3282/head
Igor Kulikov 6 years ago
parent
6b53e84c84
commit
e8e2f21193
11 changed files with 204 additions and 213 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 291
      ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
  2. 45
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
  3. 9
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
  4. 8
      ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
  5. 2
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
  6. 2
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts
  7. 2
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
  8. 52
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts
  9. 2
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
  10. 2
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts
  11. 2
      ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts

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

@ -38,13 +38,17 @@ import {
UnitedMapSettings
} from './map-models';
import { Marker } from './markers';
import { BehaviorSubject, Observable, of } from 'rxjs';
import { filter } from 'rxjs/operators';
import { Observable, of } from 'rxjs';
import { Polyline } from './polyline';
import { Polygon } from './polygon';
import { createLoadingDiv, createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
import {
createLoadingDiv,
createTooltip,
parseArray,
parseData,
safeExecute
} from '@home/components/widget/lib/maps/maps-utils';
import { WidgetContext } from '@home/models/widget-component.models';
import { DatasourceData } from '@shared/models/widget.models';
import { deepClone, isDefinedAndNotEmptyStr } from '@core/utils';
export default abstract class LeafletMap {
@ -53,8 +57,6 @@ export default abstract class LeafletMap {
polylines: Map<string, Polyline> = new Map();
polygons: Map<string, Polygon> = new Map();
map: L.Map;
map$: BehaviorSubject<L.Map> = new BehaviorSubject(null);
ready$: Observable<L.Map> = this.map$.pipe(filter(map => !!map));
options: UnitedMapSettings;
bounds: L.LatLngBounds;
datasources: FormattedData[];
@ -69,6 +71,9 @@ export default abstract class LeafletMap {
markerLabelText: string;
replaceInfoTooltipMarker: Array<ReplaceInfo> = [];
markerTooltipText: string;
drawRoutes: boolean;
showPolygon: boolean;
updatePending = false;
protected constructor(public ctx: WidgetContext,
public $container: HTMLElement,
@ -78,8 +83,7 @@ export default abstract class LeafletMap {
public initSettings(options: MapSettings) {
this.options.tinyColor = tinycolor(this.options.color || defaultSettings.color);
const { initCallback,
disableScrollZooming,
const { disableScrollZooming,
useClusterMarkers,
zoomOnClick,
showCoverageOnHover,
@ -91,9 +95,6 @@ export default abstract class LeafletMap {
if (disableScrollZooming) {
this.map.scrollWheelZoom.disable();
}
if (initCallback) {
setTimeout(options.initCallback, 0);
}
if (useClusterMarkers) {
const clusteringSettings: MarkerClusterGroupOptions = {
zoomToBoundsOnClick: zoomOnClick,
@ -109,7 +110,6 @@ export default abstract class LeafletMap {
clusteringSettings.disableClusteringAtZoom = Math.floor(maxZoom);
}
this.markersCluster = markerClusterGroup(clusteringSettings);
this.ready$.subscribe(map => map.addLayer(this.markersCluster));
}
}
@ -182,18 +182,16 @@ export default abstract class LeafletMap {
public setLoading(loading: boolean) {
if (this.loading !== loading) {
this.loading = loading;
this.ready$.subscribe(() => {
if (this.loading) {
if (!this.loadingDiv) {
this.loadingDiv = createLoadingDiv(this.ctx.translate.instant('common.loading'));
}
this.$container.append(this.loadingDiv[0]);
} else {
if (this.loadingDiv) {
this.loadingDiv.remove();
}
if (this.loading) {
if (!this.loadingDiv) {
this.loadingDiv = createLoadingDiv(this.ctx.translate.instant('common.loading'));
}
});
this.$container.append(this.loadingDiv[0]);
} else {
if (this.loadingDiv) {
this.loadingDiv.remove();
}
}
}
}
@ -207,11 +205,13 @@ export default abstract class LeafletMap {
if (this.options.draggableMarker) {
this.addMarkerControl();
}
this.map$.next(this.map);
}
public setDataSources(dataSources: FormattedData[]) {
this.datasources = dataSources;
if (this.options.useClusterMarkers) {
this.map.addLayer(this.markersCluster);
}
if (this.updatePending) {
this.updatePending = false;
this.updateData(this.drawRoutes, this.showPolygon);
}
}
public saveMarkerLocation(_e: FormattedData, lat?: number, lng?: number): Observable<any> {
@ -259,7 +259,7 @@ export default abstract class LeafletMap {
this.map.once('zoomend', () => {
let minZoom = this.options.minZoomLevel;
if (this.options.defaultZoomLevel) {
minZoom = Math.min(minZoom, this.options.defaultZoomLevel);
minZoom = Math.max(minZoom, this.options.defaultZoomLevel);
}
if (this.map.getZoom() > minZoom) {
this.map.setZoom(minZoom, { animate: false });
@ -297,8 +297,12 @@ export default abstract class LeafletMap {
}
}
updateData(data: DatasourceData[], formattedData: FormattedData[], drawRoutes: boolean, showPolygon: boolean) {
this.ready$.subscribe(() => {
updateData(drawRoutes: boolean, showPolygon: boolean) {
this.drawRoutes = drawRoutes;
this.showPolygon = showPolygon;
if (this.map) {
const data = this.ctx.data;
const formattedData = parseData(this.ctx.data);
if (drawRoutes) {
this.updatePolylines(parseArray(data), false);
}
@ -306,23 +310,28 @@ export default abstract class LeafletMap {
this.updatePolygons(formattedData, false);
}
this.updateMarkers(formattedData, false);
this.updateBoundsInternal(drawRoutes, showPolygon);
});
this.updateBoundsInternal();
if (this.options.draggableMarker) {
this.datasources = formattedData;
}
} else {
this.updatePending = true;
}
}
private updateBoundsInternal(drawRoutes: boolean, showPolygon: boolean) {
private updateBoundsInternal() {
const bounds = new L.LatLngBounds(null, null);
if (drawRoutes) {
if (this.drawRoutes) {
this.polylines.forEach((polyline) => {
bounds.extend(polyline.leafletPoly.getBounds());
});
}
if (showPolygon) {
if (this.showPolygon) {
this.polygons.forEach((polygon) => {
bounds.extend(polygon.leafletPoly.getBounds());
});
}
if ((this.options as MarkerSettings).useClusterMarkers) {
if ((this.options as MarkerSettings).useClusterMarkers && this.markersCluster.getBounds().isValid()) {
bounds.extend(this.markersCluster.getBounds());
} else {
this.markers.forEach((marker) => {
@ -331,7 +340,7 @@ export default abstract class LeafletMap {
}
const mapBounds = this.map.getBounds();
if (bounds.isValid() && (!this.bounds || !mapBounds.contains(bounds))) {
if (bounds.isValid() && (!this.bounds || !this.bounds.isValid() || !this.bounds.equals(bounds) && !mapBounds.contains(bounds))) {
this.bounds = bounds;
this.fitBounds(bounds);
}
@ -340,59 +349,57 @@ export default abstract class LeafletMap {
// Markers
updateMarkers(markersData: FormattedData[], updateBounds = true, callback?) {
const rawMarkers = markersData.filter(mdata => !!this.convertPosition(mdata));
this.ready$.subscribe(() => {
const toDelete = new Set(Array.from(this.markers.keys()));
const createdMarkers: Marker[] = [];
const updatedMarkers: Marker[] = [];
const deletedMarkers: Marker[] = [];
let m: Marker;
rawMarkers.forEach(data => {
if (data.rotationAngle || data.rotationAngle === 0) {
const currentImage = this.options.useMarkerImageFunction ?
safeExecute(this.options.markerImageFunction,
[data, this.options.markerImages, markersData, data.dsIndex]) : this.options.currentImage;
const style = currentImage ? 'background-image: url(' + currentImage.url + ');' : '';
this.options.icon = L.divIcon({
html: `<div class="arrow"
style="transform: translate(-10px, -10px)
rotate(${data.rotationAngle}deg);
${style}"><div>`
});
} else {
this.options.icon = null;
}
if (this.markers.get(data.entityName)) {
m = this.updateMarker(data.entityName, data, markersData, this.options);
if (m) {
updatedMarkers.push(m);
}
} else {
m = this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, updateBounds, callback);
if (m) {
createdMarkers.push(m);
}
}
toDelete.delete(data.entityName);
const toDelete = new Set(Array.from(this.markers.keys()));
const createdMarkers: Marker[] = [];
const updatedMarkers: Marker[] = [];
const deletedMarkers: Marker[] = [];
let m: Marker;
rawMarkers.forEach(data => {
if (data.rotationAngle || data.rotationAngle === 0) {
const currentImage = this.options.useMarkerImageFunction ?
safeExecute(this.options.markerImageFunction,
[data, this.options.markerImages, markersData, data.dsIndex]) : this.options.currentImage;
const style = currentImage ? 'background-image: url(' + currentImage.url + ');' : '';
this.options.icon = L.divIcon({
html: `<div class="arrow"
style="transform: translate(-10px, -10px)
rotate(${data.rotationAngle}deg);
${style}"><div>`
});
toDelete.forEach((key) => {
m = this.deleteMarker(key);
if (m) {
deletedMarkers.push(m);
}
});
this.markersData = markersData;
if ((this.options as MarkerSettings).useClusterMarkers) {
if (createdMarkers.length) {
this.markersCluster.addLayers(createdMarkers.map(marker => marker.leafletMarker));
}
if (updatedMarkers.length) {
this.markersCluster.refreshClusters(updatedMarkers.map(marker => marker.leafletMarker))
}
if (deletedMarkers.length) {
this.markersCluster.removeLayers(deletedMarkers.map(marker => marker.leafletMarker));
}
} else {
this.options.icon = null;
}
if (this.markers.get(data.entityName)) {
m = this.updateMarker(data.entityName, data, markersData, this.options);
if (m) {
updatedMarkers.push(m);
}
});
} else {
m = this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, updateBounds, callback);
if (m) {
createdMarkers.push(m);
}
}
toDelete.delete(data.entityName);
});
toDelete.forEach((key) => {
m = this.deleteMarker(key);
if (m) {
deletedMarkers.push(m);
}
});
this.markersData = markersData;
if ((this.options as MarkerSettings).useClusterMarkers) {
if (createdMarkers.length) {
this.markersCluster.addLayers(createdMarkers.map(marker => marker.leafletMarker));
}
if (updatedMarkers.length) {
this.markersCluster.refreshClusters(updatedMarkers.map(marker => marker.leafletMarker))
}
if (deletedMarkers.length) {
this.markersCluster.removeLayers(deletedMarkers.map(marker => marker.leafletMarker));
}
}
}
dragMarker = (e, data = {} as FormattedData) => {
@ -420,10 +427,8 @@ export default abstract class LeafletMap {
private updateMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings): Marker {
const marker: Marker = this.markers.get(key);
const location = this.convertPosition(data)
if (!location.equals(marker.location)) {
marker.updateMarkerPosition(location);
}
const location = this.convertPosition(data);
marker.updateMarkerPosition(location);
if (settings.showTooltip) {
marker.updateMarkerTooltip(data);
}
@ -445,26 +450,24 @@ export default abstract class LeafletMap {
}
updatePoints(pointsData: FormattedData[], getTooltip: (point: FormattedData, setTooltip?: boolean) => string) {
this.map$.subscribe(map => {
if (this.points) {
map.removeLayer(this.points);
}
this.points = new FeatureGroup();
pointsData.filter(pdata => !!this.convertPosition(pdata)).forEach(data => {
const point = L.circleMarker(this.convertPosition(data), {
color: this.options.pointColor,
radius: this.options.pointSize
});
if (!this.options.pointTooltipOnRightPanel) {
point.on('click', () => getTooltip(data));
}
else {
createTooltip(point, this.options, data.$datasource, getTooltip(data, false));
}
this.points.addLayer(point);
});
map.addLayer(this.points);
});
if (this.points) {
this.map.removeLayer(this.points);
}
this.points = new FeatureGroup();
pointsData.filter(pdata => !!this.convertPosition(pdata)).forEach(data => {
const point = L.circleMarker(this.convertPosition(data), {
color: this.options.pointColor,
radius: this.options.pointSize
});
if (!this.options.pointTooltipOnRightPanel) {
point.on('click', () => getTooltip(data));
}
else {
createTooltip(point, this.options, data.$datasource, getTooltip(data, false));
}
this.points.addLayer(point);
});
this.map.addLayer(this.points);
}
// Polyline
@ -494,27 +497,23 @@ export default abstract class LeafletMap {
}
createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) {
this.ready$.subscribe(() => {
const poly = new Polyline(this.map,
dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
if (updateBounds) {
const bounds = poly.leafletPoly.getBounds();
this.fitBounds(bounds);
}
this.polylines.set(data.entityName, poly);
});
const poly = new Polyline(this.map,
dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
if (updateBounds) {
const bounds = poly.leafletPoly.getBounds();
this.fitBounds(bounds);
}
this.polylines.set(data.entityName, poly);
}
updatePolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) {
this.ready$.subscribe(() => {
const poly = this.polylines.get(data.entityName);
const oldBounds = poly.leafletPoly.getBounds();
poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
const newBounds = poly.leafletPoly.getBounds();
if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
this.fitBounds(newBounds);
}
});
const poly = this.polylines.get(data.entityName);
const oldBounds = poly.leafletPoly.getBounds();
poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
const newBounds = poly.leafletPoly.getBounds();
if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
this.fitBounds(newBounds);
}
}
removePolyline(name: string) {
@ -560,26 +559,22 @@ export default abstract class LeafletMap {
}
createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) {
this.ready$.subscribe(() => {
const polygon = new Polygon(this.map, polyData, dataSources, settings);
if (updateBounds) {
const bounds = polygon.leafletPoly.getBounds();
this.fitBounds(bounds);
}
this.polygons.set(polyData.entityName, polygon);
});
const polygon = new Polygon(this.map, polyData, dataSources, settings);
if (updateBounds) {
const bounds = polygon.leafletPoly.getBounds();
this.fitBounds(bounds);
}
this.polygons.set(polyData.entityName, polygon);
}
updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) {
this.ready$.subscribe(() => {
const poly = this.polygons.get(polyData.entityName);
const oldBounds = poly.leafletPoly.getBounds();
poly.updatePolygon(polyData, dataSources, settings);
const newBounds = poly.leafletPoly.getBounds();
if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
this.fitBounds(newBounds);
}
});
const poly = this.polygons.get(polyData.entityName);
const oldBounds = poly.leafletPoly.getBounds();
poly.updatePolygon(polyData, dataSources, settings);
const newBounds = poly.leafletPoly.getBounds();
if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
this.fitBounds(newBounds);
}
}
removePolygon(name: string) {

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

@ -15,14 +15,7 @@
///
import { LatLngTuple } from 'leaflet';
import { Datasource, JsonSettingsSchema } from '@app/shared/models/widget.models';
import { Type } from '@angular/core';
import LeafletMap from './leaflet-map';
import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
import {
openstreetMapSettingsSchema, tencentMapSettingsSchema,
googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema
} from './schemes';
import { Datasource } from '@app/shared/models/widget.models';
import { EntityType } from '@shared/models/entity-type.models';
import tinycolor from 'tinycolor2';
@ -30,12 +23,10 @@ export const DEFAULT_MAP_PAGE_SIZE = 16384;
export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
export type GetTooltip = (point: FormattedData, setTooltip?: boolean) => string;
export type PosFuncton = (origXPos, origYPos) => { x, y };
export type MapSettings = {
draggableMarker: boolean;
initCallback?: () => any;
posFunction: PosFuncton;
defaultZoomLevel?: number;
disableScrollZooming?: boolean;
@ -209,40 +200,6 @@ export type actionsHandler = ($event: Event, datasource: Datasource) => void;
export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings & TripAnimationSettings;
interface IProvider {
MapClass: Type<LeafletMap>,
schema: JsonSettingsSchema,
name: string
}
export const providerSets: { [key: string]: IProvider } = {
'openstreet-map': {
MapClass: OpenStreetMap,
schema: openstreetMapSettingsSchema,
name: 'openstreet-map',
},
'tencent-map': {
MapClass: TencentMap,
schema: tencentMapSettingsSchema,
name: 'tencent-map'
},
'google-map': {
MapClass: GoogleMap,
schema: googleMapSettingsSchema,
name: 'google-map'
},
here: {
MapClass: HEREMap,
schema: hereMapSettingsSchema,
name: 'here'
},
'image-map': {
MapClass: ImageMap,
schema: imageMapSettingsSchema,
name: 'image-map'
}
};
export const defaultSettings: any = {
xPosKeyName: 'xPos',
yPosKeyName: 'yPos',

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

@ -15,12 +15,10 @@
///
import {
DEFAULT_MAP_PAGE_SIZE,
defaultSettings,
FormattedData,
hereProviders,
MapProviders,
providerSets,
UnitedMapSettings
} from './map-models';
import LeafletMap from './leaflet-map';
@ -46,6 +44,7 @@ import _ from 'lodash';
import { EntityDataPageLink } from '@shared/models/query/query.models';
import { isDefined } from '@core/utils';
import { forkJoin, Observable, of } from 'rxjs';
import { providerSets } from '@home/components/widget/lib/maps/providers';
// @dynamic
export class MapWidgetController implements MapWidgetInterface {
@ -275,11 +274,7 @@ export class MapWidgetController implements MapWidgetInterface {
}
update() {
const formattedData = parseData(this.data);
this.map.updateData(this.data, formattedData, this.drawRoutes, this.settings.showPolygon);
if (this.settings.draggableMarker) {
this.map.setDataSources(formattedData);
}
this.map.updateData(this.drawRoutes, this.settings.showPolygon);
this.map.setLoading(false);
}

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

@ -34,11 +34,10 @@ export class Marker {
tooltipOffset: L.LatLngTuple;
markerOffset: L.LatLngTuple;
tooltip: L.Popup;
location: L.LatLngExpression;
data: FormattedData;
dataSources: FormattedData[];
constructor(private map: LeafletMap, location: L.LatLngExpression, public settings: MarkerSettings,
constructor(private map: LeafletMap, private location: L.LatLng, public settings: MarkerSettings,
data?: FormattedData, dataSources?, onDragendListener?) {
this.setDataSources(data, dataSources);
this.leafletMarker = L.marker(location, {
@ -94,8 +93,11 @@ export class Marker {
}
}
updateMarkerPosition(position: L.LatLngExpression) {
updateMarkerPosition(position: L.LatLng) {
if (!this.location.equals(position)) {
this.location = position;
this.leafletMarker.setLatLng(position);
}
}
updateMarkerLabel(settings: MarkerSettings) {

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

@ -35,6 +35,7 @@ export class GoogleMap extends LeafletMap {
constructor(ctx: WidgetContext, $container, options: UnitedMapSettings) {
super(ctx, $container, options);
this.resource = ctx.$injector.get(ResourcesService);
super.initSettings(options);
this.loadGoogle(() => {
const map = L.map($container, {attributionControl: false}).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
(L.gridLayer as any).googleMutant({
@ -42,7 +43,6 @@ export class GoogleMap extends LeafletMap {
}).addTo(map);
super.setMap(map);
}, options.gmApiKey);
super.initSettings(options);
}
private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {

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

@ -25,7 +25,7 @@ export class HEREMap extends LeafletMap {
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
const tileLayer = (L.tileLayer as any).provider(options.mapProviderHere || 'HERE.normalDay', options.credentials);
tileLayer.addTo(map);
super.setMap(map);
super.initSettings(options);
super.setMap(map);
}
}

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

@ -47,8 +47,8 @@ export class ImageMap extends LeafletMap {
this.onResize(true);
} else {
this.onResize();
super.setMap(this.map);
super.initSettings(options);
super.setMap(this.map);
}
});
}

52
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts
View File

@ -14,8 +14,50 @@
/// limitations under the License.
///
export * from './tencent-map';
export * from './google-map';
export * from './here-map';
export * from './image-map';
export * from './openstreet-map';
import {
googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema,
openstreetMapSettingsSchema,
tencentMapSettingsSchema
} from '@home/components/widget/lib/maps/schemes';
import { OpenStreetMap } from './openstreet-map';
import { TencentMap } from './tencent-map';
import { GoogleMap } from './google-map';
import { HEREMap } from './here-map';
import { ImageMap } from './image-map';
import { Type } from '@angular/core';
import LeafletMap from '@home/components/widget/lib/maps/leaflet-map';
import { JsonSettingsSchema } from '@shared/models/widget.models';
interface IProvider {
MapClass: Type<LeafletMap>,
schema: JsonSettingsSchema,
name: string
}
export const providerSets: { [key: string]: IProvider } = {
'openstreet-map': {
MapClass: OpenStreetMap,
schema: openstreetMapSettingsSchema,
name: 'openstreet-map',
},
'tencent-map': {
MapClass: TencentMap,
schema: tencentMapSettingsSchema,
name: 'tencent-map'
},
'google-map': {
MapClass: GoogleMap,
schema: googleMapSettingsSchema,
name: 'google-map'
},
here: {
MapClass: HEREMap,
schema: hereMapSettingsSchema,
name: 'here'
},
'image-map': {
MapClass: ImageMap,
schema: imageMapSettingsSchema,
name: 'image-map'
}
};

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

@ -29,7 +29,7 @@ export class OpenStreetMap extends LeafletMap {
else
tileLayer = (L.tileLayer as any).provider(options.mapProvider || 'OpenStreetMap.Mapnik');
tileLayer.addTo(map);
super.setMap(map);
super.initSettings(options);
super.setMap(map);
}
}

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

@ -31,7 +31,7 @@ export class TencentMap extends LeafletMap {
attribution: '&copy;2020 Tencent - GS(2018)2236号- Data&copy; NavInfo'
}).addTo(map);
txLayer.addTo(map);
super.setMap(map);
super.initSettings(options);
super.setMap(map);
}
}

2
ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
View File

@ -159,7 +159,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy
}
this.calcLabel();
this.calcTooltip(currentPosition.find(position => position.entityName === this.activeTrip.entityName));
if (this.mapWidget) {
if (this.mapWidget && this.mapWidget.map && this.mapWidget.map.map) {
this.mapWidget.map.updatePolylines(this.interpolatedTimeData.map(ds => _.values(ds)), true, this.activeTrip);
if (this.settings.showPolygon) {
this.mapWidget.map.updatePolygons(this.interpolatedTimeData);

Write Preview
Loading…
Cancel
Save