[fix]修改图层列表、图层管理API review by luox

SuperMap · Nov 1, 2024 · 41b6f2b · 41b6f2b
1 parent 29704b2
commit 41b6f2b
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 40 deletions.
diff --git a/docs/zh/api/control/layer-list.md b/docs/zh/api/control/layer-list.md
@@ -15,7 +15,7 @@
 | iconClass         | 收缩按钮的 Font class 类名                                 | string | -      | 'sm-components-icon-layer-list' |
 | headerName        | 标题名                                                    | string | -      | '图层'                             |
 | attributes        | 属性表配置  <a href="#attributes">配置项</a>       | object | -      |  -                             |
-| layerOperations   | 图层操作配置  <a href="#layeroperations">配置项</a>       | object | -      |  -                             |
+| operations   | 图层操作配置  <a href="#operations">配置项</a>       | object | -      |  -                             |
 
 > 支持[主题混入参数](/zh/api/mixin/mixin.md#theme)和[卡片混入参数](/zh/api/mixin/mixin.md#collapsedcard)和 [Control 混入参数](/zh/api/mixin/mixin.md#control)
 
@@ -31,10 +31,10 @@
 > 更多配置项，请查看 [Attributes](/zh/api/common/attributes.md)（其中不支持layerName、dataset和mapTarget参数）。
 
 
-### layerOperations
+### operations
 
 | 参数             | 说明                                                                      | 类型              | 可选值                                                                                 | 默认值                                                               |
 | :--------------- | :------------------------------------------------------------------------ | :---------------- | :--------------------------------------------------------------------------------- | :--------------------------------------------------------------- |
-| zoomToLayer          | 是否开启缩放至图层功能  | boolean          | -      | true       |
-| layerOrder            | 是否开启拖拽调整图层顺序功能  | boolean          | -      | false       |
+| fitBounds          | 是否开启缩放至图层功能  | boolean          | -      | true       |
+| draggable            | 是否开启拖拽调整图层顺序功能  | boolean          | -      | false       |
 | opacity              | 是否开启调整图层不透明度功能  | boolean          | -      | false       |
diff --git a/docs/zh/api/control/layer-manager.md b/docs/zh/api/control/layer-manager.md
@@ -47,7 +47,6 @@ new Vue({
 | defaultExpandAll | 默认展开所有树节点                                               |        boolean                                     |          -              |     false                              |
 | iconClass        | 收缩按钮的 Font class 类名                                       | string                                           | -                             | 'sm-components-icon-layer-manager' |
 | headerName       | 标题名                                                           | string                                           | -                             | '图层管理'                         |
-| defaultCheckedKeys       | 默认选中复选框的树节点             | string[]                             | -                             |             []            |
 
 > 支持[主题混入参数](/zh/api/mixin/mixin.md#theme)和[卡片混入参数](/zh/api/mixin/mixin.md#collapsedcard)和 [Control 混入参数](/zh/api/mixin/mixin.md#control)
 
@@ -58,6 +57,7 @@ new Vue({
 | title    | 标题         | string                         | -      | -      |
 | children | 子节点数据   | array                          | -      | -      |
 | mapInfo  | 地图配置对象 | <a href="#mapinfo">mapInfo</a> | -      | -      |
+| visible  | 地图是否初始加载 | boolean                     | -      | -      |
 
 ### mapInfo
 

diff --git a/src/mapboxgl/web-map/LayerGroup.vue b/src/mapboxgl/web-map/LayerGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <sm-tree class="sm-component-layer-list__collapse draggable-tree" blockNode :draggable="layerOperations.layerOrder" :tree-data="treeData" @drop="dropHandler">
+    <sm-tree class="sm-component-layer-list__collapse draggable-tree" blockNode :draggable="operations.draggable" :tree-data="treeData" @drop="dropHandler">
       <i slot="switcherIcon" class="sm-components-icon-right" />
       <template slot="custom" slot-scope="item">
         <div
@@ -18,7 +18,7 @@
             <div
               :class="['icon-buttons', showIconsItem === item.id ? 'icon-buttons-visible' : 'icon-buttons-hidden']"
             >
-              <div v-if="layerOperations.zoomToLayer" class="sm-component-layer-list__zoom">
+              <div v-if="operations.fitBounds" class="sm-component-layer-list__zoom">
                 <i
                   :class="['sm-components-icon-suofangzhituceng', (item.visible || !item.disabled) && 'highlight-icon']"
                   :style="!item.visible && { cursor: 'not-allowed' }"
@@ -34,7 +34,7 @@
                   @click.stop="item.visible && toggleAttributesVisibility($event, item)"
                 />
               </div>
-              <div v-if="layerOperations.opacity && (item && item.type) !== 'group'" class="sm-component-layer-list__style">
+              <div v-if="operations.opacity && (item && item.type) !== 'group'" class="sm-component-layer-list__style">
                 <i
                   :class="[
                     'sm-components-icon-tucengyangshi01',
@@ -55,7 +55,7 @@
             </div>
           </div>
         </div>
-        <div v-show="layerOperations.opacity && item.id === showOpacityItem" class="opacity-style">
+        <div v-show="operations.opacity && item.id === showOpacityItem" class="opacity-style">
           <div>{{ $t('layerList.opacity') }}</div>
           <sm-slider
             :value="formatOpacity"
@@ -97,12 +97,12 @@ export default {
         return [];
       }
     },
-    layerOperations: {
+    operations: {
       type: Object,
       default() {
         return {
-          zoomToLayer: true,
-          layerOrder: false,
+          fitBounds: true,
+          draggable: false,
           opacity: false
         };
       }

diff --git a/src/mapboxgl/web-map/control/layer-list/LayerList.vue b/src/mapboxgl/web-map/control/layer-list/LayerList.vue
@@ -17,7 +17,7 @@
           :currentOpacity="currentOpacity"
           :layerCatalog="sourceList"
           :attributes="attributes"
-          :layerOperations="layerOperations"
+          :operations="operations"
           :dropHandler="onDropHanlder"
           @getLayerOpacityById="getLayerOpacityById"
           @changeOpacity="changeOpacity"
@@ -170,13 +170,13 @@ class SmLayerList extends Mixins(MapGetter, Control, Theme, BaseCard) {
   @Prop({
     default() {
       return {
-        zoomToLayer: true,
-        layerOrder: false,
+        fitBounds: true,
+        draggable: false,
         opacity: false
       };
     }
   })
-  layerOperations: Object;
+  operations: Object;
 
   @Watch('attributes', { deep: true })
   attributesChanged(newval, oldval) {

diff --git a/src/mapboxgl/web-map/control/layer-manager/LayerManager.vue b/src/mapboxgl/web-map/control/layer-manager/LayerManager.vue
@@ -48,6 +48,7 @@ import uniqueId from 'lodash.uniqueid';
 import clonedeep from 'lodash.clonedeep';
 import isequal from 'lodash.isequal';
 import difference from 'lodash.difference';
+import omit from 'omit.js';
 
 export default {
   name: 'SmLayerManager',
@@ -79,12 +80,6 @@ export default {
     defaultExpandAll: {
       type: Boolean,
       default: false
-    },
-    defaultCheckedKeys: {
-      type: Array,
-      default() {
-        return [];
-      }
     }
   },
   data() {
@@ -94,12 +89,24 @@ export default {
       mapIsLoad: false
     };
   },
+  computed: {
+    defaultCheckedKeys() {
+      const keys = [];
+      this.eachNode(this.treeData, function (data) {
+        if (data.visible) {
+          keys.push(data.key);
+        }
+      });
+      return keys;
+    }
+  },
   watch: {
     layers: {
       handler(newVal, oldVal) {
-        if (oldVal && !isequal(newVal, oldVal)) {
+        if (oldVal && !isequal(this.omitVisible(newVal), this.omitVisible(oldVal))) {
           this.cleanStatus();
         }
+        this.oldTreeData = clonedeep(oldVal);
         this.treeData = clonedeep(newVal);
         this.insertProperty(this.treeData);
       },
@@ -112,21 +119,25 @@ export default {
       }
       const newCheckedKeys = [].concat(this.checkedKeys);
       if (keys.length > oldKeys.length) {
-        // 新增了一个初始加载的图层
+        // 开启图层初始加载后，同步在图层管理里勾选上,并添加图层到map
         const addKey = difference(keys, oldKeys);
         this.addLayerByCheckedKeys(addKey);
-        if (!newCheckedKeys.includes(addKey[0])) {
-          newCheckedKeys.push(addKey[0]);
-        }
+        addKey.forEach(key => {
+          if (!newCheckedKeys.includes(key)) {
+            newCheckedKeys.push(key);
+          }
+        });
       } else {
-        // 删除了一个初始加载的图层
+        // 关闭图层初始加载后，同步在图层管理里取消勾选,并从map删除图层
         const delKey = difference(oldKeys, keys);
-        const node = this.getNodeByKey(this.treeData, delKey[0]);
-        this.viewModel.removeLayerLoop(node);
-        if (newCheckedKeys.includes(delKey[0])) {
-          const indexToRemove = newCheckedKeys.indexOf(delKey[0]);
-          newCheckedKeys.splice(indexToRemove, 1);
-        }
+        delKey.forEach(key => {
+          const node = this.getNodeByKey(this.oldTreeData, key);
+          this.viewModel.removeLayerLoop(node);
+          if (newCheckedKeys.includes(key)) {
+            const indexToRemove = newCheckedKeys.indexOf(key);
+            newCheckedKeys.splice(indexToRemove, 1);
+          }
+        });
       }
       this.checkedKeys = newCheckedKeys;
     }
@@ -141,6 +152,15 @@ export default {
     this.viewModel.off('layersremoved', this.removeMapCombination);
   },
   methods: {
+    omitVisible(val) {
+      return val.map(item => {
+        const newItem = omit(item, ['visible']);
+        if (newItem.children) {
+          newItem.children = this.omitVisible(newItem.children, ['visible']);
+        }
+        return newItem;
+      });
+    },
     checkNode(key, e) {
       this.checkedKeys = key;
       if (e.checked) {

diff --git a/src/mapboxgl/web-map/control/layer-manager/__tests__/LayerManager.spec.js b/src/mapboxgl/web-map/control/layer-manager/__tests__/LayerManager.spec.js
@@ -190,16 +190,31 @@ describe('LayerManager.vue', () => {
         ]
       }
     });
+    const treeData = [
+      {
+        mapInfo: { serverUrl: 'https://fakeiportal.supermap.io/iportal', mapId: '801571284' },
+        title: '民航数据-单值',
+        key: 'key1',
+        visible: true
+      }
+    ];
     const spyadd= jest.spyOn(wrapper.vm, 'addLayer');
-    const key = wrapper.vm.treeData[0].key;
-    await wrapper.setProps({
-      defaultCheckedKeys: [key]
+    await wrapper.setData({
+      treeData: treeData
     });
     await mapWrapperLoaded(mapWrapper);
     await flushPromises();
-    expect(wrapper.vm.checkedKeys).toEqual([key]);
-    await wrapper.setProps({
-      defaultCheckedKeys: []
+    expect(wrapper.vm.checkedKeys).toEqual(['key1']);
+    wrapper.vm.oldTreeData = treeData;
+    await wrapper.setData({
+      treeData: [
+        {
+          mapInfo: { serverUrl: 'https://fakeiportal.supermap.io/iportal', mapId: '801571284' },
+          title: '民航数据-单值',
+          key: 'key1',
+          visible: false
+        }
+      ]
     });
     expect(wrapper.vm.checkedKeys).toEqual([]);
     expect(spyadd).toBeCalled();