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

implement layer compare slider

Browse Source
This commit is contained in:
Willem Dantuma 2022-09-27 19:58:08 +02:00
parent 7b2dbc1777
commit ddb112b989
11 changed files with 192 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
projects/common-map/src/fm-map/actions/map.actions.ts
View File

@ -54,6 +54,8 @@ export const SETLAYERVALUESLOCATION = '[Map] SetLayerValuesLocation'
export const TOGGLELAYERVALUESENABLED = '[Map] ToggleLayerValuesEnabled'
export const GETLAYERVALUE = '[Map] GetLayerValue'
export const GETLAYERVALUESUCCESS = '[Map] GetLayerValueSuccess'
export const TOGGLESHOWDATALAYERSLIDE = '[Map] ToggleShowDataLayerSlide'
export class Clear implements Action {
readonly type = CLEAR;
@ -316,6 +318,11 @@ export class GetLayerValueSuccess implements Action {
constructor(public layervalue:ILayervalue) { }
}
export class ToggleShowDataLayerSlide implements Action {
readonly type = TOGGLESHOWDATALAYERSLIDE;
constructor() {}
}
export type Actions = SetMapState
| Init
| Clear
@ -359,5 +366,6 @@ export type Actions = SetMapState
| ToggleLayerValuesEnabled
| GetLayerValueSuccess
| GetLayerValue
| SetPeriod;
| SetPeriod
| ToggleShowDataLayerSlide;

46
projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
View File

@ -17,7 +17,7 @@ import VectorTileSource from 'ol/source/VectorTile';
import VectorTileLayer from 'ol/layer/VectorTile';
import {GeoJSON,MVT} from 'ol/format';
import { Geometry } from 'ol/geom';
import TileSource from 'ol/source/Tile';
import BaseLayer from 'ol/layer/Base';
@Component({
selector: 'fm-map-item-layers',
@ -32,9 +32,11 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
@Input() itemLayer: IItemLayer;
@Output() onFeatureSelected: EventEmitter<any> = new EventEmitter<any>();
@Output() onFeatureHover: EventEmitter<any> = new EventEmitter<any>();
@Output() onPrerender: EventEmitter<any> = new EventEmitter<any>();
private _apiEndPoint: string;
private initialized:boolean = false;
private mapEventHandlerInstalled = false;
private topLayerPrerenderEventhandlerInstalled = false;
private selectedFeatures = {};
private selectionLayer:Layer<Source> = null;
@ -362,6 +364,36 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
}
}
installTopLayerPrerenderEventhandler() {
if(!this.topLayerPrerenderEventhandlerInstalled && this.onPrerender.observers.length > 0 ) {
if(this.instance.getVisible()) {
var olLayers = this.instance.getLayers().getArray().filter(l=> l.getVisible());
if(olLayers.length >0) {
var topLayer = olLayers[0] as any;
topLayer.on('prerender',this.topLayerPrerenderEventhandler);
topLayer.on('postrender',this.topLayerPostrenderEventhandler);
this.topLayerPrerenderEventhandlerInstalled = true;
}
}
}
}
unInstallTopLayerPrerenderEventhandler() {
if(this.topLayerPrerenderEventhandlerInstalled && this.onPrerender.observers.length > 0 )
{
if(this.instance.getVisible()) {
var olLayers = this.instance.getLayers().getArray().filter(l=> l.getVisible());
if(olLayers.length >0) {
var topLayer = olLayers[0] as any;
topLayer.un('prerender',this.topLayerPrerenderEventhandler);
topLayer.un('postrender',this.topLayerPostrenderEventhandler);
this.topLayerPrerenderEventhandlerInstalled = false;
}
}
}
}
addOrUpdateOlLayer(itemLayer:IItemLayer,index:number):Layer<Source> {
if(!itemLayer) return null;
var olLayers = this.instance.getLayers();
@ -387,6 +419,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
}
updateLayers(itemLayers: IItemLayer[]) {
this.unInstallTopLayerPrerenderEventhandler();
let newLayers: Layer<Source>[] = [];
if (itemLayers) {
itemLayers.forEach((itemLayer, index) => {
@ -414,8 +447,19 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
if(this.selectionLayer) olLayers.push(this.selectionLayer)
}
}
this.installTopLayerPrerenderEventhandler();
}
topLayerPrerenderEventhandler = (event) => {
this.onPrerender.emit(event);
}
topLayerPostrenderEventhandler = (event) => {
const ctx = event.context;
ctx.restore();
}
mapEventHandler = (event) => {
// select only when having observers
if(event.type === 'click' && !this.onFeatureSelected.observers.length) return;

2
projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html
View File

@ -20,7 +20,7 @@
</div>
</li>
<li class="nav-item py-0" *ngIf="selectedItemLayer$ | async as selectedItemLayer">
<span><i class="fal fa-layer-group" aria-hidden="true"></i>&nbsp;<span i18n>Data</span></span>
<span><i class="fal fa-layer-group" aria-hidden="true"></i>&nbsp;<span i18n>Data</span><span class="slideButton"><a href="#" title="Compare" class="btn btn-light btn-sm" (click)="handleToggleShowDatalayerSlide($event)"><i class="fal fa-sliders-h-square"></i></a></span></span>
<div class="mb-4">
<fm-map-layer-list [dataLayers]="true" [itemLayers]="[selectedItemLayer]" [selectedLayer]="selectedItemLayer" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
</div>

4
projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.scss
View File

@ -19,6 +19,10 @@
font-weight: bold;
}
.slideButton {
margin-left: 1em;
}
.layers {
color:$secondary;
position: absolute;

6
projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.ts
View File

@ -76,4 +76,10 @@ export class LayerSwitcher implements OnInit,OnChanges{
handleSelectBaseLayer(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
}
handleToggleShowDatalayerSlide(event:Event) {
this.store.dispatch(new mapActions.ShowLayerSwitcher(false));
this.store.dispatch(new mapActions.ToggleShowDataLayerSlide());
event.preventDefault();
}
}

15
projects/common-map/src/fm-map/components/map/map.component.html
View File

@ -20,7 +20,8 @@
compassHeading:compassHeading$|async,
styles:styles$|async,
selectedFeature:selectedFeature$|async,
fullscreen:fullscreen$|async
fullscreen:fullscreen$|async,
showDataLayerSlide:showDataLayerSlide$|async
} as state">
<aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" (dblClick)="handleShowLayerValues($event)" [ngClass]="{'panel-visible':state.panelVisible,'fullscreen':state.fullscreen }" class="map">
<div>
@ -34,26 +35,34 @@
<aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
<fm-map-item-layers [itemLayers]="state.baseLayers"></fm-map-item-layers>
<fm-map-item-layers *ngIf="!overrideOverlayLayers" [itemLayers]="state.overlayLayers"></fm-map-item-layers>
<fm-map-item-layers *ngIf="!overrideSelectedItemLayer" [itemLayer]="state.selectedItemLayer"></fm-map-item-layers>
<fm-map-item-layers *ngIf="!overrideSelectedItemLayer" [itemLayer]="state.selectedItemLayer" (onPrerender)="handlePrerender($event)"></fm-map-item-layers>
<aol-layer-vector>
<fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeatureSelected)="handleFeatureClick($event)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
</aol-layer-vector>
<router-outlet name="map-layers"></router-outlet>
<fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="devicesService.IsMobile()" [showTolerance]="devicesService.IsMobile()" [heading]="state.compassHeading"></fm-map-gps-location>
<fm-map-layer-values></fm-map-layer-values>
<div class="viewport-container" [ngStyle]="{'bottom': bottom(state.panelVisible)}">
<div class="control-container">
<router-outlet name="map-controls"></router-outlet>
<fm-map-layer-switcher></fm-map-layer-switcher>
<fm-map-pan-to-location [position]="state.position" [mapState]="state.mapState" [animate]="true"></fm-map-pan-to-location>
<fm-map-rotation-reset></fm-map-rotation-reset>
</div>
<div class="slide-container" [ngClass]="{'showDataLayerSlide':state.showDataLayerSlide}">
<form>
<input class="dataLayerSlide" (input)="handleSlideChange($event)" type="range" style="width: 100%" value="{{dataLayerSlideValue}}"/>
</form>
</div>
</div>
<fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
<div *ngIf="noContent">
<fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)" (onCitySearch)="handleCitySearch($event)"></fm-map-map-search>
</div>
<div class="side-panel-container">
<fm-side-panel [resizeable]="true" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
<fm-side-panel [resizeable]="true" (onResize)="handlePanelResize($event)" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
<div class="panel-wrapper" *ngIf="noContent">
<div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
</div>

43
projects/common-map/src/fm-map/components/map/map.component.scss
View File

@ -1,6 +1,6 @@
@import "~bootstrap/scss/bootstrap.scss";
aol-map { position:absolute;width:100%;height:calc(100vh + 4rem);}
aol-map { position:absolute;width:100%;height:calc( 100vh );}
.arrow {
top: 3rem;
@ -45,29 +45,39 @@ aol-map { position:absolute;width:100%;height:calc(100vh + 4rem);}
text-overflow:ellipsis;
}
.control-container {
.viewport-container {
position: absolute;
right: 1em;
bottom: 8.1em;
left:0;
right:0;
bottom:0;
margin-bottom:4em;
pointer-events: none;
}
.fullscreen .control-container {
bottom: 5em;
.control-container {
float:right;
margin-right: 1em;
pointer-events: all;
}
.fullscreen .viewport-container {
margin-bottom: 1em;
}
.side-panel-container {
position: absolute;
top:0em;
bottom: 7.1em;
bottom: 3em;
width: 100%;
pointer-events: none;
}
.fullscreen .side-panel-container {
bottom: 4em;
bottom:0;
}
switch2d3d {
position: absolute;
right: 1em;
@ -115,6 +125,21 @@ div.header button {
max-height: 2.5em;
}
.slide-container {
display: none;
pointer-events: all;
width: 100%;
overflow: hidden;
}
.dataLayerSlide {
width:100%
}
.slide-container.showDataLayerSlide {
display: block;
}
timespan {
position: absolute;
transition: left 0.5s;

54
projects/common-map/src/fm-map/components/map/map.component.ts
View File

@ -5,7 +5,7 @@ import { withLatestFrom, switchMap,skip } from 'rxjs/operators';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Store } from '@ngrx/store';
import { DeviceService } from '@farmmaps/common';
//import { proj,Map } from 'openlayers';
import {getRenderPixel} from 'ol/render';
// Map
import * as mapReducers from '../../reducers/map.reducer';
@ -76,6 +76,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
public clearEnabled$: Observable<boolean> = this.store.select(mapReducers.selectGetClearEnabled);
public searchCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchCollapsed);
public searchMinified$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchMinified);
public showDataLayerSlide$: Observable<boolean> = this.store.select(mapReducers.selectGetShowdataLayerSlide);
public menuVisible$: Observable<boolean>;
public query$: Observable<IQuery> = this.store.select(mapReducers.selectGetQuery);
public position$: Observable<GeolocationPosition> = this.geolocationService.getCurrentPosition();
@ -90,6 +91,9 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
public noContent: boolean = false;
public overrideSelectedItemLayer: boolean = false;
public overrideOverlayLayers: boolean = false;
public dataLayerSlideValue:number = 50;
public dataLayerSlideEnabled = false;
private visibleAreaBottom = 0;
@ViewChild('map') map;
@ViewChild('contentDiv') contentDiv: ElementRef;
@ -155,6 +159,25 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
}
}
handlePanelResize(resizeTop:number) {
if(resizeTop==100 || !this.devicesService.IsMobile() ) {
this.visibleAreaBottom=0;
} else {
this.visibleAreaBottom=100-resizeTop;
if(this.visibleAreaBottom>60) {
this.visibleAreaBottom=60;
}
}
}
bottom(panelVisible:boolean) {
if(panelVisible) {
return this.visibleAreaBottom + '%';
} else {
return "0%";
}
}
handleOpenModal(modalName: string) {
this.store.dispatch(new commonActions.OpenModal(modalName));
}
@ -191,6 +214,31 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
}
}
handlePrerender(event:any) {
if(!this.dataLayerSlideEnabled) return;
const ctx = event.context;
const mapSize = this.map.instance.getSize();
const width = mapSize[0] * (this.dataLayerSlideValue / 100);
const tl = getRenderPixel(event, [width, 0]);
const tr = getRenderPixel(event, [mapSize[0], 0]);
const bl = getRenderPixel(event, [width, mapSize[1]]);
const br = getRenderPixel(event, mapSize);
ctx.save();
ctx.beginPath();
ctx.moveTo(tl[0], tl[1]);
ctx.lineTo(bl[0], bl[1]);
ctx.lineTo(br[0], br[1]);
ctx.lineTo(tr[0], tr[1]);
ctx.closePath();
ctx.clip();
}
handleSlideChange(event:any) {
this.dataLayerSlideValue = event.target.value;
this.map.instance.render();
}
ngOnInit() {
this.initialized = false;
console.debug("Init");
@ -323,6 +371,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
}
});
this.initialized = true;
this.showDataLayerSlide$.subscribe((v) => {
this.dataLayerSlideEnabled=v;
this.map.instance.render();
});
}
handleSearchCollapse(event) {

18
projects/common-map/src/fm-map/reducers/map.reducer.ts
View File

@ -69,8 +69,9 @@ export interface State {
replaceUrl:boolean,
layerValuesX:number,
layerValuesY:number,
layerValuesEnabled:boolean;
layerValues: Array<ILayervalue>;
layerValuesEnabled:boolean,
layerValues: Array<ILayervalue>
showDataLayerSlide:boolean,
}
export const initialState: State = {
@ -113,7 +114,8 @@ export const initialState: State = {
layerValuesX:0,
layerValuesY:0,
layerValuesEnabled:false,
layerValues:[]
layerValues:[],
showDataLayerSlide:false
}
export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
@ -172,6 +174,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
return tassign(state, {
selectedItem: null,
selectedItemLayer: null,
showDataLayerSlide: false,
features:[],
inSearch:inSearch
});
@ -501,7 +504,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
features: [],
query:initialState.query,
showLayerSwitcher: false,
extent: null
extent: null,
showDataLayerSlide: false
});
}
case mapActions.SETSTYLE:{
@ -514,6 +518,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
let a = action as mapActions.ShowLayerSwitcher;
return tassign(state,{showLayerSwitcher:a.show});
}
case mapActions.TOGGLESHOWDATALAYERSLIDE:{
return tassign(state,{showDataLayerSlide:!state.showDataLayerSlide});
}
case mapActions.SETREPLACEURL: {
let a= action as mapActions.SetReplaceUrl;
return tassign(state,{replaceUrl:a.replaceUrl});
@ -537,6 +544,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
return tassign(state,{
selectedItem: null,
selectedItemLayer: null,
showDataLayerSlide: false,
features:[]
});
}
@ -584,6 +592,7 @@ export const getSelectedItemLayer = (state: State) => state.selectedItemLayer;
export const getPeriod = (state:State) => state.period;
export const getStyles = (state:State) => state.styles;
export const getShowLayerSwitcher = (state:State) => state.showLayerSwitcher;
export const getShowDataLayerSlide = (state:State) => state.showDataLayerSlide;
export const getInSearch = (state:State) => state.inSearch;
export const getState = (state:State) => {return {mapState:state.mapState,queryState:state.queryState,replaceUrl:state.replaceUrl};}
export const getLayerValuesEnabled = (state:State) => state.layerValuesEnabled;
@ -616,6 +625,7 @@ export const selectGetSelectedItemLayer = createSelector(selectMapState, getSele
export const selectGetPeriod = createSelector(selectMapState, getPeriod);
export const selectGetStyles = createSelector(selectMapState, getStyles);
export const selectGetShowLayerSwitcher = createSelector(selectMapState,getShowLayerSwitcher);
export const selectGetShowdataLayerSlide = createSelector(selectMapState,getShowDataLayerSlide);
export const selectGetInSearch = createSelector(selectMapState,getInSearch);
export const selectGetState = createSelector(selectMapState,getState);
export const selectGetLayerValuesEnabled = createSelector(selectMapState,getLayerValuesEnabled);

7
projects/common/src/fm/components/side-panel/side-panel.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input,ViewChild,ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef } from '@angular/core';
import { Component, Input,Output,ViewChild,EventEmitter, ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'fm-side-panel',
@ -13,6 +13,7 @@ export class SidePanelComponent implements OnChanges {
@Input() public collapsable: boolean;
@Input() public resizeable: boolean = false;
@Input() public left: boolean = false;
@Output() onResize: EventEmitter<number> = new EventEmitter<number>();
@ViewChild("resizeGrip") elementView: ElementRef;
public mobile:boolean = true;
private parentHeight:number = 0;
@ -35,6 +36,7 @@ export class SidePanelComponent implements OnChanges {
setTop() {
this.mobile = this.left?false: this.checkMobile();
this.resizeTop = this.mobile?50:0;
this.onResize.emit(this.resizeTop);
this.top = (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
}
@ -71,6 +73,7 @@ export class SidePanelComponent implements OnChanges {
clientY=(event as DragEvent).clientY;
}
this.resizeTop = Math.min(98, Math.max(0, clientY / (this.parentHeight / 100)));
this.onResize.emit(this.resizeTop);
this.top = (this.visible? this.resizeTop:(this.mobile? 100:0)) + "%";
}
@ -81,7 +84,7 @@ export class SidePanelComponent implements OnChanges {
}
@HostListener('window:resize', ['$event'])
onResize(event) {
handleResize(event) {
this.setTop();
}
}

2
src/app/app-routing.module.ts
View File

@ -63,7 +63,7 @@ const routes = [
canActivate: [NavBarGuard],
component: NotImplementedComponent
},
{ path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
{ path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard],canActivate: [NavBarGuard], },
{ path: 'map3d', loadChildren: () => import('./map3d/map3d.module').then(m => m.Map3DModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
{
path: 'registerdevice/:deviceToken',