shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

MarkerCluster的实例化

上海一张图
赵旭 4 years ago
parent
ef48519715
commit
0b0852c124
5 changed files with 123 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      src/app/gis-management/gis-labeling/gis-labeling.component.ts
  2. 12
      src/modules/map/declare/factory.ts
  3. 70
      src/modules/map/declare/gaode-map.ts
  4. 26
      src/modules/map/declare/map-tools.ts
  5. 29
      src/modules/map/declare/map.d.ts

68
src/app/gis-management/gis-labeling/gis-labeling.component.ts
Unescape View File

@ -822,8 +822,10 @@ export class GisLabelingComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"], () => { this.map.plugin(["AMap.MarkerClusterer"], () => {
var gridSize = 60 var gridSize = 60
var count = waterMarkerArrcluster.length; 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 div = document.createElement('div');
var Hue = 180 - factor * 180; var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; 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 borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; 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.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor; div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px'; div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count; div.innerHTML = contextCount;
div.style.lineHeight = size + 'px'; div.style.lineHeight = size + 'px';
div.style.color = fontColor; div.style.color = fontColor;
div.style.fontSize = '14px'; div.style.fontSize = '14px';
div.style.textAlign = 'center'; div.style.textAlign = 'center';
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2)); return div;
context.marker.setContent(div)
}; };
var _renderMarker = (context) => { render.pixelRender = (contextCount) => {
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
var offset = MapFactory.PixelInstance(-15, -15); return MapFactory.PixelInstance(-size / 2, -size / 2);
context.marker.setContent(content) };
context.marker.setOffset(offset)
render.contentNonRender = () => {
return `<img class='clusterImgCollection' src="${render.getFirstImages}" alt="">`;
};
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 = `<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, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
}); });
// this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, {
// gridSize: gridSize, // 设置网格像素大小
// renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
// renderMarker: _renderMarker, // 自定义非聚合点样式
// });
this.waterCluster.on('click', (e) => { this.waterCluster.on('click', (e) => {
if (e.clusterData.length == 1) { if (e.clusterData.length == 1) {

12
src/modules/map/declare/factory.ts
Unescape View File

@ -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) { switch (mapSupplier) {
case 1: return new GaoDeMarkerCluster(map,list,options); case 1: return new GaoDeMarkerCluster(map, list, renderObj);
default: return null; default: return null;
} }
} }
@ -45,25 +45,25 @@ export class MapFactory {
} }
} }
public static LayerInstance(options:any):ILayer{ public static LayerInstance(options: any): ILayer {
switch (mapSupplier) { switch (mapSupplier) {
case 1: return new GaodeLayer(options); case 1: return new GaodeLayer(options);
default: return null; default: return null;
} }
} }
public static CircleInstance(options:any):ICircle{ public static CircleInstance(options: any): ICircle {
switch (mapSupplier) { switch (mapSupplier) {
case 1: return new GaodeCircle(options); case 1: return new GaodeCircle(options);
default: return null; default: return null;
} }
} }
public static RenderClusterMarkerInstance(context,dom:string,pixel:IPixel):IRenderClusterMarker{ public static RenderClusterMarkerInstance(): IRenderClusterMarker {
switch (mapSupplier) { switch (mapSupplier) {
case 1: return new GaoDeRenderClusterMarker(); case 1: return new GaoDeRenderClusterMarker();
default: return null; default: return null;
} }
} }
} }

70
src/modules/map/declare/gaode-map.ts
Unescape View File

@ -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'; import MapTools from './map-tools';
declare var AMap: any; declare var AMap: any;
class GaodeBasic implements ISelf{ class GaodeBasic implements ISelf {
self: any; self: any;
discriminator: string="ISelf"; discriminator: string = "ISelf";
} }
export class GaoDeMap extends GaodeBasic implements IMap { export class GaoDeMap extends GaodeBasic implements IMap {
@ -16,10 +16,10 @@ export class GaoDeMap extends GaodeBasic implements IMap {
return this.self.getCity(callback) return this.self.getCity(callback)
} }
setZoomAndCenter(zoom: number, pos: number[]) { setZoomAndCenter(zoom: number, pos: number[]) {
return this.self.setZoomAndCenter(zoom,pos) return this.self.setZoomAndCenter(zoom, pos)
} }
plugin(eventName: string[], callback: Function) { plugin(eventName: string[], callback: Function) {
return this.self.plugin(eventName,callback) return this.self.plugin(eventName, callback)
} }
getBounds() { getBounds() {
return this.self.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) { constructor(x: number, y: number) {
super(); super();
this.self = new AMap.Pixel(x, y); this.self = new AMap.Pixel(x, y);
} }
} }
export class GaoDeMarker extends GaodeBasic implements IMarker { export class GaoDeMarker extends GaodeBasic implements IMarker {
constructor(options: IMarkOptions) { constructor(options: IMarkOptions) {
super(); super();
let conf = MapTools.InstanceConvert(options); let conf = MapTools.InstanceConvert(options);
@ -77,32 +77,32 @@ export class GaoDeMarker extends GaodeBasic implements IMarker {
} }
} }
export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster { export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster {
constructor(map:IMap,list:Object[],options:any) { constructor(map: IMap, list: Object[], options: any) {
super(); super();
options.renderClusterMarker. let conf = MapTools.InstanceConvert(options);
this.self = new AMap.MarkerCluster(map.self,list,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) { constructor(x: number, y: number) {
super(); super();
this.self = new AMap.LngLat(x, y); this.self = new AMap.LngLat(x, y);
} }
offset(x: number, y: number) { 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) { constructor(options: any) {
super(); super();
this.self = new AMap.createDefaultLayer(options); this.self = new AMap.createDefaultLayer(options);
} }
} }
export class GaodeCircle extends GaodeBasic implements ICircle{ export class GaodeCircle extends GaodeBasic implements ICircle {
constructor(options: any) { constructor(options: any) {
super(); super();
this.self = new AMap.Circle(options); this.self = new AMap.Circle(options);
@ -113,32 +113,30 @@ export class GaodeCircle extends GaodeBasic implements ICircle{
setCenter(pos: number[]) { setCenter(pos: number[]) {
return this.self.setCenter(pos) return this.self.setCenter(pos)
} }
setRadius(num:number) { setRadius(num: number) {
return this.self.setRadius(num) return this.self.setRadius(num)
} }
} }
export class GaoDeRenderClusterMarker implements IRenderClusterMarker{ export class GaoDeRenderClusterMarker implements IRenderClusterMarker, ISelf {
setContent(dom: string | HTMLDivElement) { discriminator: string = "ISelfCombine";
throw new Error('Method not implemented.'); getFirstImages(context: any): string {
}
setOffset(IPixel: any) {
throw new Error('Method not implemented.');
}
getFirstImage(context: any): string {
return context.data[0].image; return context.data[0].image;
} }
getCount(context: any): number { contentRender: HtmlRender;
return context.count; 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}
};
} }

26
src/modules/map/declare/map-tools.ts
Unescape View File

@ -4,29 +4,29 @@ export default class MapTools {
if (data == null) { if (data == null) {
return return
} }
let obj = Object.assign({},data); let obj = Object.assign({}, data);
let convert = (data:any)=>{ let convert = (obj: any, data: string) => {
if (data.discriminator === "ISelf") { if (obj[data].discriminator === "ISelf") {
return data.self; obj[data] = obj[data].self;
} else if (obj[data].discriminator === "ISelfCombine") {
Object.assign(obj, obj[data].self);
} }
return data;
} }
let process = (obj:any)=>{ let process = (obj: any) => {
if(obj==undefined)return; if (obj == undefined) return;
if(!(obj instanceof Object)) return; if (!(obj instanceof Object)) return;
for (var name in obj) { for (var name in obj) {
if(obj[name] instanceof Array){ if (obj[name] instanceof Array) {
for(var j in obj[name]){ for (var j in obj[name]) {
process(j); process(j);
} }
continue; continue;
} }
obj[name] = convert(obj[name]); convert(obj, name);
process(obj[name]); process(obj[name]);
} }
} }
process(obj); process(obj);
return obj; return obj;
} }

29
src/modules/map/declare/map.d.ts vendored
Unescape View File

@ -11,7 +11,7 @@ export interface IMap extends ISelf {
setCity(city: string): any; setCity(city: string): any;
getCity(callback: Function): any; getCity(callback: Function): any;
setZoom(zoom: number): any; setZoom(zoom: number): any;
setZoomAndCenter(zoom: number,pos:number[]): any; setZoomAndCenter(zoom: number, pos: number[]): any;
getZoom(): any; getZoom(): any;
setCenter(x: number[]): any; setCenter(x: number[]): any;
getCenter(): any; getCenter(): any;
@ -33,11 +33,14 @@ export interface IMarkerCluster extends ISelf {
} }
export interface IRenderClusterMarker{ type HtmlRender = (...args) => string | HTMLElement;
getCount(context):number; type PixelRender = (...args) => IPixel;
getFirstImage(context):string; export interface IRenderClusterMarker {
setContent(dom:string|HTMLDivElement); getFirstImages(context: any): string;
setOffset(IPixel); contentRender: HtmlRender;
contentNonRender: HtmlRender;
pixelRender: PixelRender;
pixelNonRender: PixelRender;
} }
@ -52,15 +55,15 @@ export interface IPixel extends ISelf {
} }
export interface ILngLat 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{ export interface ICircle extends ISelf {
setRadius(num:number); setRadius(num: number);
setCenter(pos:number[]) setCenter(pos: number[])
setMap(map:any) setMap(map: any)
} }
Write Preview
Loading…
Cancel
Save