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

Implement event handlers

Browse Source
This commit is contained in:
Willem Dantuma 2020-11-02 21:00:13 +01:00
parent 34b75a4c18
commit 9cbc9f1293
1 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,7 @@
import { Component, Host, Input, Output, EventEmitter, Optional, QueryList, OnInit, AfterViewInit, OnChanges, SimpleChanges, SkipSelf, forwardRef, Inject, InjectionToken } from '@angular/core'; import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
import { HttpClient } from "@angular/common/http"; import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
import { ItemService,IItem,AppConfig } from '@farmmaps/common'; import { ItemService,IItem,AppConfig } from '@farmmaps/common';
import { IItemLayer,ItemLayer, ITemporalItemLayer} from '../../../models/item.layer'; import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
import { ILayerData} from '../../../models/layer.data'; import { ILayerData} from '../../../models/layer.data';
import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map'; import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map';
import {Extent} from 'ol/extent'; import {Extent} from 'ol/extent';
@ -17,7 +16,6 @@ import { Vector as VectorLayer } from 'ol/layer';
import VectorTileSource from 'ol/source/VectorTile'; import VectorTileSource from 'ol/source/VectorTile';
import VectorTileLayer from 'ol/layer/VectorTile'; import VectorTileLayer from 'ol/layer/VectorTile';
import {GeoJSON,MVT} from 'ol/format'; import {GeoJSON,MVT} from 'ol/format';
import { from } from 'rxjs';
@Component({ @Component({
selector: 'fm-map-item-layers', selector: 'fm-map-item-layers',
@ -27,11 +25,15 @@ import { from } from 'rxjs';
] ]
}) })
export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit { export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit,OnDestroy {
@Input() itemLayers: IItemLayer[]; @Input() itemLayers: IItemLayer[];
@Input() itemLayer: IItemLayer; @Input() itemLayer: IItemLayer;
@Output() onFeatureSelected: EventEmitter<string> = new EventEmitter<string>();
@Output() onFeatureHover: EventEmitter<string> = new EventEmitter<string>();
private _apiEndPoint: string; private _apiEndPoint: string;
private initialized:boolean = false; private initialized:boolean = false;
private mapEventHandlerInstalled = false;
private selectedFeatures = {};
constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) { constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
super(map); super(map);
@ -284,6 +286,20 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
this.initialized=true; this.initialized=true;
} }
installMapEventHandler() {
if(!this.mapEventHandlerInstalled) {
this.map.instance.on(['click', 'pointermove'],this.mapEventHandler);
this.mapEventHandlerInstalled=true;
}
}
unInstallMapEventHandler() {
if(this.mapEventHandlerInstalled) {
this.map.instance.un(['click', 'pointermove'],this.mapEventHandler);
this.mapEventHandlerInstalled=false;
}
}
addOrUpdateOlLayer(itemLayer:IItemLayer,index:number):Layer { addOrUpdateOlLayer(itemLayer:IItemLayer,index:number):Layer {
if(!itemLayer) return null; if(!itemLayer) return null;
var olLayers = this.instance.getLayers(); var olLayers = this.instance.getLayers();
@ -333,6 +349,21 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
} }
} }
mapEventHandler = (event) => {
//if(event.type === 'click' && !this.onFeatureSelected.observers.length) return;
//if(event.type === 'pointermode' && !this.onFeatureHover.observers.length) return;
if(this.itemLayer && this.itemLayer.layer) {
this.itemLayer.layer.getFeatures(event.pixel).then((features) => {
this.selectedFeatures = {};
if(!features.length) return;
let fid = features[0].getId();
this.selectedFeatures[fid] = features[0];
console.debug(features[0]);
//this.itemLayer.layer.changed();
})
}
}
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
if (this.instance && this.initialized) { if (this.instance && this.initialized) {
if (changes['itemLayers']) { if (changes['itemLayers']) {
@ -341,12 +372,21 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
} }
if (changes['itemLayer']) { if (changes['itemLayer']) {
var itemLayer = changes['itemLayer'].currentValue as IItemLayer; var itemLayer = changes['itemLayer'].currentValue as IItemLayer;
this.itemLayer = itemLayer
if(itemLayer) { if(itemLayer) {
if(itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
this.installMapEventHandler();
}
this.updateLayers([itemLayer]); this.updateLayers([itemLayer]);
} else { } else {
this.updateLayers([]); this.updateLayers([]);
this.unInstallMapEventHandler();
} }
} }
} }
} }
ngOnDestroy() {
this.unInstallMapEventHandler();
}
} }