From 0b0852c124c5f38f884ad6f6bea5df0ab3a8a139 Mon Sep 17 00:00:00 2001 From: zhaoxu <493734247@qq.com> Date: Sat, 19 Jun 2021 19:08:57 +0800 Subject: [PATCH] =?UTF-8?q?MarkerCluster=E7=9A=84=E5=AE=9E=E4=BE=8B?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../gis-labeling/gis-labeling.component.ts | 68 ++++++++++++++---- src/modules/map/declare/factory.ts | 12 ++-- src/modules/map/declare/gaode-map.ts | 70 +++++++++---------- src/modules/map/declare/map-tools.ts | 26 +++---- src/modules/map/declare/map.d.ts | 29 ++++---- 5 files changed, 123 insertions(+), 82 deletions(-) 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 d219060..2d2dfd1 100644 --- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts +++ b/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 = ``; - 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 = () => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); } - this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, { + + // 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 = ``; + // 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) { diff --git a/src/modules/map/declare/factory.ts b/src/modules/map/declare/factory.ts index 90bdedd..ff6e8f3 100644 --- a/src/modules/map/declare/factory.ts +++ b/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; } } @@ -45,25 +45,25 @@ export class MapFactory { } } - public static LayerInstance(options:any):ILayer{ + public static LayerInstance(options: any): ILayer { switch (mapSupplier) { case 1: return new GaodeLayer(options); default: return null; } } - public static CircleInstance(options:any):ICircle{ + public static CircleInstance(options: any): ICircle { switch (mapSupplier) { case 1: return new GaodeCircle(options); default: return null; } } - public static RenderClusterMarkerInstance(context,dom:string,pixel:IPixel):IRenderClusterMarker{ + public static RenderClusterMarkerInstance(): IRenderClusterMarker { switch (mapSupplier) { case 1: return new GaoDeRenderClusterMarker(); default: return null; } } - + } \ No newline at end of file diff --git a/src/modules/map/declare/gaode-map.ts b/src/modules/map/declare/gaode-map.ts index 0b7e824..f962187 100644 --- a/src/modules/map/declare/gaode-map.ts +++ b/src/modules/map/declare/gaode-map.ts @@ -1,10 +1,10 @@ -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; -class GaodeBasic implements ISelf{ +class GaodeBasic implements ISelf { self: any; - discriminator: string="ISelf"; + discriminator: string = "ISelf"; } export class GaoDeMap extends GaodeBasic implements IMap { @@ -16,10 +16,10 @@ export class GaoDeMap extends GaodeBasic implements IMap { return this.self.getCity(callback) } setZoomAndCenter(zoom: number, pos: number[]) { - return this.self.setZoomAndCenter(zoom,pos) + return this.self.setZoomAndCenter(zoom, pos) } plugin(eventName: string[], callback: Function) { - return this.self.plugin(eventName,callback) + return this.self.plugin(eventName, callback) } getBounds() { return this.self.getBounds() @@ -50,14 +50,14 @@ export class GaoDeMap extends GaodeBasic implements IMap { } } -export class GaoDePixel extends GaodeBasic implements IPixel { +export class GaoDePixel extends GaodeBasic implements IPixel { constructor(x: number, y: number) { super(); this.self = new AMap.Pixel(x, y); } } -export class GaoDeMarker extends GaodeBasic implements IMarker { +export class GaoDeMarker extends GaodeBasic implements IMarker { constructor(options: IMarkOptions) { super(); let conf = MapTools.InstanceConvert(options); @@ -77,32 +77,32 @@ export class GaoDeMarker extends GaodeBasic implements IMarker { } } -export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster { - constructor(map:IMap,list:Object[],options:any) { +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) } } -export class GaoDeLngLat extends GaodeBasic implements ILngLat { +export class GaoDeLngLat extends GaodeBasic implements ILngLat { constructor(x: number, y: number) { super(); this.self = new AMap.LngLat(x, y); } offset(x: number, y: number) { - return this.self.offset(x,y) + return this.self.offset(x, y) } } -export class GaodeLayer extends GaodeBasic implements ILayer{ +export class GaodeLayer extends GaodeBasic implements ILayer { constructor(options: any) { super(); this.self = new AMap.createDefaultLayer(options); } } -export class GaodeCircle extends GaodeBasic implements ICircle{ +export class GaodeCircle extends GaodeBasic implements ICircle { constructor(options: any) { super(); this.self = new AMap.Circle(options); @@ -113,32 +113,30 @@ export class GaodeCircle extends GaodeBasic implements ICircle{ setCenter(pos: number[]) { return this.self.setCenter(pos) } - setRadius(num:number) { + setRadius(num: number) { return this.self.setRadius(num) } } -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} - }; - } \ No newline at end of file diff --git a/src/modules/map/declare/map-tools.ts b/src/modules/map/declare/map-tools.ts index 7106b26..b0068a3 100644 --- a/src/modules/map/declare/map-tools.ts +++ b/src/modules/map/declare/map-tools.ts @@ -4,29 +4,29 @@ export default class MapTools { if (data == null) { return } - let obj = Object.assign({},data); - let convert = (data:any)=>{ - if (data.discriminator === "ISelf") { - return data.self; + let obj = Object.assign({}, data); + 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)=>{ - if(obj==undefined)return; - if(!(obj instanceof Object)) return; + let process = (obj: any) => { + 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); + if (obj[name] instanceof Array) { + for (var j in obj[name]) { + process(j); } continue; } - obj[name] = convert(obj[name]); + convert(obj, name); process(obj[name]); } } - process(obj); return obj; } diff --git a/src/modules/map/declare/map.d.ts b/src/modules/map/declare/map.d.ts index faedb33..a2f6ee7 100644 --- a/src/modules/map/declare/map.d.ts +++ b/src/modules/map/declare/map.d.ts @@ -11,7 +11,7 @@ export interface IMap extends ISelf { setCity(city: string): any; getCity(callback: Function): any; setZoom(zoom: number): any; - setZoomAndCenter(zoom: number,pos:number[]): any; + setZoomAndCenter(zoom: number, pos: number[]): any; getZoom(): any; setCenter(x: number[]): any; getCenter(): any; @@ -33,11 +33,14 @@ export interface IMarkerCluster extends ISelf { } -export interface IRenderClusterMarker{ - getCount(context):number; - getFirstImage(context):string; - setContent(dom:string|HTMLDivElement); - setOffset(IPixel); +type HtmlRender = (...args) => string | HTMLElement; +type PixelRender = (...args) => IPixel; +export interface IRenderClusterMarker { + getFirstImages(context: any): string; + contentRender: HtmlRender; + contentNonRender: HtmlRender; + pixelRender: PixelRender; + pixelNonRender: PixelRender; } @@ -52,15 +55,15 @@ export interface IPixel extends ISelf { } export interface ILngLat extends ISelf { - offset(x:number, y: number) + offset(x: number, y: number) } -export interface ILayer extends ISelf{ - +export interface ILayer extends ISelf { + } -export interface ICircle extends ISelf{ - setRadius(num:number); - setCenter(pos:number[]) - setMap(map:any) +export interface ICircle extends ISelf { + setRadius(num: number); + setCenter(pos: number[]) + setMap(map: any) } \ No newline at end of file