diff --git a/src/components/infoclick/InfoClickWin.vue b/src/components/infoclick/InfoClickWin.vue index f3bce177..6f6eb017 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', @@ -86,7 +92,11 @@ export default { return { moduleName: 'wgu-infoclick', attributeData: null, - coordsData: null + coordsData: null, + featureIdx: 0, + features: null, + layerName: null, + numfeats: null } }, created () { @@ -115,29 +125,65 @@ export default { */ onMapClick (evt) { const me = this; - const featureLayer = me.map.forEachFeatureAtPixel(evt.pixel, + me.features = [] + 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. * 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);