ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Polygons!

Browse Source
This commit is contained in:
Zakary Timson 2019-08-31 00:26:45 -04:00
parent 50986f06b7
commit 6e6c1dc056
4 changed files with 55 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/models/mapSymbol.ts
View File

@ -7,6 +7,7 @@ export interface MapData {
circles?: Circle[];
markers?: Marker[];
measurements?: Measurement[];
polygons?: Polygon[];
polylines?: Polyline[];
rectangles?: Rectangle[];
}

21
src/app/services/map.service.ts
View File

@ -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;
}

10
src/app/services/sync.service.ts
View File

@ -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();

31
src/app/views/map/map.component.ts
View File

@ -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));
})