Merge branch 'feature/vectortileselect' into develop

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,11 +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 = {};
+  private selectionLayer:Layer = null;
   
   constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
     super(map);
@@ -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,6 +377,40 @@ 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(); 
+        }      
+       }
     }    
   }
 
@@ -341,12 +422,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.unInstallMapEventHandler();
           this.updateLayers([]);          
         }
       }
     }
   }
+
+  ngOnDestroy() {
+    this.unInstallMapEventHandler();
+  }
 }

projects/common-map/src/fm-map/components/map/map.component.html

@@ -38,6 +38,7 @@
     <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]="true" [heading]="state.compassHeading"></fm-map-gps-location> -->
     <div class="control-container" >
       <router-outlet name="map-controls"></router-outlet>

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"
 }