FarmMapsLib/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts

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: 'fm-map-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', { static: true }) locationElement: ElementRef;

  constructor(private map: MapComponent) {
    
  }

  recalcLocationTolerance() {
    this.locTolerancePixels = this.resolution >0? this.locationTolerance / this.resolution:0;
  }

  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();
    }
    if(changes.heading && this.instance) {
      this.rotate = "rotate(" + Math.round(changes.heading.currentValue) + " 500 500)";
    }
  }
}