|
|
@ -14,23 +14,15 @@ |
|
|
/// limitations under the License.
|
|
|
/// limitations under the License.
|
|
|
///
|
|
|
///
|
|
|
|
|
|
|
|
|
import L, { |
|
|
import L, { FeatureGroup, Icon, LatLngBounds, LatLngTuple, Projection } from 'leaflet'; |
|
|
FeatureGroup, |
|
|
|
|
|
Icon, |
|
|
|
|
|
LatLngBounds, |
|
|
|
|
|
LatLngTuple, |
|
|
|
|
|
markerClusterGroup, |
|
|
|
|
|
MarkerClusterGroup, |
|
|
|
|
|
MarkerClusterGroupOptions, Projection |
|
|
|
|
|
} from 'leaflet'; |
|
|
|
|
|
import tinycolor from 'tinycolor2'; |
|
|
import tinycolor from 'tinycolor2'; |
|
|
import 'leaflet-providers'; |
|
|
import 'leaflet-providers'; |
|
|
import 'leaflet.markercluster/dist/leaflet.markercluster'; |
|
|
import { MarkerClusterGroup, MarkerClusterGroupOptions } from 'leaflet.markercluster/dist/leaflet.markercluster'; |
|
|
|
|
|
import '@geoman-io/leaflet-geoman-free'; |
|
|
|
|
|
|
|
|
import { |
|
|
import { |
|
|
defaultSettings, |
|
|
defaultSettings, |
|
|
FormattedData, |
|
|
FormattedData, |
|
|
MapProviders, |
|
|
|
|
|
MapSettings, |
|
|
MapSettings, |
|
|
MarkerSettings, |
|
|
MarkerSettings, |
|
|
PolygonSettings, |
|
|
PolygonSettings, |
|
|
@ -39,12 +31,10 @@ import { |
|
|
UnitedMapSettings |
|
|
UnitedMapSettings |
|
|
} from './map-models'; |
|
|
} from './map-models'; |
|
|
import { Marker } from './markers'; |
|
|
import { Marker } from './markers'; |
|
|
import { Observable, of } from 'rxjs'; |
|
|
import { forkJoin, Observable, of } from 'rxjs'; |
|
|
import { Polyline } from './polyline'; |
|
|
import { Polyline } from './polyline'; |
|
|
import { Polygon } from './polygon'; |
|
|
import { Polygon } from './polygon'; |
|
|
import { |
|
|
import { createTooltip } from '@home/components/widget/lib/maps/maps-utils'; |
|
|
createTooltip, |
|
|
|
|
|
} from '@home/components/widget/lib/maps/maps-utils'; |
|
|
|
|
|
import { |
|
|
import { |
|
|
checkLngLat, |
|
|
checkLngLat, |
|
|
createLoadingDiv, |
|
|
createLoadingDiv, |
|
|
@ -54,6 +44,15 @@ import { |
|
|
} from '@home/components/widget/lib/maps/common-maps-utils'; |
|
|
} from '@home/components/widget/lib/maps/common-maps-utils'; |
|
|
import { WidgetContext } from '@home/models/widget-component.models'; |
|
|
import { WidgetContext } from '@home/models/widget-component.models'; |
|
|
import { deepClone, isDefinedAndNotNull, isEmptyStr, isString } from '@core/utils'; |
|
|
import { deepClone, isDefinedAndNotNull, isEmptyStr, isString } from '@core/utils'; |
|
|
|
|
|
import { TranslateService } from '@ngx-translate/core'; |
|
|
|
|
|
import { |
|
|
|
|
|
SelectEntityDialogComponent, |
|
|
|
|
|
SelectEntityDialogData |
|
|
|
|
|
} from '@home/components/widget/lib/maps/dialogs/select-entity-dialog.component'; |
|
|
|
|
|
import { MatDialog } from '@angular/material/dialog'; |
|
|
|
|
|
import { AttributeService } from '@core/http/attribute.service'; |
|
|
|
|
|
import { EntityId } from '@shared/models/id/entity-id'; |
|
|
|
|
|
import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models'; |
|
|
|
|
|
|
|
|
export default abstract class LeafletMap { |
|
|
export default abstract class LeafletMap { |
|
|
|
|
|
|
|
|
@ -78,20 +77,20 @@ export default abstract class LeafletMap { |
|
|
drawRoutes: boolean; |
|
|
drawRoutes: boolean; |
|
|
showPolygon: boolean; |
|
|
showPolygon: boolean; |
|
|
updatePending = false; |
|
|
updatePending = false; |
|
|
|
|
|
editPolygons = false; |
|
|
|
|
|
selectedEntity: FormattedData; |
|
|
addMarkers: L.Marker[] = []; |
|
|
addMarkers: L.Marker[] = []; |
|
|
addPolygons: L.Polygon[] = []; |
|
|
addPolygons: L.Polygon[] = []; |
|
|
// tslint:disable-next-line:no-string-literal
|
|
|
// tslint:disable-next-line:no-string-literal
|
|
|
southWest = new L.LatLng(-Projection.SphericalMercator['MAX_LATITUDE'], -180); |
|
|
southWest = new L.LatLng(-Projection.SphericalMercator['MAX_LATITUDE'], -180); |
|
|
// tslint:disable-next-line:no-string-literal
|
|
|
// tslint:disable-next-line:no-string-literal
|
|
|
northEast = new L.LatLng(Projection.SphericalMercator['MAX_LATITUDE'], 180); |
|
|
northEast = new L.LatLng(Projection.SphericalMercator['MAX_LATITUDE'], 180); |
|
|
mousePositionOnMap: L.LatLng; |
|
|
|
|
|
addMarker: L.Control; |
|
|
|
|
|
addPolygon: L.Control; |
|
|
|
|
|
|
|
|
|
|
|
protected constructor(public ctx: WidgetContext, |
|
|
protected constructor(public ctx: WidgetContext, |
|
|
public $container: HTMLElement, |
|
|
public $container: HTMLElement, |
|
|
options: UnitedMapSettings) { |
|
|
options: UnitedMapSettings) { |
|
|
this.options = options; |
|
|
this.options = options; |
|
|
|
|
|
this.editPolygons = options.showPolygon && options.editablePolygon; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public initSettings(options: MapSettings) { |
|
|
public initSettings(options: MapSettings) { |
|
|
@ -102,16 +101,28 @@ export default abstract class LeafletMap { |
|
|
removeOutsideVisibleBounds, |
|
|
removeOutsideVisibleBounds, |
|
|
animate, |
|
|
animate, |
|
|
chunkedLoading, |
|
|
chunkedLoading, |
|
|
|
|
|
spiderfyOnMaxZoom, |
|
|
maxClusterRadius, |
|
|
maxClusterRadius, |
|
|
maxZoom }: MapSettings = options; |
|
|
maxZoom }: MapSettings = options; |
|
|
if (useClusterMarkers) { |
|
|
if (useClusterMarkers) { |
|
|
|
|
|
// disabled marker cluster icon
|
|
|
|
|
|
(L as any).MarkerCluster = (L as any).MarkerCluster.extend({ |
|
|
|
|
|
options: { pmIgnore: true, ...L.Icon.prototype.options } |
|
|
|
|
|
}); |
|
|
const clusteringSettings: MarkerClusterGroupOptions = { |
|
|
const clusteringSettings: MarkerClusterGroupOptions = { |
|
|
spiderfyOnMaxZoom: false, |
|
|
spiderfyOnMaxZoom, |
|
|
zoomToBoundsOnClick: zoomOnClick, |
|
|
zoomToBoundsOnClick: zoomOnClick, |
|
|
showCoverageOnHover, |
|
|
showCoverageOnHover, |
|
|
removeOutsideVisibleBounds, |
|
|
removeOutsideVisibleBounds, |
|
|
animate, |
|
|
animate, |
|
|
chunkedLoading |
|
|
chunkedLoading, |
|
|
|
|
|
pmIgnore: true, |
|
|
|
|
|
spiderLegPolylineOptions: { |
|
|
|
|
|
pmIgnore: true |
|
|
|
|
|
}, |
|
|
|
|
|
polygonOptions: { |
|
|
|
|
|
pmIgnore: true |
|
|
|
|
|
} |
|
|
}; |
|
|
}; |
|
|
if (maxClusterRadius && maxClusterRadius > 0) { |
|
|
if (maxClusterRadius && maxClusterRadius > 0) { |
|
|
clusteringSettings.maxClusterRadius = Math.floor(maxClusterRadius); |
|
|
clusteringSettings.maxClusterRadius = Math.floor(maxClusterRadius); |
|
|
@ -119,183 +130,165 @@ export default abstract class LeafletMap { |
|
|
if (maxZoom && maxZoom >= 0 && maxZoom < 19) { |
|
|
if (maxZoom && maxZoom >= 0 && maxZoom < 19) { |
|
|
clusteringSettings.disableClusteringAtZoom = Math.floor(maxZoom); |
|
|
clusteringSettings.disableClusteringAtZoom = Math.floor(maxZoom); |
|
|
} |
|
|
} |
|
|
this.markersCluster = markerClusterGroup(clusteringSettings); |
|
|
this.markersCluster = new MarkerClusterGroup(clusteringSettings); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
addMarkerControl() { |
|
|
private selectEntityWithoutLocationDialog(shapes: L.PM.SUPPORTED_SHAPES): Observable<FormattedData> { |
|
|
if (this.options.draggableMarker) { |
|
|
let entities; |
|
|
this.map.on('mousemove', (e: L.LeafletMouseEvent) => { |
|
|
switch (shapes) { |
|
|
this.mousePositionOnMap = e.latlng; |
|
|
case 'Polygon': |
|
|
}); |
|
|
case 'Rectangle': |
|
|
const dragListener = (e: L.DragEndEvent) => { |
|
|
entities = this.datasources.filter(pData => !this.isValidPolygonPosition(pData)); |
|
|
if (e.type === 'dragend' && this.mousePositionOnMap) { |
|
|
break; |
|
|
const icon = L.icon({ |
|
|
case 'Marker': |
|
|
iconRetinaUrl: 'marker-icon-2x.png', |
|
|
entities = this.datasources.filter(mData => !this.convertPosition(mData)); |
|
|
iconUrl: 'marker-icon.png', |
|
|
break; |
|
|
shadowUrl: 'marker-shadow.png', |
|
|
default: |
|
|
iconSize: [25, 41], |
|
|
return of(null); |
|
|
iconAnchor: [12, 41], |
|
|
} |
|
|
popupAnchor: [1, -34], |
|
|
if (entities.length === 1) { |
|
|
tooltipAnchor: [16, -28], |
|
|
return of(entities[0]); |
|
|
shadowSize: [41, 41] |
|
|
} |
|
|
}); |
|
|
const dialog = this.ctx.$injector.get(MatDialog); |
|
|
const customLatLng = this.convertToCustomFormat(this.mousePositionOnMap); |
|
|
return dialog.open<SelectEntityDialogComponent, SelectEntityDialogData, FormattedData>(SelectEntityDialogComponent, |
|
|
this.mousePositionOnMap.lat = customLatLng[this.options.latKeyName]; |
|
|
{ |
|
|
this.mousePositionOnMap.lng = customLatLng[this.options.lngKeyName]; |
|
|
disableClose: true, |
|
|
|
|
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
|
|
const newMarker = L.marker(this.mousePositionOnMap, { icon }).addTo(this.map); |
|
|
data: { |
|
|
this.addMarkers.push(newMarker); |
|
|
entities |
|
|
const datasourcesList = document.createElement('div'); |
|
|
} |
|
|
const header = document.createElement('p'); |
|
|
}).afterClosed(); |
|
|
header.appendChild(document.createTextNode('Select entity:')); |
|
|
} |
|
|
header.setAttribute('style', 'font-size: 14px; margin: 8px 0'); |
|
|
|
|
|
datasourcesList.appendChild(header); |
|
|
private selectEntityWithoutLocation(type: string) { |
|
|
this.datasources.forEach(ds => { |
|
|
this.selectEntityWithoutLocationDialog(type.substring(2)).subscribe((data) => { |
|
|
const dsItem = document.createElement('p'); |
|
|
if (data !== null) { |
|
|
dsItem.appendChild(document.createTextNode(ds.entityName)); |
|
|
this.selectedEntity = data; |
|
|
dsItem.setAttribute('style', 'font-size: 14px; margin: 8px 0; cursor: pointer'); |
|
|
this.toggleDrawMode(type); |
|
|
dsItem.onclick = () => { |
|
|
} else { |
|
|
const updatedEnttity = { ...ds, ...customLatLng }; |
|
|
this.map.pm.Toolbar.toggleButton(type, false); |
|
|
this.saveMarkerLocation(updatedEnttity).subscribe(() => { |
|
|
|
|
|
this.map.removeLayer(newMarker); |
|
|
|
|
|
const markerIndex = this.addMarkers.indexOf(newMarker); |
|
|
|
|
|
if (markerIndex > -1) { |
|
|
|
|
|
this.addMarkers.splice(markerIndex, 1); |
|
|
|
|
|
} |
|
|
|
|
|
this.deleteMarker(ds.entityName); |
|
|
|
|
|
this.createMarker(ds.entityName, updatedEnttity, this.datasources, this.options); |
|
|
|
|
|
}); |
|
|
|
|
|
}; |
|
|
|
|
|
datasourcesList.appendChild(dsItem); |
|
|
|
|
|
}); |
|
|
|
|
|
datasourcesList.appendChild(document.createElement('br')); |
|
|
|
|
|
const deleteBtn = document.createElement('a'); |
|
|
|
|
|
deleteBtn.appendChild(document.createTextNode('Discard changes')); |
|
|
|
|
|
deleteBtn.onclick = () => { |
|
|
|
|
|
this.map.removeLayer(newMarker); |
|
|
|
|
|
const markerIndex = this.addMarkers.indexOf(newMarker); |
|
|
|
|
|
if (markerIndex > -1) { |
|
|
|
|
|
this.addMarkers.splice(markerIndex, 1); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
datasourcesList.appendChild(deleteBtn); |
|
|
|
|
|
const popup = L.popup(); |
|
|
|
|
|
popup.setContent(datasourcesList); |
|
|
|
|
|
newMarker.bindPopup(popup).openPopup(); |
|
|
|
|
|
} |
|
|
|
|
|
this.addMarker.setPosition('topright'); |
|
|
|
|
|
}; |
|
|
|
|
|
const addMarker = L.Control.extend({ |
|
|
|
|
|
onAdd() { |
|
|
|
|
|
const img = L.DomUtil.create('img') as any; |
|
|
|
|
|
img.src = `assets/add_location.svg`; |
|
|
|
|
|
img.style.width = '32px'; |
|
|
|
|
|
img.style.height = '32px'; |
|
|
|
|
|
img.title = 'Drag and drop to add marker'; |
|
|
|
|
|
img.onclick = this.dragMarker; |
|
|
|
|
|
img.draggable = true; |
|
|
|
|
|
const draggableImg = new L.Draggable(img); |
|
|
|
|
|
draggableImg.enable(); |
|
|
|
|
|
draggableImg.on('dragend', dragListener); |
|
|
|
|
|
return img; |
|
|
|
|
|
}, |
|
|
|
|
|
onRemove() { |
|
|
|
|
|
}, |
|
|
|
|
|
dragMarker: this.dragMarker |
|
|
|
|
|
} as any); |
|
|
|
|
|
const addMarkerControl = (opts) => { |
|
|
|
|
|
return new addMarker(opts); |
|
|
|
|
|
}; |
|
|
|
|
|
this.addMarker = addMarkerControl({ position: 'topright' }).addTo(this.map); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
private toggleDrawMode(type: string) { |
|
|
|
|
|
this.map.pm.Draw[type].toggle(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
addPolygonControl() { |
|
|
addEditControl() { |
|
|
if (this.options.showPolygon && this.options.editablePolygon) { |
|
|
// Customize edit marker
|
|
|
this.map.on('mousemove', (e: L.LeafletMouseEvent) => { |
|
|
if (this.options.draggableMarker) { |
|
|
this.mousePositionOnMap = e.latlng; |
|
|
const actions = [{ |
|
|
|
|
|
text: L.PM.Utils.getTranslation('actions.cancel'), |
|
|
|
|
|
onClick: () => this.toggleDrawMode('tbMarker') |
|
|
|
|
|
}]; |
|
|
|
|
|
|
|
|
|
|
|
this.map.pm.Toolbar.copyDrawControl('Marker', { |
|
|
|
|
|
name: 'tbMarker', |
|
|
|
|
|
afterClick: () => this.selectEntityWithoutLocation('tbMarker'), |
|
|
|
|
|
disabled: true, |
|
|
|
|
|
actions |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Customize edit polygon
|
|
|
|
|
|
if (this.editPolygons) { |
|
|
|
|
|
const rectangleActions = [ |
|
|
|
|
|
{ |
|
|
|
|
|
text: L.PM.Utils.getTranslation('actions.cancel'), |
|
|
|
|
|
onClick: () => this.toggleDrawMode('tbRectangle') |
|
|
|
|
|
} |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const polygonActions = [ |
|
|
|
|
|
'finish' as const, |
|
|
|
|
|
'removeLastVertex' as const, |
|
|
|
|
|
{ |
|
|
|
|
|
text: L.PM.Utils.getTranslation('actions.cancel'), |
|
|
|
|
|
onClick: () => this.toggleDrawMode('tbPolygon') |
|
|
|
|
|
} |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
this.map.pm.Toolbar.copyDrawControl('Rectangle', { |
|
|
|
|
|
name: 'tbRectangle', |
|
|
|
|
|
afterClick: () => this.selectEntityWithoutLocation('tbRectangle'), |
|
|
|
|
|
disabled: true, |
|
|
|
|
|
actions: rectangleActions |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
this.map.pm.Toolbar.copyDrawControl('Polygon', { |
|
|
|
|
|
name: 'tbPolygon', |
|
|
|
|
|
afterClick: () => this.selectEntityWithoutLocation('tbPolygon'), |
|
|
|
|
|
disabled: true, |
|
|
|
|
|
actions: polygonActions |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const translateService = this.ctx.$injector.get(TranslateService); |
|
|
|
|
|
this.map.pm.setLang('en', translateService.instant('widgets.maps'), 'en'); |
|
|
|
|
|
this.map.pm.addControls({ |
|
|
|
|
|
position: 'topleft', |
|
|
|
|
|
drawMarker: false, |
|
|
|
|
|
drawCircle: false, |
|
|
|
|
|
drawCircleMarker: false, |
|
|
|
|
|
drawRectangle: false, |
|
|
|
|
|
drawPolyline: false, |
|
|
|
|
|
drawPolygon: false, |
|
|
|
|
|
editMode: this.editPolygons, |
|
|
|
|
|
cutPolygon: this.editPolygons, |
|
|
|
|
|
rotateMode: this.editPolygons |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const dragListener = (e: L.DragEndEvent) => { |
|
|
this.map.on('pm:create', (e) => { |
|
|
if (e.type === 'dragend') { |
|
|
if (e.shape === 'tbMarker') { |
|
|
const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; |
|
|
// @ts-ignore
|
|
|
|
|
|
this.saveLocation(this.selectedEntity, this.convertToCustomFormat(e.layer.getLatLng())).subscribe(() => { |
|
|
const convert = this.convertToCustomFormat(this.mousePositionOnMap, polygonOffset); |
|
|
}); |
|
|
this.mousePositionOnMap.lat = convert[this.options.latKeyName]; |
|
|
} else if (e.shape === 'tbRectangle' || e.shape === 'tbPolygon') { |
|
|
this.mousePositionOnMap.lng = convert[this.options.lngKeyName]; |
|
|
// @ts-ignore
|
|
|
|
|
|
this.saveLocation(this.selectedEntity, this.convertPolygonToCustomFormat(e.layer.getLatLngs()[0])).subscribe(() => { |
|
|
const latlng1 = this.mousePositionOnMap; |
|
|
|
|
|
const latlng2 = L.latLng(this.mousePositionOnMap.lat, this.mousePositionOnMap.lng + polygonOffset); |
|
|
|
|
|
const latlng3 = L.latLng(this.mousePositionOnMap.lat - polygonOffset, this.mousePositionOnMap.lng); |
|
|
|
|
|
const 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(polygonPoints)}; |
|
|
|
|
|
const header = document.createElement('p'); |
|
|
|
|
|
header.appendChild(document.createTextNode('Select entity:')); |
|
|
|
|
|
header.setAttribute('style', 'font-size: 14px; margin: 8px 0'); |
|
|
|
|
|
datasourcesList.appendChild(header); |
|
|
|
|
|
this.datasources.forEach(ds => { |
|
|
|
|
|
const dsItem = document.createElement('p'); |
|
|
|
|
|
dsItem.appendChild(document.createTextNode(ds.entityName)); |
|
|
|
|
|
dsItem.setAttribute('style', 'font-size: 14px; margin: 8px 0; cursor: pointer'); |
|
|
|
|
|
dsItem.onclick = () => { |
|
|
|
|
|
const updatedEnttity = { ...ds, ...customLatLng }; |
|
|
|
|
|
this.savePolygonLocation(updatedEnttity).subscribe(() => { |
|
|
|
|
|
this.map.removeLayer(newPolygon); |
|
|
|
|
|
const polygonIndex = this.addPolygons.indexOf(newPolygon); |
|
|
|
|
|
if (polygonIndex > -1) { |
|
|
|
|
|
this.addPolygons.splice(polygonIndex, 1); |
|
|
|
|
|
} |
|
|
|
|
|
this.deletePolygon(ds.entityName); |
|
|
|
|
|
}); |
|
|
|
|
|
}; |
|
|
|
|
|
datasourcesList.appendChild(dsItem); |
|
|
|
|
|
}); |
|
|
}); |
|
|
datasourcesList.appendChild(document.createElement('br')); |
|
|
|
|
|
const deleteBtn = document.createElement('a'); |
|
|
|
|
|
deleteBtn.appendChild(document.createTextNode('Discard changes')); |
|
|
|
|
|
deleteBtn.onclick = () => { |
|
|
|
|
|
this.map.removeLayer(newPolygon); |
|
|
|
|
|
const polygonIndex = this.addPolygons.indexOf(newPolygon); |
|
|
|
|
|
if (polygonIndex > -1) { |
|
|
|
|
|
this.addPolygons.splice(polygonIndex, 1); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
datasourcesList.appendChild(deleteBtn); |
|
|
|
|
|
const popup = L.popup(); |
|
|
|
|
|
popup.setContent(datasourcesList); |
|
|
|
|
|
newPolygon.bindPopup(popup).openPopup(); |
|
|
|
|
|
} |
|
|
} |
|
|
this.addPolygon.setPosition('topright'); |
|
|
// @ts-ignore
|
|
|
}; |
|
|
e.layer._pmTempLayer = true; |
|
|
const addPolygon = L.Control.extend({ |
|
|
e.layer.remove(); |
|
|
onAdd() { |
|
|
}); |
|
|
const img = L.DomUtil.create('img') as any; |
|
|
|
|
|
img.src = `assets/add_polygon.svg`; |
|
|
this.map.on('pm:cut', (e) => { |
|
|
img.style.width = '32px'; |
|
|
// @ts-ignore
|
|
|
img.style.height = '32px'; |
|
|
e.originalLayer.setLatLngs(e.layer.getLatLngs()); |
|
|
img.title = 'Drag and drop to add Polygon'; |
|
|
e.originalLayer.addTo(this.map); |
|
|
img.onclick = this.dragPolygonVertex; |
|
|
// @ts-ignore
|
|
|
img.draggable = true; |
|
|
e.originalLayer._pmTempLayer = false; |
|
|
const draggableImg = new L.Draggable(img); |
|
|
const iterator = this.polygons.values(); |
|
|
draggableImg.enable(); |
|
|
let result = iterator.next(); |
|
|
draggableImg.on('dragend', dragListener); |
|
|
while (!result.done && e.originalLayer !== result.value.leafletPoly) { |
|
|
return img; |
|
|
result = iterator.next(); |
|
|
}, |
|
|
} |
|
|
onRemove() { |
|
|
// @ts-ignore
|
|
|
}, |
|
|
e.layer._pmTempLayer = true; |
|
|
dragPolygonVertex: this.dragPolygonVertex |
|
|
e.layer.remove(); |
|
|
} as any); |
|
|
}); |
|
|
const addPolygonControl = (opts) => { |
|
|
|
|
|
return new addPolygon(opts); |
|
|
this.map.on('pm:remove', (e) => { |
|
|
}; |
|
|
if (e.shape === 'Marker') { |
|
|
this.addPolygon = addPolygonControl({ position: 'topright' }).addTo(this.map); |
|
|
const iterator = this.markers.values(); |
|
|
|
|
|
let result = iterator.next(); |
|
|
|
|
|
while (!result.done && e.layer !== result.value.leafletMarker) { |
|
|
|
|
|
result = iterator.next(); |
|
|
|
|
|
} |
|
|
|
|
|
this.saveLocation(result.value.data, this.convertToCustomFormat(null)).subscribe(() => {}); |
|
|
|
|
|
} else if (e.shape === 'Polygon') { |
|
|
|
|
|
const iterator = this.polygons.values(); |
|
|
|
|
|
let result = iterator.next(); |
|
|
|
|
|
while (!result.done && e.layer !== result.value.leafletPoly) { |
|
|
|
|
|
result = iterator.next(); |
|
|
|
|
|
} |
|
|
|
|
|
this.saveLocation(result.value.data, this.convertPolygonToCustomFormat(null)).subscribe(() => {}); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
public setLoading(loading: boolean) { |
|
|
public setLoading(loading: boolean) { |
|
|
if (this.loading !== loading) { |
|
|
if (this.loading !== loading) { |
|
|
@ -337,11 +330,10 @@ export default abstract class LeafletMap { |
|
|
if (this.options.disableScrollZooming) { |
|
|
if (this.options.disableScrollZooming) { |
|
|
this.map.scrollWheelZoom.disable(); |
|
|
this.map.scrollWheelZoom.disable(); |
|
|
} |
|
|
} |
|
|
if (this.options.draggableMarker) { |
|
|
if (this.options.draggableMarker || this.editPolygons) { |
|
|
this.addMarkerControl(); |
|
|
this.addEditControl(); |
|
|
} |
|
|
} else { |
|
|
if (this.options.editablePolygon) { |
|
|
this.map.pm.disableDraw(); |
|
|
this.addPolygonControl(); |
|
|
|
|
|
} |
|
|
} |
|
|
if (this.options.useClusterMarkers) { |
|
|
if (this.options.useClusterMarkers) { |
|
|
this.map.addLayer(this.markersCluster); |
|
|
this.map.addLayer(this.markersCluster); |
|
|
@ -352,12 +344,53 @@ export default abstract class LeafletMap { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public saveMarkerLocation(datasource: FormattedData, lat?: number, lng?: number): Observable<any> { |
|
|
private saveLocation(e: FormattedData, values: {[key: string]: any}): Observable<any> { |
|
|
return of(null); |
|
|
const attributeService = this.ctx.$injector.get(AttributeService); |
|
|
} |
|
|
const attributes = []; |
|
|
|
|
|
const timeseries = []; |
|
|
|
|
|
|
|
|
|
|
|
const entityId: EntityId = { |
|
|
|
|
|
entityType: e.$datasource.entityType, |
|
|
|
|
|
id: e.$datasource.entityId |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
public savePolygonLocation(datasource: FormattedData, coordinates?: Array<[number, number]>): Observable<any> { |
|
|
for (const dataKeyName of Object.keys(values)) { |
|
|
return of(null); |
|
|
for (const key of e.$datasource.dataKeys) { |
|
|
|
|
|
if (dataKeyName === key.name) { |
|
|
|
|
|
const value = { |
|
|
|
|
|
key: key.name, |
|
|
|
|
|
value: values[dataKeyName] |
|
|
|
|
|
}; |
|
|
|
|
|
if (key.type === DataKeyType.attribute) { |
|
|
|
|
|
attributes.push(value); |
|
|
|
|
|
} else if (key.type === DataKeyType.timeseries) { |
|
|
|
|
|
timeseries.push(value); |
|
|
|
|
|
} |
|
|
|
|
|
break; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const observables: Observable<any>[] = []; |
|
|
|
|
|
if (timeseries.length) { |
|
|
|
|
|
observables.push(attributeService.saveEntityTimeseries( |
|
|
|
|
|
entityId, |
|
|
|
|
|
LatestTelemetry.LATEST_TELEMETRY, |
|
|
|
|
|
timeseries |
|
|
|
|
|
)); |
|
|
|
|
|
} |
|
|
|
|
|
if (attributes.length) { |
|
|
|
|
|
observables.push(attributeService.saveEntityAttributes( |
|
|
|
|
|
entityId, |
|
|
|
|
|
AttributeScope.SERVER_SCOPE, |
|
|
|
|
|
attributes |
|
|
|
|
|
)); |
|
|
|
|
|
} |
|
|
|
|
|
if (observables.length) { |
|
|
|
|
|
return forkJoin(observables); |
|
|
|
|
|
} else { |
|
|
|
|
|
return of(null); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
createLatLng(lat: number, lng: number): L.LatLng { |
|
|
createLatLng(lat: number, lng: number): L.LatLng { |
|
|
@ -441,7 +474,7 @@ export default abstract class LeafletMap { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
convertToCustomFormat(position: L.LatLng, offset = 0): object { |
|
|
convertToCustomFormat(position: L.LatLng, offset = 0): object { |
|
|
position = checkLngLat(position, this.southWest, this.northEast, offset); |
|
|
position = position ? checkLngLat(position, this.southWest, this.northEast, offset) : {lat: null, lng: null} as L.LatLng; |
|
|
|
|
|
|
|
|
return { |
|
|
return { |
|
|
[this.options.latKeyName]: position.lat, |
|
|
[this.options.latKeyName]: position.lat, |
|
|
@ -455,17 +488,18 @@ export default abstract class LeafletMap { |
|
|
if (point.length) { |
|
|
if (point.length) { |
|
|
return this.convertToPolygonFormat(point); |
|
|
return this.convertToPolygonFormat(point); |
|
|
} else { |
|
|
} else { |
|
|
return [point.lat, point.lng]; |
|
|
const convertPoint = checkLngLat(point, this.southWest, this.northEast); |
|
|
|
|
|
return [convertPoint.lat, convertPoint.lng]; |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} else { |
|
|
|
|
|
return []; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
return []; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
convertPolygonToCustomFormat(expression: any[][]): object { |
|
|
convertPolygonToCustomFormat(expression: any[][]): {[key: string]: any} { |
|
|
|
|
|
const coordinate = expression ? this.convertToPolygonFormat(expression) : null; |
|
|
return { |
|
|
return { |
|
|
[this.options.polygonKeyName] : this.convertToPolygonFormat(expression) |
|
|
[this.options.polygonKeyName]: coordinate |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -484,7 +518,15 @@ export default abstract class LeafletMap { |
|
|
} |
|
|
} |
|
|
this.updateMarkers(formattedData, false); |
|
|
this.updateMarkers(formattedData, false); |
|
|
this.updateBoundsInternal(); |
|
|
this.updateBoundsInternal(); |
|
|
if (this.options.draggableMarker || this.options.editablePolygon) { |
|
|
if (this.options.draggableMarker) { |
|
|
|
|
|
const foundEntityWithoutLocation = formattedData.some(mData => !this.convertPosition(mData)); |
|
|
|
|
|
this.map.pm.Toolbar.setButtonDisabled('tbMarker', !foundEntityWithoutLocation); |
|
|
|
|
|
this.datasources = formattedData; |
|
|
|
|
|
} |
|
|
|
|
|
if (this.editPolygons) { |
|
|
|
|
|
const foundEntityWithoutPolygon = formattedData.some(pData => !this.isValidPolygonPosition(pData)); |
|
|
|
|
|
this.map.pm.Toolbar.setButtonDisabled('tbPolygon', !foundEntityWithoutPolygon); |
|
|
|
|
|
this.map.pm.Toolbar.setButtonDisabled('tbRectangle', !foundEntityWithoutPolygon); |
|
|
this.datasources = formattedData; |
|
|
this.datasources = formattedData; |
|
|
} |
|
|
} |
|
|
} else { |
|
|
} else { |
|
|
@ -577,10 +619,10 @@ export default abstract class LeafletMap { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
dragMarker = (e, data = {} as FormattedData) => { |
|
|
dragMarker = (e, data = {} as FormattedData) => { |
|
|
if (e.type !== 'dragend') { |
|
|
if (e === undefined) { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) }).subscribe(); |
|
|
this.saveLocation(data, this.convertToCustomFormat(e.target._latlng)).subscribe(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, |
|
|
private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, |
|
|
@ -728,11 +770,15 @@ export default abstract class LeafletMap { |
|
|
|
|
|
|
|
|
// Polygon
|
|
|
// Polygon
|
|
|
|
|
|
|
|
|
|
|
|
isValidPolygonPosition(data: FormattedData): boolean { |
|
|
|
|
|
return data && isDefinedAndNotNull(data[this.options.polygonKeyName]) && !isEmptyStr(data[this.options.polygonKeyName]); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
updatePolygons(polyData: FormattedData[], updateBounds = true) { |
|
|
updatePolygons(polyData: FormattedData[], updateBounds = true) { |
|
|
const keys: string[] = []; |
|
|
const keys: string[] = []; |
|
|
this.polygonsData = deepClone(polyData); |
|
|
this.polygonsData = deepClone(polyData); |
|
|
polyData.forEach((data: FormattedData) => { |
|
|
polyData.forEach((data: FormattedData) => { |
|
|
if (data && isDefinedAndNotNull(data[this.options.polygonKeyName]) && !isEmptyStr(data[this.options.polygonKeyName])) { |
|
|
if (this.isValidPolygonPosition(data)) { |
|
|
if (isString((data[this.options.polygonKeyName]))) { |
|
|
if (isString((data[this.options.polygonKeyName]))) { |
|
|
data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]); |
|
|
data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]); |
|
|
} |
|
|
} |
|
|
@ -758,15 +804,14 @@ export default abstract class LeafletMap { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
dragPolygonVertex = (e?, data = {} as FormattedData) => { |
|
|
dragPolygonVertex = (e?, data = {} as FormattedData) => { |
|
|
if (e === undefined || (e.type !== 'editable:vertex:dragend' && e.type !== 'editable:vertex:deleted')) { |
|
|
if (e === undefined) { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (this.options.provider !== MapProviders.image) { |
|
|
let coordinates = e.layer.getLatLngs(); |
|
|
for (const key of Object.keys(e.layer._latlngs[0])) { |
|
|
if (coordinates.length === 1) { |
|
|
e.layer._latlngs[0][key] = checkLngLat(e.layer._latlngs[0][key], this.southWest, this.northEast); |
|
|
coordinates = coordinates[0]; |
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe(); |
|
|
this.saveLocation(data, this.convertPolygonToCustomFormat(coordinates)).subscribe(() => {}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) { |
|
|
createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) { |
|
|
|
Vladyslav_Prykhodko
5 years ago
