From 141345b1d65f1e3cc6e9a21cafa6b79d77895e05 Mon Sep 17 00:00:00 2001 From: Taric Xin Date: Tue, 7 Dec 2021 14:14:01 +0800 Subject: [PATCH] map component --- .../amap-path-simplifier.component.html | 2 +- .../amap-path-simplifier.component.spec.ts | 25 --- .../amap-path-simplifier.component.ts | 211 ++++++------------ .../amap-poi-picker.component.ts | 112 +++------- src/conf/amap.config.ts | 21 ++ 5 files changed, 116 insertions(+), 255 deletions(-) delete mode 100644 src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.spec.ts create mode 100644 src/conf/amap.config.ts diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html index 2d903b09..6794d28a 100644 --- a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html +++ b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.spec.ts b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.spec.ts deleted file mode 100644 index 2fe2b600..00000000 --- a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AmapPathSimplifierComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AmapPathSimplifierComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts index b504050b..0d350056 100644 --- a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts +++ b/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 { - @ViewChild('modal') - modal: any; - addressInput: any; - +export class AmapPathSimplifierComponent implements OnInit, OnChanges { 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(); + + 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: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填 - version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 + key: CONFIG.key, + version: CONFIG.version, plugins: [ // 需要使用的的插件列表，如比例尺'AMap.Scale'等 - 'AMap.SimpleMarker', - 'AMap.PathSimplifier', - 'AMap.Scale', - 'AMap.Marker', - 'AMap.InfoWindow', - 'AMap.ToolBar', - 'AMap.MapType', - 'AMap.Driving', - 'AMap.Geolocation' + 'AMap.PathSimplifier' ], AMapUI: { - // 是否加载 AMapUI，缺省不加载 - version: '1.1', // AMapUI 缺省 1.1 - plugins: ['overlay/SimpleMarker', 'misc/PathSimplifier'] // 需要加载的 AMapUI ui插件 + version: CONFIG.AMapUIVersion, + plugins: ['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: 16 + zoom: 4 }); - console.log(this.aMap); this.aMap.on('complete', () => { - this.service.msgSrv.info('地图加载完成 !'); - var pathSimplifierIns = new AMapUI.PathSimplifier({ - 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); - }); + // this.service.msgSrv.info('地图加载完成 !'); + this.pathInit(); }); }) .catch(e => { @@ -169,88 +128,50 @@ export class AmapPathSimplifierComponent implements OnInit { }); } - poiPickerReady(poiPicker: any) { - (window as any).poiPicker = poiPicker; - const map = this.aMap; - const _this = this; - var marker = new AMapUI.SimpleMarker(); - console.log(marker); + pathInit() { + this.pathSimplifierIns = new AMapUI.PathSimplifier({ + zIndex: 100, + //autoSetFitView:false, + map: this.aMap, //所属的地图实例 - var infoWindow = new AMap.InfoWindow({ - offset: new AMap.Pixel(0, -20) - }); - console.log(infoWindow); + getPath: function (pathData: any, pathIndex: any) { + var points = pathData.points, + lnglatList = []; - //选取了某个POI - poiPicker.on('poiPicked', function (poiResult: any) { - 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); + for (var i = 0, len = points.length; i < len; i++) { + lnglatList.push(points[i].lnglat); + } - marker.setMap(map); - infoWindow.setMap(map); - - marker.setPosition(poi.location); - infoWindow.setPosition(poi.location); - - infoWindow.setContent('地址: 
' + poi.name + '
'); - infoWindow.open(map, marker.getPosition()); - - map.setCenter(marker.getPosition()); + 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 + } }); - poiPicker.onCityReady(function () { - poiPicker.suggest('美食'); + (window as any).pathSimplifierIns = this.pathSimplifierIns; + 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) { - 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; + setData(pathList: Array) { + this.pathSimplifierIns.setData(pathList); } - closeInfoWindow() { - this.aMap.clearInfoWindow(); + setPathIndex(index: number) { + this.pathSimplifierIns.setSelectedPathIndex(index); } } diff --git a/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts index e2bfe070..3f167d20 100644 --- a/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts +++ b/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 时必填 - version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 + key: CONFIG.key, // 申请好的Web端开发者Key，首次调用 load 时必填 + 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(); - console.log(marker); + // 定位标志 + const marker = new AMapUI.SimpleMarker({ + //图标主题 + 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) { - var source = poiResult.source, - poi = poiResult.item, - info = { - source: source, - id: poi.id, - name: poi.name, - location: poi.location.toString(), - address: poi.address - }; + poiPicker.on('poiPicked', (poiResult: any) => { + const source = poiResult.source, + poi = poiResult.item; 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(); } diff --git a/src/conf/amap.config.ts b/src/conf/amap.config.ts new file mode 100644 index 00000000..25b3509e --- /dev/null +++ b/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' +};