This commit is contained in:
Taric Xin
2022-03-09 18:01:42 +08:00
parent 4dd7acb53a
commit e7cd51ae30
2 changed files with 71 additions and 13 deletions

View File

@ -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

View File

@ -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<string>) {
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(`地址: <pre>${location.title}</pre>`);
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<string>;
}