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

Added relative marker placement

Browse Source
This commit is contained in:
Zakary Timson 2019-08-31 14:50:09 -04:00
parent 382d045f32
commit da9aa17cc7
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/utils.ts
View File

@ -41,7 +41,8 @@ export function relativeLatLng(latLng: LatLng, meters: number, deg: number) {
let lat = deg2rad(latLng.lat); let lat = deg2rad(latLng.lat);
let lng = deg2rad(latLng.lng); let lng = deg2rad(latLng.lng);
let latOut = Math.asin(Math.sign(lat) * Math.cos(d / R) + Math.cos(lat) * Math.sin(d / R) * Math.cos(brng)); // lat2 = math.asin( math.sin(lat1)*math.cos(d/R) + math.cos(lat1)*math.sin(d/R)*math.cos(brng))
let latOut = Math.asin(Math.sin(lat) * Math.cos(d / R) + Math.cos(lat) * Math.sin(d / R) * Math.cos(brng));
let lngOut = lng + Math.atan2(Math.sin(brng) * Math.sin(d / R) * Math.cos(lat), Math.cos(d / R) - Math.sin(lat) * Math.sin(latOut)); let lngOut = lng + Math.atan2(Math.sin(brng) * Math.sin(d / R) * Math.cos(lat), Math.cos(d / R) - Math.sin(lat) * Math.sin(latOut));
latOut = rad2deg(latOut); latOut = rad2deg(latOut);
lngOut = rad2deg(lngOut); lngOut = rad2deg(lngOut);

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

@ -1,13 +1,13 @@
import {Component, isDevMode, OnInit} from "@angular/core"; import {Component, isDevMode, OnInit} from "@angular/core";
import {PhysicsService} from "../../services/physics.service"; import {PhysicsService} from "../../services/physics.service";
import {filter, finalize, skip, take} from "rxjs/operators"; import {filter, finalize, flatMap, skip, take} from "rxjs/operators";
import {MatBottomSheet, MatSnackBar} from "@angular/material"; import {MatBottomSheet, MatSnackBar} from "@angular/material";
import {CalibrateComponent} from "../../components/calibrate/calibrate.component"; import {CalibrateComponent} from "../../components/calibrate/calibrate.component";
import {ToolbarItem} from "../../models/toolbarItem"; import {ToolbarItem} from "../../models/toolbarItem";
import {flyInRight, flyOutRight} from "../../animations"; import {flyInRight, flyOutRight} from "../../animations";
import {MapLayers, MapService, WeatherLayers} from "../../services/map.service"; import {MapLayers, MapService, WeatherLayers} from "../../services/map.service";
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";
import {copyToClipboard} from "../../utils"; import {copyToClipboard, relativeLatLng} from "../../utils";
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import {DimensionsDialogComponent} from "../../components/dimensionsDialog/dimensionsDialog.component"; import {DimensionsDialogComponent} from "../../components/dimensionsDialog/dimensionsDialog.component";
import {MatDialog} from "@angular/material/dialog"; import {MatDialog} from "@angular/material/dialog";
@ -34,6 +34,14 @@ export class MapComponent implements OnInit {
showPalette = false; showPalette = false;
sub: Subscription; sub: Subscription;
placeRelative = () => {
this.dialog.open(DimensionsDialogComponent, {data: ['Distance (m)', 'Baring']}).afterClosed().subscribe(dimensions => {
let latlng = relativeLatLng({lat: this.position.latitude, lng: this.position.longitude}, dimensions[0], dimensions[1]);
let marker: Marker = {latlng: latlng, color: '#ff4141'};
this.syncService.addMarker(marker);
})
};
startCalibrating = () => { startCalibrating = () => {
let calibration = this.bottomSheet.open(CalibrateComponent, {hasBackdrop: false, disableClose: true}); let calibration = this.bottomSheet.open(CalibrateComponent, {hasBackdrop: false, disableClose: true});
this.sub = calibration.afterDismissed().pipe(finalize(() => calibration.dismiss())).subscribe(); this.sub = calibration.afterDismissed().pipe(finalize(() => calibration.dismiss())).subscribe();
@ -162,7 +170,8 @@ export class MapComponent implements OnInit {
{name: 'Circle', icon: 'panorama_fish_eye', toggle: true, onEnabled: this.startCircle, 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: 'Square', icon: 'crop_square', toggle: true, onEnabled: this.startRectangle, onDisabled: this.unsub},
{name: 'Polygon', icon: 'details', toggle: true, onEnabled: this.startPolygon, onDisabled: this.stopPolygon}, {name: 'Polygon', icon: 'details', toggle: true, onEnabled: this.startPolygon, onDisabled: this.stopPolygon},
{name: 'Measure', icon: 'straighten', toggle: true, onEnabled: this.startMeasuring, onDisabled: () => this.unsub}, {name: 'Measure', icon: 'straighten', toggle: true, onEnabled: this.startMeasuring, onDisabled: this.unsub},
{name: 'Place Relative', icon: 'control_camera', click: this.placeRelative},
{name: 'Delete', icon: 'delete', toggle: true, onEnabled: this.startDelete, onDisabled: this.unsub}, {name: 'Delete', icon: 'delete', toggle: true, onEnabled: this.startDelete, onDisabled: this.unsub},
{name: 'Map Style', icon: 'terrain', subMenu: [ {name: 'Map Style', icon: 'terrain', subMenu: [
{name: 'ESRI:Topographic', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)}, {name: 'ESRI:Topographic', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)},