53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
|
|
import { ActivatedRoute } from '@angular/router';
|
|
import { ViewComponent, MapComponent } from 'ngx-openlayers';
|
|
|
|
|
|
@Component({
|
|
selector: 'fm-map-zoom-to-extent',
|
|
template: `<ng-content></ng-content>`
|
|
})
|
|
export class ZoomToExtentComponent implements OnChanges {
|
|
view: ViewComponent;
|
|
map: MapComponent;
|
|
paddingTop = 0;
|
|
paddingLeft = 0;
|
|
paddingBottom = 0;
|
|
paddingRight = 0;
|
|
|
|
@Input() extent: number[];
|
|
@Input() animate = false;
|
|
|
|
constructor(@Host() view: ViewComponent, @Host() map: MapComponent,route: ActivatedRoute ) {
|
|
this.view = view;
|
|
this.map = map;
|
|
if(route && route.snapshot && route.snapshot.data && route.snapshot.data["fm-map-zoom-to-extent"]) {
|
|
const params = route.snapshot.data["fm-map-zoom-to-extent"];
|
|
this.paddingTop = params["padding-top"] ? params["padding-top"] : 0;
|
|
this.paddingBottom = params["padding-bottom"] ? params["padding-bottom"] : 0;
|
|
this.paddingLeft = params["padding-left"] ? params["padding-left"] : 0;
|
|
this.paddingRight = params["padding-right"] ? params["padding-right"] : 0;
|
|
}
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
if (this.extent) {
|
|
const options = { padding: [0, 0, 0, 0],minResolution:1 };
|
|
const size = this.map.instance.getSize();
|
|
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
const threshold = 40 * rem;
|
|
let left = 1 * rem;
|
|
const right = 1 * rem;
|
|
let bottom = Math.round((size[1] / 2) + (4*rem));
|
|
const top = 1 * rem;
|
|
if (size[0] > threshold) {
|
|
bottom = 5 * rem;
|
|
left = 23 * rem;
|
|
}
|
|
options.padding = [top + (this.paddingTop*rem), right+ (this.paddingRight*rem), bottom + (this.paddingBottom*rem), left+ (this.paddingLeft*rem)];
|
|
if (this.animate) options["duration"] = 1000;
|
|
this.view.instance.fit(this.extent, options);
|
|
}
|
|
}
|
|
}
|