tqApp-webView/pagesMap/pastRoute/module/h5Map.vue

<template>
	<view class="pastRoute">
		<map-container 
			ref="mapContainerRef"
			toolMapKey="moveAnimation"
			 @onload="mapOnload"
			 :pointsData="pointsData" 
			 @handleMarkerClick="handleMarkerClick"
             @moving="mapMoving"
		>
		</map-container>
	
		<view class="options">
			<view class="options-item" @click="showSatelliteLayer">
				<image
				  style="width: 100%; height: 100%"
				  :src="$getImages('/assetsMobile/images/map/icon/weixing.png')"
				/>
			</view>
			
			<view class="options-item" @click="showPanel">
				<image
				  style="width: 100%; height: 100%"
				  :src="$getImages('/assetsMobile/images/map/icon/boxselection.png')"
				/>
			</view>
			
			<view class="options-item" @click="queryLocation">
				<image
				  style="width: 100%; height: 100%"
				  :src="$getImages('/assetsMobile/images/map/icon/position.png')"
				/>
			</view>
			
		</view>
	
		<panel ref="panelRef"
			 @startAnimation="startAnimation"
			@pauseAnimation="pauseAnimation"
			@resumeAnimation="resumeAnimation"
		>
		</panel>
		
		<veh-info ref="vehInfoRef" :item="historyItem"></veh-info>

        <view class="slider-group" v-if="pointsData.length">
            <image style="width: 58rpx; height: 58rpx" v-show="playState === 2 || playState === 0" @click="play" :src="$getImages('/assetsMobile/images/map/icon/track/play.png')" />
            <image style="width: 58rpx; height: 58rpx" v-show="playState === 1 || playState === 3" @click="play" :src="$getImages('/assetsMobile/images/map/icon/track/pause.png')" />
            <image style="width: 58rpx; height: 58rpx;margin-left: 4rpx;" @click="refresh" :src="$getImages('/assetsMobile/images/map/icon/track/refresh.png')" />
            <div class="slider-box">
                <!-- disabled -->
                 <u-slider @input="sliderInput" @change="sliderChange" v-model="progressBar" :min="0" :max="sliderMax" :disabled="sliderMax === 1"></u-slider>
                 <view class="slider-text">{{formatTooltip}}</view>
             </div>
        </view>
	</view>
</template>

<script>
import MapContainer from '@/components/MapContainer'
import panel from './panel.vue'  //操作面板
import vehInfo from './vehInfo.vue'
export default {
	components: {
		MapContainer,
		panel,
		vehInfo,
	},
	data() {
		return {
            progressBar:0,
            sliderMax:1,
            playState:0,//0未开始 1开始播放中 2暂停播放中 3继续播放中
			//卫星图层
			isShowStelliteLayer: false,
			historyItem: null
		}
	},
	computed: {
		pointsData() {			
			return this.$store.state.pastRoute.trackRecordArr;
		},
        formatTooltip(){
            return this.$store.state.pastRoute.trackRecordArr[this.progressBar]?.gpsTime
        },
		pastRouteParams(){
            return this.$store.state.pastRoute.pastRouteParams;
        }
	},
    watch: {
        pointsData:{
            deep: true,
            handler(newVal) {
                this.resetAll();
                this.$nextTick(() => {
                    this.sliderMax= newVal.length-1 
                })
            }
        },
		pastRouteParams: {
			immediate: false,
			deep: true,
			handler(newVal) {
                console.log('查询参数更新',this.$store.state.pastRoute.vehStopArr)
                if (newVal.parkRecord) {
                    this.$refs.mapContainerRef.createProjects('createMarker', { list: this.$store.state.pastRoute.vehStopArr, type: 'vehStop' })
                }
                if (newVal.warning) {
                    this.$refs.mapContainerRef.createProjects('createMarker', { list: this.$store.state.pastRoute.veAlarmArr, type: 'veAlarm' })
                }
			}
		}
	},
	onReady () {	
		console.log('123')
	},
	methods: {
        play(){
            if (this.sliderMax === 1) return;
                switch (this.playState) {
                    case 0:
                    this.startAnimation() //开始播放
                        this.playState = 1
                        break;
                    case 1:
                    this.pauseAnimation() //暂停
                        this.playState = 2
                        break;
                    case 2:
                    this.resumeAnimation() //继续
                        this.playState = 3
                        break;
                    case 3:
                   this.pauseAnimation() //暂停
                        this.playState = 2
                        break;
                }
        },
        refresh(){
            if (this.sliderMax === 1) return;
                this.progressBar = 0
                this.sliderInput(0)
                this.sliderChange(0)
        },
        sliderInput(e){
            console.log('input',e)
            let item = this.pointsData[e]
            this.$refs.mapContainerRef.createMoveAlongFn.moveTo({ lnglat: [Number(item.lng02), Number(item.lat02)], angle: item.direction, index: e })
        },
        sliderChange(e){
            console.log('change',e)
            let item = this.pointsData[e]
            this.$refs.mapContainerRef.createMoveAlongFn.moveTo({ lnglat: [Number(item.lng02), Number(item.lat02)], angle: item.direction, index: e })
            this.playState = 1
            this.startAnimation()
            
        },
        resetAll(){
            this.playState = 0
            this.progressBar = 0
            this.sliderMax = 1
        },
        mapMoving(e){
            console.log('mapMoving',e)
           this.progressBar=e.index
        },
		 // 查询自身位置
		queryLocation() {
		  uni.getLocation({
		    type: "gcj02",
		    success: (res) => {
				const {latitude,longitude} = res
				  this.$refs.mapContainerRef.setZoomAndCenter(12,[longitude,latitude],true)
		    },
		    fail: (res) => {
		      console.log('定位失败',JSON.stringify(res));
		    }
		  });
		},
		//操作面板
		showPanel() {
			this.$refs.panelRef.show()
		},
		//展示卫星图层
		showSatelliteLayer() {
			this.isShowStelliteLayer = !this.isShowStelliteLayer
			if(this.$refs.mapContainerRef) this.$refs.mapContainerRef.setStelliteLayer(this.isShowStelliteLayer)
		},
		//点击标注点
		handleMarkerClick(e,key) {
			console.log('修改车辆弹框',e)
			let item = this.$store.state.pastRoute.trackRecordArr[e.index]
			this.historyItem = item
			// console.log(item,'handleMarkerClick')
			if(key == 'click') {
				this.$refs.vehInfoRef.show()
			}
			
		},
		
		startAnimation() {
		    console.log('重新开始')
			// console.log( this.$refs.mapContainerRef,' this.$refs.mapContainerRef.createMoveAlongFn')
		    this.$refs.mapContainerRef.createMoveAlongFn.startAnimation()
		},
		pauseAnimation() {
		    console.log('暂停')
		    this.$refs.mapContainerRef.createMoveAlongFn.pauseAnimation()
		},
		resumeAnimation() {
		    console.log('继续')
		    this.$refs.mapContainerRef.createMoveAlongFn.resumeAnimation()
		},
		
		mapOnload() {
			
		},
		
	},
	beforeDestroy() {
		this.$store.dispatch('setTrackRecordArr',[])
	}
}
</script>

<style lang="scss" scoped>
.pastRoute {
	width: 100%;
	height: 100vh;
	position: relative;
	#map {
		width: 750rpx; 
		height: 100%;
	}
	
	.options {
		position: absolute;
		width: 72rpx;
		right: 30rpx;
		bottom: 156rpx;
		// box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.15);
		z-index: 9999;
		
		.options-item {
			height: 72rpx;
			
		}
		.options-item+.options-item{
			margin-top: 20rpx;
		}
	}

    .slider-group{
        position: fixed;
        bottom: 12rpx;
        // top: 0;
        width: 96%;
        padding: 22rpx 22rpx;
        background: #E5F2FF;
        margin-left: 2%;
        border-radius: 12rpx;
        margin-top: 24rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .slider-box {
                flex: 1;
                margin-left: 2rpx;
                // transform: scale(0.88);
                position: relative;
                .slider-text{
                    position: absolute;
                    left: 32rpx;
                    bottom: -20rpx;
                    color: #888;
                    font-size: 28rpx;
                }
            }
    }
}	
</style>