MarkerCluster的实例化

src/app/gis-management/gis-labeling/gis-labeling.component.ts

@@ -822,8 +822,10 @@ export class GisLabelingComponent 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);
+
+            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)';
@@ -831,30 +833,68 @@ 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='clusterImgCollection' src="${context.data[0].image}" alt="">`;
-                var offset = MapFactory.PixelInstance(-15, -15);
-                context.marker.setContent(content)
-                context.marker.setOffset(offset)
-            }
-            this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, {
+            render.pixelRender = (contextCount) => {
+                var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
+                return MapFactory.PixelInstance(-size / 2, -size / 2);
+            };
+
+            render.contentNonRender = () => {
+                return `<img class='clusterImgCollection' src="${render.getFirstImages}" alt="">`;
+            };
+            render.pixelNonRender = () => {
+                return MapFactory.PixelInstance(-15, -15);
+            }
+
+            // 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(MapFactory.PixelInstance(-size / 2, -size / 2));
+            //     context.marker.setContent(div)
+            // };
+            // var _renderMarker = (context) => {
+            //     var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
+            //     var offset = MapFactory.PixelInstance(-15, -15);
+            //     context.marker.setContent(content)
+            //     context.marker.setOffset(offset)
+            // }
+            this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, {
                 gridSize: gridSize, // 设置网格像素大小
-                renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
-                renderMarker: _renderMarker, // 自定义非聚合点样式
+                render: render //自定义聚合点样式, 自定义非聚合点样式
             });
+
+            // this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, {
+            //     gridSize: gridSize, // 设置网格像素大小
+            //     renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+            //     renderMarker: _renderMarker, // 自定义非聚合点样式
+            // });
             this.waterCluster.on('click', (e) => {
                 if (e.clusterData.length == 1) {
 

src/modules/map/declare/factory.ts

@@ -30,9 +30,9 @@ export class MapFactory {
         }
     }
 
-    public static MarkerClusterInstance(map:IMap,list:Object[],options:object): IMarkerCluster {
+    public static MarkerClusterInstance(map: IMap, list: Object[], renderObj: { gridSize: number, render: IRenderClusterMarker }): IMarkerCluster {
         switch (mapSupplier) {
-            case 1: return new GaoDeMarkerCluster(map,list,options);
+            case 1: return new GaoDeMarkerCluster(map, list, renderObj);
             default: return null;
         }
     }
@@ -59,7 +59,7 @@ export class MapFactory {
         }
     }
 
-    public static RenderClusterMarkerInstance(context,dom:string,pixel:IPixel):IRenderClusterMarker{
+    public static RenderClusterMarkerInstance(): IRenderClusterMarker {
         switch (mapSupplier) {
             case 1: return new GaoDeRenderClusterMarker();
             default: return null;

src/modules/map/declare/gaode-map.ts

@@ -1,4 +1,4 @@
-import { ICircle, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IPixel, IRenderClusterMarker, ISelf } from './map'
+import { HtmlRender, ICircle, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IPixel, IRenderClusterMarker, ISelf, PixelRender } from './map'
 import MapTools from './map-tools';
 declare var AMap: any;
 
@@ -80,8 +80,8 @@ export class GaoDeMarker extends GaodeBasic  implements IMarker {
 export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster {
     constructor(map: IMap, list: Object[], options: any) {
         super();
-        options.renderClusterMarker.
-        this.self = new AMap.MarkerCluster(map.self,list,options)
+        let conf = MapTools.InstanceConvert(options);
+        this.self = new AMap.MarkerCluster(map.self, list, conf)
     }
 }
 
@@ -118,27 +118,25 @@ export class GaodeCircle extends GaodeBasic implements ICircle{
     }
 }
 
-export class GaoDeRenderClusterMarker implements IRenderClusterMarker{
-    setContent(dom: string | HTMLDivElement) {
-        throw new Error('Method not implemented.');
-    }
-    setOffset(IPixel: any) {
-        throw new Error('Method not implemented.');
-    }
-    getFirstImage(context: any): string {
+export class GaoDeRenderClusterMarker implements IRenderClusterMarker, ISelf {
+    discriminator: string = "ISelfCombine";
+    getFirstImages(context: any): string {
         return context.data[0].image;
     }
-    getCount(context: any): number {
-        return context.count;
+    contentRender: HtmlRender;
+    contentNonRender: HtmlRender;
+    pixelRender: PixelRender;
+    pixelNonRender: PixelRender;
+    get self(): any {
+        return {
+            renderClusterMarker: (context) => {
+                context.marker.setContent(this.contentRender(context.count));
+                context.marker.setOffset(this.pixelRender(context.count).self);
+            },
+            renderMarker: (context) => {
+                context.marker.setContent(this.contentNonRender());
+                context.marker.setOffset(this.pixelNonRender(context.count).self);
             }
-    
-    // renderMarker(context: any, content: string, pixel: IPixel): void {
-    //     context.marker.setContent(content);
-    //     context.marker.setOffset(pixel);
-    // }
-
-    test = (a)=>{
-        return (b)=>{a+b}
         };
-    
+    }
 }

src/modules/map/declare/map-tools.ts

@@ -5,11 +5,12 @@ export default class MapTools {
             return
         }
         let obj = Object.assign({}, data);
-        let convert = (data:any)=>{
-            if (data.discriminator === "ISelf") {
-                return data.self;
+        let convert = (obj: any, data: string) => {
+            if (obj[data].discriminator === "ISelf") {
+                obj[data] = obj[data].self;
+            } else if (obj[data].discriminator === "ISelfCombine") {
+                Object.assign(obj, obj[data].self);
             }
-            return data;
         }
 
         let process = (obj: any) => {
@@ -22,11 +23,10 @@ export default class MapTools {
                     }
                     continue;
                 }
-                obj[name] = convert(obj[name]);
+                convert(obj, name);
                 process(obj[name]);
             }
         }
-
         process(obj);
         return obj;
     }

src/modules/map/declare/map.d.ts

@@ -33,11 +33,14 @@ export interface IMarkerCluster extends ISelf {
 
 }
 
+type HtmlRender = (...args) => string | HTMLElement;
+type PixelRender = (...args) => IPixel;
 export interface IRenderClusterMarker {
-    getCount(context):number;
-    getFirstImage(context):string;
-    setContent(dom:string|HTMLDivElement);
-    setOffset(IPixel);
+    getFirstImages(context: any): string;
+    contentRender: HtmlRender;
+    contentNonRender: HtmlRender;
+    pixelRender: PixelRender;
+    pixelNonRender: PixelRender;
 }