地图对接. 框架构建

src/app/gis-management/gis-labeling/gis-labeling.component.ts

@@ -6,6 +6,9 @@ import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 declare var AMap: any;
 declare var QRCode: any;
 
+import { MapFactory } from '../../../modules/map/declare/factory'
+
+
 @Component({
     selector: 'app-gis-labeling',
     templateUrl: './gis-labeling.component.html',
@@ -976,6 +979,9 @@ export class GisLabelingComponent implements OnInit {
                 features: ['bg', 'road', 'point', 'building'],
                 mapStyle: 'amap://styles/light',
             });
+
+
+
             this.map.setCity('上海市');
         }
         this.satelliteModel = false
@@ -992,10 +998,11 @@ export class GisLabelingComponent implements OnInit {
             zIndex: 0,         //叠加层级
             resizeEnable: true //是否监控地图容器尺寸变化,
         })
-    that.map = new AMap.Map('map',{
-      layers:[layer], //当只想显示标准图层时layers属性可缺省,
-    });
-
+        // that.map = new AMap.Map('map', {
+        //     layers: [layer], //当只想显示标准图层时layers属性可缺省,
+        // });
+        that.map = MapFactory.MapInstance('map', { layers: [layer] }).self;
+        debugger;
         that.map.setCity('上海市');
         AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () {
             that.mouseTool = new AMap.MouseTool(that.map);
@@ -1263,7 +1270,8 @@ export class GisLabelingComponent implements OnInit {
             width: '540px',
             height: '596px',
             id: 'shareDialog',
-      data});
+            data
+        });
         dialogRef.afterClosed().subscribe((data) => {
 
         });
@@ -1644,7 +1652,8 @@ export class LookPlanDialog {
 
             let result = await new Promise((result, reject) => {
                 this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`, { headers: { 'range': `bytes= ${start}-${end}` }, responseType: 'blob' }).subscribe(data => {
-          result(data) }) 
+                    result(data)
+                })
             })
             allFile.push(result)
 

src/app/ui/collection-tools-plan/addPlaneFigure.html

@@ -12,9 +12,9 @@
       </mat-form-field>
     </div>
 
-    <!-- <div class="keyMargin">
+    <div class="keyMargin">
       <a href="javascript:;" class="uploadBackGround" (click)='toGIS()' [ngClass]="{'uploadBackGroundSelected': selectedType == 'gis'}">导入GIS地图</a>
-    </div> -->
+    </div>
 
     <div class="keyMargin">
       <a href="javascript:;" class="uploadBackGround" [ngClass]="{'uploadBackGroundSelected': selectedType == 'image'}">

src/app/ui/collection-tools-plan/collection-tools.component.ts

@@ -17,6 +17,8 @@ import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-scor
 import { MaskLayerService } from 'src/app/mask-layer.service';
 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 } from 'src/modules/map/declare/map';
 declare var AMap: any
 
 declare global {
@@ -1411,19 +1413,20 @@ export class CollectionToolsPlanComponent implements OnInit {
         }
         this.handleTreeData(storeyData) //处理tree数据结构
     }
-  map: any
+    map: IMap
     toLoadGis() {
         console.log(666666, this.selectingSitePlan)
 
-    this.map = new AMap.Map('planContainer', {
+        this.map =
+            MapFactory.MapInstance("planContainer", {
                 viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
                 zoom: 11, //初始化地图层级
             });
         if (this.selectingSitePlan.defaultCenter) {
-      this.map.setZoom(this.selectingSitePlan.zoomLevel); //设置地图层级
-      this.map.setCenter([this.selectingSitePlan.defaultCenter.x, this.selectingSitePlan.defaultCenter.y])
+            this.map.self.setZoom(this.selectingSitePlan.zoomLevel); //设置地图层级
+            this.map.self.setCenter([this.selectingSitePlan.defaultCenter.x, this.selectingSitePlan.defaultCenter.y])
         } else {
-      this.map.setCity('上海市');
+            this.map.self.setCity('上海市');
         }
 
         this.map.on('click', (e) => {
@@ -1454,7 +1457,8 @@ export class CollectionToolsPlanComponent implements OnInit {
                         // 将 html 传给 content
                         content: markerContent,
                         // 以 icon 的 [center bottom] 为原点
-            offset: new AMap.Pixel(-13, -30),
+                        //offset: MapFactory.PixelInstance(-13,-30).self,
+                        offset: MapFactory.PixelInstance(-13, 30).self,
                         draggable: editable == '1' ? true : false,
                     });
 
@@ -2242,7 +2246,7 @@ export class CollectionToolsPlanComponent implements OnInit {
             // 将 html 传给 content
             content: markerContent,
             // 以 icon 的 [center bottom] 为原点
-      offset: new AMap.Pixel(-13, -30),
+            offset: MapFactory.PixelInstance(-13, -30).self,
             draggable: true,
         });
 

src/modules/map/declare/factory.ts

@@ -0,0 +1,24 @@
+const mapSupplier: number = 1;//1:高德
+
+import { IMap, IMapOptions, IPixel } from './map'
+import { GaoDeMap, GaoDePixel } from './gaode-map'
+import { KeDaMap, KeDaPixel } from './keda-map';
+
+
+export class MapFactory {
+    public static MapInstance(container: string, options: IMapOptions | any): IMap {
+        switch (mapSupplier) {
+            case 1: return new GaoDeMap(container, options);
+            case 2: return new KeDaMap(container, options);
+            default: return null;
+        }
+    }
+
+    public static PixelInstance(x: number, y: number): IPixel {
+        switch (mapSupplier) {
+            case 1: return new GaoDePixel(x, y);
+            case 2: return new KeDaPixel(x, y);
+            default: return null;
+        }
+    }
+}

src/modules/map/declare/gaode-map.ts

@@ -0,0 +1,33 @@
+import { IMap, IMapOptions, IMarker, IPixel } from './map'
+declare var AMap: any;
+
+
+export class GaoDeMap implements IMap {
+    self: any;//AMap.Map
+    constructor(container: string, options: IMapOptions) {
+        this.self = new AMap.Map(container, options);
+    }
+    getCenter() {
+        return this.self.getCenter();
+    }
+    getZoom() {
+        return this.self.getZoom();
+    }
+    on(eventName: string, callback: Function): void {
+        this.self.on(eventName, callback);
+    }
+}
+
+export class GaoDePixel implements IPixel {
+    self: any;
+    constructor(x: number, y: number) {
+        this.self = new AMap.Pixel(x, y);
+    }
+}
+
+export class GaoDeMarker implements IMarker {
+    self: any;
+    constructor(options: any) {
+        this.self = new AMap.Marker(options);
+    }
+}

src/modules/map/declare/keda-map.ts

@@ -0,0 +1,45 @@
+import { IMap, IMapOptions, IMarker, IPixel } from './map'
+declare var KMap: any;
+import $ from 'jquery';
+
+export class KeDaMap implements IMap {
+    self: any;
+    constructor(container: string, options: IMapOptions) {
+        let opt = Object.assign({}, { containerId: container }, options) as any;
+        opt.configUrl = "";
+        this.self = new KMap(opt);
+    }
+    on(eventName: string, callback: Function): void {
+        let eventMapProfile = {
+            complete: "load",
+            click: "click",
+            rightclick: "contextmenu"
+        };
+        this.self.addEventOnMap({
+            event: eventMapProfile[eventName],
+            handler: callback
+        });
+    }
+}
+
+export class KeDaPixel implements IPixel {
+    self: any;
+    constructor(x: number, y: number) {
+        this.self = [x, y];
+    }
+}
+
+export class KeDaMarker implements IMarker {
+    self: any;
+    constructor(options: any) {
+        let element = $(options.content)[0];
+        let d = {
+            offset: options.offset,
+            element: element
+        };
+
+
+
+        this.self = d;
+    }
+}

src/modules/map/declare/map.d.ts

@@ -0,0 +1,29 @@
+//AMap.Circle
+//AMap.Map
+//AMap.Icon
+//AMap.Pixel
+//AMap.LngLat
+
+export interface ISelf {
+    self: any;
+}
+
+export interface IMap extends ISelf {
+    on(eventName: string, callback: Function): void;
+    getZoom(): any;
+    getCenter(): any;
+}
+
+export interface IMapOptions {
+    zoom?: number;
+    zooms?: number[];
+}
+
+export interface IMarker extends ISelf {
+
+}
+
+
+export interface IPixel extends ISelf {
+
+}

tsconfig.json

@@ -18,7 +18,10 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "paths": {
+        "@src/*":["src/*"]
+    }
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,