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

First functional version
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2019-11-01 16:53:24 +01:00
parent ca6331e053
commit d3782323f5
6 changed files with 33 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
projects/common-map/src/lib/common-map.module.ts
View File

@ -53,14 +53,7 @@ import { LayerVectorImageComponent } from './components/aol/layer-vector-image/l
import { StateSerializerService } from './services/state-serializer.service';
import { GeolocationService } from './services/geolocation.service';
import { localStorageSync } from 'ngrx-store-localstorage';
import { ItemWidgetWeatherComponent } from './components/item-widget-weather/item-widget-weather.component';
import { ItemListItemTemporalComponent } from './components/item-list-item-temporal/item-list-item-temporal.component';
import { ItemListItemHeightComponent } from './components/item-list-item-height/item-list-item-height.component';
import { ItemListItemTipstarComponent } from './components/item-list-item-tipstar/item-list-item-tipstar.component';
import { ItemListItemWatBalComponent } from './components/item-list-item-watbal/item-list-item-watbal.component';
import { WidgetStatusComponent } from './components/widget-status/widget-status.component';
import { ItemListItemShadowComponent } from './components/item-list-item-shadow/item-list-item-shadow.component';
import { ItemListItemBofekComponent } from './components/item-list-item-bofek/item-list-item-bofek.component';
export {
@ -96,16 +89,9 @@ export {
ItemListItemComponent,
ItemListItemContainerComponent,
ItemListComponent,
ItemWidgetWeatherComponent,
ItemListItemTemporalComponent,
ItemWidgetListComponent,
ItemListItemHeightComponent,
ItemListItemTipstarComponent,
ItemListItemWatBalComponent,
ItemListItemShadowComponent,
WidgetStatusComponent,
GpsLocation,
ItemListItemBofekComponent,
AbstractFeatureListComponent,
AbstractFeatureListFeatureComponent,
AbstractSelectedItemComponent,
@ -159,17 +145,9 @@ export {
ItemListItemComponent,
ItemListItemContainerComponent,
ItemListComponent,
ItemWidgetWeatherComponent,
ItemListItemTemporalComponent,
ItemWidgetListComponent,
ItemListItemHeightComponent,
ItemListItemTipstarComponent,
ItemListItemWatBalComponent,
ItemListItemShadowComponent,
WidgetStatusComponent,
GpsLocation,
ItemListItemBofekComponent
// Switch2D3DComponent
],
entryComponents: [
FeatureListComponent,
@ -184,13 +162,6 @@ export {
SelectedItemShapeComponent,
ItemListComponent,
ItemListItemComponent,
ItemWidgetWeatherComponent,
ItemListItemTemporalComponent,
ItemListItemHeightComponent,
ItemListItemTipstarComponent,
ItemListItemWatBalComponent,
ItemListItemShadowComponent,
ItemListItemBofekComponent,
],
exports: [
ItemVectorSourceComponent,
@ -211,15 +182,8 @@ export {
ItemListItemComponent,
ItemListItemContainerComponent,
ItemListComponent,
ItemWidgetWeatherComponent,
ItemListItemTemporalComponent,
ItemWidgetListComponent,
ItemListItemHeightComponent,
ItemListItemTipstarComponent,
ItemListItemWatBalComponent,
ItemListItemShadowComponent,
WidgetStatusComponent,
ItemListItemBofekComponent,
RotationResetComponent,
MapSearchComponent,
SelectPeriodModalComponent,
@ -253,13 +217,6 @@ export class AppCommonMapModule {
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
{ provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
{ provide: AbstractItemWidgetComponent, useClass: ItemWidgetWeatherComponent, multi: true },
{ provide: AbstractItemListItemComponent, useClass: ItemListItemTemporalComponent, multi: true },
{ provide: AbstractItemListItemComponent, useClass: ItemListItemHeightComponent, multi: true },
{ provide: AbstractItemListItemComponent, useClass: ItemListItemTipstarComponent, multi: true },
{ provide: AbstractItemListItemComponent, useClass: ItemListItemWatBalComponent, multi: true },
{ provide: AbstractItemListItemComponent, useClass: ItemListItemShadowComponent, multi: true },
{ provide: AbstractItemListItemComponent, useClass: ItemListItemBofekComponent, multi: true },
{ provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }
]
};

18
projects/common-map/src/lib/components/item-widget-list/item-widget-list.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, Injectable, Inject, ComponentFactoryResolver, ViewContainerRef, QueryList, ComponentFactory, ViewChildren,AfterViewInit } from '@angular/core';
import { Component, Input, Injectable, Inject, Optional,ComponentFactoryResolver, ViewContainerRef, QueryList, ComponentFactory, ViewChildren,AfterViewInit } from '@angular/core';
import { Location } from '@angular/common';
import { Store } from '@ngrx/store';
import * as mapReducers from '../../reducers/map.reducer';
@ -18,19 +18,21 @@ export class ItemWidgetListComponent implements AfterViewInit {
public widgets: AbstractItemWidgetComponent[];
@ViewChildren('widgetTemplate', { read: ViewContainerRef }) private widgetTargets: QueryList<ViewContainerRef>;
constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, public location: Location, private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractItemWidgetComponent) itemWidgetComponentList: AbstractItemWidgetComponent[]) {
constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, public location: Location, private componentFactoryResolver: ComponentFactoryResolver, @Optional() @Inject(AbstractItemWidgetComponent) itemWidgetComponentList: AbstractItemWidgetComponent[]) {
this.widgets = itemWidgetComponentList; //todo filter this list on widgets available for user
}
ngAfterViewInit() {
let targets = this.widgetTargets.toArray();
for (var i = 0; i < this.widgets.length; i++) {
var componentFactory: ComponentFactory<AbstractItemWidgetComponent> = this.componentFactoryResolver.resolveComponentFactory(this.widgets[i]['constructor'] as any);
const viewContainerRef = targets[i];
viewContainerRef.clear();
if(this.widgets) {
for (var i = 0; i < this.widgets.length; i++) {
var componentFactory: ComponentFactory<AbstractItemWidgetComponent> = this.componentFactoryResolver.resolveComponentFactory(this.widgets[i]['constructor'] as any);
const viewContainerRef = targets[i];
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractItemWidgetComponent>componentRef.instance).item = this.item;
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractItemWidgetComponent>componentRef.instance).item = this.item;
}
}
}
}

13
projects/common-map/src/lib/components/map/map.component.html
View File

@ -1,8 +1,13 @@
<aol-map #map (onMoveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':(panelVisible|async)}" class="map">
<aol-view [zoom]="(mapState|async).zoom" [rotation]="(mapState|async).rotation">
<aol-coordinate [x]="(mapState|async).xCenter" [y]="(mapState|async).yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
<zoom-to-extent [extent]="extent|async" [animate]="true"></zoom-to-extent>
</aol-view>
<div>
</div>
<ng-container *ngIf="(mapState$|async) as mapState">
<aol-view [zoom]="mapState.zoom" [rotation]="mapState.rotation">
<aol-coordinate [x]="mapState.xCenter" [y]="mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
<zoom-to-extent [extent]="extent$|async" [animate]="true"></zoom-to-extent>
</aol-view>
</ng-container>
<aol-interaction-default></aol-interaction-default>
<aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
<item-layers [itemLayers]="baseLayers|async"></item-layers>

12
projects/common-map/src/lib/components/map/map.component.ts
View File

@ -38,7 +38,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
title: string = 'Map';
public openedModalName: Observable<string>;
public itemTypes: Observable<{ [id: string]: IItemType }>;
public mapState: Observable<IMapState>;
public mapState$: Observable<IMapState>;
public features: Observable<Array<Feature>>;
public overlayLayers: Observable<Array<IItemLayer>>;
public selectedOverlayLayer: Observable<IItemLayer>;
@ -67,7 +67,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
public position: Observable<Position>;
public baseLayersCollapsed:boolean = true;
public overlayLayersCollapsed: boolean = true;
public extent: Observable<Extent>;
public extent$: Observable<Extent>;
@ViewChild('map') map;
constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
@ -107,7 +107,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
ngOnInit() {
this.store.dispatch(new mapActions.Init());
this.selectedFeatures.next({x:0,y:0,features:[]});
this.mapState = this.store.select(mapReducers.selectGetMapState);
this.mapState$ = this.store.select(mapReducers.selectGetMapState);
this.parentCode = this.store.select(mapReducers.selectGetParentCode);
this.features = this.store.select(mapReducers.selectGetFeatures);
this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
@ -126,16 +126,16 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
this.query = this.store.select(mapReducers.selectGetQuery);
this.extent = this.store.select(mapReducers.selectGetExtent);
this.extent$ = this.store.select(mapReducers.selectGetExtent);
this.selectedFeatures.next(null);
this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
this.period = this.store.select(mapReducers.selectGetPeriod);
this.position = this.geolocationService.getCurrentPosition();
this.mapState.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
this.mapState$.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
this.replaceUrl(state[0], state[1], true);
});
this.query.pipe(withLatestFrom(this.mapState)).subscribe((state) => {
this.query.pipe(withLatestFrom(this.mapState$)).subscribe((state) => {
this.replaceUrl(state[1], state[0],false);
});
}

297
projects/common-map/src/lib/map.component.ts
View File

@ -1,297 +0,0 @@
import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit } from '@angular/core';
import { Location } from '@angular/common';
import { Observable, Subject, Subscription,combineLatest, from } from 'rxjs';
import { debounce, withLatestFrom, first, combineAll } from 'rxjs/operators';
import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
import { Store } from '@ngrx/store';
//import { proj,Map } from 'openlayers';
// Map
import * as mapReducers from './reducers/map.reducer';
import * as mapActions from './actions/map.actions';
import { IMapState,ISelectedFeatures,IItemLayer, ItemLayer,IQueryState,IPeriodState } from './models';
import { IDroppedFile } from './components/aol/file-drop-target/file-drop-target.component';
import { IMetaData } from './components/meta-data-modal/meta-data-modal.component';
import { StateSerializerService } from './services/state-serializer.service';
import { GeolocationService} from './services/geolocation.service';
// AppCommon
import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
import { IItemType, IItem } from '@farmmaps/common';
import {commonReducers} from '@farmmaps/common';
import {commonActions} from '@farmmaps/common';
import {Feature} from 'ol';
import {Extent,createEmpty,extend } from 'ol/extent';
import {transform} from 'ol/proj';
import { query } from '@angular/animations';
import { tassign } from 'tassign';
@Component({
selector: 'map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
title: string = 'Map';
public openedModalName: Observable<string>;
public itemTypes: Observable<{ [id: string]: IItemType }>;
public mapState: Observable<IMapState>;
public features: Observable<Array<Feature>>;
public overlayLayers: Observable<Array<IItemLayer>>;
public selectedOverlayLayer: Observable<IItemLayer>;
public selectedItemLayer: Observable<IItemLayer>;
public baseLayers: Observable<Array<IItemLayer>>;
public selectedBaseLayer: Observable<IItemLayer>;
public projection: Observable<string>;
public selectedFeatures: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
public droppedFile: Subject<IDroppedFile> = new Subject<IDroppedFile>();
private paramSub: Subscription;
private itemTypeSub: Subscription;
private mapStateSub: Subscription;
private queryStateSub: Subscription;
public parentCode: Observable<string>;
public panelVisible: Observable<boolean>;
public panelCollapsed: Observable<boolean>;
public selectedFeature: Observable<Feature>;
public selectedItem: Observable<IItem>;
public queryState: Observable<IQueryState>;
public period: Observable<IPeriodState>;
public clearEnabled: Observable<boolean>;
public searchCollapsed: Observable<boolean>;
public searchMinified: Observable<boolean>;
public menuVisible: Observable<boolean>;
public query: Observable<IQueryState>;
public position: Observable<Position>;
public baseLayersCollapsed:boolean = true;
public overlayLayersCollapsed: boolean = true;
public extent: Observable<Extent>;
@ViewChild('map') map;
constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
}
@HostListener('document:keyup', ['$event'])
escapeClose(event: KeyboardEvent) {
let x = event.keyCode;
if (x === 27) {
this.handleCloseModal()
}
}
handleOpenModal(modalName: string) {
this.store.dispatch(new commonActions.OpenModal(modalName));
}
handleCloseModal() {
this.store.dispatch(new commonActions.CloseModal());
}
handleFileDropped(droppedFile: IDroppedFile) {
this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry });
}
handleFeaturesSelected(feature: Feature) {
if (feature) {
let newQuery = tassign(mapReducers.initialQueryState, { itemCode: feature.get('code') });
this.store.dispatch(new mapActions.DoQuery(newQuery));
}
}
handleSearch(queryState: IQueryState) {
this.store.dispatch(new mapActions.DoQuery(queryState));
}
ngOnInit() {
this.store.dispatch(new mapActions.Init());
this.selectedFeatures.next({x:0,y:0,features:[]});
this.mapState = this.store.select(mapReducers.selectGetMapState);
this.parentCode = this.store.select(mapReducers.selectGetParentCode);
this.features = this.store.select(mapReducers.selectGetFeatures);
this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
this.projection = this.store.select(mapReducers.selectGetProjection);
this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
this.panelVisible = this.store.select(mapReducers.selectGetPanelVisible);
this.panelCollapsed = this.store.select(mapReducers.selectGetPanelCollapsed);
this.selectedFeature = this.store.select(mapReducers.selectGetSelectedFeature);
this.selectedItem = this.store.select(mapReducers.selectGetSelectedItem);
this.queryState = this.store.select(mapReducers.selectGetQueryState);
this.clearEnabled = this.store.select(mapReducers.selectGetClearEnabled);
this.searchCollapsed = this.store.select(mapReducers.selectGetSearchCollapsed);
this.searchMinified = this.store.select(mapReducers.selectGetSearchMinified);
this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
this.query = this.store.select(mapReducers.selectGetQuery);
this.extent = this.store.select(mapReducers.selectGetExtent);
this.selectedFeatures.next(null);
this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
this.period = this.store.select(mapReducers.selectGetPeriod);
this.position = this.geolocationService.getCurrentPosition();
this.mapState.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
this.replaceUrl(state[0], state[1], true);
});
this.query.pipe(withLatestFrom(this.mapState)).subscribe((state) => {
this.replaceUrl(state[1], state[0],false);
});
}
private stateSetCount: number = 0;
private lastQueryState: string = this.serializeService.serialize(mapReducers.initialQueryState);
private lastMapState: string = "";
ngAfterViewInit() {
this.paramSub = this.route.paramMap.subscribe((params: ParamMap) => {
//console.log("Param sub");
var newMapState: IMapState = null;
var newQueryState: IQueryState = null;
var mapStateChanged = false;
var queryStateChanged = false;
if (params.has("xCenter") && params.has("yCenter")) {
let xCenter = parseFloat(params.get("xCenter"));
let yCenter = parseFloat(params.get("yCenter"));
let zoom = parseFloat(params.get("zoom"));
let rotation = parseFloat(params.get("rotation"));
let baseLayer = params.get("baseLayer");
newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
mapStateChanged = this.lastMapState != JSON.stringify(newMapState) && this.stateSetCount == 0;
this.lastMapState = JSON.stringify(newMapState);
//console.log(`Base layer: ${newMapState.baseLayerCode}`)
}
if (params.has("queryState")) {
let queryState = params.get("queryState");
newQueryState = tassign(mapReducers.initialQueryState);
if (queryState != "") {
newQueryState = this.serializeService.deserialize(queryState);
}
queryStateChanged = this.lastQueryState != queryState;
this.lastQueryState = queryState;
}
if (mapStateChanged && queryStateChanged) {
//console.log("Both states");
this.store.dispatch(new mapActions.SetState(newMapState, newQueryState));
} else if (mapStateChanged) {
//console.log("Map state");
this.store.dispatch(new mapActions.SetMapState(newMapState));
} else if (queryStateChanged) {
//console.log("Query state");
this.store.dispatch(new mapActions.SetQueryState(newQueryState));
}
this.stateSetCount += 1;
});
setTimeout(() => {
this.map.instance.updateSize();
}, 500);
}
handleSearchCollapse(event) {
this.store.dispatch(new mapActions.CollapseSearch());
}
handleSearchExpand(event) {
this.store.dispatch(new mapActions.ExpandSearch());
}
handleToggleMenu(event) {
this.store.dispatch(new mapActions.ToggleMenu());
}
handleToggleBaseLayers(event:MouseEvent) {
this.baseLayersCollapsed = !this.baseLayersCollapsed;
event.preventDefault();
}
handleToggleOverlayLayers(event: MouseEvent) {
this.overlayLayersCollapsed = !this.overlayLayersCollapsed;
event.preventDefault();
}
handlePredefinedQuery(event: MouseEvent, query: any) {
event.preventDefault();
var queryState = tassign(mapReducers.initialQueryState, query);
this.store.dispatch(new mapActions.DoQuery(queryState));
}
handleTrijntjeClick(event: MouseEvent, query: any) {
event.preventDefault();
var queryState = tassign(mapReducers.initialQueryState, query);
var mapState = JSON.parse(this.lastMapState);
this.router.navigate(["app","trijntje" , mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: false });
}
replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
//console.log(`Replace url :${mapState.baseLayerCode}`)
this.router.navigate([".", mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: replace,relativeTo:this.route.parent.parent });
}
handleOnMoveEnd(event) {
var map = event.map;
var view = map.getView();
var rotation = view.getRotation();
var zoom = view.getZoom();
var center = transform(view.getCenter(), view.getProjection(), "EPSG:4326");
var extent = view.calculateExtent(this.map.instance.getSize());
let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
let state = { mapState: mapState, extent: extent };
let source = from([state]);
source.pipe(withLatestFrom(this.selectedBaseLayer), withLatestFrom(this.queryState)).subscribe(([[state, baselayer], queryState]) => {
if (mapState && baselayer && queryState) {
let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code });
this.replaceUrl(newMapState, tassign(queryState, { bbox: queryState.bboxFilter ? state.extent : queryState.bbox }));
this.store.dispatch(new mapActions.SetViewExtent(state.extent));
}
});
}
handleOnMouseDown(event: MouseEvent) {
this.store.dispatch(new mapActions.CollapseSearch());
}
handleOnDownload(event) {
}
handleClearSearch(event) {
this.store.dispatch(new commonActions.Escape(true, false));
}
handleOnDelete(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
}
handleOnToggleVisibility(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
}
handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) {
this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
}
handleZoomToExtent(itemLayer: IItemLayer) {
var extent = createEmpty();
extend(extent, itemLayer.layer.getExtent());
if (extent) {
this.store.dispatch(new mapActions.SetExtent(extent));
}
}
handleSelectBaseLayer(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
}
handleSelectOverlayLayer(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
}
ngOnDestroy() {
this.paramSub.unsubscribe();
if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
if (this.mapStateSub) this.mapStateSub.unsubscribe();
if (this.queryStateSub) this.queryStateSub.unsubscribe(); }
}

6
src/app/app.component.scss
View File

@ -17,5 +17,11 @@ $fa-font-path: "~font-awesome/fonts";
border-color: $input-border-color;
}
:host ::ng-deep body {
background: #f1f1f1;
line-height: 18px;
user-select:none;
}