From 9cbc9f12933004049ddf1d33a827ab02456bc258 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Mon, 2 Nov 2020 21:00:13 +0100 Subject: [PATCH 1/6] Implement event handlers --- .../aol/item-layers/item-layers.component.ts | 56 ++++++++++++++++--- 1 file changed, 48 insertions(+), 8 deletions(-) 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..5c4b144 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,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 = new EventEmitter(); + @Output() onFeatureHover: EventEmitter = new EventEmitter(); 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(); + } } From 9a338c04e6f535813119132d53fc81a99c234544 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 3 Nov 2020 20:21:18 +0100 Subject: [PATCH 2/6] Basic working implementation --- .../aol/item-layers/item-layers.component.ts | 45 +++++++++++++++++-- 1 file changed, 42 insertions(+), 3 deletions(-) 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 5c4b144..cf99c6e 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 @@ -34,6 +34,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange 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); @@ -195,7 +196,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange }); } if(l.minzoom) { - layer.setMinZoom(l.minzoom); + layer.setMinZoom(14); } if(l.maxzoom) { layer.setMaxZoom(l.maxzoom); @@ -203,6 +204,39 @@ 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( + { + fill: new style.Fill({ + color: 'red' + }), + stroke: new style.Stroke({ + color: 'red', + width: 1.25 + }) + } + ); + } + }, + 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; @@ -346,6 +380,11 @@ 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) + } } } @@ -359,7 +398,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange let fid = features[0].getId(); this.selectedFeatures[fid] = features[0]; console.debug(features[0]); - //this.itemLayer.layer.changed(); + if(this.selectionLayer) this.selectionLayer.changed(); }) } } @@ -379,8 +418,8 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange } this.updateLayers([itemLayer]); } else { - this.updateLayers([]); this.unInstallMapEventHandler(); + this.updateLayers([]); } } } From 80fec7ccaa5f2f552c2ef6866f4a77b0044c5a02 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Fri, 18 Dec 2020 20:16:22 +0100 Subject: [PATCH 3/6] Some fixes --- .../aol/item-layers/item-layers.component.ts | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) 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 cf99c6e..92342c1 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 @@ -129,7 +129,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange source: new VectorTileSource({ maxZoom: rt.maxzoom, minZoom: rt.minzoom, - format: new MVT(), + format: new MVT({idProperty:'OBJECTID'}), url: `${this._apiEndPoint}/api/v1/items/${item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${Date.parse(item.updated)}` }), style: (feature) => { @@ -196,7 +196,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange }); } if(l.minzoom) { - layer.setMinZoom(14); + layer.setMinZoom(l.minzoom); } if(l.maxzoom) { layer.setMaxZoom(l.maxzoom); @@ -218,13 +218,10 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange if (feature.getId() in this.selectedFeatures) { return new style.Style( - { - fill: new style.Fill({ - color: 'red' - }), + { stroke: new style.Stroke({ color: 'red', - width: 1.25 + width: 2 }) } ); @@ -392,14 +389,14 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange //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 = {}; + this.selectedFeatures = {}; + this.itemLayer.layer.getFeatures(event.pixel).then((features) => { if(!features.length) return; let fid = features[0].getId(); this.selectedFeatures[fid] = features[0]; console.debug(features[0]); - if(this.selectionLayer) this.selectionLayer.changed(); }) + if(this.selectionLayer) this.selectionLayer.changed(); } } From ac8815e8f1fe098b0198759cc53d34411516a466 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Wed, 13 Jan 2021 17:33:01 +0100 Subject: [PATCH 4/6] Commit --- package-lock.json | 16 +++++++--------- package.json | 6 +++--- .../aol/item-layers/item-layers.component.ts | 2 +- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3757d21..ed38bbc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1767,25 +1767,23 @@ } }, "@farmmaps/common": { - "version": "0.0.1-prerelease.454", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.454.tgz", - "integrity": "sha512-qG4p/+7nHkqDU0ZtaBoNFoTWuVimyVEcDKAy9G0fQ+grDw/btos5jDzB0ON7ufituGrSwe5D5NT/1m4BTLu9PQ==", + "version": "0.0.1-prerelease.467", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.467.tgz", + "integrity": "sha512-Gg+tWz/3jFnPbXr66tdOf7HJ0vFwLO8MWDIIMN8PYaHUP1Xu23w9uuyZSLvQxKFPcPwf7ehKNXFxBzMV1e6kpw==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map": { - "version": "0.0.1-prerelease.454", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.454.tgz", - "integrity": "sha512-wn1bNxlUCPMEwUZrs72hL/2+W33iwzSXCZY5+MmeQRH76XhvtHUj4dNyHAPday88BB9ttkYItRCMDFnRLCvnrA==", + "version": "file:dist/common-map", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map3d": { - "version": "0.0.1-prerelease.454", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.454.tgz", - "integrity": "sha512-W9wSW6Rmot0ij9U/Id5Dzbnua96hK6jp4Hw0yzLJtwrC3nxxexqnZsgYhS7UN9y1U6DsTOmqFISpLe3JG3N+ZQ==", + "version": "0.0.1-prerelease.467", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.467.tgz", + "integrity": "sha512-H1ICGeuyLbSYN85I1lpDQrD1HL3zf3yxmpNs2Jzog2N8jLpRByWaonsOoEeZ5E3fF3xWejhIOEJDIYd+/7AGyg==", "requires": { "tslib": "^2.0.0" } diff --git a/package.json b/package.json index d6e5fb1..47378d9 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,9 @@ "@angular/platform-browser": "~10.1.3", "@angular/platform-browser-dynamic": "~10.1.3", "@angular/router": "~10.1.3", - "@farmmaps/common": ">=0.0.1-prerelease.454 <0.0.1", - "@farmmaps/common-map": ">=0.0.1-prerelease.454 <0.0.1", - "@farmmaps/common-map3d": ">=0.0.1-prerelease.454 <0.0.1", + "@farmmaps/common": ">=0.0.1-prerelease.467 <0.0.1", + "@farmmaps/common-map": "file:dist/common-map", + "@farmmaps/common-map3d": ">=0.0.1-prerelease.467 <0.0.1", "@microsoft/signalr": "^3.1.3", "@ng-bootstrap/ng-bootstrap": "^7.0", "@ngrx/effects": "^10.0", 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 92342c1..e00a475 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 @@ -386,6 +386,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange } mapEventHandler = (event) => { + return; //if(event.type === 'click' && !this.onFeatureSelected.observers.length) return; //if(event.type === 'pointermode' && !this.onFeatureHover.observers.length) return; if(this.itemLayer && this.itemLayer.layer) { @@ -394,7 +395,6 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange if(!features.length) return; let fid = features[0].getId(); this.selectedFeatures[fid] = features[0]; - console.debug(features[0]); }) if(this.selectionLayer) this.selectionLayer.changed(); } From 2949e39fcd7a6562803b30421e28126568fe9c77 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Fri, 22 Jan 2021 12:26:14 +0100 Subject: [PATCH 5/6] wip --- .../components/aol/item-layers/item-layers.component.ts | 4 ++-- src/configuration.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) 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 e00a475..292b359 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 @@ -129,7 +129,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange source: new VectorTileSource({ maxZoom: rt.maxzoom, minZoom: rt.minzoom, - format: new MVT({idProperty:'OBJECTID'}), + format: new MVT(), url: `${this._apiEndPoint}/api/v1/items/${item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${Date.parse(item.updated)}` }), style: (feature) => { @@ -386,7 +386,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange } mapEventHandler = (event) => { - return; + //return; //if(event.type === 'click' && !this.onFeatureSelected.observers.length) return; //if(event.type === 'pointermode' && !this.onFeatureHover.observers.length) return; if(this.itemLayer && this.itemLayer.layer) { 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 From b30c29a5f1584a354f4ee4d38a9e3135c3ae1f77 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Sat, 23 Jan 2021 18:30:29 +0100 Subject: [PATCH 6/6] Some fixes and optimizations --- .../aol/item-layers/item-layers.component.ts | 32 +++++++++++++------ .../fm-map/components/map/map.component.html | 1 + 2 files changed, 24 insertions(+), 9 deletions(-) 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 292b359..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 @@ -386,17 +386,31 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange } mapEventHandler = (event) => { - //return; - //if(event.type === 'click' && !this.onFeatureSelected.observers.length) return; - //if(event.type === 'pointermode' && !this.onFeatureHover.observers.length) return; + // 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 = {}; - this.itemLayer.layer.getFeatures(event.pixel).then((features) => { - if(!features.length) return; - let fid = features[0].getId(); - this.selectedFeatures[fid] = features[0]; - }) - if(this.selectionLayer) this.selectionLayer.changed(); + 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(); + } + } } } 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 @@ +