Implement event handlers
This commit is contained in:
parent
34b75a4c18
commit
9cbc9f1293
@ -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,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() 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);
|
||||
@ -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,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) {
|
||||
if (this.instance && this.initialized) {
|
||||
if (changes['itemLayers']) {
|
||||
@ -341,12 +372,21 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
|
||||
}
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user