Implement event handlers

2022.01
Willem Dantuma 2020-11-02 21:00:13 +01:00
parent 34b75a4c18
commit 9cbc9f1293
1 changed files with 48 additions and 8 deletions

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 { HttpClient } from "@angular/common/http";
import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
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 { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map';
import {Extent} from 'ol/extent';
@ -17,7 +16,6 @@ import { Vector as VectorLayer } from 'ol/layer';
import VectorTileSource from 'ol/source/VectorTile';
import VectorTileLayer from 'ol/layer/VectorTile';
import {GeoJSON,MVT} from 'ol/format';
import { from } from 'rxjs';
@Component({
selector: 'fm-map-item-layers',
@ -27,12 +25,16 @@ 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() itemLayer: IItemLayer;
@Output() onFeatureSelected: EventEmitter<string> = new EventEmitter<string>();
@Output() onFeatureHover: EventEmitter<string> = new EventEmitter<string>();
private _apiEndPoint: string;
private initialized:boolean = false;
private mapEventHandlerInstalled = false;
private selectedFeatures = {};
constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
super(map);
this._apiEndPoint = appConfig.getConfig("apiEndPoint");
@ -284,6 +286,20 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
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 {
if(!itemLayer) return null;
var olLayers = this.instance.getLayers();
@ -333,20 +349,44 @@ 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) {
if (this.instance && this.initialized) {
if (changes['itemLayers']) {
var itemLayers = changes['itemLayers'].currentValue as IItemLayer[];
this.updateLayers(itemLayers);
}
if (changes['itemLayer']) {
if (changes['itemLayer']) {
var itemLayer = changes['itemLayer'].currentValue as IItemLayer;
this.itemLayer = itemLayer
if(itemLayer) {
if(itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
this.installMapEventHandler();
}
this.updateLayers([itemLayer]);
} else {
this.updateLayers([]);
this.unInstallMapEventHandler();
}
}
}
}
ngOnDestroy() {
this.unInstallMapEventHandler();
}
}