Showing
3 changed files
with
39 additions
and
40 deletions
@@ -30,6 +30,7 @@ import { Datasource, DatasourceData } from '@shared/models/widget.models'; | @@ -30,6 +30,7 @@ import { Datasource, DatasourceData } from '@shared/models/widget.models'; | ||
30 | import _ from 'lodash'; | 30 | import _ from 'lodash'; |
31 | import { mapProviderSchema, providerSets } from '@home/components/widget/lib/maps/schemes'; | 31 | import { mapProviderSchema, providerSets } from '@home/components/widget/lib/maps/schemes'; |
32 | import { addCondition, mergeSchemes } from '@core/schema-utils'; | 32 | import { addCondition, mergeSchemes } from '@core/schema-utils'; |
33 | +import L, {Projection} from "leaflet"; | ||
33 | 34 | ||
34 | export function getProviderSchema(mapProvider: MapProviders, ignoreImageMap = false) { | 35 | export function getProviderSchema(mapProvider: MapProviders, ignoreImageMap = false) { |
35 | const providerSchema = _.cloneDeep(mapProviderSchema); | 36 | const providerSchema = _.cloneDeep(mapProviderSchema); |
@@ -443,3 +444,21 @@ export function createLoadingDiv(loadingText: string): JQuery<HTMLElement> { | @@ -443,3 +444,21 @@ export function createLoadingDiv(loadingText: string): JQuery<HTMLElement> { | ||
443 | </div> | 444 | </div> |
444 | `); | 445 | `); |
445 | } | 446 | } |
447 | + | ||
448 | +export function checkLngLat(point: L.LatLng, southWest: L.LatLng, northEast: L.LatLng, offset = 0): L.LatLng { | ||
449 | + const maxLngMap = northEast.lng - offset; | ||
450 | + const minLngMap = southWest.lng + offset; | ||
451 | + const maxLatMap = northEast.lat - offset; | ||
452 | + const minLatMap = southWest.lat + offset; | ||
453 | + if (point.lng > maxLngMap) { | ||
454 | + point.lng = maxLngMap; | ||
455 | + } else if (point.lng < minLngMap) { | ||
456 | + point.lng = minLngMap; | ||
457 | + } | ||
458 | + if (point.lat > maxLatMap) { | ||
459 | + point.lat = maxLatMap; | ||
460 | + } else if (point.lat < minLatMap) { | ||
461 | + point.lat = minLatMap; | ||
462 | + } | ||
463 | + return point; | ||
464 | +} |
@@ -46,6 +46,7 @@ import { | @@ -46,6 +46,7 @@ import { | ||
46 | createTooltip, | 46 | createTooltip, |
47 | } from '@home/components/widget/lib/maps/maps-utils'; | 47 | } from '@home/components/widget/lib/maps/maps-utils'; |
48 | import { | 48 | import { |
49 | + checkLngLat, | ||
49 | createLoadingDiv, | 50 | createLoadingDiv, |
50 | parseArray, | 51 | parseArray, |
51 | parseData, | 52 | parseData, |
@@ -79,6 +80,8 @@ export default abstract class LeafletMap { | @@ -79,6 +80,8 @@ export default abstract class LeafletMap { | ||
79 | updatePending = false; | 80 | updatePending = false; |
80 | addMarkers: L.Marker[] = []; | 81 | addMarkers: L.Marker[] = []; |
81 | addPolygons: L.Polygon[] = []; | 82 | addPolygons: L.Polygon[] = []; |
83 | + southWest = new L.LatLng(-Projection.SphericalMercator['MAX_LATITUDE'], -180); | ||
84 | + northEast = new L.LatLng(Projection.SphericalMercator['MAX_LATITUDE'], 180); | ||
82 | 85 | ||
83 | protected constructor(public ctx: WidgetContext, | 86 | protected constructor(public ctx: WidgetContext, |
84 | public $container: HTMLElement, | 87 | public $container: HTMLElement, |
@@ -423,26 +426,8 @@ export default abstract class LeafletMap { | @@ -423,26 +426,8 @@ export default abstract class LeafletMap { | ||
423 | }).filter(el => !!el); | 426 | }).filter(el => !!el); |
424 | } | 427 | } |
425 | 428 | ||
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; | ||
432 | - } else if (position.lng < -180) { | ||
433 | - position.lng= -180; | ||
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) | 429 | + convertToCustomFormat(position: L.LatLng, offset = 0): object { |
430 | + position = checkLngLat(position, this.southWest, this.northEast, offset); | ||
446 | 431 | ||
447 | return { | 432 | return { |
448 | [this.options.latKeyName]: position.lat, | 433 | [this.options.latKeyName]: position.lat, |
@@ -754,7 +739,7 @@ export default abstract class LeafletMap { | @@ -754,7 +739,7 @@ export default abstract class LeafletMap { | ||
754 | } | 739 | } |
755 | if(this.options.provider !== MapProviders.image) { | 740 | if(this.options.provider !== MapProviders.image) { |
756 | for (let key in e.layer._latlngs[0]) { | 741 | for (let key in e.layer._latlngs[0]) { |
757 | - e.layer._latlngs[0][key] = this.checkLngLat(e.layer._latlngs[0][key]); | 742 | + e.layer._latlngs[0][key] = checkLngLat(e.layer._latlngs[0][key], this.southWest, this.northEast); |
758 | } | 743 | } |
759 | } | 744 | } |
760 | this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe(); | 745 | this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe(); |
@@ -16,10 +16,15 @@ | @@ -16,10 +16,15 @@ | ||
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, MapProviders, PosFuncton, UnitedMapSettings} from '../map-models'; | 19 | +import { MapImage, 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 { |
23 | + aspectCache, | ||
24 | + calculateNewPointCoordinate, | ||
25 | + checkLngLat, | ||
26 | + parseFunction | ||
27 | +} from '@home/components/widget/lib/maps/common-maps-utils'; | ||
23 | import { WidgetContext } from '@home/models/widget-component.models'; | 28 | import { WidgetContext } from '@home/models/widget-component.models'; |
24 | import { DataSet, DatasourceType, widgetType } from '@shared/models/widget.models'; | 29 | import { DataSet, DatasourceType, widgetType } from '@shared/models/widget.models'; |
25 | import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; | 30 | import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
@@ -132,9 +137,9 @@ export class ImageMap extends LeafletMap { | @@ -132,9 +137,9 @@ export class ImageMap extends LeafletMap { | ||
132 | updateBounds(updateImage?: boolean, lastCenterPos?) { | 137 | updateBounds(updateImage?: boolean, lastCenterPos?) { |
133 | const w = this.width; | 138 | const w = this.width; |
134 | const h = this.height; | 139 | const h = this.height; |
135 | - let southWest = this.pointToLatLng(0, h); | ||
136 | - let northEast = this.pointToLatLng(w, 0); | ||
137 | - const bounds = new L.LatLngBounds(southWest, northEast); | 140 | + this.southWest = this.pointToLatLng(0, h); |
141 | + this.northEast = this.pointToLatLng(w, 0); | ||
142 | + const bounds = new L.LatLngBounds(this.southWest, this.northEast); | ||
138 | 143 | ||
139 | if (updateImage && this.imageOverlay) { | 144 | if (updateImage && this.imageOverlay) { |
140 | this.imageOverlay.remove(); | 145 | this.imageOverlay.remove(); |
@@ -147,8 +152,8 @@ export class ImageMap extends LeafletMap { | @@ -147,8 +152,8 @@ export class ImageMap extends LeafletMap { | ||
147 | this.imageOverlay = L.imageOverlay(this.imageUrl, bounds).addTo(this.map); | 152 | this.imageOverlay = L.imageOverlay(this.imageUrl, bounds).addTo(this.map); |
148 | } | 153 | } |
149 | const padding = 200 * maxZoom; | 154 | const padding = 200 * maxZoom; |
150 | - southWest = this.pointToLatLng(-padding, h + padding); | ||
151 | - northEast = this.pointToLatLng(w + padding, -padding); | 155 | + const southWest = this.pointToLatLng(-padding, h + padding); |
156 | + const northEast = this.pointToLatLng(w + padding, -padding); | ||
152 | const maxBounds = new L.LatLngBounds(southWest, northEast); | 157 | const maxBounds = new L.LatLngBounds(southWest, northEast); |
153 | this.map.setMaxBounds(maxBounds); | 158 | this.map.setMaxBounds(maxBounds); |
154 | if (lastCenterPos) { | 159 | if (lastCenterPos) { |
@@ -257,9 +262,7 @@ export class ImageMap extends LeafletMap { | @@ -257,9 +262,7 @@ export class ImageMap extends LeafletMap { | ||
257 | return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1); | 262 | return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1); |
258 | } | 263 | } |
259 | 264 | ||
260 | - convertToCustomFormat(position: L.LatLng, polygonOffset: number = 0, width = this.width, height = this.height): object { | ||
261 | - position.lng += polygonOffset; | ||
262 | - position.lat -= polygonOffset; | 265 | + convertToCustomFormat(position: L.LatLng, offset = 0, width = this.width, height = this.height): object { |
263 | const point = this.latLngToPoint(position); | 266 | const point = this.latLngToPoint(position); |
264 | const customX = calculateNewPointCoordinate(point.x, width); | 267 | const customX = calculateNewPointCoordinate(point.x, width); |
265 | const customY = calculateNewPointCoordinate(point.y, height); | 268 | const customY = calculateNewPointCoordinate(point.y, height); |
@@ -275,15 +278,7 @@ export class ImageMap extends LeafletMap { | @@ -275,15 +278,7 @@ export class ImageMap extends LeafletMap { | ||
275 | point.y = height; | 278 | point.y = height; |
276 | } | 279 | } |
277 | 280 | ||
278 | - const customLatLng = this.pointToLatLng(point.x, point.y); | ||
279 | - | ||
280 | - if (customX !== 0) { | ||
281 | - customLatLng.lng -= polygonOffset; | ||
282 | - } | ||
283 | - if (customY !== 0) { | ||
284 | - customLatLng.lat += polygonOffset; | ||
285 | - } | ||
286 | - | 281 | + const customLatLng = checkLngLat(this.pointToLatLng(point.x, point.y), this.southWest, this.northEast, offset); |
287 | 282 | ||
288 | return { | 283 | return { |
289 | [this.options.xPosKeyName]: customX, | 284 | [this.options.xPosKeyName]: customX, |