Merge pull request #3940 from kalutkaz/fixMapPolygon

[3.2.1] Fix map polygon

Merge pull request #3940 from kalutkaz/fixMapPolygon
[3.2.1] Fix map polygon
Igor Kulikov · GitHub
2 parents 5caba218 7f8c3ad0
Showing 3 changed files with 65 additions and 27 deletions
ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts
ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts
View file @cff3666
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts
View file @cff3666
@@ -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<HTMLElement> {
     </div>
   `);
 }
+
+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;
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
View file @cff3666
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
View file @cff3666
@@ -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();
   }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
View file @cff3666
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
View file @cff3666
@@ -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,