Commit 93155fb19d58720c06fe8db45e8853318bb85b58

Authored by Kalutka Zhenya
1 parent 6932a32b

Update script for maps

@@ -206,55 +206,30 @@ export default abstract class LeafletMap { @@ -206,55 +206,30 @@ export default abstract class LeafletMap {
206 206
207 addPolygonControl() { 207 addPolygonControl() {
208 if (this.options.showPolygon && this.options.editablePolygon) { 208 if (this.options.showPolygon && this.options.editablePolygon) {
209 - let mousePositionOnMap: L.LatLng[]; 209 + let polygonPoints: L.LatLng[];
210 let addPolygon: L.Control; 210 let addPolygon: L.Control;
211 - let latlng1: LatLng; 211 + let mousePositionOnMap: LatLng;
212 this.map.on('mousemove', (e: L.LeafletMouseEvent) => { 212 this.map.on('mousemove', (e: L.LeafletMouseEvent) => {
213 - latlng1 = e.latlng; 213 + mousePositionOnMap = e.latlng;
214 }); 214 });
215 215
216 const dragListener = (e: L.DragEndEvent) => { 216 const dragListener = (e: L.DragEndEvent) => {
217 const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; 217 const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01;
218 218
219 - if(this.options.provider === MapProviders.image) {  
220 - latlng1.lng += polygonOffset;  
221 - latlng1.lat -= polygonOffset;  
222 - let convert = this.convertToCustomFormat(latlng1);  
223 - latlng1.lat = convert['latitude'];  
224 - latlng1.lng = convert['longitude']; 219 + let convert = this.convertToCustomFormat(mousePositionOnMap,polygonOffset);
  220 + mousePositionOnMap.lat = convert[this.options.latKeyName];
  221 + mousePositionOnMap.lng = convert[this.options.lngKeyName];
225 222
226 - if (convert['xPos'] !== 0) {  
227 - latlng1.lng -= polygonOffset;  
228 - }  
229 -  
230 - if (convert['yPos'] !== 0) {  
231 - latlng1.lat += polygonOffset;  
232 - }  
233 - } else {  
234 - const maxLatitude = Projection.SphericalMercator['MAX_LATITUDE'];  
235 -  
236 - if (latlng1.lng > 180 - polygonOffset) {  
237 - latlng1.lng = 180 - polygonOffset;  
238 - } else if (latlng1.lng < -180) {  
239 - latlng1.lng = -180;  
240 - }  
241 -  
242 - if(latlng1.lat > maxLatitude){  
243 - latlng1.lat = maxLatitude;  
244 - }else if(latlng1.lat < -maxLatitude + polygonOffset){  
245 - latlng1.lat = -maxLatitude + polygonOffset;  
246 - }  
247 - } 223 + const latlng1 = mousePositionOnMap;
  224 + const latlng2 = L.latLng(mousePositionOnMap.lat, mousePositionOnMap.lng + polygonOffset);
  225 + const latlng3 = L.latLng(mousePositionOnMap.lat - polygonOffset, mousePositionOnMap.lng);
  226 + polygonPoints = [latlng1, latlng2, latlng3];
248 227
249 - const latlng2 = L.latLng(latlng1.lat, latlng1.lng + polygonOffset);  
250 - const latlng3 = L.latLng(latlng1.lat - polygonOffset, latlng1.lng);  
251 - mousePositionOnMap = [latlng1, latlng2, latlng3];  
252 -  
253 - if (e.type === 'dragend' && mousePositionOnMap) {  
254 - const newPolygon = L.polygon(mousePositionOnMap).addTo(this.map); 228 + if (e.type === 'dragend' && polygonPoints) {
  229 + const newPolygon = L.polygon(polygonPoints).addTo(this.map);
255 this.addPolygons.push(newPolygon); 230 this.addPolygons.push(newPolygon);
256 const datasourcesList = document.createElement('div'); 231 const datasourcesList = document.createElement('div');
257 - const customLatLng = {[this.options.polygonKeyName]: this.convertToPolygonFormat(mousePositionOnMap)}; 232 + const customLatLng = {[this.options.polygonKeyName]: this.convertToPolygonFormat(polygonPoints)};
258 const header = document.createElement('p'); 233 const header = document.createElement('p');
259 header.appendChild(document.createTextNode('Select entity:')); 234 header.appendChild(document.createTextNode('Select entity:'));
260 header.setAttribute('style', 'font-size: 14px; margin: 8px 0'); 235 header.setAttribute('style', 'font-size: 14px; margin: 8px 0');
@@ -448,12 +423,27 @@ export default abstract class LeafletMap { @@ -448,12 +423,27 @@ export default abstract class LeafletMap {
448 }).filter(el => !!el); 423 }).filter(el => !!el);
449 } 424 }
450 425
451 - convertToCustomFormat(position: L.LatLng): object {  
452 - if (position.lng > 180) {  
453 - position.lng = 180; 426 +
  427 + checkLngLat(position: L.LatLng, polygonOffset: number = 0){
  428 + const maxLatitude = Projection.SphericalMercator['MAX_LATITUDE'];
  429 + const minLatitude = -maxLatitude;
  430 + if (position.lng > 180 - polygonOffset) {
  431 + position.lng = 180 - polygonOffset;
454 } else if (position.lng < -180) { 432 } else if (position.lng < -180) {
455 - position.lng = -180; 433 + position.lng= -180;
456 } 434 }
  435 +
  436 + if(position.lat > maxLatitude){
  437 + position.lat = maxLatitude;
  438 + }else if(position.lat < minLatitude + polygonOffset){
  439 + position.lat = minLatitude + polygonOffset;
  440 + }
  441 + return position;
  442 + }
  443 +
  444 + convertToCustomFormat(position: L.LatLng, polygonOffset: number = 0): object {
  445 + position = this.checkLngLat(position,polygonOffset)
  446 +
457 return { 447 return {
458 [this.options.latKeyName]: position.lat, 448 [this.options.latKeyName]: position.lat,
459 [this.options.lngKeyName]: position.lng 449 [this.options.lngKeyName]: position.lng
@@ -762,6 +752,11 @@ export default abstract class LeafletMap { @@ -762,6 +752,11 @@ export default abstract class LeafletMap {
762 if (e === undefined || (e.type !== 'editable:vertex:dragend' && e.type !== 'editable:vertex:deleted')) { 752 if (e === undefined || (e.type !== 'editable:vertex:dragend' && e.type !== 'editable:vertex:deleted')) {
763 return; 753 return;
764 } 754 }
  755 + if(this.options.provider !== MapProviders.image) {
  756 + for (let key in e.layer._latlngs[0]) {
  757 + e.layer._latlngs[0][key] = this.checkLngLat(e.layer._latlngs[0][key]);
  758 + }
  759 + }
765 this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe(); 760 this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe();
766 } 761 }
767 762
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 16
17 import L, { LatLngBounds, LatLngLiteral, LatLngTuple } from 'leaflet'; 17 import L, { LatLngBounds, LatLngLiteral, LatLngTuple } from 'leaflet';
18 import LeafletMap from '../leaflet-map'; 18 import LeafletMap from '../leaflet-map';
19 -import { MapImage, PosFuncton, UnitedMapSettings } from '../map-models'; 19 +import {MapImage, MapProviders, PosFuncton, UnitedMapSettings} from '../map-models';
20 import { Observable, ReplaySubject } from 'rxjs'; 20 import { Observable, ReplaySubject } from 'rxjs';
21 import { filter, map, mergeMap } from 'rxjs/operators'; 21 import { filter, map, mergeMap } from 'rxjs/operators';
22 import { aspectCache, calculateNewPointCoordinate, parseFunction } from '@home/components/widget/lib/maps/common-maps-utils'; 22 import { aspectCache, calculateNewPointCoordinate, parseFunction } from '@home/components/widget/lib/maps/common-maps-utils';
@@ -187,7 +187,7 @@ export class ImageMap extends LeafletMap { @@ -187,7 +187,7 @@ export class ImageMap extends LeafletMap {
187 this.updateMarkers(this.markersData); 187 this.updateMarkers(this.markersData);
188 if (this.options.draggableMarker && this.addMarkers.length) { 188 if (this.options.draggableMarker && this.addMarkers.length) {
189 this.addMarkers.forEach((marker) => { 189 this.addMarkers.forEach((marker) => {
190 - const prevPoint = this.convertToCustomFormat(marker.getLatLng(), prevWidth, prevHeight); 190 + const prevPoint = this.convertToCustomFormat(marker.getLatLng(),null, prevWidth, prevHeight);
191 marker.setLatLng(this.convertPosition(prevPoint)); 191 marker.setLatLng(this.convertPosition(prevPoint));
192 }); 192 });
193 } 193 }
@@ -257,11 +257,12 @@ export class ImageMap extends LeafletMap { @@ -257,11 +257,12 @@ export class ImageMap extends LeafletMap {
257 return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1); 257 return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1);
258 } 258 }
259 259
260 - convertToCustomFormat(position: L.LatLng, width = this.width, height = this.height): object { 260 + convertToCustomFormat(position: L.LatLng, polygonOffset: number = 0, width = this.width, height = this.height): object {
  261 + position.lng += polygonOffset;
  262 + position.lat -= polygonOffset;
261 const point = this.latLngToPoint(position); 263 const point = this.latLngToPoint(position);
262 const customX = calculateNewPointCoordinate(point.x, width); 264 const customX = calculateNewPointCoordinate(point.x, width);
263 const customY = calculateNewPointCoordinate(point.y, height); 265 const customY = calculateNewPointCoordinate(point.y, height);
264 -  
265 if (customX === 0) { 266 if (customX === 0) {
266 point.x = 0; 267 point.x = 0;
267 } else if (customX === 1) { 268 } else if (customX === 1) {
@@ -273,8 +274,17 @@ export class ImageMap extends LeafletMap { @@ -273,8 +274,17 @@ export class ImageMap extends LeafletMap {
273 } else if (customY === 1) { 274 } else if (customY === 1) {
274 point.y = height; 275 point.y = height;
275 } 276 }
  277 +
276 const customLatLng = this.pointToLatLng(point.x, point.y); 278 const customLatLng = this.pointToLatLng(point.x, point.y);
277 279
  280 + if (customX !== 0) {
  281 + customLatLng.lng -= polygonOffset;
  282 + }
  283 + if (customY !== 0) {
  284 + customLatLng.lat += polygonOffset;
  285 + }
  286 +
  287 +
278 return { 288 return {
279 [this.options.xPosKeyName]: customX, 289 [this.options.xPosKeyName]: customX,
280 [this.options.yPosKeyName]: customY, 290 [this.options.yPosKeyName]: customY,