[完善] 二维预案gis功能封装

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

@@ -1417,16 +1417,15 @@ export class CollectionToolsPlanComponent implements OnInit {
     toLoadGis() {
         console.log(666666, this.selectingSitePlan)
 
-        this.map =
-            MapFactory.MapInstance("planContainer", {
+        this.map = MapFactory.MapInstance("planContainer", {
                 viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
                 zoom: 11, //初始化地图层级
-            });
+            }).self;
         if (this.selectingSitePlan.defaultCenter) {
-            this.map.self.setZoom(this.selectingSitePlan.zoomLevel); //设置地图层级
-            this.map.self.setCenter([this.selectingSitePlan.defaultCenter.x, this.selectingSitePlan.defaultCenter.y])
+            this.map.setZoom(this.selectingSitePlan.zoomLevel); //设置地图层级
+            this.map.setCenter([this.selectingSitePlan.defaultCenter.x, this.selectingSitePlan.defaultCenter.y])
         } else {
-            this.map.self.setCity('上海市');
+            this.map.setCity('上海市');
         }
 
         this.map.on('click', (e) => {
@@ -1452,7 +1451,7 @@ export class CollectionToolsPlanComponent implements OnInit {
                     }
 
                     // 将 icon 传入 marker
-                    let startMarker = new AMap.Marker({
+                    let startMarker = MapFactory.MarkerInstance({
                         position: new AMap.LngLat(element.Point.x, element.Point.y),
                         // 将 html 传给 content
                         content: markerContent,
@@ -1460,7 +1459,7 @@ export class CollectionToolsPlanComponent implements OnInit {
                         //offset: MapFactory.PixelInstance(-13,-30).self,
                         offset: MapFactory.PixelInstance(-13, 30).self,
                         draggable: editable == '1' ? true : false,
-                    });
+                    }).self
 
                     startMarker.id = element.Id
                     startMarker.on('click', (e) => {
@@ -2211,7 +2210,6 @@ export class CollectionToolsPlanComponent implements OnInit {
         // console.log('选中图片',this.selectImage)
         this.selectImageIndex = index
         if (this.isGis) {
-            console.log(this.map)
 
         } else {
             this.canvasData.selectTemplateData = items
@@ -2241,14 +2239,14 @@ export class CollectionToolsPlanComponent implements OnInit {
             '</div>';
 
         // 将 icon 传入 marker
-        let startMarker = new AMap.Marker({
+        let startMarker = MapFactory.MarkerInstance({
             position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
             // 将 html 传给 content
             content: markerContent,
             // 以 icon 的 [center bottom] 为原点
             offset: MapFactory.PixelInstance(-13, -30).self,
             draggable: true,
-        });
+        }).self;
 
         startMarker.id = id
         startMarker.on('click', (e) => {

src/modules/map/declare/factory.ts

@@ -1,8 +1,8 @@
 const mapSupplier: number = 1;//1:高德
 
-import { IMap, IMapOptions, IPixel } from './map'
-import { GaoDeMap, GaoDePixel } from './gaode-map'
-import { KeDaMap, KeDaPixel } from './keda-map';
+import { IMap, IMapOptions, IMarker, IPixel } from './map'
+import { GaoDeMap, GaoDeMarker, GaoDePixel } from './gaode-map'
+import { KeDaMap, KeDaMarker, KeDaPixel } from './keda-map';
 
 
 export class MapFactory {
@@ -21,4 +21,11 @@ export class MapFactory {
             default: return null;
         }
     }
+    public static MarkerInstance(options:any): IMarker {
+        switch (mapSupplier) {
+            case 1: return new GaoDeMarker(options);
+            case 2: return new KeDaMarker(options);
+            default: return null;
+        }
+    }
 }

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

@@ -1,12 +1,26 @@
 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);
     }
+    add(obj: any) {
+        return this.self.add(obj)
+    }
+    remove(obj: any) {
+        return this.self.remove(obj)
+    }
+    setCity(city: string) {
+        return this.self.setCity(city)
+    }
+    setZoom(zoom) {
+        return this.self.setZoom(zoom)
+    }
+    setCenter([x,y]) {
+        return this.self.setCenter([x,y])
+    }
     getCenter() {
         return this.self.getCenter();
     }

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

@@ -8,6 +8,21 @@ export class KeDaMap implements IMap {
         opt.configUrl = "";
         this.self = new KMap(opt);
     }
+    add(obj: any) {
+        throw new Error('Method not implemented.');
+    }
+    remove(obj: any) {
+        throw new Error('Method not implemented.');
+    }
+    setCity(city: string) {
+        throw new Error('Method not implemented.');
+    }
+    setZoom(zoom) {
+        throw new Error('Method not implemented.');
+    }
+    setCenter([x,y]) {
+        throw new Error('Method not implemented.');
+    }
     getZoom() {
         throw new Error('Method not implemented.');
     }
@@ -41,9 +56,6 @@ export class KeDaMarker implements IMarker {
             offset: options.offset,
             element: options.content
         };
-
-
-
         this.self = d;
     }
 }

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

@@ -10,7 +10,12 @@ export interface ISelf {
 
 export interface IMap extends ISelf {
     on(eventName: string, callback: Function): void;
+    add(obj:any): any;
+    remove(obj:any): any;
+    setCity(city:string): any;
+    setZoom(zoom: number): any;
     getZoom(): any;
+    setCenter(x:number[]): any;
     getCenter(): any;
 }
 
@@ -23,7 +28,10 @@ export interface IMarker extends ISelf {
 
 }
 
-
 export interface IPixel extends ISelf {
 
 }
+
+export interface ILngLat extends ISelf {
+
+}