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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@ -1865,25 +1865,25 @@
}
},
"@farmmaps/common": {
"version": "0.0.1-prerelease.573",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.573.tgz",
"integrity": "sha512-fWw9UvNBqk1joN17u4ALQQs5jAAhX7858ThSmDZsuk2Md9KTbtiJVTZ0Y/FWmD8e90NvMLOLaTJd4p2/CvxZOA==",
"version": "0.0.1-prerelease.575",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.575.tgz",
"integrity": "sha512-Q0mpZG5u3cllQOONJuFfp4djkCsSmh2mOHPnePcn60vrxTkr02nyobmLbq7FG7aGJkT4g4dyYMU7xxLS2fLnrA==",
"requires": {
"tslib": "^2.0.0"
}
},
"@farmmaps/common-map": {
"version": "0.0.1-prerelease.573",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.573.tgz",
"integrity": "sha512-txt8hxAwpifH3TVUqF6eFUWHlMn6Sp3pUCbcIzs+6PUwrRgiAUFyeVZEQxGpUeW2j46CtUKBvkkQAIr9JBnqAQ==",
"version": "0.0.1-prerelease.575",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.575.tgz",
"integrity": "sha512-Mfc4A6BpRuHbtM3RlEUvZya1UHTfNhRpul3hFzEZ/zoo3pnO/iGDaUb0gi4TFsKEUDONezspKK3Gpy7KuaMsbA==",
"requires": {
"tslib": "^2.0.0"
}
},
"@farmmaps/common-map3d": {
"version": "0.0.1-prerelease.573",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.573.tgz",
"integrity": "sha512-MDk05xeXdxlrNFXoxWA+5esG8MoDrIglrzyGz313agwYVyE8jPVELq8YMZmNTfvWof4W7KXiPYpvJAG2goJVUw==",
"version": "0.0.1-prerelease.575",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.575.tgz",
"integrity": "sha512-4Tg+DVqrvxj5oKXtxDmlva7pnR4mgdTB2QYB/aPn1gaOpjPKRN7UnBX512k4GYYuKCOwuIH9ve3WeH2DIrGW3g==",
"requires": {
"tslib": "^2.0.0"
}
@ -6639,7 +6639,8 @@
},
"ini": {
"version": "1.3.5",
"resolved": "",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
"dev": true
},
"injection-js": {

6
package.json
View File

@ -19,9 +19,9 @@
"@angular/platform-browser": "~10.2.4",
"@angular/platform-browser-dynamic": "~10.2.4",
"@angular/router": "~10.2.4",
"@farmmaps/common": ">=0.0.1-prerelease.573 <0.0.1",
"@farmmaps/common-map": ">=0.0.1-prerelease.573 <0.0.1",
"@farmmaps/common-map3d": ">=0.0.1-prerelease.573 <0.0.1",
"@farmmaps/common": ">=0.0.1-prerelease.575 <0.0.1",
"@farmmaps/common-map": ">=0.0.1-prerelease.575 <0.0.1",
"@farmmaps/common-map3d": ">=0.0.1-prerelease.575 <0.0.1",
"@microsoft/signalr": "^3.1.3",
"@ng-bootstrap/ng-bootstrap": "^7.0",
"@ngrx/effects": "^10.0",

4
projects/common-map/src/fm-map/common-map.module.ts
View File

@ -71,6 +71,7 @@ import {StatisticsDetailsComponent} from './components/legend/statistics-details
import { ifZoomToShowDirective} from './components/if-zoom-to-show/if-zoom-to-show.directive';
import { ZoomToShowAlert} from './components/zoom-to-show-alert/zoom-to-show-alert.component';
import { LayerValuesComponent } from './components/aol/layer-values/layer-values.component';
import { GeometryThumbnailComponent } from './components/feature-thumbnail/feature-thumbnail.component';
export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
const r = function(state, action) {
@ -209,7 +210,8 @@ export {
StatisticsDetailsComponent,
ifZoomToShowDirective,
ZoomToShowAlert,
LayerValuesComponent
LayerValuesComponent,
GeometryThumbnailComponent
],
entryComponents: [
FeatureListComponent,

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);
}
}

4
projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.html Normal file
View File

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

5
projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.scss Normal file
View File

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

25
projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.spec.ts Normal file
View File

@ -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();
});
});

60
projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.ts Normal file
View File

@ -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());
}
}