Showing
3 changed files
with
39 additions
and
40 deletions
... | ... | @@ -30,6 +30,7 @@ import { Datasource, DatasourceData } from '@shared/models/widget.models'; |
30 | 30 | import _ from 'lodash'; |
31 | 31 | import { mapProviderSchema, providerSets } from '@home/components/widget/lib/maps/schemes'; |
32 | 32 | import { addCondition, mergeSchemes } from '@core/schema-utils'; |
33 | +import L, {Projection} from "leaflet"; | |
33 | 34 | |
34 | 35 | export function getProviderSchema(mapProvider: MapProviders, ignoreImageMap = false) { |
35 | 36 | const providerSchema = _.cloneDeep(mapProviderSchema); |
... | ... | @@ -443,3 +444,21 @@ export function createLoadingDiv(loadingText: string): JQuery<HTMLElement> { |
443 | 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 | 46 | createTooltip, |
47 | 47 | } from '@home/components/widget/lib/maps/maps-utils'; |
48 | 48 | import { |
49 | + checkLngLat, | |
49 | 50 | createLoadingDiv, |
50 | 51 | parseArray, |
51 | 52 | parseData, |
... | ... | @@ -79,6 +80,8 @@ export default abstract class LeafletMap { |
79 | 80 | updatePending = false; |
80 | 81 | addMarkers: L.Marker[] = []; |
81 | 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 | 86 | protected constructor(public ctx: WidgetContext, |
84 | 87 | public $container: HTMLElement, |
... | ... | @@ -423,26 +426,8 @@ export default abstract class LeafletMap { |
423 | 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 | 432 | return { |
448 | 433 | [this.options.latKeyName]: position.lat, |
... | ... | @@ -754,7 +739,7 @@ export default abstract class LeafletMap { |
754 | 739 | } |
755 | 740 | if(this.options.provider !== MapProviders.image) { |
756 | 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 | 745 | this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe(); | ... | ... |
... | ... | @@ -16,10 +16,15 @@ |
16 | 16 | |
17 | 17 | import L, { LatLngBounds, LatLngLiteral, LatLngTuple } from 'leaflet'; |
18 | 18 | import LeafletMap from '../leaflet-map'; |
19 | -import {MapImage, MapProviders, PosFuncton, UnitedMapSettings} from '../map-models'; | |
19 | +import { MapImage, PosFuncton, UnitedMapSettings } from '../map-models'; | |
20 | 20 | import { Observable, ReplaySubject } from 'rxjs'; |
21 | 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 | 28 | import { WidgetContext } from '@home/models/widget-component.models'; |
24 | 29 | import { DataSet, DatasourceType, widgetType } from '@shared/models/widget.models'; |
25 | 30 | import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
... | ... | @@ -132,9 +137,9 @@ export class ImageMap extends LeafletMap { |
132 | 137 | updateBounds(updateImage?: boolean, lastCenterPos?) { |
133 | 138 | const w = this.width; |
134 | 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 | 144 | if (updateImage && this.imageOverlay) { |
140 | 145 | this.imageOverlay.remove(); |
... | ... | @@ -147,8 +152,8 @@ export class ImageMap extends LeafletMap { |
147 | 152 | this.imageOverlay = L.imageOverlay(this.imageUrl, bounds).addTo(this.map); |
148 | 153 | } |
149 | 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 | 157 | const maxBounds = new L.LatLngBounds(southWest, northEast); |
153 | 158 | this.map.setMaxBounds(maxBounds); |
154 | 159 | if (lastCenterPos) { |
... | ... | @@ -257,9 +262,7 @@ export class ImageMap extends LeafletMap { |
257 | 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 | 266 | const point = this.latLngToPoint(position); |
264 | 267 | const customX = calculateNewPointCoordinate(point.x, width); |
265 | 268 | const customY = calculateNewPointCoordinate(point.y, height); |
... | ... | @@ -275,15 +278,7 @@ export class ImageMap extends LeafletMap { |
275 | 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 | 283 | return { |
289 | 284 | [this.options.xPosKeyName]: customX, | ... | ... |