From e7cd51ae3099c55d2b177700c290a48ed70c8f3b Mon Sep 17 00:00:00 2001 From: Taric Xin Date: Wed, 9 Mar 2022 18:01:42 +0800 Subject: [PATCH] edit --- .../vehicle-detail.component.ts | 4 +- .../amap-path-simplifier.component.ts | 80 ++++++++++++++++--- 2 files changed, 71 insertions(+), 13 deletions(-) diff --git a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts b/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts index 53737f03..585e53cf 100644 --- a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts +++ b/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts @@ -79,8 +79,6 @@ export class OrderManagementVehicleDetailComponent implements OnInit { initData() { this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => { if (res) { - console.log(res); - this.i = res; this.pois = [ { @@ -90,7 +88,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit { title: res.startingPoint.detailedAddress }, { - markerLabel: '终', + markerLabel: '卸', color: 'red', position: [res.endPoint.longitude, res.endPoint.latitude], title: res.endPoint.detailedAddress 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 fa6af579..ccac8683 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 @@ -16,9 +16,11 @@ const CONFIG = amapConf; export class AmapPathSimplifierComponent implements OnInit, OnChanges { aMap: any; pathSimplifierIns: any; + geocoder: any; navigator: any; infoWindow: any; markerList: any; + SimpleMarker: any; @Input() pathList: any = []; @Input() @@ -34,6 +36,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { @Input() pois: any = []; + private _pois: any = []; constructor(public service: BaseService) {} ngOnChanges(changes: SimpleChanges): void { @@ -42,20 +45,23 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { this.setPathIndex(this.selectedIndex); } if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) { - // console.log(this.MapList); + console.log(this.MapList); this.pathList = [ { name: '路线1', - points: changes?.MapList?.currentValue + points: changes.MapList?.currentValue } ]; this.setData(this.pathList); this.setPathIndex(this.selectedIndex); + this.getPoiByPositon(this.MapList[this.MapList?.length - 1]?.lnglat); } - if (changes?.pois?.currentValue && this?.markerList && changes.pois?.currentValue.length > 0) { + if (changes?.pois?.currentValue) { // console.log(this.pois); - this.pois = changes?.pois?.currentValue; - this.markerList.render(this.pois); + this._pois = changes?.pois?.currentValue; + if (this?.markerList && this._pois.length > 0) { + this.markerList.render(this._pois); + } } } ngOnInit(): void { @@ -74,7 +80,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { plugins: [ // 需要使用的的插件列表，如比例尺'AMap.Scale'等 'AMap.PathSimplifier', - 'AMap.InfoWindow' + 'AMap.InfoWindow', + 'AMap.Geocoder' ], AMapUI: { version: CONFIG.AMapUIVersion, @@ -91,6 +98,9 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -40) }); + this.geocoder = new AMap.Geocoder({ + radius: 1000 //范围，默认：500 + }); // this.service.msgSrv.info('地图加载完成 !'); this.pathInit(); this.setPOIS(); @@ -122,7 +132,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { //point return pathData.name + '，' + pathData.points[pointIndex].name; } - return pathData.name + '，点数量' + pathData.points?.length; + return ''; }, renderOptions: { renderAllPointsIfNumberBelow: 10 //绘制路线节点，如不需要可设置为-1 @@ -159,7 +169,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { recycledMarker.setIconStyle(dataItem.iconStyle); return recycledMarker; } - + this.SimpleMarker = SimpleMarker; //返回一个新的Marker return new SimpleMarker({ //普通文本 @@ -185,9 +195,9 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { } }); - if (this.pois?.length > 0) { + if (this._pois?.length > 0) { //展示该数据 - this.markerList.render(this.pois); + this.markerList.render(this._pois); } }); } @@ -213,10 +223,60 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { } } + /** 根据经纬度获取地址信息 */ + getPoiByPositon(position: Array) { + this.geocoder.getAddress(position, (status: any, result: any) => { + if (status === 'complete' && result.info === 'OK') { + // result中对应详细地理坐标信息 + this._pois = [...this.pois, { markerLabel: '终', color: 'red', position: position, title: result.regeocode.formattedAddress }]; + if (this.markerList) { + this.markerList.render(this._pois); + } + // this.setPOI({ markerLabel: '终', color: 'red', position: position }); + } + }); + } + + /** + * 选中标点，设置窗口信息 + * @param location + */ selectedPOI(location: any) { this.infoWindow.setContent(`地址: 
${location.title}
`); this.infoWindow.open(this.aMap, location.position); this.infoWindow.setPosition(location.position); this.aMap.setCenter(location.position); } + + /** + * 增加标记点 + * @param poi + */ + setPOI(poi: POI) { + AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker: any) => { + //启动页面 + new SimpleMarker({ + //普通文本 + iconLabel: { + //普通文本 + innerHTML: poi.markerLabel, + //设置样式 + style: { + color: '#fff', + fontSize: '110%', + marginTop: '2px' + } + }, + iconStyle: poi.color, + map: this.aMap, + position: poi.position + }); + }); + } +} + +export interface POI { + markerLabel: string; + color: string; + position: Array; }