diff --git a/src/app/models/mapSymbol.ts b/src/app/models/mapSymbol.ts index ee66cf2..f7da064 100644 --- a/src/app/models/mapSymbol.ts +++ b/src/app/models/mapSymbol.ts @@ -21,7 +21,7 @@ export interface Circle extends MapSymbol { radius?: number; } -export interface Square extends MapSymbol { +export interface Rectangle extends MapSymbol { latlng: LatLng; latlng2: LatLng; } diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts index 15ddd74..1b8e561 100644 --- a/src/app/services/map.service.ts +++ b/src/app/services/map.service.ts @@ -1,7 +1,7 @@ import {BehaviorSubject} from "rxjs"; import {latLngDistance} from "../utils"; import {environment} from "../../environments/environment"; -import {Circle, LatLng, Marker, Measurement} from "../models/mapSymbol"; +import {Circle, LatLng, Marker, Measurement, Rectangle} from "../models/mapSymbol"; declare const L; @@ -151,6 +151,14 @@ export class MapService { return group; } + newRectangle(r: Rectangle) { + if(!r.color) r.color = '#ff4141'; + let rect = new L.Rectangle([r.latlng, r.latlng2], r).addTo(this.map); + rect.symbol = r; + rect.on('click', e => this.click.next({event: e, symbol: rect})); + return rect; + } + startDrawing() { this.lock(); this.drawListener = e => { diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts index 66099df..e5a7fa5 100644 --- a/src/app/views/map/map.component.ts +++ b/src/app/views/map/map.component.ts @@ -35,10 +35,10 @@ export class MapComponent implements OnInit { measuringSubscription: Subscription; menu: ToolbarItem[] = [ - {name: 'Marker', icon: 'room', toggle: true, click: () => { this.addMarker(); }}, + {name: 'Marker', icon: 'room', toggle: true, click: () => this.addMarker()}, {name: 'Draw', icon: 'create', toggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.stopDrawing()}, - {name: 'Circle', icon: 'panorama_fish_eye', toggle: true, click: () => { this.addCircle(); }}, - {name: 'Square', icon: 'crop_square', toggle: true}, + {name: 'Circle', icon: 'panorama_fish_eye', toggle: true, click: () => this.addCircle()}, + {name: 'Square', icon: 'crop_square', toggle: true, click: () => this.addRectangle()}, {name: 'Polygon', icon: 'details', toggle: true}, {name: 'Measure', icon: 'straighten', toggle: true, onEnabled: () => this.startMeasuring(), onDisabled: () => this.stopMeasuring()}, {name: 'Delete', icon: 'delete', toggle: true}, @@ -121,6 +121,20 @@ export class MapComponent implements OnInit { }); } + addRectangle() { + let lastPoint; + this.map.click.pipe(skip(1), take(2)).subscribe(e => { + if(lastPoint) { + this.menu[3].enabled = false; + console.log({latlng: lastPoint.getLatLng(), latlng2: e.event.latlng}); + this.map.newRectangle({latlng: lastPoint.getLatLng(), latlng2: e.event.latlng}); + this.map.delete(lastPoint); + return; + } + lastPoint = this.map.newMarker({latlng: e.event.latlng}); + }) + } + center(pos?) { if(!pos) pos = {lat: this.position.latitude, lng: this.position.longitude}; this.map.centerOn(pos);