地图对接. 框架构建

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/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,