Merge branch 'develop' of https://gitlab.eascs.com/tms-ui/tms-obc-web into develop
This commit is contained in:
@ -203,7 +203,7 @@
|
|||||||
</st>
|
</st>
|
||||||
</div>
|
</div>
|
||||||
<div nz-col [nzSpan]="12">
|
<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" [pois]="pois"></amap-path-simplifier>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nz-card>
|
</nz-card>
|
||||||
|
|||||||
@ -24,8 +24,9 @@ import { OrderManagementService } from '../../services/order-management.service'
|
|||||||
export class OrderManagementVehicleDetailComponent implements OnInit {
|
export class OrderManagementVehicleDetailComponent implements OnInit {
|
||||||
id = this.route.snapshot.params.id;
|
id = this.route.snapshot.params.id;
|
||||||
trajectory = 'car';
|
trajectory = 'car';
|
||||||
mapList:any[] = []; //地图点位数据组
|
mapList: any[] = []; //地图点位数据组
|
||||||
addressItems:any[] = []; //打点地址数据组
|
pois: any[] = [];
|
||||||
|
addressItems: any[] = []; //打点地址数据组
|
||||||
i: any = {
|
i: any = {
|
||||||
unLoadingPlaceList: [],
|
unLoadingPlaceList: [],
|
||||||
billExpenseDetails: [],
|
billExpenseDetails: [],
|
||||||
@ -40,7 +41,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
|
|||||||
isVisible = false;
|
isVisible = false;
|
||||||
logColumns2: STColumn[] = [
|
logColumns2: STColumn[] = [
|
||||||
{ title: '时间', index: 'vinOutTime' },
|
{ title: '时间', index: 'vinOutTime' },
|
||||||
{ title: '地点', index: 'cityName' },
|
{ title: '地点', index: 'cityName' }
|
||||||
];
|
];
|
||||||
logColumns: STColumn[] = [
|
logColumns: STColumn[] = [
|
||||||
{ title: '款项', index: 'expenseCodeLabel' },
|
{ title: '款项', index: 'expenseCodeLabel' },
|
||||||
@ -72,15 +73,33 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
|
|||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.initData();
|
this.initData();
|
||||||
this.getTrajectory()
|
this.getTrajectory();
|
||||||
}
|
}
|
||||||
|
|
||||||
initData() {
|
initData() {
|
||||||
this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => {
|
this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => {
|
||||||
if (res) {
|
if (res) {
|
||||||
|
console.log(res);
|
||||||
|
|
||||||
this.i = res;
|
this.i = res;
|
||||||
this.billExpenses = this.i?.billExpenseDetails?.filter((data:any)=>data.expenseCode ==="PRE" || data.expenseCode ==="RECE" ||data.expenseCode ==="BACK" )
|
this.pois = [
|
||||||
this.i.scheduleVOList = this.i?.scheduleVOList?.filter((data:any)=>data.displayStatus !=="HIDE");
|
{
|
||||||
|
markerLabel: '起',
|
||||||
|
color: 'blue',
|
||||||
|
position: [res.startingPoint.longitude, res.startingPoint.latitude],
|
||||||
|
title: res.startingPoint.detailedAddress
|
||||||
|
},
|
||||||
|
{
|
||||||
|
markerLabel: '终',
|
||||||
|
color: 'red',
|
||||||
|
position: [res.endPoint.longitude, res.endPoint.latitude],
|
||||||
|
title: res.endPoint.detailedAddress
|
||||||
|
}
|
||||||
|
];
|
||||||
|
this.billExpenses = this.i?.billExpenseDetails?.filter(
|
||||||
|
(data: any) => data.expenseCode === 'PRE' || data.expenseCode === 'RECE' || data.expenseCode === 'BACK'
|
||||||
|
);
|
||||||
|
this.i.scheduleVOList = this.i?.scheduleVOList?.filter((data: any) => data.displayStatus !== 'HIDE');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -128,11 +147,11 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 获取车辆轨迹
|
// 获取车辆轨迹
|
||||||
getTrajectory(){
|
getTrajectory() {
|
||||||
this.service.request(this.service.$api_get_getTrajectory, { id: this.id }).subscribe(res => {
|
this.service.request(this.service.$api_get_getTrajectory, { id: this.id }).subscribe(res => {
|
||||||
if (res) {
|
if (res) {
|
||||||
const points = res.trackArray;
|
const points = res.trackArray;
|
||||||
let list :any[] = [];
|
let list: any[] = [];
|
||||||
points?.forEach((item: any) => {
|
points?.forEach((item: any) => {
|
||||||
list.push({
|
list.push({
|
||||||
name: `${item.spd}km/h`,
|
name: `${item.spd}km/h`,
|
||||||
@ -141,7 +160,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
|
|||||||
});
|
});
|
||||||
this.mapList = list;
|
this.mapList = list;
|
||||||
this.addressItems = res.cityArray;
|
this.addressItems = res.cityArray;
|
||||||
if(this.addressItems && this.addressItems.length > 0){
|
if (this.addressItems && this.addressItems.length > 0) {
|
||||||
this.addressItems.forEach(item => {
|
this.addressItems.forEach(item => {
|
||||||
item.vinOutTime = this.getLocalTime(item.vinOutTime);
|
item.vinOutTime = this.getLocalTime(item.vinOutTime);
|
||||||
});
|
});
|
||||||
@ -151,11 +170,11 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 获取司机轨迹
|
// 获取司机轨迹
|
||||||
getDriverTrajectory(){
|
getDriverTrajectory() {
|
||||||
this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.id }).subscribe(res => {
|
this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.id }).subscribe(res => {
|
||||||
if (res) {
|
if (res) {
|
||||||
const points = res.tracks;
|
const points = res.tracks;
|
||||||
let list :any[] = [];
|
let list: any[] = [];
|
||||||
points?.forEach((item: any) => {
|
points?.forEach((item: any) => {
|
||||||
list.push({
|
list.push({
|
||||||
name: item.hgt,
|
name: item.hgt,
|
||||||
@ -164,7 +183,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
|
|||||||
});
|
});
|
||||||
this.mapList = list;
|
this.mapList = list;
|
||||||
this.addressItems = [...res.enclosureDataAppTrack];
|
this.addressItems = [...res.enclosureDataAppTrack];
|
||||||
if(this.addressItems && this.addressItems.length > 0){
|
if (this.addressItems && this.addressItems.length > 0) {
|
||||||
this.addressItems.forEach(item => {
|
this.addressItems.forEach(item => {
|
||||||
item.vinOutTime = this.getLocalTime(item.gtm);
|
item.vinOutTime = this.getLocalTime(item.gtm);
|
||||||
item.cityName = item.appAdress;
|
item.cityName = item.appAdress;
|
||||||
@ -173,10 +192,10 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
trajectoryChange(event:any){
|
trajectoryChange(event: any) {
|
||||||
if(event ==='car'){
|
if (event === 'car') {
|
||||||
this.getTrajectory()
|
this.getTrajectory();
|
||||||
}else if(event ==='driver'){
|
} else if (event === 'driver') {
|
||||||
this.getDriverTrajectory();
|
this.getDriverTrajectory();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
<nz-card class="search-box" nzBordered>
|
<nz-card class="search-box" nzBordered>
|
||||||
<div nz-row nzGutter="8">
|
<div nz-row nzGutter="8">
|
||||||
<div nz-col [nzXl]="_$expand ? 24 : 18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
|
<div nz-col [nzXl]="_$expand ? 24 : 18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
|
||||||
<sf #sf [schema]="searchSchema" [ui]="{ '*': { spanLabelFixed: 90, grid: { lg: 8, md: 12, sm: 12, xs: 24 } } }"
|
<sf #sf [schema]="searchSchema" [ui]="{ '*': { spanLabelFixed: 120, grid: { lg: 8, md: 12, sm: 12, xs: 24 } } }"
|
||||||
[compact]="true" [button]="'none'"></sf>
|
[compact]="true" [button]="'none'"></sf>
|
||||||
</div>
|
</div>
|
||||||
<div nz-col [nzXl]="_$expand ? 24 : 6" [nzLg]="24" [nzSm]="24" [nzXs]="24" [class.expend-options]="_$expand"
|
<div nz-col [nzXl]="_$expand ? 24 : 6" [nzLg]="24" [nzSm]="24" [nzXs]="24" [class.expend-options]="_$expand"
|
||||||
|
|||||||
@ -38,9 +38,9 @@ export class InvoicedListComponent implements OnInit {
|
|||||||
if (this.sf) {
|
if (this.sf) {
|
||||||
Object.assign(requestOptions.body, {
|
Object.assign(requestOptions.body, {
|
||||||
...this.sf.value,
|
...this.sf.value,
|
||||||
createTime: {
|
invoicedate: {
|
||||||
start: this.sf.value.createTime?.[0] || '',
|
start: this.sf.value.invoicedate?.[0] || '',
|
||||||
end: this.sf.value.createTime?.[1] || ''
|
end: this.sf.value.invoicedate?.[1] || ''
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -135,7 +135,7 @@ export class InvoicedListComponent implements OnInit {
|
|||||||
autocomplete: 'off'
|
autocomplete: 'off'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
createTime: {
|
invoicedate: {
|
||||||
title: '开票日期',
|
title: '开票日期',
|
||||||
type: 'string',
|
type: 'string',
|
||||||
ui: {
|
ui: {
|
||||||
@ -145,13 +145,11 @@ export class InvoicedListComponent implements OnInit {
|
|||||||
nzShowTime: true
|
nzShowTime: true
|
||||||
} as SFDateWidgetSchema
|
} as SFDateWidgetSchema
|
||||||
},
|
},
|
||||||
arto: {
|
artoname: {
|
||||||
type: 'string',
|
type: 'string',
|
||||||
title: '购买人',
|
title: '购买人',
|
||||||
enum: [{ label: '全部', value: '全部' }],
|
|
||||||
ui: {
|
ui: {
|
||||||
widget: 'select',
|
placeholder: '请输入',
|
||||||
placeholder: '请选择',
|
|
||||||
visibleIf: {
|
visibleIf: {
|
||||||
expand: (value: boolean) => value
|
expand: (value: boolean) => value
|
||||||
}
|
}
|
||||||
@ -167,7 +165,7 @@ export class InvoicedListComponent implements OnInit {
|
|||||||
visibleIf: {
|
visibleIf: {
|
||||||
expand: (value: boolean) => value
|
expand: (value: boolean) => value
|
||||||
},
|
},
|
||||||
asyncData: () => this.service.getNetworkFreightForwarder()
|
asyncData: () => this.service.getNetworkFreightForwarder({}, true)
|
||||||
},
|
},
|
||||||
default: ''
|
default: ''
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,6 +17,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
aMap: any;
|
aMap: any;
|
||||||
pathSimplifierIns: any;
|
pathSimplifierIns: any;
|
||||||
navigator: any;
|
navigator: any;
|
||||||
|
infoWindow: any;
|
||||||
|
markerList: any;
|
||||||
@Input()
|
@Input()
|
||||||
pathList: any = [];
|
pathList: any = [];
|
||||||
@Input()
|
@Input()
|
||||||
@ -31,40 +33,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
clcikPointEvent = new EventEmitter<any>();
|
clcikPointEvent = new EventEmitter<any>();
|
||||||
|
|
||||||
@Input()
|
@Input()
|
||||||
pois: any = [
|
pois: any = [];
|
||||||
{
|
|
||||||
id: 'A',
|
|
||||||
position: [116.020764, 39.904989],
|
|
||||||
markerLabel: 'X_A',
|
|
||||||
infoWinContent: 'Hello! A',
|
|
||||||
listDesc: '起',
|
|
||||||
color: '#F5222D'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'B',
|
|
||||||
position: [116.405285, 39.904989],
|
|
||||||
markerLabel: 'X_B',
|
|
||||||
infoWinContent: 'Hello! B',
|
|
||||||
listDesc: '终',
|
|
||||||
color: '#1890ff'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'C',
|
|
||||||
position: [116.789806, 39.904989],
|
|
||||||
markerLabel: 'X_C',
|
|
||||||
infoWinContent: 'Hello! C',
|
|
||||||
listDesc: '卸',
|
|
||||||
color: '#1890ff'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'C',
|
|
||||||
position: [116.789806, 39.904989],
|
|
||||||
markerLabel: 'X_C',
|
|
||||||
infoWinContent: 'Hello! C',
|
|
||||||
listDesc: '装',
|
|
||||||
color: '#F5222D'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
constructor(public service: BaseService) {}
|
constructor(public service: BaseService) {}
|
||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
@ -73,7 +42,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
this.setPathIndex(this.selectedIndex);
|
this.setPathIndex(this.selectedIndex);
|
||||||
}
|
}
|
||||||
if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) {
|
if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) {
|
||||||
console.log(this.MapList);
|
// console.log(this.MapList);
|
||||||
this.pathList = [
|
this.pathList = [
|
||||||
{
|
{
|
||||||
name: '路线1',
|
name: '路线1',
|
||||||
@ -83,6 +52,11 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
this.setData(this.pathList);
|
this.setData(this.pathList);
|
||||||
this.setPathIndex(this.selectedIndex);
|
this.setPathIndex(this.selectedIndex);
|
||||||
}
|
}
|
||||||
|
if (changes?.pois?.currentValue && this?.markerList && changes.pois?.currentValue.length > 0) {
|
||||||
|
// console.log(this.pois);
|
||||||
|
this.pois = changes?.pois?.currentValue;
|
||||||
|
this.markerList.render(this.pois);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.mapInit();
|
this.mapInit();
|
||||||
@ -99,7 +73,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
version: CONFIG.version,
|
version: CONFIG.version,
|
||||||
plugins: [
|
plugins: [
|
||||||
// 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
// 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
||||||
'AMap.PathSimplifier'
|
'AMap.PathSimplifier',
|
||||||
|
'AMap.InfoWindow'
|
||||||
],
|
],
|
||||||
AMapUI: {
|
AMapUI: {
|
||||||
version: CONFIG.AMapUIVersion,
|
version: CONFIG.AMapUIVersion,
|
||||||
@ -112,10 +87,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
});
|
});
|
||||||
|
|
||||||
this.aMap.on('complete', () => {
|
this.aMap.on('complete', () => {
|
||||||
|
// 信息窗口
|
||||||
|
this.infoWindow = new AMap.InfoWindow({
|
||||||
|
offset: new AMap.Pixel(0, -40)
|
||||||
|
});
|
||||||
// this.service.msgSrv.info('地图加载完成 !');
|
// this.service.msgSrv.info('地图加载完成 !');
|
||||||
this.pathInit();
|
this.pathInit();
|
||||||
// this.setPOIS();
|
this.setPOIS();
|
||||||
// this.loadPOIS();
|
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
@ -123,88 +101,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
loadPOIS() {
|
|
||||||
AMapUI.loadUI(['overlay/SvgMarker'], (SvgMarker: any) => {
|
|
||||||
if (!SvgMarker.supportSvg) {
|
|
||||||
//当前环境并不支持SVG,此时SvgMarker会回退到父类,即SimpleMarker
|
|
||||||
alert('当前环境不支持SVG');
|
|
||||||
}
|
|
||||||
|
|
||||||
//just some colors
|
|
||||||
var colors = ['#F5222D', '#1890ff'];
|
|
||||||
|
|
||||||
//SvgMarker.Shape下的Shape
|
|
||||||
var shapeKeys = ['WaterDrop'];
|
|
||||||
|
|
||||||
var colNum = 2,
|
|
||||||
rowNum = shapeKeys.length;
|
|
||||||
const markers: any[] = [];
|
|
||||||
|
|
||||||
this.pois.forEach((d: any) => {
|
|
||||||
//创建shape
|
|
||||||
const shape = new SvgMarker.Shape['WaterDrop']({
|
|
||||||
height: 40,
|
|
||||||
strokeWidth: 1,
|
|
||||||
strokeColor: '#ccc',
|
|
||||||
fillColor: '#F5222D'
|
|
||||||
});
|
|
||||||
|
|
||||||
markers.push(
|
|
||||||
new SvgMarker(shape, {
|
|
||||||
map: this.aMap,
|
|
||||||
position: d.position,
|
|
||||||
containerClassNames: 'shape-' + 'WaterDrop',
|
|
||||||
iconLabel: {
|
|
||||||
innerHTML: d.listDesc,
|
|
||||||
style: {
|
|
||||||
top: 7 + 'px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showPositionPoint: true
|
|
||||||
})
|
|
||||||
);
|
|
||||||
});
|
|
||||||
console.log(markers);
|
|
||||||
|
|
||||||
// var pxCenter = this.aMap.lnglatToPixel(this.aMap.getCenter());
|
|
||||||
|
|
||||||
// var startX = pxCenter.getX(),
|
|
||||||
// startY = pxCenter.getY();
|
|
||||||
|
|
||||||
// for (var c = 0; c < colNum; c++) {
|
|
||||||
// for (var r = 0; r < rowNum; r++) {
|
|
||||||
// var idx = r * colNum + c;
|
|
||||||
|
|
||||||
// if (!colors[idx]) {
|
|
||||||
// continue;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// var x = startX + (c - colNum / 2) * 70;
|
|
||||||
// var y = startY + 50 + (r - rowNum / 2) * 80;
|
|
||||||
|
|
||||||
// var labelCenter = shape.getCenter();
|
|
||||||
|
|
||||||
// var position = this.aMap.pixelToLngLat(new AMap.Pixel(x, y));
|
|
||||||
|
|
||||||
// markers.push(
|
|
||||||
// new SvgMarker(shape, {
|
|
||||||
// map: this.aMap,
|
|
||||||
// position: position,
|
|
||||||
// containerClassNames: 'shape-' + shapeKeys[r],
|
|
||||||
// iconLabel: {
|
|
||||||
// innerHTML: String.fromCharCode('A'.charCodeAt(0) + c),
|
|
||||||
// style: {
|
|
||||||
// top: labelCenter[1] - 9 + 'px'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// showPositionPoint: true
|
|
||||||
// })
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
pathInit() {
|
pathInit() {
|
||||||
this.pathSimplifierIns = new AMapUI.PathSimplifier({
|
this.pathSimplifierIns = new AMapUI.PathSimplifier({
|
||||||
zIndex: 100,
|
zIndex: 100,
|
||||||
@ -222,8 +118,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
return lnglatList;
|
return lnglatList;
|
||||||
},
|
},
|
||||||
getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
|
getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
|
||||||
console.log(pathData, pointIndex);
|
|
||||||
|
|
||||||
if (pointIndex >= 0) {
|
if (pointIndex >= 0) {
|
||||||
//point
|
//point
|
||||||
return pathData.name + ',' + pathData.points[pointIndex].name;
|
return pathData.name + ',' + pathData.points[pointIndex].name;
|
||||||
@ -248,126 +142,53 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setPOIS() {
|
setPOIS() {
|
||||||
AMapUI.loadUI(['misc/MarkerList'], (MarkerList: any) => {
|
AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker'], (MarkerList: any, SimpleMarker: any) => {
|
||||||
var markerList = new MarkerList({
|
this.markerList = new MarkerList({
|
||||||
//关联的map对象
|
//关联的map对象
|
||||||
map: this.aMap,
|
map: this.aMap,
|
||||||
|
|
||||||
//选中状态(通过点击列表或者marker)时在Marker和列表节点上添加的class,可以借此编写css控制选中时的展示效果
|
|
||||||
selectedClassNames: 'selected',
|
|
||||||
|
|
||||||
//返回数据项的Id
|
|
||||||
getDataId: (dataItem: any, index: any) => {
|
|
||||||
//index表示该数据项在数组中的索引位置,从0开始,如果确实没有id,可以返回index代替
|
|
||||||
return dataItem.id;
|
|
||||||
},
|
|
||||||
//返回数据项的位置信息,需要是AMap.LngLat实例,或者是经纬度数组,比如[116.789806, 39.904989]
|
//返回数据项的位置信息,需要是AMap.LngLat实例,或者是经纬度数组,比如[116.789806, 39.904989]
|
||||||
getPosition: (dataItem: any) => {
|
getPosition: (dataItem: any) => {
|
||||||
console.log(dataItem);
|
|
||||||
|
|
||||||
return dataItem.position;
|
return dataItem.position;
|
||||||
},
|
},
|
||||||
//返回数据项对应的Marker
|
//返回数据项对应的Marker
|
||||||
getMarker: (dataItem: any, context: any, recycledMarker: any) => {
|
getMarker: (dataItem: any, context: any, recycledMarker: any) => {
|
||||||
//marker的标注内容
|
|
||||||
var content = dataItem.markerLabel;
|
|
||||||
|
|
||||||
var label = {
|
|
||||||
offset: new AMap.Pixel(16, 18), //修改label相对于marker的位置
|
|
||||||
content: content
|
|
||||||
};
|
|
||||||
|
|
||||||
//存在可回收利用的marker
|
//存在可回收利用的marker
|
||||||
if (recycledMarker) {
|
if (recycledMarker) {
|
||||||
//直接更新内容返回
|
//直接更新内容返回
|
||||||
recycledMarker.setLabel(label);
|
recycledMarker.setIconLabel(context.id);
|
||||||
|
recycledMarker.setIconStyle(dataItem.iconStyle);
|
||||||
return recycledMarker;
|
return recycledMarker;
|
||||||
}
|
}
|
||||||
|
|
||||||
//返回一个新的Marker
|
//返回一个新的Marker
|
||||||
return new AMap.Marker({
|
return new SimpleMarker({
|
||||||
label: label
|
//普通文本
|
||||||
|
iconLabel: {
|
||||||
|
//普通文本
|
||||||
|
innerHTML: dataItem.markerLabel,
|
||||||
|
//设置样式
|
||||||
|
style: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: '110%',
|
||||||
|
marginTop: '2px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
iconStyle: dataItem.color,
|
||||||
|
map: this.aMap,
|
||||||
|
position: dataItem.position
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
//返回数据项对应的infoWindow
|
//返回数据项对应的infoWindow
|
||||||
getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => {
|
getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => {
|
||||||
var tpl = '<p><%- dataItem.id %>:<%- dataItem.infoWinContent %><p>';
|
this.selectedPOI(dataItem);
|
||||||
|
return null;
|
||||||
//MarkerList.utils.template支持underscore语法的模板
|
|
||||||
var content = MarkerList.utils.template(tpl, {
|
|
||||||
dataItem: dataItem,
|
|
||||||
dataIndex: context.index
|
|
||||||
});
|
|
||||||
|
|
||||||
if (recycledInfoWindow) {
|
|
||||||
//存在可回收利用的infoWindow, 直接更新内容返回
|
|
||||||
recycledInfoWindow.setContent(content);
|
|
||||||
return recycledInfoWindow;
|
|
||||||
}
|
|
||||||
|
|
||||||
//返回一个新的InfoWindow
|
|
||||||
return new AMap.InfoWindow({
|
|
||||||
offset: new AMap.Pixel(0, -32),
|
|
||||||
content: content
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//返回数据项对应的列表节点
|
|
||||||
getListElement: (dataItem: any, context: any, recycledListElement: any) => {
|
|
||||||
var tpl = '<p><%- dataItem.id %>:<%- dataItem.listDesc %><p>';
|
|
||||||
|
|
||||||
var content = MarkerList.utils.template(tpl, {
|
|
||||||
dataItem: dataItem,
|
|
||||||
dataIndex: context.index
|
|
||||||
});
|
|
||||||
|
|
||||||
if (recycledListElement) {
|
|
||||||
//存在可回收利用的listElement, 直接更新内容返回
|
|
||||||
recycledListElement.innerHTML = content;
|
|
||||||
return recycledListElement;
|
|
||||||
}
|
|
||||||
|
|
||||||
//返回一段html,MarkerList将利用此html构建一个新的dom节点
|
|
||||||
return '<li>' + content + '</li>';
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
//监听选中改变
|
if (this.pois?.length > 0) {
|
||||||
markerList.on('selectedChanged', (event: any, info: any) => {
|
|
||||||
console.log(event, info);
|
|
||||||
});
|
|
||||||
|
|
||||||
//监听Marker和ListElement上的点击
|
|
||||||
markerList.on('markerClick listElementClick', (event: any, record: any) => {
|
|
||||||
//console.log(event, record);
|
|
||||||
});
|
|
||||||
|
|
||||||
//构建一个数据项数组,数据项本身没有格式要求,但需要支持getDataId和getPosition
|
|
||||||
var data = [
|
|
||||||
{
|
|
||||||
id: 'A',
|
|
||||||
position: [116.020764, 39.904989],
|
|
||||||
markerLabel: 'X_A',
|
|
||||||
infoWinContent: 'Hello! A',
|
|
||||||
listDesc: '店铺 A'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'B',
|
|
||||||
position: [116.405285, 39.904989],
|
|
||||||
markerLabel: 'X_B',
|
|
||||||
infoWinContent: 'Hello! B',
|
|
||||||
listDesc: '店铺 B'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'C',
|
|
||||||
position: [116.789806, 39.904989],
|
|
||||||
markerLabel: 'X_C',
|
|
||||||
infoWinContent: 'Hello! C',
|
|
||||||
listDesc: '店铺 C'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
//展示该数据
|
//展示该数据
|
||||||
markerList.render(data);
|
this.markerList.render(this.pois);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -377,7 +198,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
|
|
||||||
setPathIndex(index: number) {
|
setPathIndex(index: number) {
|
||||||
this.pathSimplifierIns.setSelectedPathIndex(index);
|
this.pathSimplifierIns.setSelectedPathIndex(index);
|
||||||
// this.startNav();
|
this.startNav();
|
||||||
}
|
}
|
||||||
|
|
||||||
startNav() {
|
startNav() {
|
||||||
@ -391,4 +212,11 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
|||||||
this.navigator?.start();
|
this.navigator?.start();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -35,7 +35,10 @@ export class AmapService {
|
|||||||
return { keyword: item.detailedAddress, city: item.city };
|
return { keyword: item.detailedAddress, city: item.city };
|
||||||
});
|
});
|
||||||
driving.search(points, (status: any, result: any) => {
|
driving.search(points, (status: any, result: any) => {
|
||||||
const repData = { distance: (result?.routes?.[0]?.distance / 1000).toFixed(2), time: (result?.routes?.[0]?.time / 60 / 60).toFixed(2) };
|
const repData = {
|
||||||
|
distance: (result?.routes?.[0]?.distance / 1000).toFixed(2),
|
||||||
|
time: (result?.routes?.[0]?.time / 60 / 60).toFixed(2)
|
||||||
|
};
|
||||||
this.sub.next(repData);
|
this.sub.next(repData);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user