diff --git a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts index adbc501..0d49d9f 100644 --- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts +++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts @@ -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,17 @@ 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 = new EventEmitter(); + @Output() onFeatureHover: EventEmitter = new EventEmitter(); private _apiEndPoint: string; private initialized:boolean = false; - + private mapEventHandlerInstalled = false; + private selectedFeatures = {}; + private selectionLayer:Layer = null; + constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) { super(map); this._apiEndPoint = appConfig.getConfig("apiEndPoint"); @@ -201,6 +204,36 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange return layer; } + createSelectionLayer(itemLayer:IItemLayer):Layer { + var layerIndex = -1; + var layer: Layer = null; + layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index; + var data = itemLayer.item.data; + var l:ILayer = (data && data.layers && data.layers.length > 0) ? data.layers[layerIndex] : null; + if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") { + return new VectorTileLayer({ + renderMode: 'vector', + source: itemLayer.layer.getSource(), + style: (feature) => { + if (feature.getId() in this.selectedFeatures) { + + return new style.Style( + { + stroke: new style.Stroke({ + color: 'red', + width: 2 + }) + } + ); + } + }, + minZoom: itemLayer.layer.getMinZoom(), + maxZoom: itemLayer.layer.getMaxZoom() + }); + } + return null; + } + createExternalLayer(item:IItem,itemLayer:IItemLayer):Layer { let data = item.data as ILayerData; var layer: Layer = null; @@ -284,6 +317,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(); @@ -330,23 +377,66 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange while(olLayers.getLength() > newLayers.length) { olLayers.removeAt(newLayers.length); } + this.selectionLayer=null; + if(this.mapEventHandlerInstalled && itemLayers.length==1 && itemLayers[0].item.itemType == 'vnd.farmmaps.itemtype.shape.processed') { + this.selectionLayer = this.createSelectionLayer(itemLayers[0]); + olLayers.push(this.selectionLayer) + } } } + mapEventHandler = (event) => { + // select only when having observers + if(event.type === 'click' && !this.onFeatureSelected.observers.length) return; + if(event.type === 'pointermove' && !this.onFeatureHover.observers.length) return; + if(this.itemLayer && this.itemLayer.layer) { + this.selectedFeatures = {}; + if(this.itemLayer.layer ) { + let minZoom = this.itemLayer.layer.getMinZoom(); + let currentZoom = this.map.instance.getView().getZoom(); + if(currentZoom>minZoom) { + this.itemLayer.layer.getFeatures(event.pixel).then((features) => { + if(!features.length) { + this.onFeatureHover.emit(null); + return; + } + let fid = features[0].getId(); + if(event.type === 'pointermove') { + this.selectedFeatures[fid] = features[0]; + this.onFeatureHover.emit(features[0]); + } else { + this.onFeatureSelected.emit(features[0]); + } + }) + if(this.selectionLayer) this.selectionLayer.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(); + this.updateLayers([]); } } } } + + ngOnDestroy() { + this.unInstallMapEventHandler(); + } } diff --git a/projects/common-map/src/fm-map/components/map/map.component.html b/projects/common-map/src/fm-map/components/map/map.component.html index f9895dc..4607522 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.html +++ b/projects/common-map/src/fm-map/components/map/map.component.html @@ -38,6 +38,7 @@ +
diff --git a/src/configuration.json b/src/configuration.json index f9a46d6..c38ec06 100644 --- a/src/configuration.json +++ b/src/configuration.json @@ -1,9 +1,9 @@ { "issuer": "https://accounts.test.farmmaps.eu", "clientId": "farmmapsdev", - "audience": "https://test.farmmaps.eu/", + "audience": "http://localhost:8082", "requireHttps": true, - "apiEndPoint": "https://test.farmmaps.eu", + "apiEndPoint": "http://localhost:8082", "grantType":"code" } \ No newline at end of file