FarmMapsLib/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts

import { Component, Injectable,ViewChild,AfterViewInit} from '@angular/core';
import { Feature } from 'ol';
import * as extent from 'ol/extent';
import * as render from 'ol/render';
import { Store } from '@ngrx/store';
import * as mapReducers from '../../reducers/map.reducer';
import { commonReducers,ItemTypeService,AppConfig } from '@farmmaps/common';
import { AbstractFeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
import { ForItemType } from '../for-item/for-itemtype.decorator';
import {getArea} from 'ol/sphere';
import * as style from 'ol/style';


@ForItemType("vnd.farmmaps.itemtype.cropfield")
@Injectable()
@Component({
  selector: 'fm-map-feature-list-feature-cropfield',
  templateUrl: './feature-list-feature-cropfield.component.html',
  styleUrls: ['./feature-list-feature-cropfield.component.scss']
})
export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFeatureComponent implements AfterViewInit {

  @ViewChild('canvas', { static: false }) canvas;

  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService,config:AppConfig) {
    super(store, itemTypeService,config);
  }

  areaInHa(feature:Feature):number {
    if(!feature) return 0;
    // get area from faeture if 0 calculate from polygon
    let a = feature.get('area');
    if(a) return a;
    return  getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
  }

  render(canvas, feature:Feature) {
    let vectorContext = render.toContext(canvas.getContext( '2d' ));

    let width=canvas.width;
    let height = canvas.height;
    let strokeStyle  = new style.Style({
      stroke: new style.Stroke({ color: 'black',width:2 })
    });

    let geom   = feature.getGeometry().clone(),
        line   = geom.getCoordinates()[0],
        e = extent.boundingExtent( line );

    let dxy = extent.getCenter(e),
        sxy = [ 
            width / extent.getWidth(e),
            height / 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 );

    vectorContext.setStyle( strokeStyle );
    vectorContext.drawGeometry( geom );
  }

  ngAfterViewInit() {
    this.render(this.canvas.nativeElement,this.feature);
  }  
}