小车动画支持调节速率
This commit is contained in:
parent
6ea549fde2
commit
d4aba4100a
@ -87,7 +87,14 @@
|
||||
</div>
|
||||
|
||||
<div class="absolute bg-amber-50 rounded-tl z-max text-left absolute-bottom-right pl-1.5" style="width: 350px" v-if="view.lines.length > 0">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
路径数量: {{view.lines.length}}
|
||||
</div>
|
||||
<div>
|
||||
<q-btn dense @click="changeAnimateRate">动画速率: {{view.animateRate}}</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-scroll-area :style="{height: view.lines.length * 22 > 250 ?'250px':view.lines.length * 22 + 'px'}" class="overflow-auto"
|
||||
:thumb-style="scrollArea.thumbStyle"
|
||||
@ -99,7 +106,10 @@
|
||||
<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" />
|
||||
<q-icon v-if="view.animating === opt.value"
|
||||
@click.stop="stop"
|
||||
name="fas fa-stop" color="negative" size="0.625em" class="q-ml-sm"></q-icon>
|
||||
<q-icon v-else @click.stop="play(opt)" name="fas fa-play" color="teal" size="0.625em" class="q-ml-sm" />
|
||||
</div>
|
||||
</template>
|
||||
</q-option-group>
|
||||
@ -110,7 +120,7 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import {onMounted, onUnmounted, reactive, ref} from "vue";
|
||||
import DateTimeSelector from "matrix-middle-service-web/src/components/DateTimeSelector.vue";
|
||||
import {useQuasar} from "quasar";
|
||||
import moment from "moment";
|
||||
@ -124,7 +134,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";
|
||||
import {pauseAnimation, playAnimation, stopAnimation} from "matrix-middle-service-web/src/views/record/logic/play";
|
||||
const $q = useQuasar();
|
||||
const scrollArea = reactive({
|
||||
thumbStyle: {
|
||||
@ -159,9 +169,29 @@ const date = ref({
|
||||
const feature = reactive({
|
||||
showFixed: false
|
||||
})
|
||||
function changeAnimateRate(){
|
||||
const animateRate = [1,2,5,10,20,30,60,120]
|
||||
let curIndex = animateRate.findIndex(item=>item === view.animateRate)
|
||||
let nextIndex = curIndex + 1
|
||||
view.animateRate = nextIndex >= animateRate.length ? animateRate[0] : animateRate[nextIndex]
|
||||
|
||||
if(view.animating !== -1){
|
||||
let index = view.animating
|
||||
pauseAnimation(data)
|
||||
setTimeout(()=>{
|
||||
play(options.lines[index])
|
||||
},100)
|
||||
}
|
||||
}
|
||||
function stop(){
|
||||
stopAnimation(map,data,view)
|
||||
}
|
||||
function play(item){
|
||||
console.log(item,view.lines,data.polylines)
|
||||
playAnimation(map,data,view.lines[item.value])
|
||||
options.showLines = [item.value]
|
||||
changeShowLines()
|
||||
view.animating = item.value
|
||||
playAnimation(map,data,view.lines[item.value],view.animateRate,view,item.value)
|
||||
}
|
||||
// 地图实例 和 数据不要交给 vue 管理 否则性能大打折扣 且 会有各种奇葩问题
|
||||
let map = {}
|
||||
@ -183,10 +213,19 @@ const view = reactive({
|
||||
},
|
||||
lines: [],
|
||||
loginStatus: false,
|
||||
animateRate: 1,
|
||||
animating: -1
|
||||
})
|
||||
onMounted(()=>{
|
||||
view.loginStatus = checkLoginStatus()
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
clearMap()
|
||||
map.remove(data.labelsLayer || {})
|
||||
map.remove(data.tmpMarker || {})
|
||||
map.remove(data.animateMarker || {})
|
||||
map.remove(data.infoWindow || {})
|
||||
})
|
||||
const layers = reactive({
|
||||
satellite: {
|
||||
inst: {},
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
export function playAnimation(map,data,line){
|
||||
let index = 0
|
||||
|
||||
export function playAnimation(map,data,line,animateRate,view,itemIndex){
|
||||
console.log("playAnimation",line)
|
||||
if(!data.animateMarker){
|
||||
if(data.animateMarker){
|
||||
map.remove(data.animateMarker)
|
||||
}
|
||||
data.animateMarker = new AMap.Marker({
|
||||
map: map,
|
||||
position: [0,0],
|
||||
@ -8,7 +12,6 @@ export function playAnimation(map,data,line){
|
||||
offset: new AMap.Pixel(-13, -26),
|
||||
autoRotation: true
|
||||
})
|
||||
}
|
||||
|
||||
if(!data.infoWindow){
|
||||
data.infoWindow = new AMap.InfoWindow({
|
||||
@ -18,25 +21,34 @@ export function playAnimation(map,data,line){
|
||||
});
|
||||
}
|
||||
|
||||
let path = line.map((item) => {
|
||||
if(itemIndex !== view.animating){
|
||||
index = 0
|
||||
}
|
||||
let path = line.slice(index).map((item) => {
|
||||
return new AMap.LngLat(item.longitude, item.latitude)
|
||||
})
|
||||
|
||||
let index = 0
|
||||
data.animateMarker.stopMove();
|
||||
data.animateMarker.on("movealong",()=>{})
|
||||
let lastMovingIndex = 0
|
||||
data.animateMarker.on("moving",(e)=>{
|
||||
if(lastMovingIndex != e.index){
|
||||
index++
|
||||
}
|
||||
lastMovingIndex = e.index
|
||||
console.log("index",index,path.length,line.length)
|
||||
let lastLocation = e.passedPath[e.passedPath.length - 1];
|
||||
data.infoWindow.setPosition(lastLocation);
|
||||
let speed = ((line[e.index].speed||0) * 3.6).toFixed(2)
|
||||
let speed = ((line[index].speed||0) * 3.6).toFixed(2)
|
||||
data.infoWindow.setContent(`<div style="width:100px;background: #fff;border-radius: 5px">${speed} km/h</div>`);
|
||||
map.setCenter(e.target.getPosition(),true)
|
||||
})
|
||||
data.animateMarker.on("moveend",()=>{
|
||||
index++
|
||||
|
||||
if(index === line.length-1){
|
||||
if(index >= line.length-1){
|
||||
setTimeout(()=>{
|
||||
view.animating = -1
|
||||
index = 0
|
||||
data.animateMarker.stopMove()
|
||||
map.remove(data.animateMarker)
|
||||
data.infoWindow.close()
|
||||
},100)
|
||||
@ -46,8 +58,24 @@ export function playAnimation(map,data,line){
|
||||
path: path,
|
||||
})
|
||||
data.animateMarker.moveAlong(polyline.getPath(),{
|
||||
duration: 1000/60,
|
||||
duration: 1000/animateRate,
|
||||
autoRotation: true
|
||||
});
|
||||
data.infoWindow.open(map, data.animateMarker.getPosition())
|
||||
}
|
||||
|
||||
export function stopAnimation(map,data,view){
|
||||
if(!data.animateMarker){
|
||||
return
|
||||
}
|
||||
pauseAnimation(data)
|
||||
view.animating = -1
|
||||
index = 0
|
||||
}
|
||||
|
||||
export function pauseAnimation(data){
|
||||
if(!data.animateMarker){
|
||||
return
|
||||
}
|
||||
data.animateMarker.stopMove()
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user