69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
|
import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
|
||
|
|
import { MapComponent } from 'ngx-openlayers';
|
||
|
|
import Overlay from 'ol/Overlay';
|
||
|
|
import { fromLonLat, toLonLat } from 'ol/proj';
|
||
|
|
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'gps-location',
|
||
|
|
templateUrl: './gps-location.component.html',
|
||
|
|
styleUrls: ['./gps-location.component.scss']
|
||
|
|
})
|
||
|
|
export class GpsLocation implements OnInit,OnChanges{
|
||
|
|
|
||
|
|
@Input() enable:boolean;
|
||
|
|
public instance: Overlay;
|
||
|
|
@Input() position: Position;
|
||
|
|
@Input() location: number[]=[0,0];
|
||
|
|
@Input() locationTolerance: number = 0;
|
||
|
|
@Input() showHeading: boolean = false;
|
||
|
|
@Input() heading: number = 0;
|
||
|
|
@Input() headingTolerance: number = 0;
|
||
|
|
public locTolerancePixels: number = 0;
|
||
|
|
public path: string = "";
|
||
|
|
public rotate: string = "";
|
||
|
|
private resolution: number = 0;
|
||
|
|
@ViewChild('location') locationElement: ElementRef;
|
||
|
|
|
||
|
|
constructor(private map: MapComponent) {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
recalcLocationTolerance() {
|
||
|
|
this.locTolerancePixels = this.locationTolerance / this.resolution;
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnInit() {
|
||
|
|
this.instance = new Overlay({
|
||
|
|
stopEvent:false,
|
||
|
|
positioning: 'center-center',
|
||
|
|
position: fromLonLat( this.location),
|
||
|
|
element: this.locationElement.nativeElement
|
||
|
|
});
|
||
|
|
var x = Math.tan(this.headingTolerance * Math.PI / 180)*40;
|
||
|
|
var y = Math.cos(this.headingTolerance * Math.PI / 180) * 40;
|
||
|
|
var y1 = Math.round(500 - y);
|
||
|
|
var x1 = Math.round(500 - x);
|
||
|
|
var y2 = Math.round(y1);
|
||
|
|
var x2 = Math.round(500 + x);
|
||
|
|
this.path = "M " + x2 + " " + y2 + " A 45 45,0,0,0, " + x1 + " " + y1 + " L 493 500 L 507 500 Z";
|
||
|
|
this.rotate = "rotate(" + Math.round(this.heading) + " 500 500)";
|
||
|
|
this.locTolerancePixels = this.locationTolerance;
|
||
|
|
this.map.instance.addOverlay(this.instance);
|
||
|
|
this.map.instance.getView().on('change:resolution', (evt) => {
|
||
|
|
this.resolution = evt.target.get('resolution');
|
||
|
|
this.recalcLocationTolerance();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnChanges(changes: SimpleChanges) {
|
||
|
|
if (changes.position && this.instance) {
|
||
|
|
var p = changes.position.currentValue as Position;
|
||
|
|
this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
|
||
|
|
this.locationTolerance = p.coords.accuracy;
|
||
|
|
this.recalcLocationTolerance();
|
||
|
|
this.heading = p.coords.heading;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|