diff --git a/src/app/data-collection/fire-force/fire-force.component.ts b/src/app/data-collection/fire-force/fire-force.component.ts
index 9387947..5d34354 100644
--- a/src/app/data-collection/fire-force/fire-force.component.ts
+++ b/src/app/data-collection/fire-force/fire-force.component.ts
@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
+import { MapFactory } from '@src/modules/map/declare/factory';
 import { Console } from 'console';
 import { TreeService } from 'src/app/http-interceptors/tree.service';
 import Viewer from 'viewerjs'
@@ -94,38 +95,43 @@ export class FireForceComponent implements OnInit {
     this.map.plugin(["AMap.MarkerClusterer"],() => {
       var gridSize = 60
       var count = markerArrcluster.length;
-      var _renderClusterMarker = function (context) {
-        var factor = Math.pow(context.count / count, 1 / 18);
-        var div = document.createElement('div');
-        var Hue = 180 - factor * 180;
-        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
-        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
-        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
-        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
-        div.style.backgroundColor = bgColor;
-        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
-        div.style.width = div.style.height = size + 'px';
-        div.style.border = 'solid 1px ' + borderColor;
-        div.style.borderRadius = size / 2 + 'px';
-        div.style.boxShadow = '0 0 5px ' + shadowColor;
-        div.innerHTML = context.count;
-        div.style.lineHeight = size + 'px';
-        div.style.color = fontColor;
-        div.style.fontSize = '14px';
-        div.style.textAlign = 'center';
-        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
-        context.marker.setContent(div)
+
+      let render = MapFactory.RenderClusterMarkerInstance();
+      render.contentRender = (contextCount) => {
+          var factor = Math.pow(contextCount / count, 1 / 18);
+          var div = document.createElement('div');
+          var Hue = 180 - factor * 180;
+          var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
+          var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
+          var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+          var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
+          div.style.backgroundColor = bgColor;
+          var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+          div.style.width = div.style.height = size + 'px';
+          div.style.border = 'solid 1px ' + borderColor;
+          div.style.borderRadius = size / 2 + 'px';
+          div.style.boxShadow = '0 0 5px ' + shadowColor;
+          div.innerHTML = contextCount;
+          div.style.lineHeight = size + 'px';
+          div.style.color = fontColor;
+          div.style.fontSize = '14px';
+          div.style.textAlign = 'center';
+          return div;
+      };
+      render.pixelRender = (contextCount) => {
+          var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+          return MapFactory.PixelInstance(-size / 2, -size / 2);
+      };
+
+      render.contentNonRender = (src) => {
+          return `<img class='clusterImgCollection' src="${src}" alt="">`;
       };
-      var _renderMarker = (context)=>{
-        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
-        var offset = new AMap.Pixel(-15, -15);
-        context.marker.setContent(content)
-        context.marker.setOffset(offset)
+      render.pixelNonRender = () => {
+          return MapFactory.PixelInstance(-15, -15);
       }
-      this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
+      this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
         gridSize: gridSize, // 设置网格像素大小
-        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
-        renderMarker: _renderMarker, // 自定义非聚合点样式
+        render: render //自定义聚合点样式, 自定义非聚合点样式
       });
       this.cluster.on('click',(e)=>{  
         if(e.clusterData.length == 1){
diff --git a/src/app/data-collection/linkage-forces/linkage-forces.component.ts b/src/app/data-collection/linkage-forces/linkage-forces.component.ts
index 5df61bb..4cd3e63 100644
--- a/src/app/data-collection/linkage-forces/linkage-forces.component.ts
+++ b/src/app/data-collection/linkage-forces/linkage-forces.component.ts
@@ -10,6 +10,7 @@ import { NzTreeNode } from 'ng-zorro-antd/tree';
 import { TreeService } from 'src/app/http-interceptors/tree.service';
 import Viewer from 'viewerjs'
 import Swiper from 'swiper';
+import { MapFactory } from '@src/modules/map/declare/factory';
 declare var CryptoJS
 declare var AMap: any;
 @Component({
@@ -127,38 +128,44 @@ export class LinkageForcesComponent implements OnInit {
     this.map.plugin(["AMap.MarkerClusterer"],() => {
       var gridSize = 60
       var count = markerArrcluster.length;
-      var _renderClusterMarker = function (context) {
-        var factor = Math.pow(context.count / count, 1 / 18);
-        var div = document.createElement('div');
-        var Hue = 180 - factor * 180;
-        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
-        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
-        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
-        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
-        div.style.backgroundColor = bgColor;
-        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
-        div.style.width = div.style.height = size + 'px';
-        div.style.border = 'solid 1px ' + borderColor;
-        div.style.borderRadius = size / 2 + 'px';
-        div.style.boxShadow = '0 0 5px ' + shadowColor;
-        div.innerHTML = context.count;
-        div.style.lineHeight = size + 'px';
-        div.style.color = fontColor;
-        div.style.fontSize = '14px';
-        div.style.textAlign = 'center';
-        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
-        context.marker.setContent(div)
+      
+      let render = MapFactory.RenderClusterMarkerInstance();
+      render.contentRender = (contextCount) => {
+          var factor = Math.pow(contextCount / count, 1 / 18);
+          var div = document.createElement('div');
+          var Hue = 180 - factor * 180;
+          var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
+          var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
+          var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+          var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
+          div.style.backgroundColor = bgColor;
+          var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+          div.style.width = div.style.height = size + 'px';
+          div.style.border = 'solid 1px ' + borderColor;
+          div.style.borderRadius = size / 2 + 'px';
+          div.style.boxShadow = '0 0 5px ' + shadowColor;
+          div.innerHTML = contextCount;
+          div.style.lineHeight = size + 'px';
+          div.style.color = fontColor;
+          div.style.fontSize = '14px';
+          div.style.textAlign = 'center';
+          return div;
       };
-      var _renderMarker = (context)=> {
-        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
-        var offset = new AMap.Pixel(-15, -15);
-        context.marker.setContent(content)
-        context.marker.setOffset(offset)
+      render.pixelRender = (contextCount) => {
+          var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+          return MapFactory.PixelInstance(-size / 2, -size / 2);
+      };
+
+      render.contentNonRender = (src) => {
+          return `<img class='clusterImgCollection' src="${src}" alt="">`;
+      };
+      render.pixelNonRender = () => {
+          return MapFactory.PixelInstance(-15, -15);
       }
-      this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
+
+      this.cluster =  MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
         gridSize: gridSize, // 设置网格像素大小
-        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
-        renderMarker: _renderMarker, // 自定义非聚合点样式
+        render: render //自定义聚合点样式, 自定义非聚合点样式
       });
       this.cluster.on('click',(e)=>{
         if(e.clusterData.length == 1){
diff --git a/src/app/data-collection/water-collection/water-collection.component.ts b/src/app/data-collection/water-collection/water-collection.component.ts
index 56e12e2..40e2be9 100644
--- a/src/app/data-collection/water-collection/water-collection.component.ts
+++ b/src/app/data-collection/water-collection/water-collection.component.ts
@@ -4,6 +4,7 @@ import { ElementRef } from '@angular/core';
 import { Component, OnInit } from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import { MapFactory } from '@src/modules/map/declare/factory';
 declare var AMap: any;
 
 @Component({
@@ -83,38 +84,43 @@ export class WaterCollectionComponent implements OnInit {
     this.map.plugin(["AMap.MarkerClusterer"],() => {
       var gridSize = 60
       var count = markerArrcluster.length;
-      var _renderClusterMarker = function (context) {
-        var factor = Math.pow(context.count / count, 1 / 18);
-        var div = document.createElement('div');
-        var Hue = 180 - factor * 180;
-        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
-        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
-        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
-        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
-        div.style.backgroundColor = bgColor;
-        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
-        div.style.width = div.style.height = size + 'px';
-        div.style.border = 'solid 1px ' + borderColor;
-        div.style.borderRadius = size / 2 + 'px';
-        div.style.boxShadow = '0 0 5px ' + shadowColor;
-        div.innerHTML = context.count;
-        div.style.lineHeight = size + 'px';
-        div.style.color = fontColor;
-        div.style.fontSize = '14px';
-        div.style.textAlign = 'center';
-        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
-        context.marker.setContent(div)
+
+      let render = MapFactory.RenderClusterMarkerInstance();
+      render.contentRender = (contextCount) => {
+          var factor = Math.pow(contextCount / count, 1 / 18);
+          var div = document.createElement('div');
+          var Hue = 180 - factor * 180;
+          var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
+          var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
+          var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+          var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
+          div.style.backgroundColor = bgColor;
+          var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+          div.style.width = div.style.height = size + 'px';
+          div.style.border = 'solid 1px ' + borderColor;
+          div.style.borderRadius = size / 2 + 'px';
+          div.style.boxShadow = '0 0 5px ' + shadowColor;
+          div.innerHTML = contextCount;
+          div.style.lineHeight = size + 'px';
+          div.style.color = fontColor;
+          div.style.fontSize = '14px';
+          div.style.textAlign = 'center';
+          return div;
+      };
+      render.pixelRender = (contextCount) => {
+          var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+          return MapFactory.PixelInstance(-size / 2, -size / 2);
+      };
+
+      render.contentNonRender = (src) => {
+          return `<img class='clusterImgCollection' src="${src}" alt="">`;
       };
-      var _renderMarker = (context)=> {
-        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
-        context.marker.setContent(content)
-        var offset = new AMap.Pixel(-15, -15);
-        context.marker.setOffset(offset)
+      render.pixelNonRender = () => {
+          return MapFactory.PixelInstance(-15, -15);
       }
-      this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
+      this.cluster =  MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
         gridSize: gridSize, // 设置网格像素大小
-        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
-        renderMarker: _renderMarker, // 自定义非聚合点样式
+        render: render //自定义聚合点样式, 自定义非聚合点样式
       });
       this.cluster.on('click',(e)=>{
         if(e.clusterData.length == 1){
diff --git a/src/app/gis-management/gis-labeling/gis-labeling.component.ts b/src/app/gis-management/gis-labeling/gis-labeling.component.ts
index 2d2dfd1..3063cda 100644
--- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts
+++ b/src/app/gis-management/gis-labeling/gis-labeling.component.ts
@@ -368,8 +368,10 @@ export class GisLabelingComponent implements OnInit {
         this.map.plugin(["AMap.MarkerClusterer"], () => {
             var gridSize = 60
             var count = unitMarkerArrcluster.length;
-            var _renderClusterMarker = function (context) {
-                var factor = Math.pow(context.count / count, 1 / 18);
+
+            let render = MapFactory.RenderClusterMarkerInstance();
+            render.contentRender = (contextCount) => {
+                var factor = Math.pow(contextCount / count, 1 / 18);
                 var div = document.createElement('div');
                 var Hue = 180 - factor * 180;
                 var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
@@ -377,29 +379,32 @@ export class GisLabelingComponent implements OnInit {
                 var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
                 var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
                 div.style.backgroundColor = bgColor;
-                var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+                var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
                 div.style.width = div.style.height = size + 'px';
                 div.style.border = 'solid 1px ' + borderColor;
                 div.style.borderRadius = size / 2 + 'px';
                 div.style.boxShadow = '0 0 5px ' + shadowColor;
-                div.innerHTML = context.count;
+                div.innerHTML = contextCount;
                 div.style.lineHeight = size + 'px';
                 div.style.color = fontColor;
                 div.style.fontSize = '14px';
                 div.style.textAlign = 'center';
-                context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2));
-                context.marker.setContent(div)
+                return div;
+            };
+            render.pixelRender = (contextCount) => {
+                var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+                return MapFactory.PixelInstance(-size / 2, -size / 2);
+            };
+
+            render.contentNonRender = (src) => {
+                return `<img class='clusterImgCollection' src="${src}" alt="">`;
             };
-            var _renderMarker = (context) => {
-                var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
-                var offset = MapFactory.PixelInstance(-15, -15);
-                context.marker.setContent(content)
-                context.marker.setOffset(offset)
+            render.pixelNonRender = () => {
+                return MapFactory.PixelInstance(-15, -15);
             }
-            this.unitCluster = new AMap.MarkerCluster(this.map, unitMarkerArrcluster, {
+            this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, {
                 gridSize: gridSize, // 设置网格像素大小
-                renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
-                renderMarker: _renderMarker, // 自定义非聚合点样式
+                render: render //自定义聚合点样式, 自定义非聚合点样式
             });
             this.unitCluster.on('click', (e) => {
                 if (e.clusterData.length == 1) {
@@ -440,7 +445,7 @@ export class GisLabelingComponent implements OnInit {
             </div>
           </div>`
                     // 创建一个自定义内容的 infowindow 实例
-                    this.infoWindow = new AMap.InfoWindow({
+                    this.infoWindow = MapFactory.InfoWindowInstance({
                         position: [item.location.x, item.location.y],
                         offset: MapFactory.PixelInstance(0, -30),
                         content: markerContent,
@@ -539,8 +544,10 @@ export class GisLabelingComponent implements OnInit {
         this.map.plugin(["AMap.MarkerClusterer"], () => {
             var gridSize = 60
             var count = fireForceMarkerArrcluster.length;
-            var _renderClusterMarker = function (context) {
-                var factor = Math.pow(context.count / count, 1 / 18);
+
+            let render = MapFactory.RenderClusterMarkerInstance();
+            render.contentRender = (contextCount) => {
+                var factor = Math.pow(contextCount / count, 1 / 18);
                 var div = document.createElement('div');
                 var Hue = 180 - factor * 180;
                 var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
@@ -548,29 +555,32 @@ export class GisLabelingComponent implements OnInit {
                 var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
                 var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
                 div.style.backgroundColor = bgColor;
-                var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+                var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
                 div.style.width = div.style.height = size + 'px';
                 div.style.border = 'solid 1px ' + borderColor;
                 div.style.borderRadius = size / 2 + 'px';
                 div.style.boxShadow = '0 0 5px ' + shadowColor;
-                div.innerHTML = context.count;
+                div.innerHTML = contextCount;
                 div.style.lineHeight = size + 'px';
                 div.style.color = fontColor;
                 div.style.fontSize = '14px';
                 div.style.textAlign = 'center';
-                context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2));
-                context.marker.setContent(div)
+                return div;
+            };
+            render.pixelRender = (contextCount) => {
+                var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+                return MapFactory.PixelInstance(-size / 2, -size / 2);
+            };
+
+            render.contentNonRender = (src) => {
+                return `<img class='clusterImgCollection' src="${src}" alt="">`;
             };
-            var _renderMarker = (context) => {
-                var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
-                var offset = MapFactory.PixelInstance(-15, -15);
-                context.marker.setContent(content)
-                context.marker.setOffset(offset)
+            render.pixelNonRender = () => {
+                return MapFactory.PixelInstance(-15, -15);
             }
-            this.fireForceCluster = new AMap.MarkerCluster(this.map, fireForceMarkerArrcluster, {
+            this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, {
                 gridSize: gridSize, // 设置网格像素大小
-                renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
-                renderMarker: _renderMarker, // 自定义非聚合点样式
+                render: render //自定义聚合点样式, 自定义非聚合点样式
             });
         });
     }
@@ -682,8 +692,10 @@ export class GisLabelingComponent implements OnInit {
         this.map.plugin(["AMap.MarkerClusterer"], () => {
             var gridSize = 60
             var count = linkageForcesMarkerArrcluster.length;
-            var _renderClusterMarker = function (context) {
-                var factor = Math.pow(context.count / count, 1 / 18);
+
+            let render = MapFactory.RenderClusterMarkerInstance();
+            render.contentRender = (contextCount) => {
+                var factor = Math.pow(contextCount / count, 1 / 18);
                 var div = document.createElement('div');
                 var Hue = 180 - factor * 180;
                 var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
@@ -691,29 +703,33 @@ export class GisLabelingComponent implements OnInit {
                 var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
                 var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
                 div.style.backgroundColor = bgColor;
-                var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+                var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
                 div.style.width = div.style.height = size + 'px';
                 div.style.border = 'solid 1px ' + borderColor;
                 div.style.borderRadius = size / 2 + 'px';
                 div.style.boxShadow = '0 0 5px ' + shadowColor;
-                div.innerHTML = context.count;
+                div.innerHTML = contextCount;
                 div.style.lineHeight = size + 'px';
                 div.style.color = fontColor;
                 div.style.fontSize = '14px';
                 div.style.textAlign = 'center';
-                context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2));
-                context.marker.setContent(div)
+                return div;
             };
-            var _renderMarker = (context) => {
-                var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
-                var offset = MapFactory.PixelInstance(-15, -15);
-                context.marker.setContent(content)
-                context.marker.setOffset(offset)
+            render.pixelRender = (contextCount) => {
+                var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+                return MapFactory.PixelInstance(-size / 2, -size / 2);
+            };
+
+            render.contentNonRender = (src) => {
+                return `<img class='clusterImgCollection' src="${src}" alt="">`;
+            };
+            render.pixelNonRender = () => {
+                return MapFactory.PixelInstance(-15, -15);
             }
-            this.linkageForcesCluster = new AMap.MarkerCluster(this.map, linkageForcesMarkerArrcluster, {
+
+            this.linkageForcesCluster = MapFactory.MarkerClusterInstance(this.map, linkageForcesMarkerArrcluster, {
                 gridSize: gridSize, // 设置网格像素大小
-                renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
-                renderMarker: _renderMarker, // 自定义非聚合点样式
+                render: render //自定义聚合点样式, 自定义非聚合点样式
             });
         });
     }
@@ -850,8 +866,8 @@ export class GisLabelingComponent implements OnInit {
                 return MapFactory.PixelInstance(-size / 2, -size / 2);
             };
 
-            render.contentNonRender = () => {
-                return `<img class='clusterImgCollection' src="${render.getFirstImages}" alt="">`;
+            render.contentNonRender = (src) => {
+                return `<img class='clusterImgCollection' src="${src}" alt="">`;
             };
             render.pixelNonRender = () => {
                 return MapFactory.PixelInstance(-15, -15);
@@ -1013,16 +1029,13 @@ export class GisLabelingComponent implements OnInit {
         } else {
             this.unitCluster ? this.unitCluster.setData([]) : null
             this.mapPattern = false
-            this.map = new AMap.Map('map', {
+            this.map = MapFactory.MapInstance('map', {
                 viewMode: '3D',
                 pitch: 60,
                 rotation: -35,
                 features: ['bg', 'road', 'point', 'building'],
                 mapStyle: 'amap://styles/light',
             });
-
-
-
             this.map.setCity('上海市');
         }
         this.satelliteModel = false
@@ -1042,7 +1055,7 @@ export class GisLabelingComponent implements OnInit {
         that.map = MapFactory.MapInstance('map', { layers: [layer] });
         that.map.setCity('上海市');
         AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () {
-            that.mouseTool = new AMap.MouseTool(that.map);
+            that.mouseTool = new AMap.MouseTool(that.map.self);
         });
 
     }
@@ -1179,7 +1192,7 @@ export class GisLabelingComponent implements OnInit {
             this.markers.forEach((element, index) => { this.map.remove(element); });  //先删除所有标点
             this.markers = []
 
-            let marker = new AMap.Marker({
+            let marker = MapFactory.MarkerInstance({
                 map: this.map,
                 position: [e.location.x, e.location.y], // 基点位置,
             });
@@ -1220,7 +1233,7 @@ export class GisLabelingComponent implements OnInit {
       </div>
       </div>`
             // 创建一个自定义内容的 infowindow 实例
-            this.infoWindow = new AMap.InfoWindow({
+            this.infoWindow = MapFactory.InfoWindowInstance({
                 position: [e.location.x, e.location.y],
                 offset: MapFactory.PixelInstance(0, -30),
                 content: markerContent,
@@ -1233,7 +1246,7 @@ export class GisLabelingComponent implements OnInit {
             this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件	
             this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件
             marker.on('click', (ev) => { //marker点击事件
-                this.infoWindow = new AMap.InfoWindow({
+                this.infoWindow = MapFactory.InfoWindowInstance({
                     position: [e.location.x, e.location.y],
                     offset: MapFactory.PixelInstance(0, -30),
                     content: markerContent,
diff --git a/src/app/key-unit/water-road/water-road.component.ts b/src/app/key-unit/water-road/water-road.component.ts
index c20f9fd..5984808 100644
--- a/src/app/key-unit/water-road/water-road.component.ts
+++ b/src/app/key-unit/water-road/water-road.component.ts
@@ -4,6 +4,7 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
+import { MapFactory } from '@src/modules/map/declare/factory';
 declare var AMap: any;
 
 @Component({
@@ -224,38 +225,43 @@ export class WaterRoadComponent implements OnInit {
     this.map.plugin(["AMap.MarkerClusterer"],() => {
       var gridSize = 60
       var count = waterMarkerArrcluster.length;
-      var _renderClusterMarker = function (context) {
-        var factor = Math.pow(context.count / count, 1 / 18);
-        var div = document.createElement('div');
-        var Hue = 180 - factor * 180;
-        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
-        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
-        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
-        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
-        div.style.backgroundColor = bgColor;
-        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
-        div.style.width = div.style.height = size + 'px';
-        div.style.border = 'solid 1px ' + borderColor;
-        div.style.borderRadius = size / 2 + 'px';
-        div.style.boxShadow = '0 0 5px ' + shadowColor;
-        div.innerHTML = context.count;
-        div.style.lineHeight = size + 'px';
-        div.style.color = fontColor;
-        div.style.fontSize = '14px';
-        div.style.textAlign = 'center';
-        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
-        context.marker.setContent(div)
+
+      let render = MapFactory.RenderClusterMarkerInstance();
+      render.contentRender = (contextCount) => {
+          var factor = Math.pow(contextCount / count, 1 / 18);
+          var div = document.createElement('div');
+          var Hue = 180 - factor * 180;
+          var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
+          var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
+          var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+          var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
+          div.style.backgroundColor = bgColor;
+          var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+          div.style.width = div.style.height = size + 'px';
+          div.style.border = 'solid 1px ' + borderColor;
+          div.style.borderRadius = size / 2 + 'px';
+          div.style.boxShadow = '0 0 5px ' + shadowColor;
+          div.innerHTML = contextCount;
+          div.style.lineHeight = size + 'px';
+          div.style.color = fontColor;
+          div.style.fontSize = '14px';
+          div.style.textAlign = 'center';
+          return div;
+      };
+      render.pixelRender = (contextCount) => {
+          var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+          return MapFactory.PixelInstance(-size / 2, -size / 2);
+      };
+
+      render.contentNonRender = (src) => {
+          return `<img class='clusterImgCollection' src="${src}" alt="">`;
       };
-      var _renderMarker = (context)=> {
-        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
-        var offset = new AMap.Pixel(-12.5, -12.5);
-        context.marker.setContent(content)
-        context.marker.setOffset(offset)
+      render.pixelNonRender = () => {
+          return MapFactory.PixelInstance(-15, -15);
       }
-      this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, {
+      this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, {
         gridSize: gridSize, // 设置网格像素大小
-        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
-        renderMarker: _renderMarker, // 自定义非聚合点样式
+        render: render //自定义聚合点样式, 自定义非聚合点样式
       });
       this.waterCluster.on('click',(e)=>{
         if(e.clusterData.length == 1){
diff --git a/src/modules/map/declare/factory.ts b/src/modules/map/declare/factory.ts
index ff6e8f3..2b139aa 100644
--- a/src/modules/map/declare/factory.ts
+++ b/src/modules/map/declare/factory.ts
@@ -1,7 +1,7 @@
 const mapSupplier: number = 1; //1:高德
 
-import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker } from './map'
-import { GaodeCircle, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaoDePixel, GaoDeRenderClusterMarker } from './gaode-map'
+import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker, InfoWindow } from './map'
+import { GaodeCircle, GaodeInfoWindow, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaoDePixel, GaoDeRenderClusterMarker } from './gaode-map'
 import { KeDaLngLat, KeDaMap, KeDaMarker, KeDaPixel } from './keda-map';
 import MapTools from './map-tools';
 
@@ -52,6 +52,13 @@ export class MapFactory {
         }
     }
 
+    public static InfoWindowInstance(options: any): InfoWindow {
+        switch (mapSupplier) {
+            case 1: return new GaodeInfoWindow(options);
+            default: return null;
+        }
+    }
+
     public static CircleInstance(options: any): ICircle {
         switch (mapSupplier) {
             case 1: return new GaodeCircle(options);
diff --git a/src/modules/map/declare/gaode-map.ts b/src/modules/map/declare/gaode-map.ts
index f962187..9656063 100644
--- a/src/modules/map/declare/gaode-map.ts
+++ b/src/modules/map/declare/gaode-map.ts
@@ -1,4 +1,4 @@
-import { HtmlRender, ICircle, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IPixel, IRenderClusterMarker, ISelf, PixelRender } from './map'
+import { HtmlRender, ICircle, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, InfoWindow, IPixel, IRenderClusterMarker, ISelf, PixelRender } from './map'
 import MapTools from './map-tools';
 declare var AMap: any;
 
@@ -28,7 +28,7 @@ export class GaoDeMap extends GaodeBasic implements IMap {
         return this.self.add(obj.self)
     }
     remove(obj: any) {
-        return this.self.remove(obj)
+        return this.self.remove(obj.self)
     }
     setCity(city: string) {
         return this.self.setCity(city)
@@ -62,7 +62,9 @@ export class GaoDeMarker extends GaodeBasic implements IMarker {
         super();
         let conf = MapTools.InstanceConvert(options);
         this.self = new AMap.Marker(conf);
+        this._position = this.self._position;
     }
+    _position: number[]
     setMap() {
         this.self.setMap(null)
     }
@@ -83,6 +85,12 @@ export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster {
         let conf = MapTools.InstanceConvert(options);
         this.self = new AMap.MarkerCluster(map.self, list, conf)
     }
+    on(eventName: string, callback: Function): void {
+        this.self.on(eventName, callback);
+    }
+    setData(list:any[]) {
+        this.self.setData(list)
+    }
 }
 
 export class GaoDeLngLat extends GaodeBasic implements ILngLat {
@@ -102,13 +110,27 @@ export class GaodeLayer extends GaodeBasic implements ILayer {
     }
 }
 
-export class GaodeCircle extends GaodeBasic implements ICircle {
+export class GaodeInfoWindow extends GaodeBasic implements InfoWindow {
     constructor(options: any) {
+        super();
+        options.offset = options.offset.self
+        this.self = new AMap.InfoWindow(options);
+    }
+    open(map: IMap) {
+        return this.self.open(map.self)
+    }
+    listen(html: any, event: string, callback: Function) {
+        return this.self.listen(html,event,callback)
+    }
+}
+
+export class GaodeCircle extends GaodeBasic implements ICircle {
+    constructor(options: Object) {
         super();
         this.self = new AMap.Circle(options);
     }
-    setMap(map: any) {
-        return this.self.setMap(map)
+    setMap(map: IMap) {
+        return this.self.setMap(map.self)
     }
     setCenter(pos: number[]) {
         return this.self.setCenter(pos)
@@ -134,7 +156,7 @@ export class GaoDeRenderClusterMarker implements IRenderClusterMarker, ISelf {
                 context.marker.setOffset(this.pixelRender(context.count).self);
             },
             renderMarker: (context) => {
-                context.marker.setContent(this.contentNonRender());
+                context.marker.setContent(this.contentNonRender(this.getFirstImages(context)));
                 context.marker.setOffset(this.pixelNonRender(context.count).self);
             }
         };
diff --git a/src/modules/map/declare/keda-map.ts b/src/modules/map/declare/keda-map.ts
index fa7eeab..451bc96 100644
--- a/src/modules/map/declare/keda-map.ts
+++ b/src/modules/map/declare/keda-map.ts
@@ -72,6 +72,7 @@ export class KeDaMarker implements IMarker {
         };
         this.self = d;
     }
+    _position: number[];
     setMap() {
         throw new Error('Method not implemented.');
     }
diff --git a/src/modules/map/declare/map-tools.ts b/src/modules/map/declare/map-tools.ts
index b0068a3..56629a0 100644
--- a/src/modules/map/declare/map-tools.ts
+++ b/src/modules/map/declare/map-tools.ts
@@ -6,6 +6,7 @@ export default class MapTools {
         }
         let obj = Object.assign({}, data);
         let convert = (obj: any, data: string) => {
+            if(!obj[data])return;
             if (obj[data].discriminator === "ISelf") {
                 obj[data] = obj[data].self;
             } else if (obj[data].discriminator === "ISelfCombine") {
@@ -13,19 +14,26 @@ export default class MapTools {
             }
         }
 
-        let process = (obj: any) => {
+        let process = (obj: any,deep:number=0) => {
+           try{
+               deep++;
+               if(deep>=4)return;
             if (obj == undefined) return;
             if (!(obj instanceof Object)) return;
             for (var name in obj) {
                 if (obj[name] instanceof Array) {
                     for (var j in obj[name]) {
-                        process(j);
+                        process(j,deep);
                     }
                     continue;
                 }
                 convert(obj, name);
-                process(obj[name]);
+                process(obj[name],deep);
             }
+           }catch(e){
+               console.log(e);
+               debugger
+           }
         }
         process(obj);
         return obj;
diff --git a/src/modules/map/declare/map.d.ts b/src/modules/map/declare/map.d.ts
index a2f6ee7..60900be 100644
--- a/src/modules/map/declare/map.d.ts
+++ b/src/modules/map/declare/map.d.ts
@@ -25,6 +25,7 @@ export interface IMapOptions {
 
 export interface IMarker extends ISelf {
     id: string;
+    _position:number[];
     on(eventName: string, callback: Function);
     setMap();
 }
@@ -43,11 +44,11 @@ export interface IRenderClusterMarker {
     pixelNonRender: PixelRender;
 }
 
-
 export class IMarkOptions {
-    position?: ILngLat;
+    position?: ILngLat | number[];
     content?: string;
     offset?: IPixel;
+    map?: IMap;
 }
 
 export interface IPixel extends ISelf {
@@ -62,6 +63,11 @@ export interface ILayer extends ISelf {
 
 }
 
+export interface InfoWindow extends ISelf {
+    open(map:IMap);
+    listen(html:any, event:string, callback: Function)
+}
+
 export interface ICircle extends ISelf {
     setRadius(num: number);
     setCenter(pos: number[])