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

New clicking system

Browse Source
This commit is contained in:
Zakary Timson 2019-08-24 19:00:15 -04:00
parent f641867551
commit b243e91fcd
2 changed files with 39 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import {BehaviorSubject} from "rxjs";
import {distanceInM} from "../utils";
import {environment} from "../../environments/environment";
import {LatLng} from "../models/latlng";
import {filter} from "rxjs/operators";
declare const L;
@ -29,15 +30,14 @@ export class MapService {
private mapLayer;
private weatherLayer;
click = new BehaviorSubject<{lat: number, lng: number}>(null);
deleteMode = false;
click = new BehaviorSubject<{event: any, symbol?: any}>(null);
drawingColor = '#ff4141';
drawingWeight = 10;
map;
constructor(private elementId: string) {
this.map = L.map(elementId, {attributionControl: false, tap: true, zoomControl: false, maxBoundsViscosity: 1, doubleClickZoom: false}).setView({lat: 0, lng: 0}, 10);
this.map.on('click', (e) => this.click.next(e.latlng));
this.map.on('click', (e) => this.click.next({event: e}));
this.setMapLayer();
}
@ -116,60 +116,50 @@ export class MapService {
newCircle(latlng: LatLng, radius: number, opts: any={}) {
opts.radius = radius;
let circle = L.circle(latlng, opts).addTo(this.map);
circle.on('click', () => {
if(!opts.noDelete && this.deleteMode) {
this.delete(circle);
} else {
}
});
circle.on('click', e => this.click.next({event: e, symbol: circle}));
return circle;
}
newMarker(latlng: LatLng, opts: any={}) {
if(!opts.icon) opts.icon = MARKER;
let marker = L.marker(latlng, opts).addTo(this.map);
if(opts.label) marker.bindTooltip(opts.label, {permanent: true, direction: 'bottom'});
this.markers.push(marker);
marker.on('click', () => {
if(!opts.noDelete && this.deleteMode) {
this.delete(marker);
} else {
}
});
marker.on('click', e => this.click.next({event: e, symbol: marker}));
return marker;
}
newMeasurement(latlng1: LatLng, latlng2: LatLng) {
let line = L.polyline([latlng1, latlng2], {color: '#ff4141', weight: 5}).addTo(this.map);
let line = L.polyline([latlng1, latlng2], {color: '#ff4141', weight: 5});
let decoration = L.polylineDecorator(line, {patterns: [
{offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, headAngle: 180, pathOptions: {color: '#ff4141', stroke: true}})},
{offset: '-100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, headAngle: 180, pathOptions: {color: '#ff4141', stroke: true}})}
]}).addTo(this.map);
{offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, headAngle: 180, pathOptions: {color: '#ff4141', stroke: true}})},
{offset: '-100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, headAngle: 180, pathOptions: {color: '#ff4141', stroke: true}})}
]});
this.measurements.push({line: line, decoration: decoration});
let distance = distanceInM(latlng1.lat, latlng1.lng, latlng2.lat, latlng2.lng);
let group = L.layerGroup([line, decoration]);
line.on('click', e => this.click.next({event: e, symbol: group}));
group.addTo(this.map);
line.bindPopup(`${distance > 1000 ? Math.round(distance / 100) / 10 : Math.round(distance)} ${distance > 1000 ? 'k' : ''}m`, {autoClose: false, closeOnClick: false}).openPopup();
line.on('click', () => { if(this.deleteMode) this.delete(line, decoration);});
return {line: line, decoration: decoration};
return group;
}
startDrawing() {
this.lock();
let poly;
this.drawListener = e => {
poly = L.polyline([e.latlng], {interactive: true, color: this.drawingColor, weight: this.drawingWeight}).addTo(this.map);
poly.on('click', () => { if(this.deleteMode) this.map.removeLayer(poly); });
let poly = L.polyline([e.latlng], {interactive: true, color: this.drawingColor, weight: this.drawingWeight}).addTo(this.map);
poly.on('click', e => this.click.next({event: e, symbol: poly}));
let pushLine = e => poly.addLatLng(e.latlng);
this.map.on('mousemove touchmove', pushLine);
this.map.on('mouseup touchend', () => this.map.off('mousemove touchmove', pushLine));
this.map.on('touchmove', pushLine);
this.map.on('touchend', () => this.map.off('touchmove', pushLine));
};
this.map.on('mousedown touchstart', this.drawListener);
this.map.on('touchstart', this.drawListener);
}
stopDrawing() {
this.lock(true);
this.map.setMaxBounds(null);
this.map.off('mousedown touchstart', this.drawListener);
this.map.off('touchstart', this.drawListener);
}
}

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

@ -7,6 +7,7 @@ import {ToolbarItem} from "../../models/toolbarItem";
import {flyInRight, flyOutRight} from "../../animations";
import {ARROW, MapLayers, MapService, WeatherLayers} from "../../services/map.service";
import {Subscription} from "rxjs";
import {MarkerComponent} from "../../components/marker/marker.component";
declare const L;
@ -31,7 +32,7 @@ export class MapComponent implements OnInit {
{name: 'Marker', icon: 'room', toggle: true, click: () => { this.addMarker(); }},
{name: 'Draw', icon: 'create', toggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.endDrawing()},
{name: 'Measure', icon: 'straighten', toggle: true, onEnabled: () => this.startMeasuring(), onDisabled: () => this.stopMeasuring()},
{name: 'Delete', icon: 'delete', toggle: true, onEnabled: () => this.map.deleteMode = true, onDisabled: () => this.map.deleteMode = false},
{name: 'Delete', icon: 'delete', toggle: true},
{name: 'Map Style', icon: 'terrain', subMenu: [
{name: 'ESRI:Topographic', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)},
{name: 'ESRI:Satellite', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY)},
@ -54,6 +55,17 @@ export class MapComponent implements OnInit {
ngOnInit() {
this.map = new MapService('map');
// Handle click actions
this.map.click.pipe(filter(e => !!e)).subscribe(e => {
const event = e.event;
const symbol = e.symbol;
if(!!symbol && this.menu[3].enabled) return this.map.delete(symbol);
if(symbol instanceof L.Marker) this.bottomSheet.open(MarkerComponent, {data: symbol});
});
this.physicsService.info.pipe(filter(coord => !!coord)).subscribe(pos => {
if(!this.position) this.center({lat: pos.latitude, lng: pos.longitude});
if(this.positionMarker.arrow) this.map.delete(this.positionMarker.arrow);
@ -77,10 +89,10 @@ export class MapComponent implements OnInit {
}
addMarker() {
this.map.click.pipe(skip(1), take(1), filter(() => this.menu[0].enabled)).subscribe(latlng => {
this.map.click.pipe(skip(1), take(1), filter(() => this.menu[0].enabled)).subscribe(e => {
this.menu[0].enabled = false;
this.markers.push(latlng);
this.map.newMarker(latlng);
this.markers.push(e.event.latlng);
this.map.newMarker(e.event.latlng);
});
}
@ -89,12 +101,12 @@ export class MapComponent implements OnInit {
}
startMeasuring() {
this.measuringSubscription = this.map.click.pipe(skip(1)).subscribe(latlng => {
this.measuringSubscription = this.map.click.pipe(skip(1)).subscribe(e => {
if(this.lastMeasuringPoint) {
this.map.newMeasurement(this.lastMeasuringPoint.getLatLng(), latlng);
this.map.newMeasurement(this.lastMeasuringPoint.getLatLng(), e.event.latlng);
this.map.delete(this.lastMeasuringPoint);
}
this.lastMeasuringPoint = this.map.newMarker(latlng);
this.lastMeasuringPoint = this.map.newMarker(e.event.latlng);
})
}