diff --git a/docs/zh/api/control/identify.md b/docs/zh/api/control/identify.md index cc96d520..a5e7c0bc 100644 --- a/docs/zh/api/control/identify.md +++ b/docs/zh/api/control/identify.md @@ -12,6 +12,7 @@ | 参数 | 说明 | 类型 | 可选值 | 默认值 | | :------------- | :--------------------------------------------------------------------- | :------------------------------------------------------------ | :----- | :----- | +| showPopup | 是否显示弹窗 | boolean | - | true | | multiSelect | 是否开启多选 | boolean | - | false | | layers | 查询的图层 Id | string[ ] | - | - | | fields | 弹窗内容显示的字段名。默认显示图层的所有字段 | array[ ] | - | - | diff --git a/src/mapboxgl/map-popup/MapPopup.vue b/src/mapboxgl/map-popup/MapPopup.vue index fd0cd9e2..d33ad184 100644 --- a/src/mapboxgl/map-popup/MapPopup.vue +++ b/src/mapboxgl/map-popup/MapPopup.vue @@ -2,7 +2,7 @@
@@ -46,6 +48,10 @@ export default { mixins: [MapGetter, Theme], components: { SmMapPopup }, props: { + showPopup: { + type: Boolean, + default: true + }, multiSelect: { type: Boolean, default: false @@ -124,10 +130,30 @@ export default { currentIndex: 0, allPopupDatas: [], lnglats: [], - filters: ['any'] + filters: ['any'], + currentLayerId: '', + fieldsIndex: 0 }; }, computed: { + popupData() { + const data = this.allPopupDatas.map(item => { + const attributes = {}; + for (let key in item) { + const { value } = item[key]; + attributes[key] = value; + } + return attributes; + }); + + return { + defaultIndex: this.currentIndex, + total: data.length, + data, + title: this.currentLayerId, + fieldsIndex: this.fieldsIndex + }; + }, getWidthStyle() { let style = { keyWidth: {}, valueWidth: {} }; if (!this.autoResize) { @@ -150,9 +176,18 @@ export default { }, popupProps() { return this.allPopupDatas[this.currentIndex] || {}; + }, + total() { + return this.allPopupDatas.length; } }, watch: { + popupData: { + handler() { + this.$emit('dataChange', this.popupData); + }, + deep: true + }, layers: { handler(val, oldVal) { if (!isEqual(val, oldVal)) { @@ -234,7 +269,7 @@ export default { this.keydownCtrlCb = e => { if (e.ctrlKey && !this.isKeydownCtrl) { this.clearPopupData(); - this.$refs['map-popup'].removePopup(); + this.$refs['map-popup'] && this.$refs['map-popup'].removePopup(); this.isKeydownCtrl = true; } }; @@ -259,6 +294,7 @@ export default { // 获取点中图层的features if (features[0]) { let index = this.layers && this.layers.indexOf(features[0].layer.id); + this.fieldsIndex = index; let fields; if (this.fields instanceof Array) { // 如果是二维数组 @@ -328,7 +364,6 @@ export default { }, // 过滤数据， 添加popup getPopupData(feature, fields) { - this.viewModel.popup?.off('close', this.clearPopup); let popupProps = {}; if (feature.properties) { // 过滤字段 @@ -354,9 +389,11 @@ export default { this.lnglats = []; this.currentIndex = 0; this.currentLayer = null; + this.currentLayerId = ''; this.filters = ['any']; }, setPopupData(popupProps, coordinates, feature) { + this.currentLayerId = feature.layer.id; if (this.isKeydownCtrl) { this.allPopupDatas.push(popupProps); this.lnglats.push(coordinates); diff --git a/src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js b/src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js index 935e9379..4906968c 100644 --- a/src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js +++ b/src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js @@ -1,5 +1,6 @@ import { mount, config } from '@vue/test-utils'; import SmIdentify from '../Identify.vue'; +// import SmMapPopup from '../../../../map-popup/MapPopup.vue'; import Identify from '../index'; import { LineStyle, CircleStyle, FillStyle } from '../../../../_types/index'; import mapboxgl from '@libs/mapboxgl/mapbox-gl-enhance.js'; @@ -23,7 +24,23 @@ describe('Identify.vue', () => { wrapper.destroy(); } }); - + it('render showPopup false', async done => { + mapWrapper = await createEmptyMap(); + wrapper = mount(SmIdentify, { + propsData: { + layers: ['民航数据'], + fields: ['机场', '同比增速%', '2017旅客吞吐量（人次）'], + autoResize: false, + showPopup: false + } + }); + await mapSubComponentLoaded(wrapper); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.showPopup).toBe(false); + // const comp = wrapper.findComponent(SmMapPopup); + // expect(comp.exists()).toBe(false); + done(); + }); it('render default correctly', async done => { mapWrapper = await createEmptyMap(); wrapper = mount(SmIdentify, { @@ -38,6 +55,8 @@ describe('Identify.vue', () => { wrapper.vm.getWidthStyle; expect(wrapper.vm.keyMaxWidth).toBe(110); expect(wrapper.vm.valueMaxWidth).toBe(170); + // const comp = wrapper.findComponent(SmMapPopup); + // expect(comp.exists()).toBe(true); done(); }); @@ -206,7 +225,7 @@ describe('Identify.vue', () => { y: 10 } }); - wrapper.setProps({layers: ['民航数据']}) + wrapper.setProps({ layers: ['民航数据'] }); await wrapper.vm.$nextTick(); expect(wrapper.vm.popupProps).toEqual({ 机场: { @@ -214,11 +233,21 @@ describe('Identify.vue', () => { value: '天府机场' } }); + expect(wrapper.vm.total).toEqual(1); + expect(wrapper.vm.fieldsIndex).toEqual(0); + expect(wrapper.vm.currentLayerId).toEqual('民航数据'); + expect(wrapper.vm.popupData).toEqual({ + defaultIndex: 0, + total: 1, + data: [{ '机场': '天府机场' }], + title: '民航数据', + fieldsIndex: 0 + }); expect(wrapper.vm.currentLayer.id).toEqual('民航数据'); expect(wrapper.vm.filters.length).toBe(2); expect(wrapper.vm.currentIndex).toBe(0); - wrapper.setProps({layers: ['']}) + wrapper.setProps({ layers: [''] }); await wrapper.vm.$nextTick(); expect(wrapper.vm.currentLayer).toBe(null); expect(wrapper.vm.filters.length).toBe(1); @@ -330,17 +359,19 @@ describe('Identify.vue', () => { propsData: { multiSelect: true, layers: ['民航数据'], - fields: [[ - { - "slotName":"6", - "linkTitle":"", - "field":"机场", - "title":"机场22", - "linkTarget":"_blank", - "repeatOption":"left", - "type":"text" - } - ]], + fields: [ + [ + { + slotName: '6', + linkTitle: '', + field: '机场', + title: '机场22', + linkTarget: '_blank', + repeatOption: 'left', + type: 'text' + } + ] + ], autoResize: false } });