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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      src/app/gis-management/gis-labeling/gis-labeling.component.ts
  2. 10
      src/modules/map/declare/factory.ts
  3. 70
      src/modules/map/declare/gaode-map.ts
  4. 24
      src/modules/map/declare/map-tools.ts
  5. 27
      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"], () => {
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)
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);
}
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, // 设置网格像素大小
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) {

10
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) {
case 1: return new GaoDeMarkerCluster(map,list,options);
case 1: return new GaoDeMarkerCluster(map, list, renderObj);
default: return null;
}
}
@ -45,21 +45,21 @@ 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;

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';
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}
};
}

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

@ -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]){
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;
}

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

@ -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)
}
Write Preview
Loading…
Cancel
Save