From 163e5e01880a353e555c98242fed644de4a1f5e5 Mon Sep 17 00:00:00 2001 From: Enrico Ferreguti Date: Wed, 13 Mar 2024 09:58:42 +0100 Subject: [PATCH 1/3] infoClick on multiple visible features/layers --- src/components/infoclick/InfoClickWin.vue | 75 +++++++++++++++++++---- 1 file changed, 63 insertions(+), 12 deletions(-) diff --git a/src/components/infoclick/InfoClickWin.vue b/src/components/infoclick/InfoClickWin.vue index f3bce177..5c2d825a 100644 --- a/src/components/infoclick/InfoClickWin.vue +++ b/src/components/infoclick/InfoClickWin.vue @@ -14,6 +14,11 @@ {{ $t('wgu-infoclick.mapClick') }} + + {{ featureIdx + 1 }}/{{ numfeats }}: {{ layerName }} + mdi-menu-left + mdi-menu-right + @@ -65,6 +70,7 @@ import ModuleCard from './../modulecore/ModuleCard'; import { WguEventBus } from '../../WguEventBus.js'; import PropertyTable from './PropertyTable'; import CoordsTable from './CoordsTable'; +import MapInteractionUtil from '../../util/MapInteraction'; export default { name: 'wgu-infoclick-win', @@ -82,11 +88,20 @@ export default { imageProp: { type: String, required: false }, imageDescriptionProp: { type: String, required: false } }, + computed: { + numfeaTts() { + return 23 + } + }, data: function () { return { moduleName: 'wgu-infoclick', attributeData: null, - coordsData: null + coordsData: null, + featureIdx: 0, + features: null, + layerName: null, + numfeats: null, } }, created () { @@ -115,29 +130,65 @@ export default { */ onMapClick (evt) { const me = this; + me.features = [] const featureLayer = me.map.forEachFeatureAtPixel(evt.pixel, (feature, layer) => { - return [feature, layer]; + me.features.push([feature,layer]) }); // collect feature attributes --> PropertyTable - if (featureLayer) { - const feat = featureLayer[0]; - const props = feat.getProperties(); - // do not show geometry property - delete props.geometry; - - me.attributeData = props; + if (this.features.length !== 0) { + this.featureIdx = 0 + this.numfeats = me.features.length + this.viewProps(this.featureIdx) } else { - me.attributeData = null; + this.attributeData = null; } // collect click coordinate + projection --> CoordsTable - me.coordsData = { + this.coordsData = { coordinate: evt.coordinate, - projection: me.map.getView().getProjection().getCode() + projection: this.map.getView().getProjection().getCode() }; }, + + prevFeat () { + this.featureIdx -= 1 + if (this.featureIdx < 0) { + this.featureIdx = this.features.length - 1 + } + this.viewProps(this.featureIdx) + }, + + nextFeat () { + this.featureIdx += 1 + if (this.featureIdx > this.features.length - 1) { + this.featureIdx = 0 + } + this.viewProps(this.featureIdx) + }, + + viewProps (idx) { + const infofeat = this.features[idx][0]; + const props = infofeat.getProperties(); + // do not show geometry property + delete props.geometry; + this.attributeData = props; + this.layerName = this.features[idx][1].get('name') + const lid = this.features[idx][1].get('lid') + + const correspondingInteraction = MapInteractionUtil.getSelectInteraction(this.map, lid); + + // we can only select layers that have a select interaction + if (!correspondingInteraction) { + return; + } + + // add to map selection + correspondingInteraction.getFeatures().clear(); + correspondingInteraction.getFeatures().push(infofeat); + }, + /** * (Un-)Register map interactions when the visibility of the module changes. * From cca7c0b31d0d55d225fc0a1c5268a891168a0b1e Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Thu, 21 Mar 2024 08:40:43 +0100 Subject: [PATCH 2/3] code cleanup --- src/components/infoclick/InfoClickWin.vue | 67 +++++++++++------------ 1 file changed, 31 insertions(+), 36 deletions(-) diff --git a/src/components/infoclick/InfoClickWin.vue b/src/components/infoclick/InfoClickWin.vue index 5c2d825a..6f6eb017 100644 --- a/src/components/infoclick/InfoClickWin.vue +++ b/src/components/infoclick/InfoClickWin.vue @@ -88,11 +88,6 @@ export default { imageProp: { type: String, required: false }, imageDescriptionProp: { type: String, required: false } }, - computed: { - numfeaTts() { - return 23 - } - }, data: function () { return { moduleName: 'wgu-infoclick', @@ -101,7 +96,7 @@ export default { featureIdx: 0, features: null, layerName: null, - numfeats: null, + numfeats: null } }, created () { @@ -131,9 +126,9 @@ export default { onMapClick (evt) { const me = this; me.features = [] - const featureLayer = me.map.forEachFeatureAtPixel(evt.pixel, + me.map.forEachFeatureAtPixel(evt.pixel, (feature, layer) => { - me.features.push([feature,layer]) + me.features.push([feature, layer]) }); // collect feature attributes --> PropertyTable @@ -153,40 +148,40 @@ export default { }, prevFeat () { - this.featureIdx -= 1 - if (this.featureIdx < 0) { - this.featureIdx = this.features.length - 1 - } - this.viewProps(this.featureIdx) + this.featureIdx -= 1 + if (this.featureIdx < 0) { + this.featureIdx = this.features.length - 1 + } + this.viewProps(this.featureIdx) }, nextFeat () { - this.featureIdx += 1 - if (this.featureIdx > this.features.length - 1) { - this.featureIdx = 0 - } - this.viewProps(this.featureIdx) + this.featureIdx += 1 + if (this.featureIdx > this.features.length - 1) { + this.featureIdx = 0 + } + this.viewProps(this.featureIdx) }, viewProps (idx) { - const infofeat = this.features[idx][0]; - const props = infofeat.getProperties(); - // do not show geometry property - delete props.geometry; - this.attributeData = props; - this.layerName = this.features[idx][1].get('name') - const lid = this.features[idx][1].get('lid') - - const correspondingInteraction = MapInteractionUtil.getSelectInteraction(this.map, lid); - - // we can only select layers that have a select interaction - if (!correspondingInteraction) { - return; - } - - // add to map selection - correspondingInteraction.getFeatures().clear(); - correspondingInteraction.getFeatures().push(infofeat); + const infofeat = this.features[idx][0]; + const props = infofeat.getProperties(); + // do not show geometry property + delete props.geometry; + this.attributeData = props; + this.layerName = this.features[idx][1].get('name') + const lid = this.features[idx][1].get('lid') + + const correspondingInteraction = MapInteractionUtil.getSelectInteraction(this.map, lid); + + // we can only select layers that have a select interaction + if (!correspondingInteraction) { + return; + } + + // add to map selection + correspondingInteraction.getFeatures().clear(); + correspondingInteraction.getFeatures().push(infofeat); }, /** From 5508fcc26d5d221447d5e9fde0c38e99580b76cf Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Sun, 21 Apr 2024 09:59:30 +0200 Subject: [PATCH 3/3] Update component test --- tests/unit/specs/components/infoclick/InfoClickWin.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/specs/components/infoclick/InfoClickWin.spec.js b/tests/unit/specs/components/infoclick/InfoClickWin.spec.js index c1668957..d6a0c70a 100644 --- a/tests/unit/specs/components/infoclick/InfoClickWin.spec.js +++ b/tests/unit/specs/components/infoclick/InfoClickWin.spec.js @@ -86,7 +86,7 @@ describe('infoclick/InfoClickWin.vue', () => { layers: [layer] }); map.forEachFeatureAtPixel = () => { - return [feat, layer]; + vm.features.push([feat, layer]); }; vm.map = map; vm.onMapClick(mockEvt);