60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnChanges } from '@angular/core';
|
|
import { Layer } from 'ol/layer';
|
|
import { Source } from 'ol/source';
|
|
import { MapComponent } from 'ngx-openlayers';
|
|
|
|
@Directive({
|
|
selector: '[fmMapIfZoomToShow]',
|
|
})
|
|
export class ifZoomToShowDirective implements OnInit {
|
|
@Input()
|
|
set fmMapIfZoomToShow(layer:Layer<Source>) {
|
|
this.layer$=layer;
|
|
this.checkZoom();
|
|
}
|
|
|
|
@Input()
|
|
set fmMapIfZoomToShowThen(templateRef: TemplateRef<any>) {
|
|
this.thenTemplate$ = templateRef;
|
|
this.checkZoom();
|
|
}
|
|
|
|
@Input()
|
|
set fmMapIfZoomToShowElse(templateRef: TemplateRef<any>) {
|
|
this.elseTemplate$ = templateRef;
|
|
this.checkZoom();
|
|
}
|
|
|
|
private layer$:Layer<Source>;
|
|
private thenTemplate$:TemplateRef<any>;
|
|
private elseTemplate$:TemplateRef<any>;
|
|
private showView = false;
|
|
|
|
constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private map$: MapComponent) {
|
|
this.thenTemplate$ = templateRef$;
|
|
this.checkZoom();
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.map$.instance.on('moveend', (e) => {
|
|
this.checkZoom();
|
|
});
|
|
}
|
|
|
|
checkZoom() {
|
|
if(this.layer$ && this.map$.instance) {
|
|
const minZoom = this.layer$.getMinZoom();
|
|
const currentZoom = this.map$.instance.getView().getZoom();
|
|
const view = currentZoom < minZoom;
|
|
if(view!= this.showView) {
|
|
this.viewContainerRef$.clear();
|
|
this.showView=view;
|
|
if (this.showView && this.thenTemplate$ ) {
|
|
this.viewContainerRef$.createEmbeddedView(this.templateRef$);
|
|
} else if(this.elseTemplate$ ) {
|
|
this.viewContainerRef$.createEmbeddedView(this.elseTemplate$);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |