114 lines
4.0 KiB
TypeScript
114 lines
4.0 KiB
TypeScript
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;
|
|
@ViewChild('container', { static: false }) container;
|
|
|
|
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;
|
|
}
|
|
|
|
scaleCanvas(canvas, context, width, height) {
|
|
// assume the device pixel ratio is 1 if the browser doesn't specify it
|
|
const devicePixelRatio = window.devicePixelRatio || 1;
|
|
|
|
// determine the 'backing store ratio' of the canvas context
|
|
const backingStoreRatio = (
|
|
context.webkitBackingStorePixelRatio ||
|
|
context.mozBackingStorePixelRatio ||
|
|
context.msBackingStorePixelRatio ||
|
|
context.oBackingStorePixelRatio ||
|
|
context.backingStorePixelRatio || 1
|
|
);
|
|
|
|
// determine the actual ratio we want to draw at
|
|
const ratio = devicePixelRatio / backingStoreRatio;
|
|
|
|
if (devicePixelRatio !== backingStoreRatio) {
|
|
// set the 'real' canvas size to the higher width/height
|
|
canvas.width = width * ratio;
|
|
canvas.height = height * ratio;
|
|
|
|
// ...then scale it back down with CSS
|
|
canvas.style.width = width + 'px';
|
|
canvas.style.height = height + 'px';
|
|
}
|
|
else {
|
|
// this is a normal 1:1 device; just scale it simply
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
canvas.style.width = '';
|
|
canvas.style.height = '';
|
|
}
|
|
|
|
// scale the drawing context so everything will work at the higher ratio
|
|
context.scale(ratio, ratio);
|
|
}
|
|
|
|
render(canvas,width,height,feature:Feature) {
|
|
let canvasContext = canvas.getContext( '2d',{width:width,height:height});
|
|
this.scaleCanvas(canvas,canvasContext,width,height);
|
|
let renderContext = render.toContext(canvasContext);
|
|
|
|
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);
|
|
}
|
|
}
|