85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import { Component, OnInit, Input, Host, OnChanges, SimpleChanges,ChangeDetectorRef } from '@angular/core';
|
|
import { MapComponent } from 'ngx-openlayers';
|
|
import {IMapState} from '../../../models/map.state'
|
|
import {View} from 'ol';
|
|
import { fromLonLat } from 'ol/proj';
|
|
|
|
|
|
@Component({
|
|
selector: 'fm-map-pan-to-location',
|
|
templateUrl: './pan-to-location.component.html',
|
|
styleUrls: ['./pan-to-location.component.scss']
|
|
})
|
|
export class PanToLocation implements OnInit,OnChanges{
|
|
|
|
view: View;
|
|
map: MapComponent;
|
|
@Input() position: GeolocationPosition;
|
|
@Input() mapState: IMapState;
|
|
@Input() animate: boolean;
|
|
|
|
constructor(@Host() map: MapComponent,private changeDetectorRef$: ChangeDetectorRef ) {
|
|
this.map = map;
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.view = this.map.instance.getView();
|
|
this.view.on('change:center', () => {
|
|
this.changeDetectorRef$.detectChanges();
|
|
});
|
|
}
|
|
|
|
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;
|
|
// }
|
|
}
|
|
|
|
p
|
|
|
|
public centered():boolean {
|
|
if(this.position && this.mapState) {
|
|
const center = this.view.getCenter();
|
|
const newCenter = fromLonLat([this.position.coords.longitude,this.position.coords.latitude]);
|
|
const x1 = newCenter[0].toFixed(0);
|
|
const x2 = center[0].toFixed(0);
|
|
const y1 = newCenter[1].toFixed(0);
|
|
const y2 = center[1].toFixed(0);
|
|
return x1==x2 && y1==y2;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
public disabled():boolean {
|
|
return !this.position;
|
|
}
|
|
|
|
handleClick(event:Event) {
|
|
if(this.position) {
|
|
const view = this.map.instance.getView();
|
|
const newCenter = fromLonLat([this.position.coords.longitude,this.position.coords.latitude]);
|
|
const extent = [newCenter[0]-500,newCenter[1]-500,newCenter[0]+500,newCenter[1]+500];
|
|
const options = { padding: [0, 0, 0, 0],minResolution:1 };
|
|
const size = this.map.instance.getSize();
|
|
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
const threshold = 44 * rem;
|
|
let left = 1 * rem;
|
|
const right = 1 * rem;
|
|
let bottom = Math.round(size[1] / 2);
|
|
const top = 1 * rem;
|
|
if (size[0] > threshold) {
|
|
bottom = 1 * rem;
|
|
left = 23 * rem;
|
|
}
|
|
//options.padding = [top, right, bottom, left];
|
|
if (this.animate) options["duration"] = 2000;
|
|
view.fit(extent, options);
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
}
|