[fix]点选支持属性面板展示 review by qiw

docs/zh/api/control/identify.md

@@ -12,6 +12,7 @@
 
 | 参数           | 说明                                                                   | 类型                                                          | 可选值 | 默认值 |
 | :------------- | :--------------------------------------------------------------------- | :------------------------------------------------------------ | :----- | :----- |
+| showPopup         | 是否显示弹窗                                                          | boolean                                                     | -      | true      |
 | multiSelect         | 是否开启多选                                                          | boolean                                                     | -      | false      |
 | layers         | 查询的图层 Id                                                          | string[ ]                                                     | -      | -      |
 | fields         | 弹窗内容显示的字段名。默认显示图层的所有字段                           | array[ ]                                                      | -      | -      |

src/mapboxgl/map-popup/MapPopup.vue

@@ -2,7 +2,7 @@
   <div v-show="false" class="sm-component-map-popup" ref="Popup" :style="[tablePopupBgStyle, getTextColorStyle]">
     <sm-attribute-panel
       :showIcon="showIcon"
-      :paginationText="title"
+      :title="title"
       :total="lnglats.length || data.length"
       :defaultIndex="defaultIndex"
       :contentSlot="contentSlot"

src/mapboxgl/web-map/control/identify/Identify.vue

@@ -1,5 +1,6 @@
 <template>
   <SmMapPopup
+    v-if="showPopup"
     class="sm-component-identify"
     contentSlot="identify"
     :showIcon="multiSelect"
@@ -9,6 +10,7 @@
     :textColor="textColor"
     ref="map-popup"
     :mapTarget="mapTarget"
+    :title="currentLayerId"
     @change="handleChange"
   >
     <div>
@@ -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);

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,19 +225,29 @@ describe('Identify.vue', () => {
         y: 10
       }
     });
-    wrapper.setProps({layers: ['民航数据']})
+    wrapper.setProps({ layers: ['民航数据'] });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.popupProps).toEqual({
       机场: {
         slotName: undefined,
         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
       }
     });