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 19f9f18680..efe4b6dbdd 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 @@ -206,55 +206,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 latlng1: LatLng; + let mousePositionOnMap: LatLng; this.map.on('mousemove', (e: L.LeafletMouseEvent) => { - latlng1 = e.latlng; + mousePositionOnMap = e.latlng; }); const dragListener = (e: L.DragEndEvent) => { const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; - if(this.options.provider === MapProviders.image) { - latlng1.lng += polygonOffset; - latlng1.lat -= polygonOffset; - let convert = this.convertToCustomFormat(latlng1); - latlng1.lat = convert['latitude']; - latlng1.lng = convert['longitude']; + let convert = this.convertToCustomFormat(mousePositionOnMap,polygonOffset); + mousePositionOnMap.lat = convert[this.options.latKeyName]; + mousePositionOnMap.lng = convert[this.options.lngKeyName]; - if (convert['xPos'] !== 0) { - latlng1.lng -= polygonOffset; - } - - if (convert['yPos'] !== 0) { - latlng1.lat += polygonOffset; - } - } else { - const maxLatitude = Projection.SphericalMercator['MAX_LATITUDE']; - - if (latlng1.lng > 180 - polygonOffset) { - latlng1.lng = 180 - polygonOffset; - } else if (latlng1.lng < -180) { - latlng1.lng = -180; - } - - if(latlng1.lat > maxLatitude){ - latlng1.lat = maxLatitude; - }else if(latlng1.lat < -maxLatitude + polygonOffset){ - latlng1.lat = -maxLatitude + polygonOffset; - } - } + 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 latlng2 = L.latLng(latlng1.lat, latlng1.lng + polygonOffset); - const latlng3 = L.latLng(latlng1.lat - polygonOffset, latlng1.lng); - mousePositionOnMap = [latlng1, latlng2, latlng3]; - - if (e.type === 'dragend' && mousePositionOnMap) { - const newPolygon = L.polygon(mousePositionOnMap).addTo(this.map); + if (e.type === 'dragend' && polygonPoints) { + 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'); @@ -448,12 +423,27 @@ export default abstract class LeafletMap { }).filter(el => !!el); } - convertToCustomFormat(position: L.LatLng): object { - if (position.lng > 180) { - position.lng = 180; + + checkLngLat(position: L.LatLng, polygonOffset: number = 0){ + const maxLatitude = Projection.SphericalMercator['MAX_LATITUDE']; + const minLatitude = -maxLatitude; + if (position.lng > 180 - polygonOffset) { + position.lng = 180 - polygonOffset; } else if (position.lng < -180) { - position.lng = -180; + position.lng= -180; } + + if(position.lat > maxLatitude){ + position.lat = maxLatitude; + }else if(position.lat < minLatitude + polygonOffset){ + position.lat = minLatitude + polygonOffset; + } + return position; + } + + convertToCustomFormat(position: L.LatLng, polygonOffset: number = 0): object { + position = this.checkLngLat(position,polygonOffset) + return { [this.options.latKeyName]: position.lat, [this.options.lngKeyName]: position.lng @@ -762,6 +752,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] = this.checkLngLat(e.layer._latlngs[0][key]); + } + } 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 7c00e9d557..ffa117eb93 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 @@ -16,7 +16,7 @@ import L, { LatLngBounds, LatLngLiteral, LatLngTuple } from 'leaflet'; import LeafletMap from '../leaflet-map'; -import { MapImage, PosFuncton, UnitedMapSettings } from '../map-models'; +import {MapImage, MapProviders, 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'; @@ -187,7 +187,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 +257,12 @@ 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, polygonOffset: number = 0, width = this.width, height = this.height): object { + position.lng += polygonOffset; + position.lat -= polygonOffset; 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,8 +274,17 @@ export class ImageMap extends LeafletMap { } else if (customY === 1) { point.y = height; } + const customLatLng = this.pointToLatLng(point.x, point.y); + if (customX !== 0) { + customLatLng.lng -= polygonOffset; + } + if (customY !== 0) { + customLatLng.lat += polygonOffset; + } + + return { [this.options.xPosKeyName]: customX, [this.options.yPosKeyName]: customY,