diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts index 9b0b296a84..077d8dfb6d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts @@ -30,6 +30,7 @@ import { Datasource, DatasourceData } from '@shared/models/widget.models'; import _ from 'lodash'; import { mapProviderSchema, providerSets } from '@home/components/widget/lib/maps/schemes'; import { addCondition, mergeSchemes } from '@core/schema-utils'; +import L, {Projection} from "leaflet"; export function getProviderSchema(mapProvider: MapProviders, ignoreImageMap = false) { const providerSchema = _.cloneDeep(mapProviderSchema); @@ -443,3 +444,21 @@ export function createLoadingDiv(loadingText: string): JQuery { `); } + +export function checkLngLat(point: L.LatLng, southWest: L.LatLng, northEast: L.LatLng, offset = 0): L.LatLng { + const maxLngMap = northEast.lng - offset; + const minLngMap = southWest.lng + offset; + const maxLatMap = northEast.lat - offset; + const minLatMap = southWest.lat + offset; + if (point.lng > maxLngMap) { + point.lng = maxLngMap; + } else if (point.lng < minLngMap) { + point.lng = minLngMap; + } + if (point.lat > maxLatMap) { + point.lat = maxLatMap; + } else if (point.lat < minLatMap) { + point.lat = minLatMap; + } + return point; +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index be3551b51f..57a0563a4e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -16,12 +16,12 @@ import L, { FeatureGroup, - Icon, + Icon, LatLng, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroup, - MarkerClusterGroupOptions + MarkerClusterGroupOptions, Projection } from 'leaflet'; import tinycolor from 'tinycolor2'; import 'leaflet-providers'; @@ -46,6 +46,7 @@ import { createTooltip, } from '@home/components/widget/lib/maps/maps-utils'; import { + checkLngLat, createLoadingDiv, parseArray, parseData, @@ -79,6 +80,8 @@ export default abstract class LeafletMap { updatePending = false; addMarkers: L.Marker[] = []; addPolygons: L.Polygon[] = []; + southWest = new L.LatLng(-Projection.SphericalMercator['MAX_LATITUDE'], -180); + northEast = new L.LatLng(Projection.SphericalMercator['MAX_LATITUDE'], 180); protected constructor(public ctx: WidgetContext, public $container: HTMLElement, @@ -206,21 +209,30 @@ export default abstract class LeafletMap { addPolygonControl() { if (this.options.showPolygon && this.options.editablePolygon) { - let mousePositionOnMap: L.LatLng[]; + let polygonPoints: L.LatLng[]; let addPolygon: L.Control; + let mousePositionOnMap: LatLng; this.map.on('mousemove', (e: L.LeafletMouseEvent) => { - const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; - const latlng1 = e.latlng; - const latlng2 = L.latLng(e.latlng.lat, e.latlng.lng + polygonOffset); - const latlng3 = L.latLng(e.latlng.lat - polygonOffset, e.latlng.lng); - mousePositionOnMap = [latlng1, latlng2, latlng3]; + mousePositionOnMap = e.latlng; }); + const dragListener = (e: L.DragEndEvent) => { - if (e.type === 'dragend' && mousePositionOnMap) { - const newPolygon = L.polygon(mousePositionOnMap).addTo(this.map); + if (e.type === 'dragend') { + const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; + + let convert = this.convertToCustomFormat(mousePositionOnMap,polygonOffset); + mousePositionOnMap.lat = convert[this.options.latKeyName]; + mousePositionOnMap.lng = convert[this.options.lngKeyName]; + + const latlng1 = mousePositionOnMap; + const latlng2 = L.latLng(mousePositionOnMap.lat, mousePositionOnMap.lng + polygonOffset); + const latlng3 = L.latLng(mousePositionOnMap.lat - polygonOffset, mousePositionOnMap.lng); + polygonPoints = [latlng1, latlng2, latlng3]; + + const newPolygon = L.polygon(polygonPoints).addTo(this.map); this.addPolygons.push(newPolygon); const datasourcesList = document.createElement('div'); - const customLatLng = {[this.options.polygonKeyName]: this.convertToPolygonFormat(mousePositionOnMap)}; + const customLatLng = {[this.options.polygonKeyName]: this.convertToPolygonFormat(polygonPoints)}; const header = document.createElement('p'); header.appendChild(document.createTextNode('Select entity:')); header.setAttribute('style', 'font-size: 14px; margin: 8px 0'); @@ -414,12 +426,9 @@ export default abstract class LeafletMap { }).filter(el => !!el); } - convertToCustomFormat(position: L.LatLng): object { - if (position.lng > 180) { - position.lng = 180; - } else if (position.lng < -180) { - position.lng = -180; - } + convertToCustomFormat(position: L.LatLng, offset = 0): object { + position = checkLngLat(position, this.southWest, this.northEast, offset); + return { [this.options.latKeyName]: position.lat, [this.options.lngKeyName]: position.lng @@ -728,6 +737,11 @@ export default abstract class LeafletMap { if (e === undefined || (e.type !== 'editable:vertex:dragend' && e.type !== 'editable:vertex:deleted')) { return; } + if(this.options.provider !== MapProviders.image) { + for (let key in e.layer._latlngs[0]) { + e.layer._latlngs[0][key] = checkLngLat(e.layer._latlngs[0][key], this.southWest, this.northEast); + } + } this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe(); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts index 1ac50b0f42..fe386036fd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts @@ -19,7 +19,12 @@ import LeafletMap from '../leaflet-map'; import { MapImage, PosFuncton, UnitedMapSettings } from '../map-models'; import { Observable, ReplaySubject } from 'rxjs'; import { filter, map, mergeMap } from 'rxjs/operators'; -import { aspectCache, calculateNewPointCoordinate, parseFunction } from '@home/components/widget/lib/maps/common-maps-utils'; +import { + aspectCache, + calculateNewPointCoordinate, + checkLngLat, + parseFunction +} from '@home/components/widget/lib/maps/common-maps-utils'; import { WidgetContext } from '@home/models/widget-component.models'; import { DataSet, DatasourceType, widgetType } from '@shared/models/widget.models'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; @@ -132,9 +137,9 @@ export class ImageMap extends LeafletMap { updateBounds(updateImage?: boolean, lastCenterPos?) { const w = this.width; const h = this.height; - let southWest = this.pointToLatLng(0, h); - let northEast = this.pointToLatLng(w, 0); - const bounds = new L.LatLngBounds(southWest, northEast); + this.southWest = this.pointToLatLng(0, h); + this.northEast = this.pointToLatLng(w, 0); + const bounds = new L.LatLngBounds(this.southWest, this.northEast); if (updateImage && this.imageOverlay) { this.imageOverlay.remove(); @@ -147,8 +152,8 @@ export class ImageMap extends LeafletMap { this.imageOverlay = L.imageOverlay(this.imageUrl, bounds).addTo(this.map); } const padding = 200 * maxZoom; - southWest = this.pointToLatLng(-padding, h + padding); - northEast = this.pointToLatLng(w + padding, -padding); + const southWest = this.pointToLatLng(-padding, h + padding); + const northEast = this.pointToLatLng(w + padding, -padding); const maxBounds = new L.LatLngBounds(southWest, northEast); this.map.setMaxBounds(maxBounds); if (lastCenterPos) { @@ -187,7 +192,7 @@ export class ImageMap extends LeafletMap { this.updateMarkers(this.markersData); if (this.options.draggableMarker && this.addMarkers.length) { this.addMarkers.forEach((marker) => { - const prevPoint = this.convertToCustomFormat(marker.getLatLng(), prevWidth, prevHeight); + const prevPoint = this.convertToCustomFormat(marker.getLatLng(), null, prevWidth, prevHeight); marker.setLatLng(this.convertPosition(prevPoint)); }); } @@ -257,11 +262,10 @@ export class ImageMap extends LeafletMap { return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1); } - convertToCustomFormat(position: L.LatLng, width = this.width, height = this.height): object { + convertToCustomFormat(position: L.LatLng, offset = 0, width = this.width, height = this.height): object { const point = this.latLngToPoint(position); const customX = calculateNewPointCoordinate(point.x, width); const customY = calculateNewPointCoordinate(point.y, height); - if (customX === 0) { point.x = 0; } else if (customX === 1) { @@ -273,7 +277,8 @@ export class ImageMap extends LeafletMap { } else if (customY === 1) { point.y = height; } - const customLatLng = this.pointToLatLng(point.x, point.y); + + const customLatLng = checkLngLat(this.pointToLatLng(point.x, point.y), this.southWest, this.northEast, offset); return { [this.options.xPosKeyName]: customX,