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

Refactor to fm-map-feature-thumbnail
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma
2021-03-20 12:00:04 +01:00
parent 75d8909997
commit c9fac05aa6
9 changed files with 122 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.html
View File

@@ -1,12 +1,14 @@
<div *ngIf="feature;let feature" class="d-flex m-0">
<div *ngIf="feature;let feature" class="d-flex m-0">
<div class="p-2">
<div #container class="thumbnail">
<canvas #canvas ></canvas>
</div>
<div class="thumbnail">
<fm-map-feature-thumbnail [feature]="feature"></fm-map-feature-thumbnail>
</div>
</div>
<div class="flex-grow p-2 overflow-hidden">
<h1 class="card-title" title="{{feature.get('name')}}">{{feature.get('name')}}</h1>
<div class="card-text"><span>{{areaInHa(feature)| number:'1.2-2'}} ha</span>&nbsp;<span>{{feature.get('cropTypeName')}}</span> </div>
<div class="card-text"><span>{{feature.get('datadate')|date}}</span> - <span>{{feature.get('dataenddate')|date}}</span> </div>
<div class="card-text"><span>{{areaInHa(feature)| number:'1.2-2'}}
ha</span>&nbsp;<span>{{feature.get('cropTypeName')}}</span> </div>
<div class="card-text"><span>{{feature.get('datadate')|date}}</span> -
<span>{{feature.get('dataenddate')|date}}</span> </div>
</div>
</div>
</div>

46
projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts
View File

@@ -1,14 +1,12 @@
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")
@@ -18,10 +16,8 @@ import * as style from 'ol/style';
templateUrl: './feature-list-feature-cropfield.component.html',
styleUrls: ['./feature-list-feature-cropfield.component.scss']
})
export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFeatureComponent implements AfterViewInit {
export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFeatureComponent {
@ViewChild('canvas') canvas;
@ViewChild('container') container;
constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService,config:AppConfig) {
super(store, itemTypeService,config);
@@ -34,42 +30,4 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
if(a) return a;
return getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
}
render(canvas,width,height,feature:Feature) {
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 = feature.getGeometry().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);
}
}