diff --git a/src/common/commontypes/Util.js b/src/common/commontypes/Util.js
index c6cc5621e..a11e1a8b3 100644
--- a/src/common/commontypes/Util.js
+++ b/src/common/commontypes/Util.js
@@ -1086,6 +1086,30 @@ const Util = {
       }
       return encodeURIComponent(value);
     });
+  },
+  /**
+    * @description 十六进制转 RGBA 格式。
+    * @param {Object} hex - 十六进制格式。
+    * @param {number} opacity - 不透明度Alpha。
+    * @returns {string} 生成的 RGBA 格式。
+    */
+  hexToRgba(hex, opacity) {
+      var color = [],
+          rgba = [];
+      hex = hex.replace(/#/, "");
+      if (hex.length == 3) {
+          var tmp = [];
+          for (let i = 0; i < 3; i++) {
+              tmp.push(hex.charAt(i) + hex.charAt(i));
+          }
+          hex = tmp.join("");
+      }
+      for (let i = 0; i < 6; i += 2) {
+          color[i] = "0x" + hex.substr(i, 2);
+          rgba.push(parseInt(Number(color[i])));
+      }
+      rgba.push(opacity);
+      return "rgba(" + rgba.join(",") + ")";
   }
 };
 
diff --git a/src/common/mapping/WebMapV2.js b/src/common/mapping/WebMapV2.js
index 375d36636..247fa58c6 100644
--- a/src/common/mapping/WebMapV2.js
+++ b/src/common/mapping/WebMapV2.js
@@ -17,7 +17,7 @@ const INTERNET_MAP_BOUNDS = {
   BING: [-180, -90, 180, 90]
 } 
 
-export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
+export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataFlowService, GraticuleLayer }) {
   return class WebMapV2 extends SuperClass {
     constructor(
       id,
@@ -537,7 +537,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
 
     _initGraticuleLayer(graticuleInfo) {
       const options = this._createGraticuleOptions(graticuleInfo);
-      const graticuleLayer = new mapRepo.supermap.GraticuleLayer(options);
+      const graticuleLayer = new GraticuleLayer(options);
       this._setGraticuleDash(options.strokeStyle, graticuleLayer);
       this._graticuleLayer = graticuleLayer;
       this.map.addLayer(graticuleLayer);
@@ -950,7 +950,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
     }
 
     _createDataflowLayer(layerInfo) {
-      const dataflowService = new mapRepo.supermap.DataFlowService(layerInfo.wsUrl).initSubscribe();
+      const dataflowService = new DataFlowService(layerInfo.wsUrl).initSubscribe();
       this._handleDataflowFeaturesCallback = this._handleDataflowFeatures.bind(this, layerInfo);
       this._initDataflowLayerCallback = this._initDataflowLayer.bind(this, layerInfo);
       dataflowService.on('subscribesucceeded', this._initDataflowLayerCallback);
@@ -2179,10 +2179,10 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
       layerOption.gradient.forEach((item, index) => {
         color.push(step[index]);
         if (index === 0) {
-          item = mapRepo.supermap.Util.hexToRgba(item, 0);
+          item = Util.hexToRgba(item, 0);
         }
         if (index === 1) {
-          item = mapRepo.supermap.Util.hexToRgba(item, 0.5);
+          item = Util.hexToRgba(item, 0.5);
         }
         color.push(item);
       });
diff --git a/src/mapboxgl/mapping/WebMap.js b/src/mapboxgl/mapping/WebMap.js
index a9d022835..03cb934eb 100644
--- a/src/mapboxgl/mapping/WebMap.js
+++ b/src/mapboxgl/mapping/WebMap.js
@@ -10,6 +10,8 @@ import { featureFilter, expression } from '@mapbox/mapbox-gl-style-spec';
 import spec from '@mapbox/mapbox-gl-style-spec/reference/v8';
 import { L7Layer, L7 } from '../overlay/L7Layer';
 import MapManager from './webmap/MapManager';
+import { DataFlowService } from '../services/DataFlowService';
+import { GraticuleLayer } from '../overlay/GraticuleLayer';
 
 /**
   * @class WebMap
@@ -71,7 +73,7 @@ import MapManager from './webmap/MapManager';
  */
 export class WebMap extends createWebMapBaseExtending(mapboxgl.Evented, { mapRepo: mapboxgl }) {
   _createWebMapFactory(type) {
-    const commonFactoryOptions = { MapManager, mapRepo: mapboxgl, mapRepoName: 'mapbox-gl' };
+    const commonFactoryOptions = { MapManager, mapRepo: mapboxgl, mapRepoName: 'mapbox-gl', DataFlowService, GraticuleLayer };
     const l7LayerUtil = L7LayerUtil({ featureFilter, expression, spec, L7Layer, L7, proj4: this.options.proj4 });
     switch (type) {
       case 'MapStyle':
diff --git a/src/maplibregl/mapping/WebMap.js b/src/maplibregl/mapping/WebMap.js
index 1bdf11531..92339ba2e 100644
--- a/src/maplibregl/mapping/WebMap.js
+++ b/src/maplibregl/mapping/WebMap.js
@@ -10,6 +10,8 @@ import { featureFilter, expression } from '@maplibre/maplibre-gl-style-spec';
 import spec from '@maplibre/maplibre-gl-style-spec/src/reference/v8';
 import { L7Layer, L7 } from '../overlay/L7Layer';
 import MapManager from './webmap/MapManager';
+import { DataFlowService } from '../services/DataFlowService';
+import { GraticuleLayer } from '../overlay/GraticuleLayer';
 
 /**
   * @class WebMap
@@ -71,7 +73,7 @@ import MapManager from './webmap/MapManager';
  */
 export class WebMap extends createWebMapBaseExtending(maplibregl.Evented, { mapRepo: maplibregl }) {
   _createWebMapFactory(type) {
-    const commonFactoryOptions = { MapManager, mapRepo: maplibregl, mapRepoName: 'maplibre-gl' };
+    const commonFactoryOptions = { MapManager, mapRepo: maplibregl, mapRepoName: 'maplibre-gl', DataFlowService, GraticuleLayer };
     const l7LayerUtil = L7LayerUtil({ featureFilter, expression, spec, L7Layer, L7, proj4: this.options.proj4 });
     switch (type) {
       case 'MapStyle':
diff --git a/test/mapboxgl/mapping/WebMapV2Spec.js b/test/mapboxgl/mapping/WebMapV2Spec.js
index 993363fe0..58527a235 100644
--- a/test/mapboxgl/mapping/WebMapV2Spec.js
+++ b/test/mapboxgl/mapping/WebMapV2Spec.js
@@ -4,6 +4,7 @@ import { WebMap } from '../../../src/mapboxgl/mapping/WebMap';
 import * as MapManagerUtil from '../../../src/mapboxgl/mapping/webmap/MapManager';
 import { ArrayStatistic } from '@supermapgis/iclient-common/util/ArrayStatistic';
 import { FetchRequest } from '@supermapgis/iclient-common/util/FetchRequest';
+import * as DataFlowServiceUtil from '../../../src/mapboxgl/services/DataFlowService';
 import '../../resources/WebMapV5.js';
 
 function DataFlowService(serviceUrl) {
@@ -189,8 +190,10 @@ describe('mapboxgl_WebMapV2', () => {
       getNorth: () => -1
     }
   };
+  var dataFlowServiceSpyTest;
   beforeEach(() => {
     spyOn(MapManagerUtil, 'default').and.callFake(mbglmap);
+    dataFlowServiceSpyTest = spyOn(DataFlowServiceUtil, 'DataFlowService').and.callFake(DataFlowService);
     mapboxgl.CRS = CRS;
     commonMap = {
       style: {},
@@ -344,6 +347,7 @@ describe('mapboxgl_WebMapV2', () => {
     window.canvg = undefined;
     window.geostats = undefined;
     window.EchartsLayer = undefined;
+    dataFlowServiceSpyTest = null;
   });
 
   xit('_setCRS', (done) => {
@@ -1254,12 +1258,11 @@ describe('mapboxgl_WebMapV2', () => {
       }
       return Promise.resolve();
     });
-    const spyTest = spyOn(mapboxgl.supermap, 'DataFlowService').and.callFake(DataFlowService);
     datavizWebmap = new WebMap(dataflowLayer, { ...commonOption, map: commonMap }, undefined);
     const callback = function (data) {
       if (data.allLoaded) {
         const appreciableLayers = datavizWebmap.getLayers();
-        expect(spyTest.calls.count()).toBe(dataflowLayer.layers.length);
+        expect(dataFlowServiceSpyTest.calls.count()).toBe(dataflowLayer.layers.length);
         expect(appreciableLayers.length).toBe(dataflowLayer.layers.length + 1);
         const updateLayer = { ...dataflowLayer.layers[2], id: appreciableLayers[3].renderLayers[0] };
         datavizWebmap.updateOverlayLayer(updateLayer);
diff --git a/test/maplibregl/mapping/WebMapV2Spec.js b/test/maplibregl/mapping/WebMapV2Spec.js
index 2ebd804fb..7391045a2 100644
--- a/test/maplibregl/mapping/WebMapV2Spec.js
+++ b/test/maplibregl/mapping/WebMapV2Spec.js
@@ -4,6 +4,7 @@ import { WebMap } from '../../../src/maplibregl/mapping/WebMap';
 import * as MapManagerUtil from '../../../src/maplibregl/mapping/webmap/MapManager';
 import { ArrayStatistic } from '@supermapgis/iclient-common/util/ArrayStatistic';
 import { FetchRequest } from '@supermapgis/iclient-common/util/FetchRequest';
+import * as DataFlowServiceUtil from '../../../src/maplibregl/services/DataFlowService';
 import '../../resources/WebMapV5.js';
 
 function DataFlowService(serviceUrl) {
@@ -189,8 +190,10 @@ describe('maplibregl_WebMapV2', () => {
       getNorth: () => -1
     }
   };
+  var dataFlowServiceSpyTest;
   beforeEach(() => {
     spyOn(MapManagerUtil, 'default').and.callFake(mbglmap);
+    dataFlowServiceSpyTest = spyOn(DataFlowServiceUtil, 'DataFlowService').and.callFake(DataFlowService);
     maplibregl.CRS = CRS;
     commonMap = {
       style: {},
@@ -1193,12 +1196,11 @@ describe('maplibregl_WebMapV2', () => {
       }
       return Promise.resolve();
     });
-    const spyTest = spyOn(maplibregl.supermap, 'DataFlowService').and.callFake(DataFlowService);
     datavizWebmap = new WebMap(dataflowLayer, { ...commonOption, map: commonMap }, undefined);
     const callback = function (data) {
       if (data.allLoaded) {
         const appreciableLayers = datavizWebmap.getLayers();
-        expect(spyTest.calls.count()).toBe(dataflowLayer.layers.length);
+        expect(dataFlowServiceSpyTest.calls.count()).toBe(dataflowLayer.layers.length);
         expect(appreciableLayers.length).toBe(dataflowLayer.layers.length + 1);
         const updateLayer = { ...dataflowLayer.layers[2], id: appreciableLayers[3].renderLayers[0] };
         datavizWebmap.updateOverlayLayer(updateLayer);