diff --git a/src/common/mapping/MapBase.js b/src/common/mapping/MapBase.js
index 63b42ea6a..942114dac 100644
--- a/src/common/mapping/MapBase.js
+++ b/src/common/mapping/MapBase.js
@@ -15,7 +15,7 @@ export function createMapClassExtending(SuperClass = class {}) {
     }
 
     getLayerCatalog() {
-      return (this._sourceListModel && this._sourceListModel.getSourceList()) || [];
+      return (this._sourceListModel && this._sourceListModel.getLayerCatalog()) || [];
     }
 
     getLayers() {
@@ -30,6 +30,14 @@ export function createMapClassExtending(SuperClass = class {}) {
       return (this._sourceListModel && this._sourceListModel.getSelfLayers(appreciableLayers)) || [];
     }
 
+    setLayersVisible(layers, visibility) {
+      this._sourceListModel && this._sourceListModel.setLayersVisible(layers, visibility);
+    }
+
+    toggleLayerVisible(layerId, visible) {
+      this._sourceListModel && this._sourceListModel.toggleLayerVisible(layerId, visible);
+    }
+
     echartsLayerResize() {}
 
     updateOverlayLayer() {}
diff --git a/src/common/mapping/MapStyle.js b/src/common/mapping/MapStyle.js
index 58a2104e7..6446f273e 100644
--- a/src/common/mapping/MapStyle.js
+++ b/src/common/mapping/MapStyle.js
@@ -62,9 +62,12 @@ export function createMapStyleExtending(SuperClass, { MapManager, mapRepo }) {
 
     clean(removeMap = true) {
       if (this.map) {
+        if (this._sourceListModel) {
+          this._sourceListModel.destroy();
+          this._sourceListModel = null;
+        }
         removeMap && this.map.remove();
         this.map = null;
-        this._sourceListModel = null;
       }
     }
 
@@ -156,6 +159,11 @@ export function createMapStyleExtending(SuperClass, { MapManager, mapRepo }) {
         layers: layersFromStyle,
         appendLayers: this._appendLayers
       });
+      this._sourceListModel.on({
+        layerupdatechanged: (params) => {
+          this.fire('layerupdatechanged', params);
+        }
+      });
       this.fire('mapcreatesucceeded', {
         map: this.map,
         mapparams: { title: this.mapOptions.name, description: '' },
diff --git a/src/common/mapping/WebMapBase.js b/src/common/mapping/WebMapBase.js
index 8fedd6c99..407b0c9e8 100644
--- a/src/common/mapping/WebMapBase.js
+++ b/src/common/mapping/WebMapBase.js
@@ -155,6 +155,7 @@
          */
         'projectionnotmatch',
         'layeraddchanged',
+        'layerupdatechanged',
         /**
          * @event WebMapBase#mapbeforeremove
          * @description 地图销毁前。
@@ -391,6 +392,21 @@
       return (this._handler && this._handler.getLayerCatalog()) || [];
     }
 
+    setLayersVisible(layers, visibility) {
+      this._handler && this._handler.setLayersVisible(layers, visibility);
+    }
+
+    /**
+     * @version 11.2.1
+     * @function WebMapBase.prototype.toggleLayerVisible
+     * @param {string} layerId - 图层 id。
+     * @param {boolean} visible - 图层是否可见。true 表示显示，false 表示隐藏。
+     * @description 设置图层显隐。
+     */
+    toggleLayerVisible(layerId, visible) {
+      this._handler && this._handler.toggleLayerVisible(layerId, visible);
+    }
+
     /**
      * @version 11.3.0
      * @function WebMapBase.prototype.getWebMapType
diff --git a/src/common/mapping/WebMapV2.js b/src/common/mapping/WebMapV2.js
index de6387031..c26a13d1c 100644
--- a/src/common/mapping/WebMapV2.js
+++ b/src/common/mapping/WebMapV2.js
@@ -52,11 +52,14 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
 
     clean(removeMap = true) {
       if (this.map) {
+        if (this._sourceListModel) {
+          this._sourceListModel.destroy();
+          this._sourceListModel = null;
+        }
         this.stopCanvg();
         removeMap && this.map.remove();
         this.map = null;
         this._legendList = [];
-        this._sourceListModel = null;
         this.center = null;
         this.zoom = null;
         if (this._dataflowService) {
@@ -2229,6 +2232,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
     _sendMapToUser(count, layersLen) {
       if (count === layersLen) {
         this.addLayersSucceededLen = this._cacheLayerId.size;
+        this._changeSourceListModel();
         const appreciableLayers = this.getLayers();
         const layerOptions = this._getSelfAppreciableLayers(appreciableLayers);
         this._rectifyLayersOrder(layerOptions.layers);
@@ -2772,41 +2776,14 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
         const matchInsertIndex = matchIndex < 0 ? renderLayerList.length : matchIndex;
         renderLayerList.splice(matchInsertIndex, 0, ...renderLayers);
       }
-      const layersFromMapInfo = [];
-      const layerList = [this._mapInfo.baseLayer].concat(this._mapInfo.layers);
-      if (this._graticuleLayer) {
-        const { id: layerID, visible } = this._graticuleLayer;
-        layerList.push({ layerID, visible, name: 'GraticuleLayer' });
-      }
-      // this._mapInfo.layers 是有序的
-      layerList.forEach((layerInfo) => {
-        const targetLayerId = layerInfo.layerID || layerInfo.name;
-        const targetLayerVisible =
-          layerInfo.visible === void 0 || layerInfo.visible === 'visible' || layerInfo.visible === true;
-        const matchLayers = this._cacheLayerId.get(targetLayerId);
-        if (matchLayers) {
-          const renderLayers = matchLayers.map((item) => item.layerId);
-          if (!renderLayers.length) {
-            return;
-          }
-          layersFromMapInfo.push({
-            ...layerInfo,
-            id: targetLayerId,
-            visible: targetLayerVisible,
-            renderLayers,
-            reused: matchLayers.some((item) => item.reused)
-          });
-        }
-      });
-      this._changeSourceListModel(layersFromMapInfo);
-      const appreciableLayers = this.getLayers();
-      if (this.addLayersSucceededLen && this._cacheLayerId.size !== this.addLayersSucceededLen) {
+      if (this.addLayersSucceededLen && this._cacheLayerId.size <= this.expectLayerLen) {
+        this._changeSourceListModel();
+        const appreciableLayers = this.getLayers();
         const selfAppreciableLayers = this.getSelfAppreciableLayers(appreciableLayers);
         const topLayerBeforeId = this._findTopLayerBeforeId(selfAppreciableLayers);
         this._rectifyLayersOrder(selfAppreciableLayers, topLayerBeforeId);
-        this.addLayersSucceededLen = this._cacheLayerId.size;
+        this.fire('layeraddchanged', this._getSelfAppreciableLayers(appreciableLayers));
       }
-      this.fire('layeraddchanged', this._getSelfAppreciableLayers(appreciableLayers));
     }
 
     _findTopLayerBeforeId(selfAppreciableLayers) {
@@ -2831,22 +2808,53 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
       }
     }
 
-    _changeSourceListModel(layersFromMapInfo) {
+    _changeSourceListModel() {
+      const layersFromMapInfo = [];
+      const layerList = [this._mapInfo.baseLayer].concat(this._mapInfo.layers);
+      if (this._graticuleLayer) {
+        const { id: layerID, visible } = this._graticuleLayer;
+        layerList.push({ layerID, visible, name: 'GraticuleLayer' });
+      }
+      // this._mapInfo.layers 是有序的
+      layerList.forEach((layerInfo) => {
+        const targetLayerId = layerInfo.layerID || layerInfo.name;
+        const targetLayerVisible =
+          layerInfo.visible === void 0 || layerInfo.visible === 'visible' || layerInfo.visible === true;
+        const matchLayers = this._cacheLayerId.get(targetLayerId);
+        if (matchLayers) {
+          const renderLayers = matchLayers.map((item) => item.layerId);
+          if (!renderLayers.length) {
+            return;
+          }
+          layersFromMapInfo.push({
+            ...layerInfo,
+            id: targetLayerId,
+            visible: targetLayerVisible,
+            renderLayers,
+            reused: matchLayers.some((item) => item.reused)
+          });
+        }
+      });
       if (!this._sourceListModel) {
         this._sourceListModel = new SourceListModelV2({
           map: this.map,
           layers: layersFromMapInfo,
           appendLayers: this._appendLayers
         });
-      } else {
-        this._sourceListModel.setSelfLayers(layersFromMapInfo);
+        this._sourceListModel.on({
+          layerupdatechanged: (params) => {
+            this.fire('layerupdatechanged', params);
+          }
+        });
+        return;
       }
+      this._sourceListModel.setSelfLayers(layersFromMapInfo);
     }
 
     _getSelfAppreciableLayers(appreciableLayers) {
       return {
         layers: this.getSelfAppreciableLayers(appreciableLayers),
-        allLoaded: this._cacheLayerId.size === this.addLayersSucceededLen
+        allLoaded: this._cacheLayerId.size === this.expectLayerLen
       };
     }
 
diff --git a/src/common/mapping/WebMapV3.js b/src/common/mapping/WebMapV3.js
index 27201fdff..7257ee920 100644
--- a/src/common/mapping/WebMapV3.js
+++ b/src/common/mapping/WebMapV3.js
@@ -205,6 +205,10 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
 
   clean(removeMap = true) {
     if (this.map) {
+      if (this._sourceListModel) {
+        this._sourceListModel.destroy();
+        this._sourceListModel = null;
+      }
       if (removeMap) {
         const scene = this.map.$l7scene;
         scene && scene.removeAllLayer();
@@ -614,6 +618,11 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
       legendList: this._legendList,
       l7LayerUtil
     });
+    this._sourceListModel.on({
+      layerupdatechanged: (params) => {
+        this.fire('layerupdatechanged', params);
+      }
+    });
     this.fire('mapcreatesucceeded', { map: this.map, mapparams: this.mapParams, layers: this.getSelfAppreciableLayers() });
   }
 
diff --git a/src/common/mapping/utils/AppreciableLayerBase.js b/src/common/mapping/utils/AppreciableLayerBase.js
index cc5e4e6d8..1dbd008cc 100644
--- a/src/common/mapping/utils/AppreciableLayerBase.js
+++ b/src/common/mapping/utils/AppreciableLayerBase.js
@@ -1,33 +1,105 @@
+import { Events } from '../../commontypes';
 import SourceModel from './SourceModel';
-import { createAppreciableLayerId } from './util';
+import { createAppreciableLayerId, getLayerInfosFromCatalogs } from './util';
 
-export class AppreciableLayerBase {
+export class AppreciableLayerBase extends Events {
   constructor(options = {}) {
+    super();
     this.map = options.map;
     this.layers = options.layers || [];
     this.appendLayers = options.appendLayers || false;
     this.unexpectedSourceNames = ['tdt-search-', 'tdt-route-', 'smmeasure', 'mapbox-gl-draw', 'maplibre-gl-draw', /tracklayer-\d+-line/];
+    this.layersVisibleMap = new Map();
+    this.layerCatalogs = [];
+    this.appreciableLayers = [];
+    this.eventTypes = ['layerupdatechanged'];
+    this._styleDataUpdatedHandler = this._styleDataUpdatedHandler.bind(this);
   }
 
   setSelfLayers(layers) {
     this.layers = layers;
+    if (this.appreciableLayers.length > 0) {
+      this._styleDataUpdatedHandler();
+    }
+  }
+
+  createAppreciableLayers() {
+    throw new Error('createAppreciableLayers is not implemented');
+  }
+
+  createLayerCatalogs() {
+    throw new Error('createLayerCatalogs is not implemented');
+  }
+
+  getSelfLayerIds() {
+    throw new Error('getSelfLayerIds is not implemented');
+  }
+
+  getLayerCatalog() {
+    return this.layerCatalogs;
   }
 
   getLayers() {
-    throw new Error('getLayers is not implemented');
+    return this.appreciableLayers;
+  }
+
+  getSelfLayers(appreciableLayers = this.getLayers()) {
+    const selfLayerIds = this.getSelfLayerIds();
+    return appreciableLayers.filter((item) =>
+      item.renderLayers.some((id) => selfLayerIds.some((renderId) => renderId === id))
+    );
   }
 
-  getSourceList() {
-    throw new Error('getSourceList is not implemented');
+  toggleLayerVisible(layerId, visible) {
+    const item = this._findLayerCatalog(this.layerCatalogs, layerId);
+    if (!item) {
+      return;
+    }
+    const visibility = visible ? 'visible' : 'none';
+    if (item.type === 'group') {
+      const visbleId = this._getLayerVisibleId(item);
+      this.layersVisibleMap.set(visbleId, visible);
+      const targetLayers = getLayerInfosFromCatalogs(item.children);
+      this.setLayersVisible(targetLayers, visibility);
+    } else {
+      this.setLayersVisible([item], visibility);
+    }
   }
 
-  getSelfLayers() {
-    throw new Error('getSelfLayers is not implemented');
+  setLayersVisible(layers, visibility) {
+    layers.forEach(layer => {
+      const visbleId = this._getLayerVisibleId(layer);
+      this.layersVisibleMap.set(visbleId, visibility === 'visible');
+      if (
+        (layer.CLASS_INSTANCE && layer.CLASS_INSTANCE.show && layer.CLASS_INSTANCE.hide)
+      ) {
+        visibility === 'visible' ? layer.CLASS_INSTANCE.show() : layer.CLASS_INSTANCE.hide();
+        this._styleDataUpdatedHandler();
+        return;
+      }
+      layer.renderLayers.forEach((layerId) => {
+        if (layer.CLASS_NAME !== 'L7Layer' || this.map.getLayer(layerId)) {
+          this.map.setLayoutProperty(layerId, 'visibility', visibility);
+        }
+      });
+    });
   }
 
   concatExpectLayers(selfLayers, selfLayerIds, layersOnMap) {
     const extraLayers = layersOnMap.filter((layer) => !selfLayerIds.some((id) => id === layer.id));
-    return this.filterExpectedLayers(selfLayers.concat(extraLayers));
+    return this._filterExpectedLayers(selfLayers.concat(extraLayers));
+  }
+
+  destroy() {
+    this.map.off('styledata', this._styleDataUpdatedHandler);
+  }
+
+  initDatas() {
+    if (!this.map) {
+      return;
+    }
+    this._initializeData();
+    this._registerMapEvent();
   }
 
   _initAppreciableLayers(detailLayers) {
@@ -67,7 +139,7 @@ export class AppreciableLayerBase {
     return datas;
   }
 
-  filterExpectedLayers(layers) {
+  _filterExpectedLayers(layers) {
     return layers.filter((layer) => this._excludeLayer(layer));
   }
 
@@ -147,7 +219,7 @@ export class AppreciableLayerBase {
       id: layerId,
       title,
       type: layer.type,
-      visible,
+      visible: this._getLayerVisible({ id: layerId, type: layer.type, visible }),
       renderSource: sourceOnMap
         ? {
             id: layer.source,
@@ -172,4 +244,56 @@ export class AppreciableLayerBase {
     }
     return fields;
   }
+  
+  _findLayerCatalog(layerCatalogs, id) {
+    let matchData;
+    for (const data of layerCatalogs) {
+      if (data.id === id) {
+        matchData = data;
+        break;
+      }
+      if (data.type === 'group') {
+        matchData = this._findLayerCatalog(data.children, id);
+      }
+    }
+    return matchData;
+  }
+  
+  _getLayerVisibleId(layer) {
+    return `${layer.type}-${layer.id}`;
+  }
+
+  _getLayerVisible(layer) {
+    const id = this._getLayerVisibleId(layer);
+    return this.layersVisibleMap.has(id) ? this.layersVisibleMap.get(id) : layer.visible;
+  }
+  
+  _updateLayerCatalogsVisible(catalogs) {
+    for (const data of catalogs) {
+      data.visible = this._getLayerVisible(data);
+      if (data.type === 'group') {
+        this._updateLayerCatalogsVisible(data.children);
+      }
+    }
+  }
+
+  _initializeData() {
+    this.appreciableLayers = this.createAppreciableLayers();
+    this.layerCatalogs = this.createLayerCatalogs();
+    this._updateLayerCatalogsVisible(this.layerCatalogs);
+  }
+
+  _registerMapEvent() {
+    this.map.on('styledata', this._styleDataUpdatedHandler);
+  }
+
+  _styleDataUpdatedHandler() {
+    this._initializeData();
+    if (!this._appendLayers) {
+      this.triggerEvent('layerupdatechanged', {
+        layers: this.appreciableLayers,
+        layerCatalog: this.layerCatalogs
+      });
+    }
+  }
 }
diff --git a/src/common/mapping/utils/SourceListModelV2.js b/src/common/mapping/utils/SourceListModelV2.js
index 812a35255..2f90760c8 100644
--- a/src/common/mapping/utils/SourceListModelV2.js
+++ b/src/common/mapping/utils/SourceListModelV2.js
@@ -3,25 +3,23 @@ import { AppreciableLayerBase } from './AppreciableLayerBase';
 export class SourceListModelV2 extends AppreciableLayerBase {
   constructor(options = {}) {
     super(options);
+    this.initDatas();
   }
 
-  getLayers() {
+  createAppreciableLayers() {
     const detailLayers = this._initLayers();
     return this._initAppreciableLayers(detailLayers);
   }
 
-  getSelfLayers(appreciableLayers = this.getLayers()) {
-    const selfLayerIds = this._getSelfLayerIds();
-    return appreciableLayers.filter((item) =>
-      item.renderLayers.some((id) => selfLayerIds.some((renderId) => renderId === id))
-    );
-  }
-
-  getSourceList() {
+  createLayerCatalogs() {
     const appreciableLayers = this.getLayers();
     return this._initSourceList(appreciableLayers);
   }
 
+  getSelfLayerIds() {
+    return this.layers.reduce((ids, item) => ids.concat(item.renderLayers), []);
+  }
+
   _initLayers() {
     const layersOnMap = this._getAllLayersOnMap();
     let nextLayers = layersOnMap;
@@ -54,8 +52,4 @@ export class SourceListModelV2 extends AppreciableLayerBase {
       layerFromMapJSON.renderLayers && layerFromMapJSON.renderLayers.some((subLayerId) => subLayerId === layerOnMap.id)
     );
   }
-
-  _getSelfLayerIds() {
-    return this.layers.reduce((ids, item) => ids.concat(item.renderLayers), []);
-  }
 }
diff --git a/src/common/mapping/utils/SourceListModelV3.js b/src/common/mapping/utils/SourceListModelV3.js
index fd64914b0..bb4c11131 100644
--- a/src/common/mapping/utils/SourceListModelV3.js
+++ b/src/common/mapping/utils/SourceListModelV3.js
@@ -12,28 +12,27 @@ export class SourceListModelV3 extends AppreciableLayerBase {
     this._legendList = options.legendList;
     const layers = this._generateLayers();
     this.setSelfLayers(layers);
+    this.initDatas();
   }
 
-  getLayers() {
+  createAppreciableLayers() {
     const detailLayers = this._initLayers();
     return this._initAppreciableLayers(detailLayers);
   }
 
-  getSelfLayers() {
-    const appreciableLayers = this.getLayers();
-    const selfLayerIds = this._getSelfLayerIds();
-    return appreciableLayers.filter((item) => selfLayerIds.some((id) => id === item.id));
-  }
-
-  getSourceList() {
+  createLayerCatalogs() {
     const appreciableLayers = this.getLayers();
     const sourceList = this._createSourceCatalogs(this._layerCatalog, appreciableLayers);
-    const selfLayerIds = this._getSelfLayerIds();
-    const extraLayers = appreciableLayers.filter((item) => !selfLayerIds.some((id) => id === item.id));
+    const selfLayers = this.getSelfLayers();
+    const extraLayers = appreciableLayers.filter((item) => !selfLayers.some((sub) => sub.id === item.id));
     const extraSourceList = this._initSourceList(extraLayers);
     return extraSourceList.concat(sourceList);
   }
 
+  getSelfLayerIds() {
+    return this.layers.reduce((ids, item) => ids.concat(item.layerInfo.renderLayers), []);
+  }
+
   _initLayers() {
     const layersOnMap = this._getAllLayersOnMap();
     let nextLayers = layersOnMap;
@@ -144,8 +143,4 @@ export class SourceListModelV3 extends AppreciableLayerBase {
       return [layerId];
     }
   }
-
-  _getSelfLayerIds() {
-    return this.layers.map(item => item.id);
-  }
 }
diff --git a/test/common/mapping/utils/SourceListModelV2Spec.js b/test/common/mapping/utils/SourceListModelV2Spec.js
index a64f4fada..6c14f1558 100644
--- a/test/common/mapping/utils/SourceListModelV2Spec.js
+++ b/test/common/mapping/utils/SourceListModelV2Spec.js
@@ -1,9 +1,10 @@
 import { SourceListModelV2 } from '../../../../src/common/mapping/utils/SourceListModelV2';
 
 describe('SourceListV2', () => {
-  let layers, map;
+  let layers, map, mockEvents;
 
   beforeEach(() => {
+    mockEvents = {};
     layers = [
       {
         id: 'background',
@@ -182,7 +183,24 @@ describe('SourceListV2', () => {
           visible: true,
           sourceId: 'graticuleLayer_1723443238046_line'
         }
-      }
+      },
+      on(type, callback) {
+        mockEvents[type] = callback;
+      },
+      off(type) {
+        delete mockEvents[type];
+      },
+      setLayoutProperty: jasmine.createSpy('setLayoutProperty').and.callFake((layerId, visibility) => {
+        const layer = layers.find((layer) => layer.id === layerId);
+        if (layer) {
+          layer.layout = layer.layout || {};
+          layer.layout.visibility = visibility;
+          return;
+        }
+        if (this.overlayLayersManager[layerId]) {
+          this.overlayLayersManager.visible = visibility === 'visible';
+        }
+      })
     };
   });
 
@@ -226,9 +244,9 @@ describe('SourceListV2', () => {
     done();
   });
 
-  it('getSourceList', (done) => {
+  it('getLayerCatalog', (done) => {
     const sourceListModel = new SourceListModelV2({ map });
-    const layerList = sourceListModel.getSourceList();
+    const layerList = sourceListModel.getLayerCatalog();
     expect(layerList.length).toBe(4);
     done();
   });
@@ -403,7 +421,9 @@ describe('SourceListV2', () => {
       },
       getLayer(id) {
         return layersOnMap.find((layer) => layer.id === id);
-      }
+      },
+      on: jasmine.createSpy('on').and.callFake(() => {}),
+      off: jasmine.createSpy('off').and.callFake(() => {})
     };
     const sourceListModel = new SourceListModelV2({ map, layers });
     const appreciableLayers = sourceListModel.getLayers();
@@ -417,7 +437,7 @@ describe('SourceListV2', () => {
       'China_Boundary_C@China#1_unique_<NULL>(6_7)'
     ]);
     expect(selfAppreciableLayers.length).toBe(3);
-    const layerList = sourceListModel.getSourceList();
+    const layerList = sourceListModel.getLayerCatalog();
     expect(layerList.length).toBe(2);
     expect(layerList[0].children.length).toBe(2);
     expect(layerList[0].children[1].renderLayers).toEqual(appreciableLayers[2].renderLayers);
@@ -486,4 +506,48 @@ describe('SourceListV2', () => {
     expect(appreciableLayers[1].reused).toBeUndefined();
     done();
   });
+
+  it('destroy', (done) => {
+    const sourceListModel = new SourceListModelV2({ map });
+    expect(mockEvents.styledata).not.toBeUndefined();
+    sourceListModel.destroy();
+    expect(mockEvents.styledata).toBeUndefined();
+    done();
+  });
+
+  it('toggleLayerVisible', (done) => {
+    const sourceListModel = new SourceListModelV2({ map });
+    const layerList = sourceListModel.getLayerCatalog();
+    expect(layerList.length).toBe(4);
+    expect(layerList[1].visible).toBeTruthy();
+    sourceListModel.on({
+      layerupdatechanged: () => {
+        const layerList = sourceListModel.getLayerCatalog();
+        expect(layerList[1].visible).toBeFalsy();
+        expect(map.setLayoutProperty).toHaveBeenCalledTimes(layerList[1].renderLayers.length);
+        done();
+      }
+    });
+    sourceListModel.toggleLayerVisible(layerList[1].id, false);
+    expect(mockEvents.styledata).not.toBeUndefined();
+    mockEvents.styledata();
+  });
+
+  it('setLayersVisible', (done) => {
+    const sourceListModel = new SourceListModelV2({ map });
+    const layerList = sourceListModel.getLayerCatalog();
+    expect(layerList.length).toBe(4);
+    expect(layerList[1].visible).toBeTruthy();
+    sourceListModel.on({
+      layerupdatechanged: () => {
+        const layerList = sourceListModel.getLayerCatalog();
+        expect(layerList[1].visible).toBeFalsy();
+        expect(map.setLayoutProperty).toHaveBeenCalledTimes(layerList[1].renderLayers.length);
+        done();
+      }
+    });
+    sourceListModel.setLayersVisible([layerList[1]], 'none');
+    expect(mockEvents.styledata).not.toBeUndefined();
+    mockEvents.styledata();
+  });
 });
diff --git a/test/common/mapping/utils/SourceListModelV3Spec.js b/test/common/mapping/utils/SourceListModelV3Spec.js
index 3066467c5..049e84bfe 100644
--- a/test/common/mapping/utils/SourceListModelV3Spec.js
+++ b/test/common/mapping/utils/SourceListModelV3Spec.js
@@ -3,186 +3,208 @@ import { isL7Layer } from '../../../../src/common/mapping/utils/L7LayerUtil';
 import '../../../resources/WebMapV3.js';
 
 describe('SourceListV3', () => {
-  const layers = [
-    {
-      id: 'background',
-      type: 'background',
-      layout: {
-        visibility: 'visible'
-      },
-      paint: {
-        'background-color': '#065726',
-        'background-opacity': 0.5
-      }
-    },
-    {
-      id: 'CHINA_DARK',
-      type: 'raster',
-      source: 'CHINA_DARK',
-      minzoom: 0,
-      maxzoom: 12
-    },
-    {
-      id: 'test-id',
-      type: 'raster',
-      source: 'test-source',
-      minzoom: 0,
-      maxzoom: 12
-    },
-    {
-      id: 'test-id-label',
-      type: 'raster',
-      source: 'test-source',
-      minzoom: 0,
-      maxzoom: 12,
-      metadata: { parentLayerId: 'test-source' }
-    },
-    {
-      id: 'tracklayer-1-line',
-      type: 'line',
-      source: 'tracklayer-1-line',
-      layout: {
-        'line-cap': 'round',
-        'line-join': 'round'
-      },
-      paint: {
-        'line-color': '#065726',
-        'line-width': 5,
-        'line-opacity': 0.8
-      }
-    },
-    {
-      id: 'tdt-search-line',
-      type: 'line',
-      source: 'tdt-search-line',
-      layout: {
-        'line-cap': 'round',
-        'line-join': 'round'
-      },
-      paint: {
-        'line-color': '#065726',
-        'line-width': 5,
-        'line-opacity': 0.8
-      }
-    },
-    {
-      id: 'tdt-route-line',
-      type: 'line',
-      source: 'tdt-route-line',
-      layout: {
-        'line-cap': 'round',
-        'line-join': 'round'
-      },
-      paint: {
-        'line-color': '#065726',
-        'line-width': 5,
-        'line-opacity': 0.8
-      }
-    },
-    {
-      id: 'smmeasure',
-      type: 'line',
-      source: 'smmeasure',
-      layout: {
-        'line-cap': 'round',
-        'line-join': 'round'
-      },
-      paint: {
-        'line-color': '#065726',
-        'line-width': 5,
-        'line-opacity': 0.8
-      }
-    },
+  let map, layers, mockEvents;
 
-    {
-      id: 'mapbox-gl-draw',
-      type: 'line',
-      source: 'mapbox-gl-draw',
-      layout: {
-        'line-cap': 'round',
-        'line-join': 'round'
-      },
-      paint: {
-        'line-color': '#065726',
-        'line-width': 5,
-        'line-opacity': 0.8
-      }
-    },
-    {
-      id: 'mapbox-gl-draw-line',
-      type: 'line',
-      source: 'mapbox-gl-draw',
-      layout: {
-        'line-cap': 'round',
-        'line-join': 'round'
-      },
-      paint: {
-        'line-color': '#065726',
-        'line-width': 5,
-        'line-opacity': 0.8
-      }
-    },
-    {
-      id: 'test-SM-highlight',
-      type: 'line',
-      source: 'mapbox-gl-draw',
-      layout: {
-        'line-cap': 'round',
-        'line-join': 'round'
-      },
-      paint: {
-        'line-color': '#065726',
-        'line-width': 5,
-        'line-opacity': 0.8
-      }
-    },
-    {
-      id: 'graticuleLayer_1723443238046_line',
-      type: 'line',
-      source: 'graticuleLayer_1723443238046_line',
-      layout: {
-        'line-join': 'round',
-        'line-cap': 'round',
-        visibility: 'visible'
-      },
-      paint: {
-        'line-color': '#15eec2',
-        'line-width': 2,
-        'line-offset': 0,
-        'line-translate-anchor': 'viewport',
-        'line-dasharray': [0.5, 4]
-      }
-    }
-  ];
-  const map = {
-    getStyle() {
-      return {
-        layers
-      };
-    },
-    getSource() {
-      return {
-        type: 'geojson',
-        data: {
-          type: 'FeatureCollection',
-          features: []
+  beforeEach(() => {
+    mockEvents = {};
+    layers = [
+      {
+        id: 'background',
+        type: 'background',
+        layout: {
+          visibility: 'visible'
+        },
+        paint: {
+          'background-color': '#065726',
+          'background-opacity': 0.5
+        }
+      },
+      {
+        id: 'CHINA_DARK',
+        type: 'raster',
+        source: 'CHINA_DARK',
+        minzoom: 0,
+        maxzoom: 12
+      },
+      {
+        id: 'test-id',
+        type: 'raster',
+        source: 'test-source',
+        minzoom: 0,
+        maxzoom: 12
+      },
+      {
+        id: 'test-id-label',
+        type: 'raster',
+        source: 'test-source',
+        minzoom: 0,
+        maxzoom: 12,
+        metadata: { parentLayerId: 'test-source' }
+      },
+      {
+        id: 'tracklayer-1-line',
+        type: 'line',
+        source: 'tracklayer-1-line',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#065726',
+          'line-width': 5,
+          'line-opacity': 0.8
+        }
+      },
+      {
+        id: 'tdt-search-line',
+        type: 'line',
+        source: 'tdt-search-line',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#065726',
+          'line-width': 5,
+          'line-opacity': 0.8
+        }
+      },
+      {
+        id: 'tdt-route-line',
+        type: 'line',
+        source: 'tdt-route-line',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#065726',
+          'line-width': 5,
+          'line-opacity': 0.8
+        }
+      },
+      {
+        id: 'smmeasure',
+        type: 'line',
+        source: 'smmeasure',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#065726',
+          'line-width': 5,
+          'line-opacity': 0.8
+        }
+      },
+  
+      {
+        id: 'mapbox-gl-draw',
+        type: 'line',
+        source: 'mapbox-gl-draw',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#065726',
+          'line-width': 5,
+          'line-opacity': 0.8
+        }
+      },
+      {
+        id: 'mapbox-gl-draw-line',
+        type: 'line',
+        source: 'mapbox-gl-draw',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#065726',
+          'line-width': 5,
+          'line-opacity': 0.8
+        }
+      },
+      {
+        id: 'test-SM-highlight',
+        type: 'line',
+        source: 'mapbox-gl-draw',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#065726',
+          'line-width': 5,
+          'line-opacity': 0.8
+        }
+      },
+      {
+        id: 'graticuleLayer_1723443238046_line',
+        type: 'line',
+        source: 'graticuleLayer_1723443238046_line',
+        layout: {
+          'line-join': 'round',
+          'line-cap': 'round',
+          visibility: 'visible'
+        },
+        paint: {
+          'line-color': '#15eec2',
+          'line-width': 2,
+          'line-offset': 0,
+          'line-translate-anchor': 'viewport',
+          'line-dasharray': [0.5, 4]
         }
-      };
-    },
-    getLayer(id) {
-      return layers.find((layer) => layer.id === id);
-    },
-    overlayLayersManager: {
-      graticuleLayer_1723443238046: {
-        id: 'graticuleLayer_1723443238046',
-        overlay: true,
-        renderingMode: '3d',
-        type: 'custom',
-        visible: true,
-        sourceId: 'graticuleLayer_1723443238046_line'
       }
-    }
-  };
+    ];
+    map = {
+      getStyle() {
+        return {
+          layers
+        };
+      },
+      getSource() {
+        return {
+          type: 'geojson',
+          data: {
+            type: 'FeatureCollection',
+            features: []
+          }
+        };
+      },
+      getLayer(id) {
+        return layers.find((layer) => layer.id === id);
+      },
+      overlayLayersManager: {
+        graticuleLayer_1723443238046: {
+          id: 'graticuleLayer_1723443238046',
+          overlay: true,
+          renderingMode: '3d',
+          type: 'custom',
+          visible: true,
+          sourceId: 'graticuleLayer_1723443238046_line'
+        }
+      },
+      on(type, callback) {
+        mockEvents[type] = callback;
+      },
+      off(type) {
+        delete mockEvents[type];
+      },
+      setLayoutProperty: jasmine.createSpy('setLayoutProperty').and.callFake((layerId, visibility) => {
+        const layer = layers.find((layer) => layer.id === layerId);
+        if (layer) {
+          layer.layout = layer.layout || {};
+          layer.layout.visibility = visibility;
+          return;
+        }
+        if (this.overlayLayersManager[layerId]) {
+          this.overlayLayersManager.visible = visibility === 'visible';
+        }
+      })
+    };
+  });
 
   it('getLayers', (done) => {
     const mapInfo = JSON.parse(apstudioWebMap_layerData);
@@ -208,7 +230,7 @@ describe('SourceListV3', () => {
     done();
   });
 
-  it('getSourceList without group', (done) => {
+  it('getLayerCatalog without group', (done) => {
     const mapInfo = JSON.parse(apstudioWebMap_layerData);
     const sourceListModel = new SourceListModelV3({
       map,
@@ -220,12 +242,12 @@ describe('SourceListV3', () => {
         getL7MarkerLayers: () => ({})
       }
     });
-    const layerList = sourceListModel.getSourceList();
+    const layerList = sourceListModel.getLayerCatalog();
     expect(layerList.length).toBe(mapInfo.metadata.layerCatalog.length + 3);
     done();
   });
 
-  it('getSourceList with group', (done) => {
+  it('getLayerCatalog with group', (done) => {
     const mapInfo = JSON.parse(mapstudioWebMap_group);
     const sourceListModel = new SourceListModelV3({
       map,
@@ -237,8 +259,119 @@ describe('SourceListV3', () => {
         getL7MarkerLayers: () => ({})
       }
     });
-    const layerList = sourceListModel.getSourceList();
+    const layerList = sourceListModel.getLayerCatalog();
     expect(layerList.length).toBe(mapInfo.metadata.layerCatalog.length + 3);
     done();
   });
+
+  it('destroy', (done) => {
+    const mapInfo = JSON.parse(mapstudioWebMap_chart);
+    const sourceListModel = new SourceListModelV3({
+      map,
+      mapInfo,
+      mapResourceInfo: JSON.parse(msProjectINfo_chart),
+      legendList: [],
+      l7LayerUtil: {
+        isL7Layer,
+        getL7MarkerLayers: () => ({})
+      }
+    });
+    expect(mockEvents.styledata).not.toBeUndefined();
+    sourceListModel.destroy();
+    expect(mockEvents.styledata).toBeUndefined();
+    done();
+  });
+
+  it('toggleLayerVisible false', (done) => {
+    const mapInfo = JSON.parse(mapstudioWebMap_chart);
+    const markerList = {
+      ['中国金牌个人获奖者(1)']: {
+        show: jasmine.createSpy('show').and.callFake(() => {}),
+        hide: jasmine.createSpy('hide').and.callFake(() => {}),
+      }
+    }
+    const sourceListModel = new SourceListModelV3({
+      map,
+      mapInfo,
+      mapResourceInfo: JSON.parse(msProjectINfo_chart),
+      legendList: [],
+      l7LayerUtil: {
+        isL7Layer,
+        getL7MarkerLayers: () => markerList
+      }
+    });
+    const layerList = sourceListModel.getLayerCatalog();
+    expect(layerList.length).toBe(mapInfo.metadata.layerCatalog.length + 3);
+    expect(layerList[3].visible).toBeTruthy();
+    sourceListModel.on({
+      layerupdatechanged: () => {
+        let layerList = sourceListModel.getLayerCatalog();
+        expect(layerList[3].visible).toBeFalsy();
+        expect(markerList[layerList[3].id].hide).toHaveBeenCalledTimes(1);
+        done();
+      }
+    });
+    sourceListModel.toggleLayerVisible(layerList[3].id, false);
+  });
+
+  it('toggleLayerVisible true', (done) => {
+    const mapInfo = JSON.parse(mapstudioWebMap_chart);
+    const markerList = {
+      ['中国金牌个人获奖者(1)']: {
+        show: jasmine.createSpy('show').and.callFake(() => {}),
+        hide: jasmine.createSpy('hide').and.callFake(() => {}),
+      }
+    }
+    const sourceListModel = new SourceListModelV3({
+      map,
+      mapInfo,
+      mapResourceInfo: JSON.parse(msProjectINfo_chart),
+      legendList: [],
+      l7LayerUtil: {
+        isL7Layer,
+        getL7MarkerLayers: () => markerList
+      }
+    });
+    let layerList = sourceListModel.getLayerCatalog();
+    expect(layerList.length).toBe(mapInfo.metadata.layerCatalog.length + 3);
+    expect(layerList[3].visible).toBeTruthy();
+    sourceListModel.toggleLayerVisible(layerList[3].id, false);
+    layerList = sourceListModel.getLayerCatalog();
+    expect(layerList[3].visible).toBeFalsy();
+    expect(markerList[layerList[3].id].hide).toHaveBeenCalledTimes(1);
+    sourceListModel.toggleLayerVisible(layerList[3].id, true);
+    layerList = sourceListModel.getLayerCatalog();
+    expect(layerList[3].visible).toBeTruthy();
+    expect(markerList[layerList[3].id].show).toHaveBeenCalledTimes(1);
+    done();
+  });
+
+  it('setLayersVisible', (done) => {
+    const mapInfo = JSON.parse(mapstudioWebMap_chart);
+    layers.push(...mapInfo.layers);
+    const sourceListModel = new SourceListModelV3({
+      map,
+      mapInfo,
+      mapResourceInfo: JSON.parse(msProjectINfo_chart),
+      legendList: [],
+      l7LayerUtil: {
+        isL7Layer,
+        getL7MarkerLayers: () => ({})
+      }
+    });
+    const layerList = sourceListModel.getLayerCatalog();
+    expect(layerList.length).toBe(mapInfo.metadata.layerCatalog.length + 3);
+    expect(layerList[4].visible).toBeTruthy();
+    sourceListModel.on({
+      layerupdatechanged: () => {
+        const layerList = sourceListModel.getLayerCatalog();
+        expect(layerList[4].visible).toBeFalsy();
+        expect(map.setLayoutProperty).toHaveBeenCalledTimes(layerList[4].renderLayers.length);
+        done();
+      }
+    });
+    sourceListModel.setLayersVisible([layerList[4]], 'none');
+    expect(mockEvents.styledata).not.toBeUndefined();
+    mockEvents.styledata();
+  });
 });
diff --git a/test/mapboxgl/mapping/WebMapSpec.js b/test/mapboxgl/mapping/WebMapSpec.js
index 7201d02dd..cffbf3351 100644
--- a/test/mapboxgl/mapping/WebMapSpec.js
+++ b/test/mapboxgl/mapping/WebMapSpec.js
@@ -1217,11 +1217,16 @@ describe('mapboxgl_WebMap', () => {
           expect(layersOnMap[0].id).toBe('China4269@DataSource');
           expect(layersOnMap[1].id).toBe('未命名数据');
           expect(layersOnMap[2].id).toContain('未命名数据_');
+          const listenEvents = {};
+          spyOn(map, 'off').and.callFake((type, cb) => {
+            listenEvents[type] = cb;
+          });
           webMap2.cleanLayers();
           layersOnMap = map.getStyle().layers;
           expect(layersOnMap.length).toBe(2);
           expect(layersOnMap[0].id).toBe('China4269@DataSource');
           expect(layersOnMap[1].id).toBe('未命名数据');
+          expect(listenEvents.styledata).not.toBeUndefined();
           webMap1.cleanLayers();
           done();
         });
@@ -1229,4 +1234,33 @@ describe('mapboxgl_WebMap', () => {
     };
     datavizWebmap.once('mapcreatesucceeded', callback);
   });
+
+  it('toggle mapstyle layers visible', (done) => {
+    const commonOption = {
+      server: 'http://fack:8190/iportal/',
+      target: 'map',
+      withCredentials: false
+    };
+    datavizWebmap = new WebMap(
+      '',
+      { ...commonOption },
+      mapOptionsList[0]
+    );
+    const callback = function () {
+      let layers = datavizWebmap.getLayers();
+      expect(layers.length).toBe(2);
+      expect(layers[0].id).toBe('China4269@DataSource');
+      expect(layers[0].visible).toBeTruthy();
+      datavizWebmap.toggleLayerVisible(layers[0].id, false);
+      layers = datavizWebmap.getLayers();
+      expect(layers[0].visible).toBeFalsy();
+      datavizWebmap.once('layerupdatechanged', () => {
+        layers = datavizWebmap.getLayers();
+        expect(layers[0].visible).toBeTruthy();
+        done();
+      });
+      datavizWebmap.setLayersVisible([layers[0]], 'visible');
+    };
+    datavizWebmap.once('mapcreatesucceeded', callback);
+  });
 });
diff --git a/test/mapboxgl/mapping/WebMapV2Spec.js b/test/mapboxgl/mapping/WebMapV2Spec.js
index a4ce578b4..2df23b802 100644
--- a/test/mapboxgl/mapping/WebMapV2Spec.js
+++ b/test/mapboxgl/mapping/WebMapV2Spec.js
@@ -2034,6 +2034,7 @@ describe('mapboxgl_WebMapV2', () => {
         }
       };
       expect(data.map).toEqual(datavizWebmap._handler.map);
+      data.map.fire('styledata');
       const appreciableLayers2 = datavizWebmap.getLayers();
       expect(appreciableLayers2.length).toBe(uniqueLayer_polygon.layers.length + 1 + 2);
       data.map.addLayer({
@@ -2719,12 +2720,17 @@ describe('mapboxgl_WebMapV2', () => {
           expect(layersOnMap[1].id).toBe('天地图影像-tdt-label');
           expect(layersOnMap[2].id).toBe('T202007210600');
           expect(layersOnMap[3].id).toBe('T202007210700');
+          const listenEvents = {};
+          spyOn(map, 'off').and.callFake((type, cb) => {
+            listenEvents[type] = cb;
+          });
           webMap2.cleanLayers();
           layersOnMap = map.getStyle().layers;
           expect(layersOnMap.length).toBe(3);
           expect(layersOnMap[0].id).toBe('天地图影像');
           expect(layersOnMap[1].id).toBe('天地图影像-tdt-label');
           expect(layersOnMap[2].id).toBe('T202007210600');
+          expect(listenEvents.styledata).not.toBeUndefined();
           webMap1.cleanLayers();
           done();
         });
@@ -2811,4 +2817,127 @@ describe('mapboxgl_WebMapV2', () => {
     };
     datavizWebmap.on('mapcreatesucceeded', callback);
   });
+
+  it('toggle layers visible', (done) => {
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('portal.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+      }
+      if (url.indexOf('1788054202/map.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(mvtLayer)));
+      }
+      if (url.indexOf('web/datas/676516522/content.json') > -1) {
+        return Promise.resolve(new Response(layerData_CSV));
+      }
+      if (url.indexOf('ChinaqxAlberts_4548%40fl-new/style.json') > -1) {
+        const nextStyleJSON = JSON.parse(styleJson);
+        nextStyleJSON.layers.push({
+          layout: {
+            visibility: 'visible'
+          },
+          filter: ['all', ['==', '$type', 'Point']],
+          maxzoom: 24,
+          paint: {
+            'circle-radius': 2,
+            'circle-color': 'rgba(102,102,102,1.00)'
+          },
+          id: 'ChinaqxAlberts_4548@fl-new_point',
+          source: 'ChinaqxAlberts_4548@fl-new',
+          'source-layer': 'ChinaqxAlberts_4548@point',
+          type: 'circle',
+          minzoom: 0
+        });
+        return Promise.resolve(new Response(JSON.stringify(nextStyleJSON)));
+      }
+    });
+    datavizWebmap = new WebMap(id, { ...commonOption });
+    const callback = function () {
+      let layers = datavizWebmap.getLayers();
+      let layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers.length).toBe(4);
+      expect(layerCatalog.length).toBe(3);
+      expect(layers[1].id).toBe('ChinaqxAlberts_4548@fl-new');
+      expect(layers[2].id).toBe('ChinaqxAlberts_4548@point');
+      expect(layerCatalog[1].id).toBe('ChinaqxAlberts_4548@fl-new');
+      expect(layerCatalog[1].children[0].id).toBe('ChinaqxAlberts_4548@fl-new');
+      expect(layerCatalog[1].children[1].id).toBe('ChinaqxAlberts_4548@point');
+      expect(layers[1].visible).toBeTruthy();
+      expect(layers[2].visible).toBeTruthy();
+      expect(layerCatalog[1].children[0].visible).toBeTruthy();
+      expect(layerCatalog[1].children[1].visible).toBeTruthy();
+      datavizWebmap.toggleLayerVisible('ChinaqxAlberts_4548@point', false);
+      layers = datavizWebmap.getLayers();
+      layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers[1].visible).toBeTruthy();
+      expect(layers[2].visible).toBeFalsy();
+      expect(layerCatalog[1].visible).toBeTruthy();
+      expect(layerCatalog[1].children[1].visible).toBeFalsy();
+      expect(layers[3].id).toBe('民航数据');
+      expect(layerCatalog[0].id).toBe('民航数据');
+      expect(layers[3].visible).toBeTruthy();
+      expect(layerCatalog[0].visible).toBeTruthy();
+      datavizWebmap.toggleLayerVisible('民航数据', false);
+      layers = datavizWebmap.getLayers();
+      layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers[3].visible).toBeFalsy();
+      expect(layerCatalog[0].visible).toBeFalsy();
+      datavizWebmap.setLayersVisible([layers[1], layers[2], layers[3]], 'none');
+      layers = datavizWebmap.getLayers();
+      layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers[1].visible).toBeFalsy();
+      expect(layers[2].visible).toBeFalsy();
+      expect(layers[3].visible).toBeFalsy();
+      expect(layerCatalog[0].visible).toBeFalsy();
+      expect(layerCatalog[1].visible).toBeFalsy();
+      expect(layerCatalog[1].children[0].visible).toBeFalsy();
+      expect(layerCatalog[1].children[1].visible).toBeFalsy();
+      datavizWebmap.setLayersVisible([layers[1], layers[2], layers[3]], 'visible');
+      layers = datavizWebmap.getLayers();
+      layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers[1].visible).toBeTruthy();
+      expect(layers[2].visible).toBeTruthy();
+      expect(layers[3].visible).toBeTruthy();
+      expect(layerCatalog[0].visible).toBeTruthy();
+      expect(layerCatalog[1].visible).toBeTruthy();
+      expect(layerCatalog[1].children[0].visible).toBeTruthy();
+      expect(layerCatalog[1].children[1].visible).toBeTruthy();
+      done();
+    };
+    datavizWebmap.on('mapcreatesucceeded', callback);
+  });
+
+  it('WebMapV2 layerupdatechanged', (done) => {
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('portal.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+      }
+      if (url.indexOf('1788054202/map.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(mvtLayer)));
+      }
+      if (url.indexOf('web/datas/676516522/content.json') > -1) {
+        return Promise.resolve(new Response(layerData_CSV));
+      }
+      if (url.indexOf('ChinaqxAlberts_4548%40fl-new/style.json') > -1) {
+        return Promise.resolve(new Response(styleJson));
+      }
+    });
+    datavizWebmap = new WebMap(id, { ...commonOption });
+    const callback = function () {
+      let layers = datavizWebmap.getLayers();
+      let layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers[2].id).toBe('民航数据');
+      expect(layerCatalog[0].id).toBe('民航数据');
+      expect(layers[2].visible).toBeTruthy();
+      expect(layerCatalog[0].visible).toBeTruthy();
+      datavizWebmap.once('layerupdatechanged', () => {
+        layers = datavizWebmap.getLayers();
+        layerCatalog = datavizWebmap.getLayerCatalog();
+        expect(layers[2].visible).toBeFalsy();
+        expect(layerCatalog[0].visible).toBeFalsy();
+        done();
+      });
+      datavizWebmap.toggleLayerVisible('民航数据', false);
+    };
+    datavizWebmap.on('mapcreatesucceeded', callback);
+  });
 });
diff --git a/test/mapboxgl/mapping/WebMapV3Spec.js b/test/mapboxgl/mapping/WebMapV3Spec.js
index e35918d4d..c205c139c 100644
--- a/test/mapboxgl/mapping/WebMapV3Spec.js
+++ b/test/mapboxgl/mapping/WebMapV3Spec.js
@@ -9,7 +9,7 @@ import { featureFilter, expression } from '@mapbox/mapbox-gl-style-spec';
 import spec from '@mapbox/mapbox-gl-style-spec/reference/v8';
 import { L7, L7Layer } from '../../../src/mapboxgl/overlay/L7Layer';
 import * as mockL7 from '../../tool/mock_l7';
-import mbglmap from '../../tool/mock_mapboxgl_map';
+import mbglmap, { CRS } from '../../tool/mock_mapboxgl_map';
 import '../../resources/WebMapV3.js';
 import '../../resources/WebMapV5.js';
 
@@ -188,6 +188,7 @@ describe('mapboxgl-webmap3.0', () => {
         id: 'ms-background12',
         type: 'background'
       });
+      map.fire('styledata');
       expect(map.getStyle().layers.length).toBe(mapInfo.layers.length + 1);
       expect(mapstudioWebmap.getLayers().length).toBe(appreciableLayers.length + 1);
       expect(mapstudioWebmap.getLayerCatalog().length).toBe(layerCatalogs.length + 1);
@@ -234,13 +235,7 @@ describe('mapboxgl-webmap3.0', () => {
         wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'
       }
     };
-    mapboxgl.CRS = function (epsgCode, wkt, bounds, unit) {
-      expect(epsgCode).toBe(nextMapInfo.crs.name);
-      expect(wkt).toBe(nextMapInfo.crs.wkt);
-      expect(bounds).toEqual(nextMapInfo.crs.extent);
-      expect(unit).toBe(nextMapInfo.crs.extent[2] > 180 ? 'meter' : 'degree');
-    };
-    mapboxgl.CRS.set = function () {};
+    mapboxgl.CRS = CRS;
     mapstudioWebmap = new WebMapV3(nextMapInfo, {
       server: server,
       target: 'map',
@@ -279,13 +274,7 @@ describe('mapboxgl-webmap3.0', () => {
         wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'
       }
     };
-    mapboxgl.CRS = function (epsgCode, wkt, bounds, unit) {
-      expect(epsgCode).toBe(nextMapInfo.crs.name);
-      expect(wkt).toBe(nextMapInfo.crs.wkt);
-      expect(bounds).toEqual(nextMapInfo.crs.extent);
-      expect(unit).toBe(nextMapInfo.crs.extent[2] > 180 ? 'meter' : 'degree');
-    };
-    mapboxgl.CRS.set = function () {};
+    mapboxgl.CRS = CRS;
     mapstudioWebmap = new WebMapV3(nextMapInfo, {
       server: server,
       target: 'map'
@@ -387,6 +376,7 @@ describe('mapboxgl-webmap3.0', () => {
           type: 'custom'
         }
       };
+      map.fire('styledata');
       const validNum = 4;
       const appreciableLayers2 = mapstudioWebmap.getLayers();
       expect(appreciableLayers2.length).toBe(appreciableLayers.length + validNum);
@@ -521,8 +511,7 @@ describe('mapboxgl-webmap3.0', () => {
       }
       return Promise.resolve();
     });
-    mapboxgl.CRS = function () {};
-    mapboxgl.CRS.set = function () {};
+    mapboxgl.CRS = CRS;
     const mapOptions = {
       transformRequest: function (url) {
         return { url };
@@ -715,8 +704,7 @@ describe('mapboxgl-webmap3.0', () => {
       }
       return Promise.resolve();
     });
-    mapboxgl.CRS = function () {};
-    mapboxgl.CRS.set = function () {};
+    mapboxgl.CRS = CRS;
     mapstudioWebmap = new WebMap(id, {
       server: server
     });
@@ -768,8 +756,7 @@ describe('mapboxgl-webmap3.0', () => {
       }
       return Promise.resolve();
     });
-    mapboxgl.CRS = function () {};
-    mapboxgl.CRS.set = function () {};
+    mapboxgl.CRS = CRS;
     mapstudioWebmap = new WebMap(id, {
       server: server
     });
@@ -781,6 +768,7 @@ describe('mapboxgl-webmap3.0', () => {
       let overlayLayers = Object.keys(map.overlayLayersManager);
       const idToCopy = 'ms_站点3_1715739627423_909';
       webmapInstance.copyLayer(idToCopy, { id: `${idToCopy}-SM-` }).then(() => {
+        map.fire('styledata');
         const currentOverlayLayers = Object.keys(map.overlayLayersManager);
         const currentAppreciableLayers = webmapInstance.getLayers();
         expect(currentOverlayLayers.length).toBe(overlayLayers.length + 1);
@@ -788,6 +776,7 @@ describe('mapboxgl-webmap3.0', () => {
         appreciableLayers = currentAppreciableLayers;
         overlayLayers = currentOverlayLayers;
         webmapInstance.copyLayer(idToCopy).then(() => {
+          map.fire('styledata');
           const currentOverlayLayers = Object.keys(map.overlayLayersManager);
           const currentAppreciableLayers = webmapInstance.getLayers();
           expect(currentOverlayLayers.length).toBe(overlayLayers.length + 1);
@@ -888,8 +877,7 @@ describe('mapboxgl-webmap3.0', () => {
       }
       return Promise.resolve();
     });
-    mapboxgl.CRS = function () {};
-    mapboxgl.CRS.set = function () {};
+    mapboxgl.CRS = CRS;
     const mapOptions = {
       transformRequest: function (url) {
         return { url };
@@ -967,21 +955,17 @@ describe('mapboxgl-webmap3.0', () => {
     });
     spyOn(mapboxgl, 'Map').and.callFake(mbglmap);
     const mapInfo = JSON.parse(mapstudioWebMap_symbol);
+    const crsInfo = {
+      name: 'EPSG:4490',
+      extent: [-180, -270, 180, 90],
+      wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'
+    };
+    const crs = new CRS(crsInfo.name, crsInfo.wkt, crsInfo.extent, 'degree');
     const nextMapInfo = {
       ...mapInfo,
-      crs: {
-        name: 'EPSG:4490',
-        extent: [-180, -270, 180, 90],
-        wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'
-      }
-    };
-    mapboxgl.CRS = function (epsgCode, wkt, bounds, unit) {
-      expect(epsgCode).toBe(nextMapInfo.crs.name);
-      expect(wkt).toBe(nextMapInfo.crs.wkt);
-      expect(bounds).toEqual(nextMapInfo.crs.extent);
-      expect(unit).toBe(nextMapInfo.crs.extent[2] > 180 ? 'meter' : 'degree');
+      crs: crsInfo
     };
-    mapboxgl.CRS.set = function () {};
+    mapboxgl.CRS = CRS;
     mapstudioWebmap = new WebMapV3(nextMapInfo, {
       server: server,
       target: 'map'
@@ -1001,7 +985,7 @@ describe('mapboxgl-webmap3.0', () => {
           }
         ]
       },
-      crs: 'EPSG:4490',
+      crs,
       center: [116.640545, 40.531714],
       zoom: 7
     });
@@ -1186,11 +1170,16 @@ describe('mapboxgl-webmap3.0', () => {
           expect(layersOnMap[0].id).toBe('CHINA_DARK');
           expect(layersOnMap[1].id).toBe('PopulationDistribution');
           expect(layersOnMap[2].id).toBe('未命名数据');
+          const listenEvents = {};
+          spyOn(map, 'off').and.callFake((type, cb) => {
+            listenEvents[type] = cb;
+          });
           webMap2.cleanLayers();
           layersOnMap = map.getStyle().layers;
           expect(layersOnMap.length).toBe(2);
           expect(layersOnMap[0].id).toBe('CHINA_DARK');
           expect(layersOnMap[1].id).toBe('PopulationDistribution');
+          expect(listenEvents.styledata).not.toBeUndefined();
           webMap1.cleanLayers();
           done();
         });
@@ -1259,4 +1248,63 @@ describe('mapboxgl-webmap3.0', () => {
       });
     });
   });
+
+  it('toggle WebMapV3 layers visible', (done) => {
+    spyOn(MapManagerUtil, 'default').and.callFake(mbglmap);
+    const mapInfo = JSON.parse(mapstudioWebMap_L7Layers);
+    spyOn(L7, 'PointLayer').and.callFake(mockL7.PointLayer);
+    spyOn(L7, 'LineLayer').and.callFake(mockL7.PointLayer);
+    spyOn(L7, 'PolygonLayer').and.callFake(mockL7.PointLayer);
+    spyOn(L7, 'HeatmapLayer').and.callFake(mockL7.PointLayer);
+    spyOn(L7, 'Scene').and.callFake(mockL7.Scene);
+    spyOn(L7, 'Mapbox').and.callFake(mockL7.Mapbox);
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('web/config/portal.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+      }
+      if (url.indexOf('map.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify({ ...mapInfo, crs: 'EPSG:3857' })));
+      }
+      if (url.indexOf('617580084.json') > -1) {
+        return Promise.resolve(new Response(msProjectINfo_L7Layers));
+      }
+      if (url.indexOf('/sprite') > -1) {
+        return Promise.resolve(new Response(msSpriteInfo));
+      }
+      if (url.indexOf('/web/datas/1052943054/structureddata/ogc-features/collections/all/items.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1052943054Items));
+      }
+      if (url.indexOf('/web/datas/1052943054/structureddata.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1052943054));
+      }
+      if (url.indexOf('/web/datas/1767084124/structureddata/ogc-features/collections/all/items.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1767084124Items));
+      }
+      if (url.indexOf('/web/datas/1767084124/structureddata.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1767084124));
+      }
+      return Promise.resolve();
+    });
+    mapstudioWebmap = new WebMap(
+      id,
+      {
+        server: server
+      }
+    );
+    mapstudioWebmap.once('mapcreatesucceeded', () => {
+      let layers = mapstudioWebmap.getLayers();
+      expect(layers.length).toBeGreaterThan(0);
+      expect(layers[0].title).toBe('3D格网热力');
+      expect(layers[0].visible).toBeTruthy();
+      mapstudioWebmap.toggleLayerVisible(layers[0].id, false);
+      layers = mapstudioWebmap.getLayers();
+      expect(layers[0].visible).toBeFalsy();
+      mapstudioWebmap.once('layerupdatechanged', () => {
+        layers = mapstudioWebmap.getLayers();
+        expect(layers[0].visible).toBeTruthy();
+        done();
+      });
+      mapstudioWebmap.setLayersVisible([layers[0]], 'visible');
+    });
+  });
 });
diff --git a/test/maplibregl/mapping/WebMapSpec.js b/test/maplibregl/mapping/WebMapSpec.js
index 0d6224103..995bc517e 100644
--- a/test/maplibregl/mapping/WebMapSpec.js
+++ b/test/maplibregl/mapping/WebMapSpec.js
@@ -1198,11 +1198,16 @@ describe('maplibregl_WebMap', () => {
           expect(layersOnMap[0].id).toBe('China4269@DataSource');
           expect(layersOnMap[1].id).toBe('未命名数据');
           expect(layersOnMap[2].id).toContain('未命名数据_');
+          const listenEvents = {};
+          spyOn(map, 'off').and.callFake((type, cb) => {
+            listenEvents[type] = cb;
+          });
           webMap2.cleanLayers();
           layersOnMap = map.getStyle().layers;
           expect(layersOnMap.length).toBe(2);
           expect(layersOnMap[0].id).toBe('China4269@DataSource');
           expect(layersOnMap[1].id).toBe('未命名数据');
+          expect(listenEvents.styledata).not.toBeUndefined();
           webMap1.cleanLayers();
           done();
         });
@@ -1210,4 +1215,33 @@ describe('maplibregl_WebMap', () => {
     };
     datavizWebmap.once('mapcreatesucceeded', callback);
   });
+
+  it('toggle mapstyle layers visible', (done) => {
+    const commonOption = {
+      server: 'http://fack:8190/iportal/',
+      target: 'map',
+      withCredentials: false
+    };
+    datavizWebmap = new WebMap(
+      '',
+      { ...commonOption },
+      mapOptionsList[0]
+    );
+    const callback = function () {
+      let layers = datavizWebmap.getLayers();
+      expect(layers.length).toBe(2);
+      expect(layers[0].id).toBe('China4269@DataSource');
+      expect(layers[0].visible).toBeTruthy();
+      datavizWebmap.toggleLayerVisible(layers[0].id, false);
+      layers = datavizWebmap.getLayers();
+      expect(layers[0].visible).toBeFalsy();
+      datavizWebmap.once('layerupdatechanged', () => {
+        layers = datavizWebmap.getLayers();
+        expect(layers[0].visible).toBeTruthy();
+        done();
+      });
+      datavizWebmap.setLayersVisible([layers[0]], 'visible');
+    };
+    datavizWebmap.once('mapcreatesucceeded', callback);
+  });
 });
diff --git a/test/maplibregl/mapping/WebMapV2Spec.js b/test/maplibregl/mapping/WebMapV2Spec.js
index d839f8518..0075afc94 100644
--- a/test/maplibregl/mapping/WebMapV2Spec.js
+++ b/test/maplibregl/mapping/WebMapV2Spec.js
@@ -2035,6 +2035,7 @@ describe('maplibregl_WebMapV2', () => {
         }
       };
       expect(data.map).toEqual(datavizWebmap._handler.map);
+      data.map.fire('styledata');
       const appreciableLayers2 = datavizWebmap.getLayers();
       expect(appreciableLayers2.length).toBe(uniqueLayer_polygon.layers.length + 1 + 2);
       data.map.addLayer({
@@ -2719,12 +2720,17 @@ describe('maplibregl_WebMapV2', () => {
           expect(layersOnMap[1].id).toBe('天地图影像-tdt-label');
           expect(layersOnMap[2].id).toBe('T202007210600');
           expect(layersOnMap[3].id).toBe('T202007210700');
+          const listenEvents = {};
+          spyOn(map, 'off').and.callFake((type, cb) => {
+            listenEvents[type] = cb;
+          });
           webMap2.cleanLayers();
           layersOnMap = map.getStyle().layers;
           expect(layersOnMap.length).toBe(3);
           expect(layersOnMap[0].id).toBe('天地图影像');
           expect(layersOnMap[1].id).toBe('天地图影像-tdt-label');
           expect(layersOnMap[2].id).toBe('T202007210600');
+          expect(listenEvents.styledata).not.toBeUndefined();
           webMap1.cleanLayers();
           done();
         });
@@ -2811,4 +2817,127 @@ describe('maplibregl_WebMapV2', () => {
     };
     datavizWebmap.on('mapcreatesucceeded', callback);
   });
+
+  it('toggle layers visible', (done) => {
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('portal.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+      }
+      if (url.indexOf('1788054202/map.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(mvtLayer)));
+      }
+      if (url.indexOf('web/datas/676516522/content.json') > -1) {
+        return Promise.resolve(new Response(layerData_CSV));
+      }
+      if (url.indexOf('ChinaqxAlberts_4548%40fl-new/style.json') > -1) {
+        const nextStyleJSON = JSON.parse(styleJson);
+        nextStyleJSON.layers.push({
+          layout: {
+            visibility: 'visible'
+          },
+          filter: ['all', ['==', '$type', 'Point']],
+          maxzoom: 24,
+          paint: {
+            'circle-radius': 2,
+            'circle-color': 'rgba(102,102,102,1.00)'
+          },
+          id: 'ChinaqxAlberts_4548@fl-new_point',
+          source: 'ChinaqxAlberts_4548@fl-new',
+          'source-layer': 'ChinaqxAlberts_4548@point',
+          type: 'circle',
+          minzoom: 0
+        });
+        return Promise.resolve(new Response(JSON.stringify(nextStyleJSON)));
+      }
+    });
+    datavizWebmap = new WebMap(id, { ...commonOption });
+    const callback = function () {
+      let layers = datavizWebmap.getLayers();
+      let layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers.length).toBe(4);
+      expect(layerCatalog.length).toBe(3);
+      expect(layers[1].id).toBe('ChinaqxAlberts_4548@fl-new');
+      expect(layers[2].id).toBe('ChinaqxAlberts_4548@point');
+      expect(layerCatalog[1].id).toBe('ChinaqxAlberts_4548@fl-new');
+      expect(layerCatalog[1].children[0].id).toBe('ChinaqxAlberts_4548@fl-new');
+      expect(layerCatalog[1].children[1].id).toBe('ChinaqxAlberts_4548@point');
+      expect(layers[1].visible).toBeTruthy();
+      expect(layers[2].visible).toBeTruthy();
+      expect(layerCatalog[1].children[0].visible).toBeTruthy();
+      expect(layerCatalog[1].children[1].visible).toBeTruthy();
+      datavizWebmap.toggleLayerVisible('ChinaqxAlberts_4548@point', false);
+      layers = datavizWebmap.getLayers();
+      layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers[1].visible).toBeTruthy();
+      expect(layers[2].visible).toBeFalsy();
+      expect(layerCatalog[1].visible).toBeTruthy();
+      expect(layerCatalog[1].children[1].visible).toBeFalsy();
+      expect(layers[3].id).toBe('民航数据');
+      expect(layerCatalog[0].id).toBe('民航数据');
+      expect(layers[3].visible).toBeTruthy();
+      expect(layerCatalog[0].visible).toBeTruthy();
+      datavizWebmap.toggleLayerVisible('民航数据', false);
+      layers = datavizWebmap.getLayers();
+      layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers[3].visible).toBeFalsy();
+      expect(layerCatalog[0].visible).toBeFalsy();
+      datavizWebmap.setLayersVisible([layers[1], layers[2], layers[3]], 'none');
+      layers = datavizWebmap.getLayers();
+      layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers[1].visible).toBeFalsy();
+      expect(layers[2].visible).toBeFalsy();
+      expect(layers[3].visible).toBeFalsy();
+      expect(layerCatalog[0].visible).toBeFalsy();
+      expect(layerCatalog[1].visible).toBeFalsy();
+      expect(layerCatalog[1].children[0].visible).toBeFalsy();
+      expect(layerCatalog[1].children[1].visible).toBeFalsy();
+      datavizWebmap.setLayersVisible([layers[1], layers[2], layers[3]], 'visible');
+      layers = datavizWebmap.getLayers();
+      layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers[1].visible).toBeTruthy();
+      expect(layers[2].visible).toBeTruthy();
+      expect(layers[3].visible).toBeTruthy();
+      expect(layerCatalog[0].visible).toBeTruthy();
+      expect(layerCatalog[1].visible).toBeTruthy();
+      expect(layerCatalog[1].children[0].visible).toBeTruthy();
+      expect(layerCatalog[1].children[1].visible).toBeTruthy();
+      done();
+    };
+    datavizWebmap.on('mapcreatesucceeded', callback);
+  });
+
+  it('WebMapV2 layerupdatechanged', (done) => {
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('portal.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+      }
+      if (url.indexOf('1788054202/map.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(mvtLayer)));
+      }
+      if (url.indexOf('web/datas/676516522/content.json') > -1) {
+        return Promise.resolve(new Response(layerData_CSV));
+      }
+      if (url.indexOf('ChinaqxAlberts_4548%40fl-new/style.json') > -1) {
+        return Promise.resolve(new Response(styleJson));
+      }
+    });
+    datavizWebmap = new WebMap(id, { ...commonOption });
+    const callback = function () {
+      let layers = datavizWebmap.getLayers();
+      let layerCatalog = datavizWebmap.getLayerCatalog();
+      expect(layers[2].id).toBe('民航数据');
+      expect(layerCatalog[0].id).toBe('民航数据');
+      expect(layers[2].visible).toBeTruthy();
+      expect(layerCatalog[0].visible).toBeTruthy();
+      datavizWebmap.once('layerupdatechanged', () => {
+        layers = datavizWebmap.getLayers();
+        layerCatalog = datavizWebmap.getLayerCatalog();
+        expect(layers[2].visible).toBeFalsy();
+        expect(layerCatalog[0].visible).toBeFalsy();
+        done();
+      });
+      datavizWebmap.toggleLayerVisible('民航数据', false);
+    };
+    datavizWebmap.on('mapcreatesucceeded', callback);
+  });
 });
diff --git a/test/maplibregl/mapping/WebMapV3Spec.js b/test/maplibregl/mapping/WebMapV3Spec.js
index 7b2a9af94..2b4cbf900 100644
--- a/test/maplibregl/mapping/WebMapV3Spec.js
+++ b/test/maplibregl/mapping/WebMapV3Spec.js
@@ -9,7 +9,7 @@ import { featureFilter, expression } from '@maplibre/maplibre-gl-style-spec';
 import spec from '@maplibre/maplibre-gl-style-spec/src/reference/v8';
 import { L7, L7Layer } from '../../../src/maplibregl/overlay/L7Layer';
 import * as mockL7 from '../../tool/mock_l7';
-import mbglmap from '../../tool/mock_maplibregl_map';
+import mbglmap, { CRS } from '../../tool/mock_maplibregl_map';
 import '../../resources/WebMapV3.js';
 import '../../resources/WebMapV5.js';
 
@@ -188,6 +188,7 @@ describe('maplibregl-webmap3.0', () => {
         id: 'ms-background12',
         type: 'background'
       });
+      map.fire('styledata');
       expect(map.getStyle().layers.length).toBe(mapInfo.layers.length + 1);
       expect(mapstudioWebmap.getLayers().length).toBe(appreciableLayers.length + 1);
       expect(mapstudioWebmap.getLayerCatalog().length).toBe(layerCatalogs.length + 1);
@@ -234,13 +235,7 @@ describe('maplibregl-webmap3.0', () => {
         wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'
       }
     };
-    maplibregl.CRS = function (epsgCode, wkt, bounds, unit) {
-      expect(epsgCode).toBe(nextMapInfo.crs.name);
-      expect(wkt).toBe(nextMapInfo.crs.wkt);
-      expect(bounds).toEqual(nextMapInfo.crs.extent);
-      expect(unit).toBe(nextMapInfo.crs.extent[2] > 180 ? 'meter' : 'degree');
-    };
-    maplibregl.CRS.set = function () {};
+    maplibregl.CRS = CRS;
     mapstudioWebmap = new WebMapV3(nextMapInfo, {
       server: server,
       target: 'map',
@@ -279,13 +274,7 @@ describe('maplibregl-webmap3.0', () => {
         wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'
       }
     };
-    maplibregl.CRS = function (epsgCode, wkt, bounds, unit) {
-      expect(epsgCode).toBe(nextMapInfo.crs.name);
-      expect(wkt).toBe(nextMapInfo.crs.wkt);
-      expect(bounds).toEqual(nextMapInfo.crs.extent);
-      expect(unit).toBe(nextMapInfo.crs.extent[2] > 180 ? 'meter' : 'degree');
-    };
-    maplibregl.CRS.set = function () {};
+    maplibregl.CRS = CRS;
     mapstudioWebmap = new WebMapV3(nextMapInfo, {
       server: server,
       target: 'map'
@@ -387,6 +376,7 @@ describe('maplibregl-webmap3.0', () => {
           type: 'custom'
         }
       };
+      map.fire('styledata');
       const validNum = 4;
       const appreciableLayers2 = mapstudioWebmap.getLayers();
       expect(appreciableLayers2.length).toBe(appreciableLayers.length + validNum);
@@ -521,8 +511,7 @@ describe('maplibregl-webmap3.0', () => {
       }
       return Promise.resolve();
     });
-    maplibregl.CRS = function () {};
-    maplibregl.CRS.set = function () {};
+    maplibregl.CRS = CRS;
     const mapOptions = {
       transformRequest: function (url) {
         return { url };
@@ -715,8 +704,7 @@ describe('maplibregl-webmap3.0', () => {
       }
       return Promise.resolve();
     });
-    maplibregl.CRS = function () {};
-    maplibregl.CRS.set = function () {};
+    maplibregl.CRS = CRS;
     mapstudioWebmap = new WebMap(id, {
       server: server
     });
@@ -768,8 +756,7 @@ describe('maplibregl-webmap3.0', () => {
       }
       return Promise.resolve();
     });
-    maplibregl.CRS = function () {};
-    maplibregl.CRS.set = function () {};
+    maplibregl.CRS = CRS;
     mapstudioWebmap = new WebMap(id, {
       server: server
     });
@@ -781,6 +768,7 @@ describe('maplibregl-webmap3.0', () => {
       let overlayLayers = Object.keys(map.overlayLayersManager);
       const idToCopy = 'ms_站点3_1715739627423_909';
       webmapInstance.copyLayer(idToCopy, { id: `${idToCopy}-SM-` }).then(() => {
+        map.fire('styledata');
         const currentOverlayLayers = Object.keys(map.overlayLayersManager);
         const currentAppreciableLayers = webmapInstance.getLayers();
         expect(currentOverlayLayers.length).toBe(overlayLayers.length + 1);
@@ -788,6 +776,7 @@ describe('maplibregl-webmap3.0', () => {
         appreciableLayers = currentAppreciableLayers;
         overlayLayers = currentOverlayLayers;
         webmapInstance.copyLayer(idToCopy).then(() => {
+          map.fire('styledata');
           const currentOverlayLayers = Object.keys(map.overlayLayersManager);
           const currentAppreciableLayers = webmapInstance.getLayers();
           expect(currentOverlayLayers.length).toBe(overlayLayers.length + 1);
@@ -888,8 +877,7 @@ describe('maplibregl-webmap3.0', () => {
       }
       return Promise.resolve();
     });
-    maplibregl.CRS = function () {};
-    maplibregl.CRS.set = function () {};
+    maplibregl.CRS = CRS;
     const mapOptions = {
       transformRequest: function (url) {
         return { url };
@@ -967,21 +955,17 @@ describe('maplibregl-webmap3.0', () => {
     });
     spyOn(maplibregl, 'Map').and.callFake(mbglmap);
     const mapInfo = JSON.parse(mapstudioWebMap_symbol);
+    const crsInfo = {
+      name: 'EPSG:4490',
+      extent: [-180, -270, 180, 90],
+      wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'
+    };
+    const crs = new CRS(crsInfo.name, crsInfo.wkt, crsInfo.extent, 'degree');
     const nextMapInfo = {
       ...mapInfo,
-      crs: {
-        name: 'EPSG:4490',
-        extent: [-180, -270, 180, 90],
-        wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'
-      }
-    };
-    maplibregl.CRS = function (epsgCode, wkt, bounds, unit) {
-      expect(epsgCode).toBe(nextMapInfo.crs.name);
-      expect(wkt).toBe(nextMapInfo.crs.wkt);
-      expect(bounds).toEqual(nextMapInfo.crs.extent);
-      expect(unit).toBe(nextMapInfo.crs.extent[2] > 180 ? 'meter' : 'degree');
+      crs: crsInfo
     };
-    maplibregl.CRS.set = function () {};
+    maplibregl.CRS = CRS;
     mapstudioWebmap = new WebMapV3(nextMapInfo, {
       server: server,
       target: 'map'
@@ -1001,7 +985,7 @@ describe('maplibregl-webmap3.0', () => {
           }
         ]
       },
-      crs: 'EPSG:4490',
+      crs,
       center: [116.640545, 40.531714],
       zoom: 7
     });
@@ -1186,11 +1170,16 @@ describe('maplibregl-webmap3.0', () => {
           expect(layersOnMap[0].id).toBe('CHINA_DARK');
           expect(layersOnMap[1].id).toBe('PopulationDistribution');
           expect(layersOnMap[2].id).toBe('未命名数据');
+          const listenEvents = {};
+          spyOn(map, 'off').and.callFake((type, cb) => {
+            listenEvents[type] = cb;
+          });
           webMap2.cleanLayers();
           layersOnMap = map.getStyle().layers;
           expect(layersOnMap.length).toBe(2);
           expect(layersOnMap[0].id).toBe('CHINA_DARK');
           expect(layersOnMap[1].id).toBe('PopulationDistribution');
+          expect(listenEvents.styledata).not.toBeUndefined();
           webMap1.cleanLayers();
           done();
         });
@@ -1259,4 +1248,63 @@ describe('maplibregl-webmap3.0', () => {
       });
     });
   });
+  
+  it('toggle WebMapV3 layers visible', (done) => {
+    spyOn(MapManagerUtil, 'default').and.callFake(mbglmap);
+    const mapInfo = JSON.parse(mapstudioWebMap_L7Layers);
+    spyOn(L7, 'PointLayer').and.callFake(mockL7.PointLayer);
+    spyOn(L7, 'LineLayer').and.callFake(mockL7.PointLayer);
+    spyOn(L7, 'PolygonLayer').and.callFake(mockL7.PointLayer);
+    spyOn(L7, 'HeatmapLayer').and.callFake(mockL7.PointLayer);
+    spyOn(L7, 'Scene').and.callFake(mockL7.Scene);
+    spyOn(L7, 'Maplibre').and.callFake(mockL7.Maplibre);
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('web/config/portal.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+      }
+      if (url.indexOf('map.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify({ ...mapInfo, crs: 'EPSG:3857' })));
+      }
+      if (url.indexOf('617580084.json') > -1) {
+        return Promise.resolve(new Response(msProjectINfo_L7Layers));
+      }
+      if (url.indexOf('/sprite') > -1) {
+        return Promise.resolve(new Response(msSpriteInfo));
+      }
+      if (url.indexOf('/web/datas/1052943054/structureddata/ogc-features/collections/all/items.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1052943054Items));
+      }
+      if (url.indexOf('/web/datas/1052943054/structureddata.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1052943054));
+      }
+      if (url.indexOf('/web/datas/1767084124/structureddata/ogc-features/collections/all/items.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1767084124Items));
+      }
+      if (url.indexOf('/web/datas/1767084124/structureddata.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1767084124));
+      }
+      return Promise.resolve();
+    });
+    mapstudioWebmap = new WebMap(
+      id,
+      {
+        server: server
+      }
+    );
+    mapstudioWebmap.once('mapcreatesucceeded', () => {
+      let layers = mapstudioWebmap.getLayers();
+      expect(layers.length).toBeGreaterThan(0);
+      expect(layers[0].title).toBe('3D格网热力');
+      expect(layers[0].visible).toBeTruthy();
+      mapstudioWebmap.toggleLayerVisible(layers[0].id, false);
+      layers = mapstudioWebmap.getLayers();
+      expect(layers[0].visible).toBeFalsy();
+      mapstudioWebmap.once('layerupdatechanged', () => {
+        layers = mapstudioWebmap.getLayers();
+        expect(layers[0].visible).toBeTruthy();
+        done();
+      });
+      mapstudioWebmap.setLayersVisible([layers[0]], 'visible');
+    });
+  });
 });
diff --git a/test/resources/WebMapV3.js b/test/resources/WebMapV3.js
index b3801d194..d0d864871 100644
--- a/test/resources/WebMapV3.js
+++ b/test/resources/WebMapV3.js
@@ -213,7 +213,7 @@ mapstudioWebMap_raster_append.layers.push({
 });
 mapstudioWebMap_raster_append.sources['ms_424149619_1725240548192_22'] = {
   "tiles": [
-    "http://172.16.14.44:8190/iportal/web/datas/424149619/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=4269&returnedFieldNames=%5B%22smpid%22%2C%22%E6%96%B0%E5%BB%BA%E5%AD%97%E6%AE%B5%22%5D&geometryFieldName=geometry"
+    "http://localhost:8190/iportal/web/datas/424149619/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=4269&returnedFieldNames=%5B%22smpid%22%2C%22%E6%96%B0%E5%BB%BA%E5%AD%97%E6%AE%B5%22%5D&geometryFieldName=geometry"
   ],
   "bounds": [
     97.89133489467912,
@@ -2248,7 +2248,7 @@ var apstudioWebMap_layerData = JSON.stringify({
   center: [116.39560889343761, 39.939177386003514],
   zoom: 9.789811175067591,
   glyphs: {
-    "ms_M_3857_1719917169016_4": "http://172.16.14.44:8090/iserver/services/map-multi0508/rest/maps/M_3857/tileFeature/sdffonts/{fontstack}/{range}.pbf"
+    "ms_M_3857_1719917169016_4": "http://localhost:8090/iserver/services/map-multi0508/rest/maps/M_3857/tileFeature/sdffonts/{fontstack}/{range}.pbf"
   },
   version: '3.2.1',
   rootUrl: 'http://localhost:8190/iportal/',
@@ -3006,3 +3006,235 @@ var mapstudioWebMap_group = JSON.stringify({
   minzoom: 0
 });
 
+var mapstudioWebMap_chart = JSON.stringify({
+  metadata: {
+    layerCatalog: [
+      {
+        visible: true,
+        id: '中国金牌个人获奖者(1)',
+        title: '中国金牌个人获奖者(1)',
+        type: 'basic'
+      },
+      {
+        visible: true,
+        id: '北京市轨道交通站点(13)(2)(2)',
+        title: '北京市轨道交通站点(13)(2)(2)',
+        type: 'basic'
+      },
+      {
+        visible: true,
+        id: '上海市可校外学习中心',
+        title: '上海市可校外学习中心',
+        type: 'basic'
+      },
+      {
+        visible: true,
+        id: 'CHINA_DARK',
+        title: '中国暗色地图',
+        type: 'basic'
+      }
+    ]
+  },
+  sources: {
+    ms_aggregation_540737853_1722501097217_19: {
+      tiles: [
+        'http://localhost:8190/iportal/web/datas/540737853/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%221111%E6%A0%87%E5%87%86%E5%90%8D%E7%A7%B0%22%2C%22SmID%22%2C%22SmGeometrySize%22%2C%221111SmUserID%22%2C%22SmY%22%2C%22SmGeoPosition%22%2C%22SmX%22%2C%22SmLibTileID%22%5D&geometryFieldName=geometry'
+      ],
+      promoteId: 'smpid',
+      bounds: [115.7011413574, 39.67036946821771, 116.68625288435837, 40.20693349910422],
+      type: 'vector'
+    },
+    CHINA_DARK: {
+      tiles: ['base/resources/img/baiduTileTest.png'],
+      tileSize: 256,
+      attribution: '',
+      bounds: [-180, -90, 180, 90],
+      type: 'raster'
+    },
+    ms_888034348_1725355972367_27: {
+      data: {
+        dataId: '888034348',
+        type: 'supermap-structured-data'
+      },
+      type: 'geojson'
+    },
+    ms_166109479_1722479600981_16: {
+      tiles: [
+        'http://localhost:8190/iportal/web/datas/166109479/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%22%EF%BB%BF%E5%BA%8F%E5%8F%B7%22%2C%22%E8%AF%95%E7%82%B9%E9%AB%98%E6%A0%A1%22%2C%22%E4%BE%9D%E6%89%98%E5%8D%95%E4%BD%8D%22%2C%22%E5%AD%A6%E4%B9%A0%E4%B8%AD%E5%BF%83%EF%BC%88%E7%82%B9%EF%BC%89%E5%90%8D%E7%A7%B0%22%2C%22%E5%9C%B0%E5%9D%80%22%2C%22%E7%BB%8F%E5%BA%A6%22%2C%22%E7%BA%AC%E5%BA%A6%22%5D&geometryFieldName=msgeometry'
+      ],
+      promoteId: 'smpid',
+      bounds: [121.12147, 30.71292682, 121.83081, 31.68730001],
+      type: 'vector'
+    }
+  },
+  crs: 'EPSG:3857',
+  center: [114.17168115786558, 40.011878247221134],
+  zoom: 3.344304922515933,
+  glyphs: {},
+  version: '3.2.2',
+  rootUrl: 'http://localhost:8190/iportal/',
+  maxzoom: 12,
+  name: '热力图_ms_副本_副本',
+  viewExtent: [-16.213704077664914, 4.747006432155186, 244.5570663933873, 85.05112877980656],
+  layers: [
+    {
+      maxzoom: 12,
+      id: 'CHINA_DARK',
+      source: 'CHINA_DARK',
+      type: 'raster',
+      minzoom: 0
+    },
+    {
+      layout: {
+        visibility: 'visible',
+        'radar-animate-speed': 3
+      },
+      metadata: {
+        MapStudio: {
+          title: '上海市可校外学习中心'
+        }
+      },
+      maxzoom: 24,
+      paint: {
+        'radar-radius': 30,
+        'radar-color': 'rgba(248,231,28,1)',
+        'radar-opacity': 0.9
+      },
+      source: 'ms_166109479_1722479600981_16',
+      'source-layer': '166109479$msgeometry',
+      id: '上海市可校外学习中心',
+      type: 'radar',
+      minzoom: 0
+    },
+    {
+      layout: {
+        visibility: 'visible',
+        'point-extrusion-shape': 'cylinder'
+      },
+      metadata: {
+        MapStudio: {
+          title: '北京市轨道交通站点(13)(2)(2)'
+        }
+      },
+      maxzoom: 24,
+      paint: {
+        'point-extrusion-width': 12,
+        'point-extrusion-height': 200,
+        'point-extrusion-target-color': 'rgba(126,211,33,1)',
+        'point-extrusion-source-color': 'rgba(74,144,226,1)',
+        'point-extrusion-opacity': 1,
+        'point-extrusion-length': 12,
+        'point-extrusion-color': '#EE4D5A'
+      },
+      source: 'ms_aggregation_540737853_1722501097217_19',
+      'source-layer': '540737853$geometry',
+      id: '北京市轨道交通站点(13)(2)(2)',
+      type: 'point-extrusion',
+      minzoom: 0
+    },
+    {
+      layout: {
+        visibility: 'visible',
+        'chart-type': 'bar',
+        'chart-attribute-color': [['金牌', '#008080']]
+      },
+      metadata: {
+        MapStudio: {
+          title: '中国金牌个人获奖者(1)'
+        }
+      },
+      maxzoom: 24,
+      paint: {
+        'chart-width': 100,
+        'chart-yAxis-grid': false,
+        'chart-xAxis-label': true,
+        'chart-background-color': '',
+        'chart-height': 50,
+        'chart-xAxis-line': true,
+        'chart-yAxis-label': true,
+        'chart-xAxis-grid': false,
+        'chart-yAxis-line': true
+      },
+      source: 'ms_888034348_1725355972367_27',
+      id: '中国金牌个人获奖者(1)',
+      type: 'chart',
+      minzoom: 0
+    }
+  ],
+  pitch: 60,
+  minzoom: 0
+});
+
+var msProjectINfo_chart = JSON.stringify({
+  "extent": {
+      "top": 85.05112877980656,
+      "left": -16.213704077664914,
+      "bottom": 4.747006432155186,
+      "leftBottom": {
+          "x": -16.213704077664914,
+          "y": 4.747006432155186
+      },
+      "right": 244.5570663933873,
+      "rightTop": {
+          "x": 244.5570663933873,
+          "y": 85.05112877980656
+      }
+  },
+  "controls": null,
+  "extentString": "{\"top\":85.05112877980656,\"left\":-16.213704077664914,\"bottom\":4.747006432155186,\"leftBottom\":{\"x\":-16.213704077664914,\"y\":4.747006432155186},\"right\":244.5570663933873,\"rightTop\":{\"x\":244.5570663933873,\"y\":85.05112877980656}}",
+  "description": "",
+  "verifyReason": null,
+  "units": null,
+  "title": "热力图_ms_副本_副本",
+  "resolution": 0,
+  "checkStatus": "SUCCESSFUL",
+  "projectInfo": "{\"catalogs\":[{\"visualization\":{\"renderer\":[{\"yAxis\":{\"type\":\"simple\",\"value\":{\"grid\":false,\"line\":true,\"label\":true}},\"xAxis\":{\"type\":\"simple\",\"value\":{\"grid\":false,\"line\":true,\"label\":true}},\"background\":{\"type\":\"simple\",\"value\":\"\"},\"colorGroup\":{\"type\":\"simple\",\"value\":[\"#008080\",\"#70a494\",\"#b4c8a8\",\"#f6edbd\",\"#edbb8a\",\"#de8a5a\",\"#ca562c\"]},\"width\":{\"type\":\"simple\",\"value\":100},\"fields\":{\"type\":\"simple\",\"value\":{\"金牌\":\"#008080\"}},\"type\":\"barChartPoint\",\"height\":{\"type\":\"simple\",\"value\":50},\"styleRenderMode\":\"antvL7\"}]},\"visible\":true,\"catalogType\":\"layer\",\"msDatasetId\":\"ms_datasetId_1725355972321_25\",\"bounds\":[102.94558694500006,13.242680169595069,122.3133808125001,45.369677724101784],\"labelsContent\":[],\"id\":\"中国金牌个人获奖者(1)\",\"popupInfo\":{\"elements\":[{\"fieldName\":\"smpid\",\"type\":\"FIELD\"},{\"fieldName\":\"省份\",\"type\":\"FIELD\"},{\"fieldName\":\"金牌\",\"type\":\"FIELD\"},{\"fieldName\":\"详情\",\"type\":\"FIELD\"},{\"fieldName\":\"geometry\",\"type\":\"FIELD\"}],\"title\":\"中国金牌个人获奖者(1)\"},\"title\":\"中国金牌个人获奖者(1)\",\"layerSourceType\":\"Data\",\"zoomRange\":[0,24],\"layersContent\":[]},{\"visualization\":{\"renderer\":[{\"heightMultiple\":{\"type\":\"simple\",\"value\":10},\"targetColor\":{\"type\":\"simple\",\"value\":\"rgba(126,211,33,1)\"},\"shape\":{\"type\":\"simple\",\"value\":\"cylinder\"},\"color\":{\"type\":\"simple\",\"value\":\"#EE4D5A\"},\"size\":{\"type\":\"simple\",\"value\":12},\"opacity\":{\"type\":\"simple\",\"value\":1},\"type\":\"column\",\"height\":{\"type\":\"simple\",\"value\":20},\"sourceColor\":{\"type\":\"simple\",\"value\":\"rgba(74,144,226,1)\"},\"styleRenderMode\":\"antvL7\"}]},\"visible\":true,\"catalogType\":\"layer\",\"msDatasetId\":\"ms_datasetId_1722479400680_17\",\"bounds\":[115.7011413574,39.67036946821771,116.68625288435837,40.20693349910422],\"labelsContent\":[],\"id\":\"北京市轨道交通站点(13)(2)(2)\",\"popupInfo\":{\"elements\":[{\"fieldName\":\"smpid\",\"type\":\"FIELD\"},{\"fieldName\":\"1111标准名称\",\"type\":\"FIELD\"},{\"fieldName\":\"SmID\",\"type\":\"FIELD\"},{\"fieldName\":\"SmGeometrySize\",\"type\":\"FIELD\"},{\"fieldName\":\"1111SmUserID\",\"type\":\"FIELD\"},{\"fieldName\":\"SmY\",\"type\":\"FIELD\"},{\"fieldName\":\"SmGeoPosition\",\"type\":\"FIELD\"},{\"fieldName\":\"SmX\",\"type\":\"FIELD\"},{\"fieldName\":\"SmLibTileID\",\"type\":\"FIELD\"},{\"fieldName\":\"geometry\",\"type\":\"FIELD\"}],\"title\":\"北京市轨道交通站点(13)(2)(2)\"},\"title\":\"北京市轨道交通站点(13)(2)(2)\",\"layerSourceType\":\"Data\",\"zoomRange\":[0,24],\"layersContent\":[]},{\"visualization\":{\"renderer\":[{\"size\":{\"type\":\"simple\",\"value\":60},\"color\":{\"type\":\"simple\",\"value\":\"rgba(248,231,28,1)\"},\"opacity\":{\"type\":\"simple\",\"value\":0.9},\"type\":\"radarPoint\",\"speed\":{\"type\":\"simple\",\"value\":3},\"styleRenderMode\":\"antvL7\"}]},\"visible\":true,\"catalogType\":\"layer\",\"msDatasetId\":\"ms_datasetId_1722479600922_14\",\"bounds\":[121.12147,30.71292682,121.83081,31.68730001],\"labelsContent\":[],\"id\":\"上海市可校外学习中心\",\"popupInfo\":{\"elements\":[{\"fieldName\":\"smpid\",\"type\":\"FIELD\"},{\"fieldName\":\"序号\",\"type\":\"FIELD\"},{\"fieldName\":\"试点高校\",\"type\":\"FIELD\"},{\"fieldName\":\"依托单位\",\"type\":\"FIELD\"},{\"fieldName\":\"学习中心（点）名称\",\"type\":\"FIELD\"},{\"fieldName\":\"地址\",\"type\":\"FIELD\"},{\"fieldName\":\"经度\",\"type\":\"FIELD\"},{\"fieldName\":\"纬度\",\"type\":\"FIELD\"},{\"fieldName\":\"msgeometry\",\"type\":\"FIELD\"}],\"title\":\"上海市可校外学习中心\"},\"title\":\"上海市可校外学习中心\",\"layerSourceType\":\"Data\",\"zoomRange\":[0,24],\"layersContent\":[]}],\"datas\":[{\"sourceType\":\"STRUCTURE_DATA\",\"datasets\":[{\"datasetTitle\":\"北京市轨道交通站点(13)(2)(2)\",\"msDatasetId\":\"ms_datasetId_1722479400680_17\",\"datasetId\":\"540737853\",\"geometryField\":\"geometry\"}],\"title\":\"北京市轨道交通站点(13)(2)(2)\"},{\"sourceType\":\"STRUCTURE_DATA\",\"datasets\":[{\"datasetTitle\":\"上海市可校外学习中心\",\"msDatasetId\":\"ms_datasetId_1722479600922_14\",\"datasetId\":\"166109479\",\"geometryField\":\"msgeometry\"}],\"title\":\"上海市可校外学习中心\"},{\"sourceType\":\"STRUCTURE_DATA\",\"datasets\":[{\"datasetTitle\":\"中国金牌个人获奖者(1)\",\"msDatasetId\":\"ms_datasetId_1725355972321_25\",\"datasetId\":\"888034348\",\"geometryField\":\"geometry\"}],\"title\":\"中国金牌个人获奖者(1)\"}],\"baseLayer\":{\"internetMapName\":\"CHINA_DARK\",\"type\":\"INTERNET_MAP\"},\"version\":\"3.0.4\"}",
+  "visitCount": 0,
+  "centerString": "{\"x\":114.17168115786558,\"y\":40.011878247221134}",
+  "epsgCode": 3857,
+  "nickname": "admin_123",
+  "layers": null,
+  "id": 411950022,
+  "searchSetting": null,
+  "thumbnail": "http://localhost:8190/iportal/web/static/portal/img/map/defaultThumbnail.png",
+  "level": 3,
+  "center": {
+      "x": 114.17168115786558,
+      "y": 40.011878247221134
+  },
+  "authorizeSetting": [
+      {
+          "permissionType": "DELETE",
+          "aliasName": "admin_123",
+          "entityRoles": [
+              "ADMIN",
+              "SYSTEM"
+          ],
+          "entityType": "USER",
+          "entityName": "admin_123",
+          "entityId": null
+      },
+      {
+          "permissionType": "READ",
+          "aliasName": "GUEST",
+          "entityRoles": [],
+          "entityType": "USER",
+          "entityName": "GUEST",
+          "entityId": null
+      }
+  ],
+  "updateTime": 1726304785664,
+  "userName": "admin_123",
+  "tags": [
+      "2.0测试"
+  ],
+  "checkUser": null,
+  "checkUserNick": null,
+  "checkTime": null,
+  "sourceType": "MAPSTUDIO",
+  "createTime": 1726304784922,
+  "controlsString": "",
+  "isDefaultBottomMap": false,
+  "status": null,
+  "favoriteCount": 0
+})
\ No newline at end of file
diff --git a/test/tool/mock_mapboxgl_map.js b/test/tool/mock_mapboxgl_map.js
index 86d64b54e..ac3786d17 100644
--- a/test/tool/mock_mapboxgl_map.js
+++ b/test/tool/mock_mapboxgl_map.js
@@ -104,7 +104,18 @@ const Map = function (options) {
     this[setters[i]] = genericSetter;
   }
 
-  this.setLayoutProperty = function (layerid) {};
+  this.setLayoutProperty = function (layerId, attr, value) {
+    if (this._layers[layerId]) {
+      this._layers[layerId].layout = this._layers[layerId].layout || {};
+      this._layers[layerId].layout[attr] = value;
+    }
+    const matchLayer = this._layersList.find(item => item.id === layerId);
+    if (matchLayer) {
+      matchLayer.layout = matchLayer.layout || {};
+      matchLayer.layout[attr] = value;
+      this.fire('styledata');
+    }
+  };
   this.setLayoutPropertyBySymbolBak = function (layerid) {};
 
   this.addControl = function (control) {
@@ -190,6 +201,7 @@ const Map = function (options) {
     if (layer.render) {
       layer.render();
     }
+    this.fire('styledata');
     return this;
   };
 
@@ -377,7 +389,7 @@ const Map = function (options) {
   this.getCRS = () => {
     if (!this._crs) {
       if (this.options.crs && typeof this.options.crs !== 'string') {
-        this._crs = CRS.get(this.options.crs);
+        this._crs = this.options.crs;
       } else {
         this._crs = CRS.get(this.options.crs || 'EPSG:3857');
       }
diff --git a/test/tool/mock_maplibregl_map.js b/test/tool/mock_maplibregl_map.js
index dad29dc59..2072d89e9 100644
--- a/test/tool/mock_maplibregl_map.js
+++ b/test/tool/mock_maplibregl_map.js
@@ -104,7 +104,18 @@ const Map = function (options) {
     this[setters[i]] = genericSetter;
   }
 
-  this.setLayoutProperty = function (layerid) {};
+  this.setLayoutProperty = function (layerId, attr, value) {
+    if (this._layers[layerId]) {
+      this._layers[layerId].layout = this._layers[layerId].layout || {};
+      this._layers[layerId].layout[attr] = value;
+    }
+    const matchLayer = this._layersList.find(item => item.id === layerId);
+    if (matchLayer) {
+      matchLayer.layout = matchLayer.layout || {};
+      matchLayer.layout[attr] = value;
+      this.fire('styledata');
+    }
+  };
   this.setLayoutPropertyBySymbolBak = function (layerid) {};
 
   this.addControl = function (control) {
@@ -190,6 +201,7 @@ const Map = function (options) {
     if (layer.render) {
       layer.render();
     }
+    this.fire('styledata');
     return this;
   };
 
@@ -377,7 +389,7 @@ const Map = function (options) {
   this.getCRS = () => {
     if (!this._crs) {
       if (this.options.crs && typeof this.options.crs !== 'string') {
-        this._crs = CRS.get(this.options.crs);
+        this._crs = this.options.crs;
       } else {
         this._crs = CRS.get(this.options.crs || 'EPSG:3857');
       }