高德地图封装基本完成

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  = 
   '<div class="custom-content-marker">' +
@@ -823,8 +824,8 @@ export class FireForceComponent implements OnInit {
       input: "tipinput"
     };
     AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{
-      let auto = new AMap.AutoComplete(autoOptions);
+      let auto = MapFactory.AutocompleteInstance(autoOptions);
-      this.placeSearch = new AMap.PlaceSearch();  //构造地点查询类
+      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}

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 this.map.distance(p1, p2);
-        return dis
     }
 
     //全选重点单位
@@ -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.map.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () {
-            that.mouseTool = new AMap.MouseTool(that.map.self);
+            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({
+                        icon: MapFactory.IconInstance({
-                            size: new AMap.Size(19, 31),//图标大小
+                            size: MapFactory.SizeInstance(19, 31),//图标大小
-                            imageSize: new AMap.Size(19, 31),
+                            imageSize: MapFactory.SizeInstance(19, 31),
                             image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
                         })
                     },
                     endMarkerOptions: {//可缺省
-                        icon: new AMap.Icon({
+                        icon: MapFactory.IconInstance({
-                            size: new AMap.Size(19, 31),//图标大小
+                            size: MapFactory.SizeInstance(19, 31),//图标大小
-                            imageSize: new AMap.Size(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({
+                        icon: MapFactory.IconInstance({
-                            size: new AMap.Size(19, 31),//图标大小
+                            size: MapFactory.SizeInstance(19, 31),//图标大小
-                            imageSize: new AMap.Size(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
             });

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 { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker, IInfoWindow, IMouseTool, IIcon, ISize, IIconOptions, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch } from './map'
-import { GaodeCircle, GaodeInfoWindow, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaoDePixel, GaoDeRenderClusterMarker } from './gaode-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;

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

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

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

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)
 }