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 7d16b7b..d219060 100644 --- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts +++ b/src/app/gis-management/gis-labeling/gis-labeling.component.ts @@ -3,6 +3,7 @@ import { Component, OnInit, Renderer2, ElementRef, Inject, NgZone, ViewChild } f import { FormBuilder, FormGroup, FormControl } from '@angular/forms'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { IMap } from '@src/modules/map/declare/map'; declare var AMap: any; declare var QRCode: any; @@ -212,7 +213,7 @@ export class GisLabelingComponent implements OnInit { }) } //地图范围圆圈---重点单位 - circle = new AMap.Circle({ + circle = MapFactory.CircleInstance({ center: null, radius: 0, //半径 strokeOpacity: 1, @@ -224,7 +225,7 @@ export class GisLabelingComponent implements OnInit { zIndex: 50, }) //地图范围圆圈---水源 - circleofwater = new AMap.Circle({ + circleofwater = MapFactory.CircleInstance({ center: null, radius: 0, //半径 strokeOpacity: 1, @@ -236,7 +237,7 @@ export class GisLabelingComponent implements OnInit { zIndex: 50, }) //地图范围圆圈---消防力量 - circleoffireForce = new AMap.Circle({ + circleoffireForce = MapFactory.CircleInstance({ center: null, radius: 0, //半径 strokeOpacity: 1, @@ -248,7 +249,7 @@ export class GisLabelingComponent implements OnInit { zIndex: 50, }) //地图范围圆圈---联动力量 - circleoflinkageForces = new AMap.Circle({ + circleoflinkageForces = MapFactory.CircleInstance({ center: null, radius: 0, //半径 strokeOpacity: 1, @@ -276,7 +277,7 @@ export class GisLabelingComponent implements OnInit { this.circle.setCenter(this.markers[0]._position) this.circle.setMap(this.map) let Distance - let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 + let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 if (this.unitAreaDefault == '0') { this.circle.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2) Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y) @@ -386,12 +387,12 @@ export class GisLabelingComponent implements OnInit { div.style.color = fontColor; div.style.fontSize = '14px'; div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); + context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2)); context.marker.setContent(div) }; var _renderMarker = (context) => { var content = ``; - var offset = new AMap.Pixel(-15, -15); + var offset = MapFactory.PixelInstance(-15, -15); context.marker.setContent(content) context.marker.setOffset(offset) } @@ -441,7 +442,7 @@ export class GisLabelingComponent implements OnInit { // 创建一个自定义内容的 infowindow 实例 this.infoWindow = new AMap.InfoWindow({ position: [item.location.x, item.location.y], - offset: new AMap.Pixel(0, -30), + offset: MapFactory.PixelInstance(0, -30), content: markerContent, }); this.infoWindow.open(this.map); @@ -480,7 +481,7 @@ export class GisLabelingComponent implements OnInit { this.circleoffireForce.setCenter(this.markers[0]._position) this.circleoffireForce.setMap(this.map) let Distance - let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 + let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 if (this.fireForceAreaDefault == '0') { this.circleoffireForce.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2) Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y) @@ -557,12 +558,12 @@ export class GisLabelingComponent implements OnInit { div.style.color = fontColor; div.style.fontSize = '14px'; div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); + context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2)); context.marker.setContent(div) }; var _renderMarker = (context) => { var content = ``; - var offset = new AMap.Pixel(-15, -15); + var offset = MapFactory.PixelInstance(-15, -15); context.marker.setContent(content) context.marker.setOffset(offset) } @@ -601,7 +602,7 @@ export class GisLabelingComponent implements OnInit { this.circleoflinkageForces.setCenter(this.markers[0]._position) this.circleoflinkageForces.setMap(this.map) let Distance - let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 + let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 if (this.linkageForcesAreaDefault == '0') { this.circleoflinkageForces.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2) Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y) @@ -700,12 +701,12 @@ export class GisLabelingComponent implements OnInit { div.style.color = fontColor; div.style.fontSize = '14px'; div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); + context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2)); context.marker.setContent(div) }; var _renderMarker = (context) => { var content = ``; - var offset = new AMap.Pixel(-15, -15); + var offset = MapFactory.PixelInstance(-15, -15); context.marker.setContent(content) context.marker.setOffset(offset) } @@ -750,7 +751,7 @@ export class GisLabelingComponent implements OnInit { this.circleofwater.setCenter(this.markers[0]._position) this.circleofwater.setMap(this.map) let Distance - let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 + let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 //如果选择当前的视野范围算出查询半径 if (this.waterAreaDefault == '0') { @@ -840,12 +841,12 @@ export class GisLabelingComponent implements OnInit { div.style.color = fontColor; div.style.fontSize = '14px'; div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); + context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2)); context.marker.setContent(div) }; var _renderMarker = (context) => { var content = ``; - var offset = new AMap.Pixel(-15, -15); + var offset = MapFactory.PixelInstance(-15, -15); context.marker.setContent(content) context.marker.setOffset(offset) } @@ -957,7 +958,7 @@ export class GisLabelingComponent implements OnInit { this.showLeftDiv = false } - map: any //地图 + map: IMap //地图 markers: any = []; //markers标注 //地图2D 3D切换 @@ -991,18 +992,14 @@ export class GisLabelingComponent implements OnInit { //地图初始化 mapInit() { let that = this - var layer = new AMap.createDefaultLayer({ + var layer = MapFactory.LayerInstance({ zooms: [3, 20], //可见级别 visible: true, //是否可见 opacity: 1, //透明度 zIndex: 0, //叠加层级 resizeEnable: true //是否监控地图容器尺寸变化, - }) - // that.map = new AMap.Map('map', { - // layers: [layer], //当只想显示标准图层时layers属性可缺省, - // }); - that.map = MapFactory.MapInstance('map', { layers: [layer] }).self; - debugger; + }).self; + that.map = MapFactory.MapInstance('map', { layers: [layer] }); that.map.setCity('上海市'); AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () { that.mouseTool = new AMap.MouseTool(that.map); @@ -1073,7 +1070,7 @@ export class GisLabelingComponent implements OnInit { imageSize: new AMap.Size(19, 31), image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png" }), - offset: new AMap.Pixel(-9, -31) + offset: MapFactory.PixelInstance(-9, -31) }, midMarkerOptions: {//可缺省 icon: new AMap.Icon({ @@ -1081,7 +1078,7 @@ export class GisLabelingComponent implements OnInit { imageSize: new AMap.Size(19, 31), image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png" }), - offset: new AMap.Pixel(-9, -31) + offset: MapFactory.PixelInstance(-9, -31) }, lineOptions: {//可缺省 strokeStyle: "solid", @@ -1185,7 +1182,7 @@ export class GisLabelingComponent implements OnInit { // 创建一个自定义内容的 infowindow 实例 this.infoWindow = new AMap.InfoWindow({ position: [e.location.x, e.location.y], - offset: new AMap.Pixel(0, -30), + offset: MapFactory.PixelInstance(0, -30), content: markerContent, }); this.infoWindow.open(this.map); @@ -1198,7 +1195,7 @@ export class GisLabelingComponent implements OnInit { marker.on('click', (ev) => { //marker点击事件 this.infoWindow = new AMap.InfoWindow({ position: [e.location.x, e.location.y], - offset: new AMap.Pixel(0, -30), + offset: MapFactory.PixelInstance(0, -30), content: markerContent, }); this.infoWindow.open(this.map); @@ -1232,7 +1229,7 @@ export class GisLabelingComponent implements OnInit { this.showLeftDiv = false this.isShowRouteGIS = true this.routeEnd = e.name - this.endCoordinate = new AMap.LngLat(e.location.x, e.location.y) + this.endCoordinate = MapFactory.LngLatInstance(e.location.x, e.location.y).self } //全景漫游 @@ -1313,14 +1310,14 @@ export class GisLabelingComponent implements OnInit { for (let index = 0; index < result.tips.length; index++) { const element = result.tips[index]; if (element.location) { - that.startCoordinate = new AMap.LngLat(element.location.lng, element.location.lat) + that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat).self return } } } } else {//终点 that.routeEndList = result.tips - that.endCoordinate = new AMap.LngLat(result.tips[0].location.lng, result.tips[0].location.lat) + that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat).self } }); diff --git a/src/app/ui/collection-tools-plan/collection-tools.component.ts b/src/app/ui/collection-tools-plan/collection-tools.component.ts index 1abb2e8..06ba24f 100644 --- a/src/app/ui/collection-tools-plan/collection-tools.component.ts +++ b/src/app/ui/collection-tools-plan/collection-tools.component.ts @@ -19,7 +19,6 @@ import * as ObjectID from 'bson-objectid'; import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem'; import { MapFactory } from 'src/modules/map/declare/factory'; import { IMap, IMarker, IMarkOptions } from 'src/modules/map/declare/map'; -declare var AMap: any declare global { interface Window { @@ -1463,6 +1462,7 @@ export class CollectionToolsPlanComponent implements OnInit { startMarker.id = element.Id startMarker.on('click', (e) => { + console.log(e) this.clickId = e.target.id this.setAssetsProperty(this.canvasData.originaleveryStoreyData.data[e.target.id]) }); diff --git a/src/modules/map/declare/factory.ts b/src/modules/map/declare/factory.ts index 57d18de..90bdedd 100644 --- a/src/modules/map/declare/factory.ts +++ b/src/modules/map/declare/factory.ts @@ -1,15 +1,16 @@ -const mapSupplier: number = 1;//1:高德 +const mapSupplier: number = 1; //1:高德 -import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat } from './map' -import { GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDePixel } from './gaode-map' +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 { KeDaLngLat, KeDaMap, KeDaMarker, KeDaPixel } from './keda-map'; - +import MapTools from './map-tools'; export class MapFactory { public static MapInstance(container: string, options: IMapOptions | any): IMap { + let config = MapTools.InstanceConvert(options); switch (mapSupplier) { - case 1: return new GaoDeMap(container, options); - case 2: return new KeDaMap(container, options); + case 1: return new GaoDeMap(container, config); + case 2: return new KeDaMap(container, config); default: return null; } } @@ -29,6 +30,13 @@ export class MapFactory { } } + public static MarkerClusterInstance(map:IMap,list:Object[],options:object): IMarkerCluster { + switch (mapSupplier) { + case 1: return new GaoDeMarkerCluster(map,list,options); + default: return null; + } + } + public static LngLatInstance(x: number, y: number): ILngLat { switch (mapSupplier) { case 1: return new GaoDeLngLat(x, y); @@ -37,5 +45,25 @@ export class MapFactory { } } + public static LayerInstance(options:any):ILayer{ + switch (mapSupplier) { + case 1: return new GaodeLayer(options); + default: return null; + } + } + 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{ + 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 4c8d983..0b7e824 100644 --- a/src/modules/map/declare/gaode-map.ts +++ b/src/modules/map/declare/gaode-map.ts @@ -1,15 +1,31 @@ -import { ILngLat, IMap, IMapOptions, IMarker, IMarkOptions, IPixel } from './map' +import { ICircle, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IPixel, IRenderClusterMarker, ISelf } from './map' import MapTools from './map-tools'; declare var AMap: any; -export class GaoDeMap implements IMap { - self: any;//AMap.Map +class GaodeBasic implements ISelf{ + self: any; + discriminator: string="ISelf"; +} + +export class GaoDeMap extends GaodeBasic implements IMap { constructor(container: string, options: IMapOptions) { + super(); this.self = new AMap.Map(container, options); } - discriminator: 'ISelf'; - add(obj: any) { - return this.self.add(obj) + getCity(callback: Function) { + return this.self.getCity(callback) + } + setZoomAndCenter(zoom: number, pos: number[]) { + return this.self.setZoomAndCenter(zoom,pos) + } + plugin(eventName: string[], callback: Function) { + return this.self.plugin(eventName,callback) + } + getBounds() { + return this.self.getBounds() + } + add(obj: IMarker) { + return this.self.add(obj.self) } remove(obj: any) { return this.self.remove(obj) @@ -34,22 +50,24 @@ export class GaoDeMap implements IMap { } } -export class GaoDePixel implements IPixel { - self: any; +export class GaoDePixel extends GaodeBasic implements IPixel { constructor(x: number, y: number) { + super(); this.self = new AMap.Pixel(x, y); } - discriminator: 'ISelf'; } -export class GaoDeMarker implements IMarker { - self: any; +export class GaoDeMarker extends GaodeBasic implements IMarker { constructor(options: IMarkOptions) { + super(); let conf = MapTools.InstanceConvert(options); - this.self = new AMap.Marker(options); + this.self = new AMap.Marker(conf); + } + setMap() { + this.self.setMap(null) } get id(): string { - return this.self + return this.self.id; } set id(str: string) { this.self.id = str; @@ -57,13 +75,70 @@ export class GaoDeMarker implements IMarker { on(eventName: string, callback: Function): void { this.self.on(eventName, callback); } - discriminator: 'ISelf'; } -export class GaoDeLngLat implements ILngLat { - self: 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) + } +} + +export class GaoDeLngLat extends GaodeBasic implements ILngLat { constructor(x: number, y: number) { + super(); this.self = new AMap.LngLat(x, y); } - discriminator: 'ISelf'; + offset(x: number, y: number) { + return this.self.offset(x,y) + } +} + +export class GaodeLayer extends GaodeBasic implements ILayer{ + constructor(options: any) { + super(); + this.self = new AMap.createDefaultLayer(options); + } +} + +export class GaodeCircle extends GaodeBasic implements ICircle{ + constructor(options: any) { + super(); + this.self = new AMap.Circle(options); + } + setMap(map: any) { + return this.self.setMap(map) + } + setCenter(pos: number[]) { + return this.self.setCenter(pos) + } + 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 { + return context.data[0].image; + } + getCount(context: any): number { + return context.count; + } + + // 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/keda-map.ts b/src/modules/map/declare/keda-map.ts index 3627ae6..fa7eeab 100644 --- a/src/modules/map/declare/keda-map.ts +++ b/src/modules/map/declare/keda-map.ts @@ -8,7 +8,19 @@ export class KeDaMap implements IMap { opt.configUrl = ""; this.self = new KMap(opt); } - discriminator: 'ISelf'; + getCity(callback: Function) { + throw new Error('Method not implemented.'); + } + setZoomAndCenter(zoom: number, pos: number[]) { + throw new Error('Method not implemented.'); + } + plugin(eventName: string[], callback: Function) { + throw new Error('Method not implemented.'); + } + getBounds() { + throw new Error('Method not implemented.'); + } + discriminator= 'ISelf'; add(obj: any) { throw new Error('Method not implemented.'); } @@ -48,7 +60,7 @@ export class KeDaPixel implements IPixel { constructor(x: number, y: number) { this.self = [x, y]; } - discriminator: 'ISelf'; + discriminator= 'ISelf'; } export class KeDaMarker implements IMarker { @@ -60,6 +72,9 @@ export class KeDaMarker implements IMarker { }; this.self = d; } + setMap() { + throw new Error('Method not implemented.'); + } get id(): string { throw new Error('Method not implemented.'); } @@ -69,12 +84,15 @@ export class KeDaMarker implements IMarker { on(eventName: string, callback: Function): void { throw new Error('Method not implemented.'); } - discriminator: 'ISelf'; + discriminator= 'ISelf'; } export class KeDaLngLat implements ILngLat { self: any; constructor(x: number, y: number) { this.self = new KMap.LngLat(x, y); } - discriminator: 'ISelf'; + offset(x: number, y: number) { + throw new Error('Method not implemented.'); + } + discriminator= 'ISelf'; } \ 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 11b01e8..7106b26 100644 --- a/src/modules/map/declare/map-tools.ts +++ b/src/modules/map/declare/map-tools.ts @@ -1,15 +1,33 @@ export default class MapTools { - public static InstanceConvert(obj: any): any { - debugger - if (obj == null) { + public static InstanceConvert(data: any): any { + if (data == null) { return } - var propNames = Object.getOwnPropertyNames(obj.prototype); - for (var name in propNames) { - if (obj[name].discriminator === "ISelf") { - obj[name] = obj[name].self; + let obj = Object.assign({},data); + let convert = (data:any)=>{ + if (data.discriminator === "ISelf") { + return data.self; } + return data; } + + 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); + } + continue; + } + obj[name] = convert(obj[name]); + process(obj[name]); + } + } + + process(obj); + return obj; } } \ No newline at end of file diff --git a/src/modules/map/declare/map.d.ts b/src/modules/map/declare/map.d.ts index 42eb9bd..faedb33 100644 --- a/src/modules/map/declare/map.d.ts +++ b/src/modules/map/declare/map.d.ts @@ -1,23 +1,21 @@ -//AMap.Circle -//AMap.Map -//AMap.Icon -//AMap.Pixel -//AMap.LngLat - export interface ISelf { self: any; - readonly discriminator: "ISelf"; + discriminator: string; } export interface IMap extends ISelf { on(eventName: string, callback: Function); - add(obj: any): any; + plugin(eventName: string[], callback: Function); + add(obj: IMarker): any; remove(obj: any): any; setCity(city: string): any; + getCity(callback: Function): any; setZoom(zoom: number): any; + setZoomAndCenter(zoom: number,pos:number[]): any; getZoom(): any; setCenter(x: number[]): any; getCenter(): any; + getBounds(): any; } export interface IMapOptions { @@ -28,19 +26,41 @@ export interface IMapOptions { export interface IMarker extends ISelf { id: string; on(eventName: string, callback: Function); + setMap(); +} + +export interface IMarkerCluster extends ISelf { + +} + +export interface IRenderClusterMarker{ + getCount(context):number; + getFirstImage(context):string; + setContent(dom:string|HTMLDivElement); + setOffset(IPixel); } + export class IMarkOptions { position?: ILngLat; content?: string; offset?: IPixel; } - export interface IPixel extends ISelf { } export interface ILngLat extends ISelf { + offset(x:number, y: number) +} +export interface ILayer extends ISelf{ + } + +export interface ICircle extends ISelf{ + setRadius(num:number); + setCenter(pos:number[]) + setMap(map:any) +} \ No newline at end of file