From 6eff84f4d10928393144c9ea0e6d7eb73bcaa900 Mon Sep 17 00:00:00 2001 From: anxinCPF <1105965053@qq.com> Date: Sun, 20 Jun 2021 20:16:38 +0800 Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E5=BE=B7=E5=9C=B0=E5=9B=BE=E5=B0=81?= =?UTF-8?q?=E8=A3=85=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fire-force/fire-force.component.ts | 7 +- .../gis-labeling/gis-labeling.component.ts | 61 +++++++------ src/modules/map/declare/factory.ts | 55 +++++++++++- src/modules/map/declare/gaode-map.ts | 90 ++++++++++++++++++- src/modules/map/declare/keda-map.ts | 3 + src/modules/map/declare/map-tools.ts | 3 +- src/modules/map/declare/map.d.ts | 49 +++++++++- 7 files changed, 225 insertions(+), 43 deletions(-) diff --git a/src/app/data-collection/fire-force/fire-force.component.ts b/src/app/data-collection/fire-force/fire-force.component.ts index 5d34354..b4ae6c5 100644 --- a/src/app/data-collection/fire-force/fire-force.component.ts +++ b/src/app/data-collection/fire-force/fire-force.component.ts @@ -7,6 +7,7 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; import { MapFactory } from '@src/modules/map/declare/factory'; +import { IPlaceSearch } from '@src/modules/map/declare/map'; import { Console } from 'console'; import { TreeService } from 'src/app/http-interceptors/tree.service'; import Viewer from 'viewerjs' @@ -800,7 +801,7 @@ export class FireForceComponent implements OnInit { this.isGisTopBox = false } map:any - placeSearch:any//构造地点查询类 + placeSearch: IPlaceSearch//构造地点查询类 isMapLabel:boolean = false //是否已经标记坐标 newPositionMarkerContent:any = '
' + @@ -823,8 +824,8 @@ export class FireForceComponent implements OnInit { input: "tipinput" }; AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ - let auto = new AMap.AutoComplete(autoOptions); - this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类 + let auto = MapFactory.AutocompleteInstance(autoOptions); + this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 auto.on("select", (e)=>{ this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} 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 3063cda..b13df45 100644 --- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts +++ b/src/app/gis-management/gis-labeling/gis-labeling.component.ts @@ -3,7 +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'; +import { IDriving, IMap, IMouseTool } from '@src/modules/map/declare/map'; declare var AMap: any; declare var QRCode: any; @@ -467,7 +467,7 @@ export class GisLabelingComponent implements OnInit { this.keyUnitForm.reset() this.keyUnitForm.controls.areaUnit.setValue('-1') this.map.remove(this.circle) - this.unitCluster.setData([]) + this.unitCluster ? this.unitCluster.setData([]) : null } @@ -589,7 +589,7 @@ export class GisLabelingComponent implements OnInit { this.fireForceForm.reset() this.fireForceForm.controls.areaFireForce.setValue('-1') this.map.remove(this.circleoffireForce) - this.fireForceCluster.setData([]) + this.fireForceCluster ? this.fireForceCluster.setData([]) : null } @@ -738,7 +738,7 @@ export class GisLabelingComponent implements OnInit { this.linkageForcesForm.reset() this.linkageForcesForm.controls.areaLinkageForces.setValue('-1') this.map.remove(this.circleoflinkageForces) - this.linkageForcesCluster.setData([]) + this.linkageForcesCluster ? this.linkageForcesCluster.setData([]) : null } @@ -924,7 +924,7 @@ export class GisLabelingComponent implements OnInit { this.watertForm.reset() this.watertForm.controls.areaWater.setValue('-1') this.map.remove(this.circleofwater) - this.waterCluster.setData([]) + this.waterCluster ? this.waterCluster.setData([]) : null } @@ -933,8 +933,7 @@ export class GisLabelingComponent implements OnInit { let p1 = [bounds.northEast.lng, bounds.northEast.lat]; let p2 = [bounds.northEast.lng, bounds.southWest.lat]; // 返回 p1 到 p2 间的地面距离，单位：米 - let dis = AMap.GeometryUtil.distance(p1, p2); - return dis + return this.map.distance(p1, p2); } //全选重点单位 @@ -986,14 +985,14 @@ export class GisLabelingComponent implements OnInit { } //卫星图层 - satelliteLayer = new AMap.TileLayer.Satellite(); + satelliteLayer = MapFactory.TileLayerInstance().Satellite(); satelliteModel: boolean = false satelliteChange(e) { e.checked ? this.map.add(this.satelliteLayer) : this.map.remove(this.satelliteLayer); } //路网图层 - roadNetLayer = new AMap.TileLayer.RoadNet(); + roadNetLayer = MapFactory.TileLayerInstance().RoadNet(); loadModel: boolean = false loadChange(e) { e.checked ? this.map.add(this.roadNetLayer) : this.map.remove(this.roadNetLayer); @@ -1051,11 +1050,11 @@ export class GisLabelingComponent implements OnInit { opacity: 1, //透明度 zIndex: 0, //叠加层级 resizeEnable: true //是否监控地图容器尺寸变化, - }).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.self); + that.map.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () { + that.mouseTool = MapFactory.MouseToolInstance(that.map); }); } @@ -1066,7 +1065,7 @@ export class GisLabelingComponent implements OnInit { measureDistance; //测距离 distanceList = []; //测距离 点和线 measureArea; //测面积 - mouseTool;//二合一测距和侧面积 + mouseTool:IMouseTool;//二合一测距和侧面积 checkRadio = false //判断测距和侧面积是否选中 //测距离 开始 @@ -1111,24 +1110,24 @@ export class GisLabelingComponent implements OnInit { case 'rule': { this.mouseTool.rule({ startMarkerOptions: {//可缺省 - icon: new AMap.Icon({ - size: new AMap.Size(19, 31),//图标大小 - imageSize: new AMap.Size(19, 31), + icon: MapFactory.IconInstance({ + size: MapFactory.SizeInstance(19, 31),//图标大小 + imageSize: MapFactory.SizeInstance(19, 31), image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png" }) }, endMarkerOptions: {//可缺省 - icon: new AMap.Icon({ - size: new AMap.Size(19, 31),//图标大小 - imageSize: new AMap.Size(19, 31), + icon: MapFactory.IconInstance({ + size: MapFactory.SizeInstance(19, 31),//图标大小 + imageSize: MapFactory.SizeInstance(19, 31), image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png" }), offset: MapFactory.PixelInstance(-9, -31) }, midMarkerOptions: {//可缺省 - icon: new AMap.Icon({ - size: new AMap.Size(19, 31),//图标大小 - imageSize: new AMap.Size(19, 31), + icon: MapFactory.IconInstance({ + size: MapFactory.SizeInstance(19, 31),//图标大小 + imageSize: MapFactory.SizeInstance(19, 31), image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png" }), offset: MapFactory.PixelInstance(-9, -31) @@ -1282,7 +1281,7 @@ export class GisLabelingComponent implements OnInit { this.showLeftDiv = false this.isShowRouteGIS = true this.routeEnd = e.name - this.endCoordinate = MapFactory.LngLatInstance(e.location.x, e.location.y).self + this.endCoordinate = MapFactory.LngLatInstance(e.location.x, e.location.y) } //全景漫游 @@ -1334,7 +1333,7 @@ export class GisLabelingComponent implements OnInit { routeEnd: any; //终点 routeEndList: any = [] //终点 搜索结果 timeout: any; //延时器 - routeGIS: any; //查询结果 规划路线 + routeGIS: IDriving; //查询结果 规划路线 selectType: boolean = true; //路线选择 推荐方案/躲避用拥堵 //关闭导航路线 @@ -1349,11 +1348,11 @@ export class GisLabelingComponent implements OnInit { this.timeout = window.setTimeout(() => { that.map.getCity(function (info) { //获取当前 city - AMap.plugin(['AMap.AutoComplete'], () => { + that.map.plugin(['AMap.AutoComplete'], () => { var autoOptions = { city: info.city } let keywords e == 0 ? keywords = that.routeStart : keywords = that.routeEnd - var autoComplete = new AMap.Autocomplete(autoOptions); + var autoComplete = MapFactory.AutocompleteInstance(autoOptions); autoComplete.search(keywords, function (status, result) { if (result && result.tips && result.tips.length) { //搜索到数据时 that._ngZone.run(() => { @@ -1363,14 +1362,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 = MapFactory.LngLatInstance(element.location.lng, element.location.lat).self + that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) return } } } } else {//终点 that.routeEndList = result.tips - that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat).self + that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat) } }); @@ -1431,7 +1430,7 @@ export class GisLabelingComponent implements OnInit { let that = this this.selectType = true this.routeGIS ? this.routeGIS.clear() : null - this.routeGIS = new AMap.Driving({ + this.routeGIS = MapFactory.DrivingInstance({ map: this.map, }); if (!this.startCoordinate) { @@ -1440,7 +1439,7 @@ export class GisLabelingComponent implements OnInit { config.duration = 3000 this.snackBar.open('未查询到起点坐标信息，请输入有效地址', '确定', config); return - } else if (!this.startCoordinate) { + } else if (!this.endCoordinate) { let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 @@ -1464,7 +1463,7 @@ export class GisLabelingComponent implements OnInit { if (this.selectType != e) { this.selectType = e this.routeGIS ? this.routeGIS.clear() : null - this.routeGIS = new AMap.Driving({ + this.routeGIS = MapFactory.DrivingInstance({ map: this.map, policy: e == true ? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC }); diff --git a/src/modules/map/declare/factory.ts b/src/modules/map/declare/factory.ts index 2b139aa..6ab2536 100644 --- a/src/modules/map/declare/factory.ts +++ b/src/modules/map/declare/factory.ts @@ -1,7 +1,7 @@ const mapSupplier: number = 1; //1:高德 -import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker, InfoWindow } from './map' -import { GaodeCircle, GaodeInfoWindow, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaoDePixel, GaoDeRenderClusterMarker } from './gaode-map' +import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker, IInfoWindow, IMouseTool, IIcon, ISize, IIconOptions, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch } from './map' +import { GaodeCircle, GaodeIcon, GaodeInfoWindow, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaodeMouseTool, GaoDePixel, GaoDeRenderClusterMarker, GaodeTileLayer, GaodeSize, GaodeDriving, GaodeAutocomplete, GaodePlaceSearch } from './gaode-map' import { KeDaLngLat, KeDaMap, KeDaMarker, KeDaPixel } from './keda-map'; import MapTools from './map-tools'; @@ -45,6 +45,27 @@ export class MapFactory { } } + public static IconInstance(options: IIconOptions): IIcon { + switch (mapSupplier) { + case 1: return new GaodeIcon(options); + default: return null; + } + } + + public static SizeInstance(x: number, y: number): ISize { + switch (mapSupplier) { + case 1: return new GaodeSize(x,y); + default: return null; + } + } + + public static TileLayerInstance(): ITileLayer { + switch (mapSupplier) { + case 1: return new GaodeTileLayer(); + default: return null; + } + } + public static LayerInstance(options: any): ILayer { switch (mapSupplier) { case 1: return new GaodeLayer(options); @@ -52,7 +73,35 @@ export class MapFactory { } } - public static InfoWindowInstance(options: any): InfoWindow { + public static DrivingInstance(options: IDrivingOptions): IDriving { + switch (mapSupplier) { + case 1: return new GaodeDriving(options); + default: return null; + } + } + + public static AutocompleteInstance(city:Object): IAutocomplete { + switch (mapSupplier) { + case 1: return new GaodeAutocomplete(city); + default: return null; + } + } + + public static PlaceSearchInstance(): IPlaceSearch { + switch (mapSupplier) { + case 1: return new GaodePlaceSearch(); + default: return null; + } + } + + public static MouseToolInstance(map:IMap): IMouseTool { + switch (mapSupplier) { + case 1: return new GaodeMouseTool(map); + default: return null; + } + } + + public static InfoWindowInstance(options: any): IInfoWindow { switch (mapSupplier) { case 1: return new GaodeInfoWindow(options); default: return null; diff --git a/src/modules/map/declare/gaode-map.ts b/src/modules/map/declare/gaode-map.ts index 9656063..d494a4d 100644 --- a/src/modules/map/declare/gaode-map.ts +++ b/src/modules/map/declare/gaode-map.ts @@ -1,4 +1,4 @@ -import { HtmlRender, ICircle, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, InfoWindow, IPixel, IRenderClusterMarker, ISelf, PixelRender } from './map' +import { HtmlRender, ICircle, IIcon, IIconOptions, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IInfoWindow, IPixel, IRenderClusterMarker, ISelf, ISize, PixelRender, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch } from './map' import MapTools from './map-tools'; declare var AMap: any; @@ -12,6 +12,9 @@ export class GaoDeMap extends GaodeBasic implements IMap { super(); this.self = new AMap.Map(container, options); } + distance(a: number[], b: number[]) { + return AMap.GeometryUtil.distance(a, b); + } getCity(callback: Function) { return this.self.getCity(callback) } @@ -24,7 +27,7 @@ export class GaoDeMap extends GaodeBasic implements IMap { getBounds() { return this.self.getBounds() } - add(obj: IMarker) { + add(obj: IMarker|any) { return this.self.add(obj.self) } remove(obj: any) { @@ -110,7 +113,88 @@ export class GaodeLayer extends GaodeBasic implements ILayer { } } -export class GaodeInfoWindow extends GaodeBasic implements InfoWindow { +export class GaodeIcon extends GaodeBasic implements IIcon { + constructor(options: IIconOptions) { + super(); + options.size = options.size.self + options.imageSize = options.imageSize.self + this.self = new AMap.Icon(options); + } +} + +export class GaodeSize extends GaodeBasic implements ISize { + constructor(x:number, y:number) { + super(); + this.self = new AMap.Size(x,y); + } +} + +export class GaodeTileLayer extends GaodeBasic implements ITileLayer { + constructor() { + super(); + } + Satellite() { + this.self = new AMap.TileLayer.Satellite() + return this + } + RoadNet() { + this.self = new AMap.TileLayer.RoadNet() + return this + } +} + +export class GaodeDriving extends GaodeBasic implements IDriving { + constructor(options: IDrivingOptions) { + super(); + options.map = options.map.self + this.self = new AMap.Driving(options) + } + clear() { + this.self.clear() + } + search(x:any, y:any, callback:Function) { + this.self.search(x.self,y.self,callback) + } +} + +export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete { + constructor(city:Object) { + super(); + this.self = new AMap.Autocomplete(city) + } + on(eventName: string, callback: Function) { + this.self.on(eventName,callback) + } + search(address: string, callback: Function) { + this.self.search(address,callback) + } +} + +export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch { + constructor() { + super(); + this.self = new AMap.PlaceSearch() + } +} + +export class GaodeMouseTool extends GaodeBasic implements IMouseTool { + constructor(map: IMap) { + super(); + this.self = new AMap.MouseTool(map.self); + } + rule(options: any) { + let conf = MapTools.InstanceConvert(options); + return this.self.rule(conf) + } + measureArea(options: any) { + return this.self.measureArea(options) + } + close(isTrue: boolean) { + return this.self.close(isTrue) + } +} + +export class GaodeInfoWindow extends GaodeBasic implements IInfoWindow { constructor(options: any) { super(); options.offset = options.offset.self diff --git a/src/modules/map/declare/keda-map.ts b/src/modules/map/declare/keda-map.ts index 451bc96..c121fc2 100644 --- a/src/modules/map/declare/keda-map.ts +++ b/src/modules/map/declare/keda-map.ts @@ -8,6 +8,9 @@ export class KeDaMap implements IMap { opt.configUrl = ""; this.self = new KMap(opt); } + distance(a: number[], b: number[]) { + throw new Error('Method not implemented.'); + } getCity(callback: Function) { throw new Error('Method not implemented.'); } diff --git a/src/modules/map/declare/map-tools.ts b/src/modules/map/declare/map-tools.ts index 56629a0..3293790 100644 --- a/src/modules/map/declare/map-tools.ts +++ b/src/modules/map/declare/map-tools.ts @@ -23,7 +23,8 @@ export default class MapTools { for (var name in obj) { if (obj[name] instanceof Array) { for (var j in obj[name]) { - process(j,deep); + convert(obj[name],j); + process(obj[name][j],deep); } continue; } diff --git a/src/modules/map/declare/map.d.ts b/src/modules/map/declare/map.d.ts index 60900be..c4b18aa 100644 --- a/src/modules/map/declare/map.d.ts +++ b/src/modules/map/declare/map.d.ts @@ -6,7 +6,7 @@ export interface ISelf { export interface IMap extends ISelf { on(eventName: string, callback: Function); plugin(eventName: string[], callback: Function); - add(obj: IMarker): any; + add(obj: IMarker|any): any; remove(obj: any): any; setCity(city: string): any; getCity(callback: Function): any; @@ -16,6 +16,7 @@ export interface IMap extends ISelf { setCenter(x: number[]): any; getCenter(): any; getBounds(): any; + distance(a:number[],b:number[]): any; } export interface IMapOptions { @@ -63,7 +64,51 @@ export interface ILayer extends ISelf { } -export interface InfoWindow extends ISelf { +export interface IIconOptions { + size?: ISize; + imageSize?: ISize; + image?: string; +} + +export interface IIcon extends ISelf { + +} + +export interface ISize extends ISelf { + +} + +export interface ITileLayer extends ISelf { + Satellite(); + RoadNet(); +} + +export interface IDrivingOptions { + map?: IMap; + policy?: string +} + +export interface IDriving extends ISelf { + clear(); + search(x:any, y:any, callback:Function); +} + +export interface IAutocomplete extends ISelf { + on(eventName: string, callback: Function) + search(address: string,callback: Function) +} + +export interface IPlaceSearch extends ISelf { + +} + +export interface IMouseTool extends ISelf { + rule(options:any) + measureArea(options:any) + close(isTrue:boolean) +} + +export interface IInfoWindow extends ISelf { open(map:IMap); listen(html:any, event:string, callback: Function) }