小车动画实现

frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue

@@ -95,7 +95,14 @@
 <!--                <div v-for="(item,i) in view.lines" :key="i" >-->
 <!--                    {{item[0].locationTime}} ~ {{item[item.length-1].locationTime}}-->
 <!--                </div>-->
-                <q-option-group v-model="options.showLines" @update:model-value="changeShowLines" :options="options.lines" type="checkbox" dense></q-option-group>
+                <q-option-group v-model="options.showLines" @update:model-value="changeShowLines" :options="options.lines" type="checkbox" dense>
+                    <template v-slot:label="opt">
+                        <div class="row items-center">
+                            <span>{{ opt.label }}</span>
+                            <q-icon @click.stop="play(opt)" name="fas fa-play" color="teal" size="0.625em" class="q-ml-sm" />
+                        </div>
+                    </template>
+                </q-option-group>
             </q-scroll-area>
         </div>
     </div>
@@ -108,9 +115,7 @@ import DateTimeSelector from "matrix-middle-service-web/src/components/DateTimeS
 import {useQuasar} from "quasar";
 import moment from "moment";
 import {locationRecord} from "matrix-middle-service-web/src/api/location/record";
-import {createCanvasDir} from "matrix-middle-service-web/src/views/record/logic/icon";
 import {getAvgSpeed, getMaxSpeed} from "matrix-middle-service-web/src/views/record/logic/speed";
-import {randomColorList} from "matrix-middle-service-web/src/views/record/logic/color";
 import {
     checkLoginStatus,
     loginRequest,
@@ -119,6 +124,7 @@ import {
 import {fixedLocationHandler} from "matrix-middle-service-web/src/views/record/logic/location";
 import {drawMarkers} from "matrix-middle-service-web/src/views/record/logic/markers";
 import {drawLines} from "matrix-middle-service-web/src/views/record/logic/lines";
+import {playAnimation} from "matrix-middle-service-web/src/views/record/logic/play";
 const $q = useQuasar();
 const scrollArea = reactive({
     thumbStyle: {
@@ -153,6 +159,10 @@ const date = ref({
 const feature = reactive({
     showFixed: false
 })
+function play(item){
+    console.log(item)
+    playAnimation(map,data,view.lines[item.value],data.polylines[item.value])
+}
 // 地图实例 和 数据不要交给 vue 管理 否则性能大打折扣 且 会有各种奇葩问题
 let map = {}
 const data = {
@@ -163,6 +173,7 @@ const data = {
     markers: [],
     tmpMarker: null,
     infoWindow: {},
+    animateMarker: null,
 }
 const view = reactive({
     filterData: [],
@@ -266,7 +277,8 @@ AMapLoader.load({
         "AMap.Scale",
         "AMap.HawkEye",
         "AMap.ToolBar",
-        "AMap.ControlBar"
+        "AMap.ControlBar",
+        "AMap.MoveAnimation"
     ],// 需要使用的的插件列表，如比例尺'AMap.Scale'等
     "lang": "zh_cn"
 }).then((AMap) => {

frontend/matrix-middle-service-web/src/views/record/logic/play.ts

@@ -0,0 +1,30 @@
+export function playAnimation(map,data,line,polyline){
+    console.log("playAnimation",line,polyline)
+    if(!data.animateMarker){
+        data.animateMarker = new AMap.Marker({
+            map: map,
+            position: [0,0],
+            icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
+            offset: new AMap.Pixel(-13, -26),
+            autoRotation: true
+        })
+    }
+
+    let path = line.map((item) => {
+        return new AMap.LngLat(item.longitude, item.latitude)
+    })
+
+    data.animateMarker.stopMove();
+    data.animateMarker.on("movealong",()=>{
+        // map.add(data.animateMarker)
+    })
+    data.animateMarker.on("moveend",()=>{
+        // setTimeout(()=>{
+        //     map.remove(data.animateMarker)
+        // },100)
+    })
+    data.animateMarker.moveAlong(polyline.getPath(),{
+        duration: 1000/60,
+        autoRotation: true
+    });
+}