FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

AW-3412

Browse Source
This commit is contained in:
Willem Dantuma 2022-01-19 13:21:44 +01:00
parent c2350eec52
commit 132556da81
1 changed files with 69 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, OnInit,ViewChild } from '@angular/core'; import { Component, Input, AfterViewInit, ViewChild } from '@angular/core';
import { Feature} from 'ol'; import { Feature} from 'ol';
import { Geometry } from 'ol/geom'; import { Geometry } from 'ol/geom';
import * as extent from 'ol/extent'; import * as extent from 'ol/extent';
@ -10,51 +10,86 @@ import * as style from 'ol/style';
templateUrl: './feature-thumbnail.component.html', templateUrl: './feature-thumbnail.component.html',
styleUrls: ['./feature-thumbnail.component.scss'] styleUrls: ['./feature-thumbnail.component.scss']
}) })
export class GeometryThumbnailComponent implements OnInit { export class GeometryThumbnailComponent implements AfterViewInit {
constructor() { } constructor() { }
@ViewChild('canvas') canvas; @ViewChild('canvas') canvas;
@ViewChild('container') container; @ViewChild('container') container;
@Input('feature') feature:Feature;
ngOnInit(): void { private geometry:Geometry = null;
@Input() set feature(value:Feature) {
if(value) {
this.geometry = value.getGeometry();
} else {
this.geometry = null;
}
this.render(this.canvas,
this.geometryStyle,
this.geometry,
this.width,
this.height);
};
private defaultStyle:style.Style = new style.Style({
stroke: new style.Stroke({ color: 'black',width:1.5 })
});
private geometryStyle:style.Style = this.defaultStyle;
@Input() set fillColor(value:string) {
if(style) {
this.geometryStyle = new style.Style({
stroke: new style.Stroke({ color: 'black',width:1.5 }),
fill: new style.Fill({color: value})
});
} else {
this.geometryStyle = this.defaultStyle
}
this.render(this.canvas,
this.geometryStyle,
this.geometry,
this.width,
this.height);
} }
render(canvas,width,height,geometry:Geometry) { private width:number = 0;
let renderContext = render.toContext(canvas.getContext( '2d'),{ size: [width, height] }); private height:number = 0;
let strokeStyle = new style.Style({
stroke: new style.Stroke({ color: 'black',width:1.5 })
});
let geom = geometry.clone(), render(canvas,style:style.Style,geometry:Geometry,width:number,height:number) {
line = geom.getCoordinates()[0], if(canvas && canvas.nativeElement && geometry && style) {
e = extent.boundingExtent( line ); let renderContext = render.toContext(canvas.nativeElement.getContext( '2d'),{ size: [width, height] });
let dxy = extent.getCenter(e), let geom = geometry.clone(),
sxy = [ line = geom.getCoordinates()[0],
(width - 2 ) / extent.getWidth(e), e = extent.boundingExtent( line );
(height - 2 ) / extent.getHeight(e)
]; let dxy = extent.getCenter(e),
sxy = [
let dx = dxy[0], (width - 2 ) / extent.getWidth(e),
dy = dxy[1], (height - 2 ) / extent.getHeight(e)
sx = sxy[0], ];
sy = sxy[1];
let dx = dxy[0],
geom.translate( -dx, -dy ); dy = dxy[1],
geom.scale( Math.min(sx, sy), -Math.min(sx, sy)); sx = sxy[0],
geom.translate( width / 2, height / 2 ); sy = sxy[1];
renderContext.setStyle( strokeStyle ); geom.translate( -dx, -dy );
renderContext.drawGeometry( geom ); geom.scale( Math.min(sx, sy), -Math.min(sx, sy));
geom.translate(width / 2,height / 2 );
renderContext.setStyle( style );
renderContext.drawGeometry( geom );
}
} }
ngAfterViewInit() { ngAfterViewInit() {
this.render(this.canvas.nativeElement, this.width = this.container.nativeElement.offsetWidth;
this.container.nativeElement.offsetWidth, this.height = this.container.nativeElement.offsetHeight;
this.container.nativeElement.offsetHeight, this.render(this.canvas,
this.feature.getGeometry()); this.geometryStyle,
this.geometry,
this.width,
this.height);
} }
} }