Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2022-03-22 10:26:19 +08:00
parent a78db667e6
commit 41b5ba41b0
10 changed files with 131 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/routes/financial-management/components/payment-record/payment-record.component.ts
View File

@ -82,7 +82,7 @@ export class PaymentRecordComponent implements OnInit {
hidden: true
}
},
orderSn: {
orderPaymentCode: {
type: 'string',
title: '支付编号',
ui: {

2
src/app/routes/order-management/components/bulk-detail-change/bulk-detail-change.component.html
View File

@ -348,7 +348,7 @@
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="mapList"></amap-path-simplifier>
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList"></amap-path-simplifier>
</div>
</div>
</nz-card>

2
src/app/routes/order-management/components/bulk-detail/bulk-detail.component.html
View File

@ -212,7 +212,7 @@
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [pois]="pois" [mapHeight]="'600px'" [MapList]="mapList"></amap-path-simplifier>
<amap-path-simplifier [mapWidth]="'100%'" [pois]="pois" [mapHeight]="'600px'" [mapList]="mapList"></amap-path-simplifier>
</div>
</div>
</nz-card>

2
src/app/routes/order-management/components/vehicle-detail-change/vehicle-detail-change.component.html
View File

@ -322,7 +322,7 @@
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="mapList"></amap-path-simplifier>
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList"></amap-path-simplifier>
</div>
</div>
</nz-card>

2
src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.html
View File

@ -218,7 +218,7 @@
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="mapList" [pois]="pois"></amap-path-simplifier>
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList" [pois]="pois"></amap-path-simplifier>
</div>
</div>
</nz-card>

2
src/app/routes/order-management/modal/vehicle/view-track/view-track.component.html
View File

@ -16,7 +16,7 @@
</st>
</div>
<div style="flex: 1;" >
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="MapList"></amap-path-simplifier>
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="MapList"></amap-path-simplifier>
</div>
</div>
</nz-card>

2
src/app/routes/waybill-management/components/bulk-detail/bulk-detail.component.html
View File

@ -236,7 +236,7 @@
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="mapList"></amap-path-simplifier>
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList"></amap-path-simplifier>
</div>
</div>
</nz-card>

2
src/app/routes/waybill-management/components/vehicle-detail/vehicle-detail.component.html
View File

@ -216,7 +216,7 @@
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="mapList"></amap-path-simplifier>
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList"></amap-path-simplifier>
</div>
</div>
</nz-card>

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

@ -3,6 +3,7 @@ import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitte
import { amapConf } from '@conf/amap.config';
import { throwError } from 'rxjs';
import { BaseService } from 'src/app/shared/services';
import { InfoItem, MapList, PathList, POI } from '../amap.service';
declare var AMap: any;
declare var AMapUI: any;
declare var Loca: any;
@ -21,41 +22,49 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
infoWindow: any;
markerList: any;
SimpleMarker: any;
// 简单路径信息
@Input()
pathList: any = [];
mapList: MapList[] = [];
// 完整路线图信息
@Input()
pathList: PathList[] = [];
// 当前选中路线图下标
@Input()
selectedIndex = 0;
// 标点数组
@Input()
pois: POI[] = [];
private _pois: any = [];
@Input()
mapWidth = '800px';
@Input() MapList: any;
@Input()
mapHeight = '500px';
@Output()
readonly clcikPointEvent = new EventEmitter<any>();
@Input()
pois: any = [];
private _pois: any = [];
constructor(public service: BaseService) {}
ngOnChanges(changes: SimpleChanges): void {
// 路线图变更: 设置路线图, 指定路线图
if (changes?.pathList?.currentValue && this?.pathSimplifierIns) {
this.setData(changes.pathList?.currentValue);
this.setPathIndex(this.selectedIndex);
}
if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) {
// console.log(this.MapList);
// 路径信息变更: 更新路线图, 设置路线图, 指定路线图, 获取终点地址信息并标点
if (changes?.mapList?.currentValue && this?.pathSimplifierIns && changes.mapList?.currentValue.length > 0) {
// 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);
this.getPoiByPositon(this.mapList[this.mapList?.length - 1]?.lnglat);
}
// 标点列表变更: 更新标点数据, 绘画标点
if (changes?.pois?.currentValue) {
// console.log(this.pois);
this._pois = changes?.pois?.currentValue;
@ -68,11 +77,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
this.mapInit();
}
ngOnDestroy(): void {
// 销毁地图数据
if (this.aMap) {
this.aMap.destroy();
}
}
/** 地图初始化 */
mapInit() {
AMapLoader.load({
key: CONFIG.key,
@ -94,14 +105,15 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
});
this.aMap.on('complete', () => {
// this.service.msgSrv.info('地图加载完成 !');
// 信息窗口
this.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -40)
});
// 初始化定位工具
this.geocoder = new AMap.Geocoder({
radius: 1000 //范围，默认：500
radius: 500 //范围，默认：500
});
// this.service.msgSrv.info('地图加载完成 !');
this.pathInit();
this.setPOIS();
});
@ -111,34 +123,20 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
});
}
/** 初始化路径工具 */
pathInit() {
this.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 '';
},
map: this.aMap,
// 重组路径数据
getPath: (pathData: PathList, pathIndex: number) => pathData.points.map(points => points.lnglat),
// 鼠标悬浮事件
getHoverTitle: (pathData: PathList, pathIndex: number, pointIndex: number) => '',
renderOptions: {
renderAllPointsIfNumberBelow: 10 //绘制路线节点，如不需要可设置为-1
renderAllPointsIfNumberBelow: 20 //绘制路线节点，如不需要可设置为-1
}
});
(window as any).pathSimplifierIns = this.pathSimplifierIns;
this.setData(this.pathList);
if (this.pathList.length > 0) {
@ -147,26 +145,39 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
this.pathSimplifierIns.on('pointClick', (e: any, info: any) => {
this.clcikPointEvent.emit({ e, info });
console.log(`Click: ${info.pathData.points[info.pointIndex].name}`);
// 弹出信息窗口
if (info) {
this.geocoder.getAddress(info.pathData.points[info.pointIndex].lnglat, (status: any, result: any) => {
if (status === 'complete' && result.info === 'OK') {
// result中对应详细地理坐标信息
this.selectedPOI({
position: info.pathData.points[info.pointIndex].lnglat,
content: `
<label style="font-weight: bold;">${result.regeocode.formattedAddress}<label/><br/>
<label style="font-weight: 400;">车速: ${info.pathData.points[info.pointIndex].name}<label/>
`
});
}
});
}
});
}
/** 初始化标点工具 */
setPOIS() {
AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker'], (MarkerList: any, SimpleMarker: any) => {
this.markerList = new MarkerList({
//关联的map对象
map: this.aMap,
//返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
getPosition: (dataItem: any) => {
return dataItem.position;
},
getPosition: (dataItem: POI) => dataItem.position,
//返回数据项对应的Marker
getMarker: (dataItem: any, context: any, recycledMarker: any) => {
getMarker: (dataItem: POI, context: any, recycledMarker: any) => {
//存在可回收利用的marker
if (recycledMarker) {
//直接更新内容返回
recycledMarker.setIconLabel(context.id);
recycledMarker.setIconStyle(dataItem.iconStyle);
recycledMarker.setIconStyle(dataItem.color);
return recycledMarker;
}
this.SimpleMarker = SimpleMarker;
@ -189,7 +200,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
});
},
//返回数据项对应的infoWindow
getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => {
getInfoWindow: (dataItem: POI, context: any, recycledInfoWindow: any) => {
this.selectedPOI(dataItem);
return null;
}
@ -202,15 +213,26 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
});
}
setData(pathList: any[]) {
/**
* 设置路线图数据
* @param pathList
*/
setData(pathList: PathList[]) {
this.pathSimplifierIns.setData(pathList);
}
/**
* 指定路线图
* @param index
*/
setPathIndex(index: number) {
this.pathSimplifierIns.setSelectedPathIndex(index);
this.startNav();
}
/**
* 开启巡航
*/
startNav() {
if (this.navigator) {
this.navigator.start();
@ -223,7 +245,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
}
}
/** 根据经纬度获取地址信息 */
/** 根据标点经纬度获取地址信息 */
getPoiByPositon(position: string[]) {
this.geocoder.getAddress(position, (status: any, result: any) => {
if (status === 'complete' && result.info === 'OK') {
@ -232,7 +254,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
if (this.markerList) {
this.markerList.render(this._pois);
}
// this.setPOI({ markerLabel: '终', color: 'red', position: position });
}
});
}
@ -240,45 +261,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
/**
* 选中标点，设置窗口信息
*
* @param location
* @param infoItem
*/
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
});
});
selectedPOI(infoItem: InfoItem) {
this.infoWindow.setContent(infoItem.content || `地址: <pre>${infoItem.title}</pre>`);
this.infoWindow.open(this.aMap, infoItem.position);
this.infoWindow.setPosition(infoItem.position);
// 地图定位居中
this.aMap.setCenter(infoItem.position);
}
}
export interface POI {
markerLabel: string;
color: string;
position: string[];
}

52
src/app/shared/components/amap/amap.service.ts
View File

@ -13,6 +13,7 @@ import { Observable, Subject, throwError } from 'rxjs';
import AMapLoader from '@amap/amap-jsapi-loader';
import { amapConf } from '@conf/amap.config';
declare var AMap: any;
declare var AMapUI: any;
const CONFIG = amapConf;
@Injectable({
@ -82,4 +83,55 @@ export class AmapService {
return this.currentSub;
}
/**
* 增加标记点
*
* @param poi
*/
setPOI(poi: POI, aMap: any) {
AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker: any) => {
//启动页面
new SimpleMarker({
//普通文本
iconLabel: {
//普通文本
innerHTML: poi.markerLabel,
//设置样式
style: {
color: '#fff',
fontSize: '110%',
marginTop: '2px'
}
},
iconStyle: poi.color,
map: aMap,
position: poi.position
});
});
}
}
export interface POI {
markerLabel?: string;
title: string;
color: string;
position: string[];
}
export interface InfoItem {
title?: string;
content?: string;
position: string[];
}
export interface MapList {
name: string;
time: string;
lnglat: string[];
}
export interface PathList {
name: string;
points: MapList[];
}