From 6e6c1dc0567b477169b7f90de532f3f499048994 Mon Sep 17 00:00:00 2001 From: ztimson Date: Sat, 31 Aug 2019 00:26:45 -0400 Subject: [PATCH] Polygons! --- src/app/models/mapSymbol.ts | 1 + src/app/services/map.service.ts | 21 ++++++++++++++------ src/app/services/sync.service.ts | 10 +++++++++- src/app/views/map/map.component.ts | 31 +++++++++++++++++++++++++++++- 4 files changed, 55 insertions(+), 8 deletions(-) diff --git a/src/app/models/mapSymbol.ts b/src/app/models/mapSymbol.ts index c5a9715..0408c1a 100644 --- a/src/app/models/mapSymbol.ts +++ b/src/app/models/mapSymbol.ts @@ -7,6 +7,7 @@ export interface MapData { circles?: Circle[]; markers?: Marker[]; measurements?: Measurement[]; + polygons?: Polygon[]; polylines?: Polyline[]; rectangles?: Rectangle[]; } diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts index 92792df..875054c 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, MapSymbol, Marker, Measurement, Polyline, Rectangle} from "../models/mapSymbol"; +import {Circle, LatLng, MapSymbol, Marker, Measurement, Polygon, Polyline, Rectangle} from "../models/mapSymbol"; declare const L; @@ -27,11 +27,11 @@ export class MapService { private readonly map; private circles = []; - private drawListener; private markers = []; private measurements = []; private mapLayer; - private polyline = []; + private polygons = []; + private polylines = []; private rectangles = []; private weatherLayer; @@ -68,7 +68,8 @@ export class MapService { this.circles = this.circles.filter(c => c != c); this.markers = this.markers.filter(m => m != s); this.measurements = this.measurements.filter(m => m != s); - this.polyline = this.polyline.filter(p => p != s); + this.polygons = this.polygons.filter(p => p != s); + this.polylines = this.polylines.filter(p => p != s); this.rectangles = this.rectangles.filter(r => r != s); }); } @@ -77,7 +78,8 @@ export class MapService { this.circles.forEach(c => this.delete(c)); this.markers.forEach(m => this.delete(m)); this.measurements.forEach(m => this.delete(m)); - this.polyline.forEach(p => this.delete(p)); + this.polygons.forEach(p => this.delete(p)); + this.polylines.forEach(p => this.delete(p)); this.rectangles.forEach(r => this.delete(r)); } @@ -126,10 +128,17 @@ export class MapService { return group; } + newPolygon(p: Polygon) { + let polygon = new L.Polygon(p.latlng, Object.assign({}, p)).addTo(this.map); + polygon.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: p, item: polygon})); + if(!p.noDelete) this.polygons.push(polygon); + return polygon; + } + newPolyline(p: Polyline) { let polyline = new L.Polyline(p.latlng, Object.assign({}, p)).addTo(this.map); polyline.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: p, item: polyline})); - if(!p.noDelete) this.polyline.push(polyline); + if(!p.noDelete) this.polylines.push(polyline); return polyline; } diff --git a/src/app/services/sync.service.ts b/src/app/services/sync.service.ts index ade556d..d0f2819 100644 --- a/src/app/services/sync.service.ts +++ b/src/app/services/sync.service.ts @@ -1,7 +1,7 @@ import {Injectable} from "@angular/core"; import {AngularFirestore, AngularFirestoreCollection} from "@angular/fire/firestore"; import {BehaviorSubject, Subscription} from "rxjs"; -import {Circle, MapData, Marker, Measurement, Polyline, Rectangle} from "../models/mapSymbol"; +import {Circle, MapData, Marker, Measurement, Polygon, Polyline, Rectangle} from "../models/mapSymbol"; import * as _ from 'lodash'; @Injectable({ @@ -43,6 +43,13 @@ export class SyncService { this.save(); } + addPolygon(polygon: Polygon) { + let map = this.mapSymbols.value; + if(!map.polygons) map.polygons = []; + map.polygons.push(polygon); + this.save(); + } + addPolyline(polyline: Polyline) { let map = this.mapSymbols.value; if(!map.polylines) map.polylines = []; @@ -62,6 +69,7 @@ export class SyncService { if(map.circles) symbols.forEach(s => map.circles = map.circles.filter(c => !_.isEqual(s, c))); if(map.markers) symbols.forEach(s => map.markers = map.markers.filter(m => !_.isEqual(s, m))); if(map.measurements) symbols.forEach(s => map.measurements = map.measurements.filter(m => !_.isEqual(s, m))); + if(map.polygons) symbols.forEach(s => map.polygons = map.polygons.filter(p => !_.isEqual(s , p))); if(map.polylines) symbols.forEach(s => map.polylines = map.polylines.filter(p => !_.isEqual(s, p))); if(map.rectangles) symbols.forEach(s => map.rectangles = map.rectangles.filter(r => !_.isEqual(s, r))); this.save(); diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts index dbbb447..1d47a8f 100644 --- a/src/app/views/map/map.component.ts +++ b/src/app/views/map/map.component.ts @@ -27,6 +27,7 @@ export class MapComponent implements OnInit { drawColor = '#ff4141'; isNaN = isNaN; map: MapService; + polygon: any; position; positionMarker = {arrow: null, circle: null}; shareDialog = false; @@ -104,6 +105,20 @@ export class MapComponent implements OnInit { }) }; + startPolygon = () => { + let lastPoint; + this.sub = this.map.click.pipe(skip(1), finalize(() => this.map.delete(lastPoint))).subscribe(e => { + if(!this.polygon) { + let p = {latlng: [e.latlng], noDelete: true, color: '#ff4141'}; + this.polygon = this.map.newPolygon(p) + } else { + this.polygon.addLatLng(e.latlng); + this.map.delete(lastPoint); + } + lastPoint = this.map.newMarker({latlng: e.latlng, color: '#ff4141'}); + }) + }; + startRectangle = menuItem => { let lastPoint; this.sub = this.map.click.pipe(skip(1), take(2), finalize(() => this.map.delete(lastPoint))).subscribe(e => { @@ -121,6 +136,19 @@ export class MapComponent implements OnInit { }) }; + stopPolygon = () => { + if(this.polygon) { + let p = {latlng: this.polygon.getLatLngs()[0].map(latlng => ({lat: latlng.lat, lng: latlng.lng})), color: '#ff4141'}; + this.map.delete(this.polygon); + this.polygon = null; + this.syncService.addPolygon(p); + } + if (this.sub) { + this.sub.unsubscribe(); + this.sub = null; + } + }; + unsub = () => { if (this.sub) { this.sub.unsubscribe(); @@ -133,7 +161,7 @@ export class MapComponent implements OnInit { {name: 'Draw', icon: 'create', toggle: true, onEnabled: this.startDrawing, onDisabled: this.unsub}, {name: 'Circle', icon: 'panorama_fish_eye', toggle: true, onEnabled: this.startCircle, onDisabled: this.unsub}, {name: 'Square', icon: 'crop_square', toggle: true, onEnabled: this.startRectangle, onDisabled: this.unsub}, - {name: 'Polygon', icon: 'details', toggle: true}, + {name: 'Polygon', icon: 'details', toggle: true, onEnabled: this.startPolygon, onDisabled: this.stopPolygon}, { name: 'Measure', icon: 'straighten', @@ -192,6 +220,7 @@ export class MapComponent implements OnInit { if (map.circles) map.circles.forEach(c => this.map.newCircle(c)); if (map.markers) map.markers.forEach(m => this.map.newMarker(m)); if (map.measurements) map.measurements.forEach(m => this.map.newMeasurement(m)); + if (map.polygons) map.polygons.forEach(p => this.map.newPolygon(p)); if (map.polylines) map.polylines.forEach(p => this.map.newPolyline(p)); if (map.rectangles) map.rectangles.forEach(r => this.map.newRectangle(r)); })