Refactor to fm-map-feature-thumbnail

projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.html

@@ -0,0 +1,4 @@
+<div #container class="container">
+    <canvas  #canvas ></canvas>
+</div>
+

projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.scss

@@ -0,0 +1,5 @@
+.container {
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}

projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeometryThumbnailComponent } from './feature-thumbnail.component';
+
+describe('GeometryThumbnailComponent', () => {
+  let component: GeometryThumbnailComponent;
+  let fixture: ComponentFixture<GeometryThumbnailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GeometryThumbnailComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeometryThumbnailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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