map component

src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html

@@ -1 +1 @@
-<div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>
+<div class="map-container" id="container" tabindex="0" [style]="{width: mapWidth, height: mapHeight}"></div>

src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AmapPathSimplifierComponent } from './amap-path-simplifier.component';
-
-describe('AmapPathSimplifierComponent', () => {
-  let component: AmapPathSimplifierComponent;
-  let fixture: ComponentFixture<AmapPathSimplifierComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AmapPathSimplifierComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AmapPathSimplifierComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts

@@ -1,26 +1,26 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter } from '@angular/core';
 import { BaseService } from 'src/app/shared/services';
 import { throwError } from 'rxjs';
 import AMapLoader from '@amap/amap-jsapi-loader';
+import { amapConf } from '@conf/amap.config';
 declare var AMap: any;
 declare var AMapUI: any;
 declare var Loca: any;
 
+const CONFIG = amapConf;
 @Component({
   selector: 'amap-path-simplifier',
   templateUrl: './amap-path-simplifier.component.html',
   styleUrls: ['./amap-path-simplifier.component.less']
 })
-export class AmapPathSimplifierComponent implements OnInit {
+export class AmapPathSimplifierComponent implements OnInit, OnChanges {
-  @ViewChild('modal')
-  modal: any;
-  addressInput: any;
-
   aMap: any;
+  pathSimplifierIns: any;
 
+  @Input()
   pathList = [
     {
-      name: '路线0',
+      name: '路线1',
       points: [
         {
           name: '点a',
@@ -73,11 +73,25 @@ export class AmapPathSimplifierComponent implements OnInit {
       ]
     }
   ];
+  @Input()
+  selectedIndex = 0;
+  @Input()
+  mapWidth = '800px';
 
-  constructor(private service: BaseService) {}
+  @Input()
+  mapHeight = '500px';
+
+  @Output()
+  clcikPointEvent = new EventEmitter<any>();
+
+  constructor() {}
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.pathList.currentValue && this.pathSimplifierIns) {
+      this.setData(changes.pathList.currentValue);
+    }
+  }
   ngOnInit(): void {
     this.mapInit();
-    // this.PoiPicker();
   }
 
   ngOnDestroy(): void {
@@ -87,81 +101,26 @@ export class AmapPathSimplifierComponent implements OnInit {
   }
 
   mapInit() {
-    console.log(AMapLoader);
-
     AMapLoader.load({
-      // 首次调用 load
+      key: CONFIG.key,
-      key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: CONFIG.version,
-      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: [
         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        'AMap.SimpleMarker',
+        'AMap.PathSimplifier'
-        'AMap.PathSimplifier',
-        'AMap.Scale',
-        'AMap.Marker',
-        'AMap.InfoWindow',
-        'AMap.ToolBar',
-        'AMap.MapType',
-        'AMap.Driving',
-        'AMap.Geolocation'
       ],
       AMapUI: {
-        // 是否加载 AMapUI，缺省不加载
+        version: CONFIG.AMapUIVersion,
-        version: '1.1', // AMapUI 缺省 1.1
+        plugins: ['misc/PathSimplifier'] // 需要加载的 AMapUI ui插件
-        plugins: ['overlay/SimpleMarker', 'misc/PathSimplifier'] // 需要加载的 AMapUI ui插件
       },
-      Loca: {
-        // 是否加载 Loca， 缺省不加载
-        version: '2.0' // Loca 版本，缺省 1.3.2
-      }
     })
       .then(AMap => {
-        console.log(AMap);
-
         this.aMap = new AMap.Map('container', {
-          resizeEnable: true,
+          zoom: 4
-          zoom: 16
         });
-        console.log(this.aMap);
 
         this.aMap.on('complete', () => {
-          this.service.msgSrv.info('地图加载完成 !');
+          // this.service.msgSrv.info('地图加载完成 !');
-          var pathSimplifierIns = new AMapUI.PathSimplifier({
+          this.pathInit();
-            zIndex: 100,
-            //autoSetFitView:false,
-            map: this.aMap, //所属的地图实例
-
-            getPath: function (pathData: any, pathIndex: any) {
-              var points = pathData.points,
-                lnglatList = [];
-
-              for (var i = 0, len = points.length; i < len; i++) {
-                lnglatList.push(points[i].lnglat);
-              }
-
-              return lnglatList;
-            },
-            getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
-              if (pointIndex >= 0) {
-                //point
-                return pathData.name + '，' + pathData.points[pointIndex].name;
-              }
-
-              return pathData.name + '，点数量' + pathData.points.length;
-            },
-            renderOptions: {
-              renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
-            }
-          });
-
-          (window as any).pathSimplifierIns = pathSimplifierIns;
-          pathSimplifierIns.setData(this.pathList);
-
-          pathSimplifierIns.setSelectedPathIndex(0);
-
-          pathSimplifierIns.on('pointClick', function (e: any, info: any) {
-            console.log('Click: ' + info.pathData.points[info.pointIndex].name);
-          });
         });
       })
       .catch(e => {
@@ -169,88 +128,50 @@ export class AmapPathSimplifierComponent implements OnInit {
       });
   }
 
-  poiPickerReady(poiPicker: any) {
+  pathInit() {
-    (window as any).poiPicker = poiPicker;
+    this.pathSimplifierIns = new AMapUI.PathSimplifier({
-    const map = this.aMap;
+      zIndex: 100,
-    const _this = this;
+      //autoSetFitView:false,
-    var marker = new AMapUI.SimpleMarker();
+      map: this.aMap, //所属的地图实例
-    console.log(marker);
 
-    var infoWindow = new AMap.InfoWindow({
+      getPath: function (pathData: any, pathIndex: any) {
-      offset: new AMap.Pixel(0, -20)
+        var points = pathData.points,
-    });
+          lnglatList = [];
-    console.log(infoWindow);
 
-    //选取了某个POI
+        for (var i = 0, len = points.length; i < len; i++) {
-    poiPicker.on('poiPicked', function (poiResult: any) {
+          lnglatList.push(points[i].lnglat);
-      var source = poiResult.source,
+        }
-        poi = poiResult.item,
-        info = {
-          source: source,
-          id: poi.id,
-          name: poi.name,
-          location: poi.location.toString(),
-          address: poi.address
-        };
-      console.log(poi);
 
-      marker.setMap(map);
+        return lnglatList;
-      infoWindow.setMap(map);
+      },
-
+      getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
-      marker.setPosition(poi.location);
+        if (pointIndex >= 0) {
-      infoWindow.setPosition(poi.location);
+          //point
-
+          return pathData.name + '，' + pathData.points[pointIndex].name;
-      infoWindow.setContent('地址: <pre>' + poi.name + '</pre>');
+        }
-      infoWindow.open(map, marker.getPosition());
+        return pathData.name + '，点数量' + pathData.points.length;
-
+      },
-      map.setCenter(marker.getPosition());
+      renderOptions: {
+        renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
+      }
     });
 
-    poiPicker.onCityReady(function () {
+    (window as any).pathSimplifierIns = this.pathSimplifierIns;
-      poiPicker.suggest('美食');
+    this.setData(this.pathList);
+
+    this.setPathIndex(this.selectedIndex);
+
+    this.pathSimplifierIns.on('pointClick', (e: any, info: any) => {
+      this.clcikPointEvent.emit({ e, info });
+      console.log('Click: ' + info.pathData.points[info.pointIndex].name);
     });
   }
 
-  createInfoWindow(title: any, content: any) {
+  setData(pathList: Array<any>) {
-    var info = document.createElement('div');
+    this.pathSimplifierIns.setData(pathList);
-    info.className = 'custom-info input-card content-window-card';
-
-    //可以通过下面的方式修改自定义窗体的宽高
-    //info.style.width = "400px";
-    // 定义顶部标题
-    var top = document.createElement('div');
-    var titleD = document.createElement('div');
-    var closeX = document.createElement('img');
-    top.className = 'info-top';
-    titleD.innerHTML = title;
-    closeX.src = 'https://webapi.amap.com/images/close2.gif';
-    closeX.onclick = this.closeInfoWindow;
-
-    top.appendChild(titleD);
-    top.appendChild(closeX);
-    info.appendChild(top);
-
-    // 定义中部内容
-    var middle = document.createElement('div');
-    middle.className = 'info-middle';
-    middle.style.backgroundColor = 'white';
-    middle.innerHTML = content;
-    info.appendChild(middle);
-
-    // 定义底部内容
-    var bottom = document.createElement('div');
-    bottom.className = 'info-bottom';
-    bottom.style.position = 'relative';
-    bottom.style.top = '0px';
-    bottom.style.margin = '0 auto';
-    var sharp = document.createElement('img');
-    sharp.src = 'https://webapi.amap.com/images/sharp.png';
-    bottom.appendChild(sharp);
-    info.appendChild(bottom);
-    return info;
   }
 
-  closeInfoWindow() {
+  setPathIndex(index: number) {
-    this.aMap.clearInfoWindow();
+    this.pathSimplifierIns.setSelectedPathIndex(index);
   }
 }

src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { BaseService } from 'src/app/shared/services';
 import { throwError } from 'rxjs';
 import AMapLoader from '@amap/amap-jsapi-loader';
+import { amapConf } from '@conf/amap.config';
 declare var AMap: any;
 declare var AMapUI: any;
+declare var Loca: any;
+
+const CONFIG = amapConf;
 
 @Component({
   selector: 'amap-poi-picker',
@@ -16,7 +19,10 @@ export class AmapPoiPickerComponent implements OnInit {
   addressInput: any;
 
   aMap: any;
-  constructor(private service: BaseService) {}
+
+  poi: any;
+
+  constructor() {}
   ngOnInit(): void {
     this.mapInit();
     // this.PoiPicker();
@@ -29,63 +35,43 @@ export class AmapPoiPickerComponent implements OnInit {
   }
 
   mapInit() {
-    console.log(AMapLoader);
-
     AMapLoader.load({
       // 首次调用 load
-      key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
+      key: CONFIG.key, // 申请好的Web端开发者Key，首次调用 load 时必填
-      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      version: CONFIG.version, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: [
         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
         'AMap.SimpleMarker',
         'AMap.PoiPicker',
         'AMap.Scale',
-        'AMap.Marker',
         'AMap.InfoWindow',
-        'AMap.ToolBar',
-        'AMap.MapType',
-        'AMap.Driving',
         'AMap.Geolocation'
       ],
       AMapUI: {
         // 是否加载 AMapUI，缺省不加载
-        version: '1.1', // AMapUI 缺省 1.1
+        version: CONFIG.AMapUIVersion, // AMapUI 缺省 1.1
         plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件
       },
       Loca: {
         // 是否加载 Loca， 缺省不加载
-        version: '2.0' // Loca 版本，缺省 1.3.2
+        version: CONFIG.LocaVersion // Loca 版本，缺省 1.3.2
       }
     })
       .then(AMap => {
-        console.log(AMap);
+        // 搜索picker
-
         var poiPicker = new AMapUI.PoiPicker({
-          //city:'北京',
           input: 'pickerInput'
         });
 
-        console.log(poiPicker);
+        // 地图
-
         this.aMap = new AMap.Map('container', {
           resizeEnable: true,
           zoom: 16
         });
-        console.log(this.aMap);
 
+        // 地图创建成功
         this.aMap.on('complete', () => {
-          this.service.msgSrv.info('地图加载完成 !');
           this.poiPickerReady(poiPicker);
-          // new AMapUI.SimpleMarker({
-          //   //前景文字
-          //   iconLabel: 'A',
-          //   //图标主题
-          //   iconTheme: 'default',
-          //   //背景图标样式
-          //   iconStyle: 'red',
-          //   map: this.aMap,
-          //   position: this.aMap.getCenter()
-          // });
         });
       })
       .catch(e => {
@@ -96,28 +82,25 @@ export class AmapPoiPickerComponent implements OnInit {
   poiPickerReady(poiPicker: any) {
     (window as any).poiPicker = poiPicker;
     const map = this.aMap;
-    const _this = this;
+    // 定位标志
-    var marker = new AMapUI.SimpleMarker();
+    const marker = new AMapUI.SimpleMarker({
-    console.log(marker);
+      //图标主题
+      iconTheme: 'default',
+      map: map,
+      position: map.getCenter()
+    });
 
-    var infoWindow = new AMap.InfoWindow({
+    // 信息窗口
+    const infoWindow = new AMap.InfoWindow({
       offset: new AMap.Pixel(0, -20)
     });
-    console.log(infoWindow);
 
     //选取了某个POI
-    poiPicker.on('poiPicked', function (poiResult: any) {
+    poiPicker.on('poiPicked', (poiResult: any) => {
-      var source = poiResult.source,
+      const source = poiResult.source,
-        poi = poiResult.item,
+        poi = poiResult.item;
-        info = {
-          source: source,
-          id: poi.id,
-          name: poi.name,
-          location: poi.location.toString(),
-          address: poi.address
-        };
       console.log(poi);
-
+      this.poi = poi;
       marker.setMap(map);
       infoWindow.setMap(map);
 
@@ -135,45 +118,6 @@ export class AmapPoiPickerComponent implements OnInit {
     });
   }
 
-  createInfoWindow(title: any, content: any) {
-    var info = document.createElement('div');
-    info.className = 'custom-info input-card content-window-card';
-
-    //可以通过下面的方式修改自定义窗体的宽高
-    //info.style.width = "400px";
-    // 定义顶部标题
-    var top = document.createElement('div');
-    var titleD = document.createElement('div');
-    var closeX = document.createElement('img');
-    top.className = 'info-top';
-    titleD.innerHTML = title;
-    closeX.src = 'https://webapi.amap.com/images/close2.gif';
-    closeX.onclick = this.closeInfoWindow;
-
-    top.appendChild(titleD);
-    top.appendChild(closeX);
-    info.appendChild(top);
-
-    // 定义中部内容
-    var middle = document.createElement('div');
-    middle.className = 'info-middle';
-    middle.style.backgroundColor = 'white';
-    middle.innerHTML = content;
-    info.appendChild(middle);
-
-    // 定义底部内容
-    var bottom = document.createElement('div');
-    bottom.className = 'info-bottom';
-    bottom.style.position = 'relative';
-    bottom.style.top = '0px';
-    bottom.style.margin = '0 auto';
-    var sharp = document.createElement('img');
-    sharp.src = 'https://webapi.amap.com/images/sharp.png';
-    bottom.appendChild(sharp);
-    info.appendChild(bottom);
-    return info;
-  }
-
   closeInfoWindow() {
     this.aMap.clearInfoWindow();
   }

src/conf/amap.config.ts

@@ -0,0 +1,21 @@
+/**
+ * 高德地图资源配置
+ */
+export const amapConf = {
+  /**
+   * 文件上传路径
+   */
+  key: '63f9573ca55fef2b92d4ffe0c85dea8f',
+  /**
+   * JSAPI版本
+   */
+  version: '2.0',
+  /**
+   * AMapUI版本
+   */
+  AMapUIVersion: '1.1',
+  /**
+   * Loca版本
+   */
+  LocaVersion: '2.0'
+};