ISVJ-7629 图层管理组件可配置图层初始是否加载 review by luox

SuperMap · Oct 23, 2024 · 92f0459 · 92f0459
1 parent af9366b
commit 92f0459
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 25 deletions.
diff --git a/docs/zh/api/control/layer-manager.md b/docs/zh/api/control/layer-manager.md
@@ -42,11 +42,12 @@ new Vue({
 
 | 参数             | 说明                                                             | 类型                                             | 可选值                        | 默认值                             |
 | :--------------- | :--------------------------------------------------------------- | :----------------------------------------------- | :---------------------------- | :--------------------------------- |
-| layers           | treeNodes 数据                                                       | -                                                | <a href="#layer">layer</a>[ ] | -                                  |
-| replaceFields    | 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 | {children:'children', title:'title', key:'key' } | object                        | -                                  |
-| defaultExpandAll | 默认展开所有树节点                                               | false                                            | boolean                       | -                                  |
+| layers           | treeNodes 数据                                                       | <a href="#layer">layer</a>[ ] | -                                  | -                                                |
+| replaceFields    | 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 |   object  |  {children:'children', title:'title', key:'key' }  | -                                  |
+| 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)
 

diff --git a/src/mapboxgl/web-map/control/layer-manager/LayerManager.vue b/src/mapboxgl/web-map/control/layer-manager/LayerManager.vue
@@ -78,6 +78,12 @@ export default {
     defaultExpandAll: {
       type: Boolean,
       default: false
+    },
+    defaultCheckedKeys: {
+      type: Array,
+      default() {
+        return [];
+      }
     }
   },
   data() {
@@ -113,33 +119,51 @@ export default {
     checkNode(key, e) {
       this.checkedKeys = key;
       if (e.checked) {
-        if (!e.checkedNodes || !e.checkedNodes.length) {
-          return;
-        }
-        e.checkedNodes.forEach(node => {
-          const mapInfo = node.data.props.mapInfo;
-          if (!mapInfo) {
-            return;
-          }
-          const nodeKey = node.key;
-          if (mapInfo.mapId && mapInfo.serverUrl) {
-            const { serverUrl, mapId, withCredentials, layerFilter, proxy } = mapInfo;
-            this.addLayer({ nodeKey, serverUrl, mapId, withCredentials, layerFilter, proxy });
-            return;
-          }
-          if (mapInfo.mapOptions) {
-            this.addMapStyle(mapInfo.mapOptions, nodeKey);
-            return;
-          }
-          if (mapInfo.serverUrl) {
-            this.addIServerLayer(mapInfo.serverUrl, nodeKey);
-          }
-        });
+        this.addLayerByCheckedKeys(key);
       } else {
         const data = e.node.dataRef;
         this.viewModel.removeLayerLoop(data);
       }
     },
+    addLayerByCheckedKeys(checkedKeys) {
+      if (!checkedKeys || !checkedKeys.length) {
+        return;
+      }
+      checkedKeys.forEach(key => {
+        const node = this.getNodeByKey(this.treeData, key);
+        const mapInfo = node.mapInfo;
+        if (!mapInfo) {
+          return;
+        }
+        const nodeKey = node.key;
+        if (mapInfo.mapId && mapInfo.serverUrl) {
+          const { serverUrl, mapId, withCredentials, layerFilter, proxy } = mapInfo;
+          this.addLayer({ nodeKey, serverUrl, mapId, withCredentials, layerFilter, proxy });
+          return;
+        }
+        if (mapInfo.mapOptions) {
+          this.addMapStyle(mapInfo.mapOptions, nodeKey);
+          return;
+        }
+        if (mapInfo.serverUrl) {
+          this.addIServerLayer(mapInfo.serverUrl, nodeKey);
+        }
+      });
+    },
+    getNodeByKey(datas, key) {
+      for (const data of datas) {
+        if (data.key === key) {
+          return data;
+        }
+        if (data.children && data.children.length > 0) {
+          const found = this.getNodeByKey(data.children, key);
+          if (found) {
+            return found;
+          }
+        }
+      }
+      return null;
+    },
     addLayer({ nodeKey, serverUrl, mapId, withCredentials, layerFilter, proxy }) {
       if (!this.mapIsLoad) {
         return;
@@ -228,6 +252,10 @@ export default {
   },
   loaded() {
     this.mapIsLoad = true;
+    if (this.defaultCheckedKeys.length) {
+      this.checkedKeys = this.defaultCheckedKeys;
+      this.addLayerByCheckedKeys(this.checkedKeys);
+    }
   },
   removed() {
     this.checkedKeys = [];

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
@@ -175,4 +175,30 @@ describe('LayerManager.vue', () => {
     expect(removeWebMapSpy).toHaveBeenCalled();
     done();
   });
+
+  it('defaultCheckedKeys', async done => {
+    wrapper = mount(SmLayerManager, {
+      propsData: {
+        defaultExpandAll: true,
+        collapse: false,
+        mapTarget: 'map',
+        layers: [
+          {
+            mapInfo: { serverUrl: 'https://fakeiportal.supermap.io/iportal', mapId: '801571284' },
+            title: '民航数据-单值'
+          }
+        ]
+      }
+    });
+    const spyadd= jest.spyOn(wrapper.vm, 'addLayer');
+    const key = wrapper.vm.treeData[0].key;
+    await wrapper.setProps({
+      defaultCheckedKeys: [key]
+    });
+    await mapWrapperLoaded(mapWrapper);
+    await flushPromises();
+    expect(wrapper.vm.checkedKeys).toEqual([key]);
+    expect(spyadd).toBeCalled();
+    done();
+  });
 });