edit

src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html

@@ -8,4 +8,8 @@
  * @FilePath     : \\tms-obc-web\\src\\app\\shared\\components\\amap\\amap-path-simplifier\\amap-path-simplifier.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
-<div class="map-container" id="container" tabindex="0" [style]="{width: mapWidth, height: mapHeight}"></div>
+<div class="map-container" id="container" tabindex="0" [style]="{width: mapWidth, height: mapHeight}"></div>
+<div style="display: flex;align-items: center;">
+    <div>巡航倍数 : <input type="number" [ngModel]="navSpeed" min="1" (ngModelChange)="changeMultiple($event)"
+            style="border-color: #f0f0f0;outline: 0;width: 60px;text-align: center;" class="mt-sm ml-sm"/></div>
+</div>

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

@@ -1,9 +1,10 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter, OnDestroy } from '@angular/core';
 import { amapConf } from '@conf/amap.config';
+import { InputNumber } from '@delon/util';
 import { throwError } from 'rxjs';
 import { BaseService } from 'src/app/shared/services';
-import { InfoItem, MapList, PathList, POI } from '../amap.service';
+import { AmapService, InfoItem, MapList, PathList, POI } from '../amap.service';
 declare var AMap: any;
 declare var AMapUI: any;
 declare var Loca: any;
@@ -31,6 +32,9 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
   // 当前选中路线图下标
   @Input()
   selectedIndex = 0;
+  // 巡航倍数
+  @InputNumber()
+  navSpeed = 1;
   // 标点数组
   @Input()
   pois: POI[] = [];
@@ -44,7 +48,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
   @Output()
   readonly clcikPointEvent = new EventEmitter<any>();
 
-  constructor(public service: BaseService) {}
+  constructor(public service: BaseService, private amapService: AmapService) {}
   ngOnChanges(changes: SimpleChanges): void {
     // 路线图变更: 设置路线图, 指定路线图
     if (changes?.pathList?.currentValue && this?.pathSimplifierIns) {
@@ -154,7 +158,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
               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/>
+              <label style="font-weight: 400;">车速: ${info.pathData.points[info.pointIndex].name}<label/><br/>
+              <label style="font-weight: 400;">时间: ${this.amapService.formatTime(info.pathData.points[info.pointIndex].time)}<label/>
               `
             });
           }
@@ -234,14 +239,32 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
    * 开启巡航
    */
   startNav() {
-    if (this.navigator) {
-      this.navigator.start();
+    this.navigator = this.pathSimplifierIns?.createPathNavigator(this.selectedIndex, {
+      loop: true, //循环播放
+      speed: 500000 * this.navSpeed //巡航速度，单位千米/小时
+    });
+    this.navigator?.start();
+  }
+
+  changeMultiple(multiple: number) {
+    if (multiple <= 0) {
+      this.navSpeed = 1;
+      return;
     } else {
-      this.navigator = this.pathSimplifierIns?.createPathNavigator(0, {
-        loop: true, //循环播放
-        speed: 1000000 //巡航速度，单位千米/小时
-      });
-      this.navigator?.start();
+      this.navSpeed = multiple;
+      this.resetNav();
+    }
+  }
+
+  /** 重置巡航 */
+  resetNav() {
+    if (this.navigator) {
+      this.navigator.destroy();
+      setTimeout(() => {
+        this.startNav();
+      }, 200);
+    } else {
+      this.startNav();
     }
   }
 

src/app/shared/components/amap/amap.service.ts

@@ -12,6 +12,8 @@ import { Injectable } from '@angular/core';
 import { Observable, Subject, throwError } from 'rxjs';
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { amapConf } from '@conf/amap.config';
+import { formatDate } from '@angular/common';
+import { DateTimePickerUtil } from '@delon/util';
 declare var AMap: any;
 declare var AMapUI: any;
 
@@ -110,6 +112,10 @@ export class AmapService {
       });
     });
   }
+
+  formatTime(time: string): string {
+    return `${time.slice(0, 4)}-${time.slice(4, 6)}-${time.slice(6, 8)} ${time.slice(9, 11)}:${time.slice(11, 13)}:${time.slice(13, 15)}`;
+  }
 }
 
 export interface POI {