vue-baidu-map通过路书实现轨迹回放

npm install vue-baidu-map --save

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: '替换成自己的ak'
})

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-row>
        <el-col :span="6">
          <el-form-item label="车辆" prop="vehicleLicence">
            <el-select filterable v-model="queryParams.vehicleLicence" placeholder="请选择车辆" clearable size="small"
                       style="width: 100%"
            >
              <el-option
                v-for="vehicle in vehicleOptions" :key="vehicle.licence" :label="vehicle.licence"
                :value="vehicle.licence"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="查询时间" prop="dateRange">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="-"
              start-placeholder="请选择开始时间"
              end-placeholder="请选择结束时间"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="轨迹速度">
            <el-slider v-model="speed" style="width: 200px" :step="1"></el-slider>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item style="float: right">
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <baidu-map style="height:47.1rem;width:100%" :center="center" :zoom="15" :scroll-wheel-zoom="true">
      <bm-polyline :path="path" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="3" :editing="false"
      ></bm-polyline>
      <bm-marker :position="{lng: startMark.lng, lat: startMark.lat}"></bm-marker>
      <bm-marker :position="{lng: endMark.lng, lat: endMark.lat}"></bm-marker>
      <bml-lushu
        @stop="reset"
        :path="path"
        :icon="icon"
        :play="play"
        :rotation="true"
        :speed="speed * 10"
        :infoWindow="true"
        :content="content"
      >
      </bml-lushu>
    </baidu-map>
  </div>
</template>

<script>
//百度地图
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import { BmlLushu } from 'vue-baidu-map'
import drugMarkerIcon from '@/assets/icons/map_marker_check.png'
import { selectGpsOrbitList } from '@/api/dmp/industry/gps/orbit'
import { listAllVehicle } from '@/api/basic/vehicle'

export default {
  components: {
    BaiduMap,
    BmScale,
    BmNavigation,
    BmMarkerClusterer,
    BmMarker,
    BmInfoWindow,
    BmlLushu
  },
  props: {},
  data() {
    return {
      // 查询参数
      queryParams: {
        vehicleLicence: undefined
      },
      // 日期范围
      dateRange: [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00', new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 23:59:59'],
      play: false,
      path: [],
      center: {
        lng: 116.984646,
        lat: 36.659686
      },
      startMark: {},
      endMark: {},
      icon: {
        url: drugMarkerIcon,
        size: { width: 32, height: 32 },
        opts: { anchor: { width: 27, height: 13 } }
      },
      content: undefined,
      speed: 20,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      vehicleOptions: []
    }
  },
  methods: {
    reset() {
      this.play = false
    },
    handleSearchComplete(res) {
      this.path = res.getPlan(0).getRoute(0).getPath()
    },
    handleQuery() {
      const search = this.addDateRange(this.queryParams, this.dateRange)
      if (this.queryParams.vehicleLicence === undefined) {
        this.msgError('请选择车辆')
        return
      }
      if (search.beginTime === undefined || search.beginTime === '' || search.endTime === undefined || search.endTime === '') {
        this.msgError('请选择查询时间')
        return
      }
      selectGpsOrbitList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        if (response.data.length <= 0) {
          this.msgError('未查询到该车辆的运行数据')
          return
        }
        let length = response.data.length
        let middle = -1
        if (length % 2 === 0) {
          middle = length / 2 + 1
        } else {
          middle = (length + 1) / 2
        }
        response.data.forEach(item => {
          let obj = {
            lng: item.longitude,
            lat: item.latitude
          }
          this.path.push(obj)
        })
        this.center = this.path[middle]
        this.startMark = this.path[0]
        this.endMark = this.path[this.path.length - 1]
        this.content = this.queryParams.vehicleLicence
        this.play = true
      }).catch(error => {

      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.dateRange = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00', new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 23:59:59']
    }
  },
  mounted() {
    listAllVehicle().then(response => {
      this.vehicleOptions = response.data
    })
  }
}
</script>
<style>

</style>