<template><div id="carpath"><div id="handle"><el-button @click="back" size="small" type="info">返回</el-button><el-date-pickerv-model="value1"type="datetimerange"start-placeholder="开始日期"end-placeholder="结束日期":default-time="['12:00:00']"value-format="yyyy-MM-dd HH:mm:ss"size="small"@change="getDate":disabled="disabled_picker"></el-date-picker><el-selectv-model="value2"placeholder="请选择近期时间"size="small":disabled="disabled_date"clearable@change="changeDate"><el-optionv-for="item in options2":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-selectv-model="value"placeholder="请选择快进速度"size="small"@change="changeSpeed"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-button @click="loadTrackByTime" size="small" type="success">开始</el-button><!-- <el-button @click="pauseData()" size="small" type="primary">{{orbtn}}</el-button> --><el-button @click="restData()" size="small" type="danger">重置</el-button><span id="realTime"></span></div><div id="mapcontainer"></div></div>
</template>

export default {data() {return {disabled_picker: false,disabled_date: false,options: [{value: "显示全部",label: "显示全部",},{value: "速度X2",label: "速度X2",},{value: "速度X5",label: "速度X5",},{value: "速度X10",label: "速度X10",},],value: "",options2: [{value: "最近一小时",label: "最近一小时",},{value: "最近两小时",label: "最近两小时",},{value: "近期一天",label: "近期一天",},],value2: "",points: [],value1: "",beginTime: {},endTime: {},donePoints: [], //已经显示的点。bPoints: [], //保存百度化的坐标组。用于重设地图的中心点和显示级别。timerArr: [], //定时器,pointsLen: "",searchRes: [],interval: null,doubTime: 1000,timimg: "",timer: null,linePoints: [],state: 1,orbtn: "暂停",timeType: "",timepath: "",doubColor: "primary",threeColor: "primary",tenColor: "primary",oneHourColor: "primary",twoHourColor: "primary",dayColor: "primary",wait: "",}},created() {this.date = this.$route.query.datethis.card = this.$route.query.card// console.log(this.date, this.card)},mounted() {this.initMap()},methods: {//改变速度changeSpeed(val) {if (val == "速度X2") {this.doubTime = 500} else if (val == "速度X5") {this.doubTime = 200} else if (val == "速度X10") {this.doubTime = 100} else if (val == "显示全部") {this.doubTime = 0}},//快捷选择时间changeDate(val) {if (val) {this.disabled_picker = true} else {this.disabled_picker = false}console.log(123)console.log(val)if (val == "最近一小时") {this.oneHour()} else if (val == "最近两小时") {this.twoHour()} else if (val == "近期一天") {this.oneDay()}},// 初始化地图initMap() {// 多车数据this.map = new BMap.Map("mapcontainer") // 创建地图实例this.map.enableScrollWheelZoom() //鼠标的缩放this.map.centerAndZoom("兰州", 6) // 初始化地图，设置中心点坐标和地图级别// ==================== 自定义地图this.mapStyle = {features: ["road", "building", "water", "land"], //隐藏地图上的"poi",style: "midnight",}this.map.setMapStyle(this.mapStyle)this.map.enableKeyboard() //启用键盘上下左右键移动地图// ====================this.caricon = new BMap.Icon( //车辆icon"https://webmap0.bdimg.com/image/api/marker_red.png",new BMap.Size(52, 26),{anchor: new BMap.Size(13, 13),imageSize: new BMap.Size(18, 17),})},back() {this.$router.go(-1)clearInterval(this.interval)},loadTrackByTime() {console.log(this.beginTime)//清除当前所有的定时器和地图上等的覆盖物this.map.clearOverlays()for (var t = 0; t < this.timerArr.length; t++) {clearTimeout(this.timerArr[t])}this.timerArr = []clearInterval(this.interval)this.bPoints.length = 0this.donePoints.length = 0// 从 原始数组中查询 符合条件的坐标点this.pointsLen = this.points.lengththis.searchRes = [] //用来装符合条件的信息// 满足条件的放上去for (let i = 0; i < this.pointsLen; i++) {if (this.dateDiff(this.points[i].ts, this.beginTime) > 0 &&this.dateDiff(this.points[i].ts, this.endTime) < 0) {this.searchRes.push(this.points[i])}}console.log(this.searchRes)this.trackTime(this.beginTime)for (var j = 0; j < this.searchRes.length; j++) {this.wait =this.dateDiff(this.searchRes[j].ts, this.beginTime) *this.doubTime //等待时间。;(() => {var pointAg = [this.searchRes[j]]this.timer = setTimeout(() => {var doneLen = this.donePoints.lengththis.linePoints = []if (doneLen != 0) {this.linePoints.push(this.donePoints[doneLen - 1])}this.linePoints.push(pointAg[0])this.donePoints.push(pointAg[0])this.addLine(this.linePoints) //把原始数据的轨迹线添加到地图上。this.addMarker(pointAg)this.bPoints.push(new BMap.Point(pointAg[0].lng, pointAg[0].lat))}, this.wait)this.timerArr.push(this.timer)})()}// setInterval(() => {//     this.setZoom(this.bPoints)// }, 5000)},//根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别setZoom(bPoints) {var view = this.map.getViewport(eval(bPoints))var mapZoom = view.zoomvar centerPoint = view.centerthis.map.centerAndZoom(centerPoint, mapZoom)},//在轨迹点上创建图标，并添加点击事件，显示轨迹点信息。points,数组。addMarker(points) {var pointsLen = points.lengthif (pointsLen == 0) {return}var myIcon = new BMap.Icon("https://webmap0.bdimg.com/image/api/marker_red.png",new BMap.Size(10, 10),{offset: new BMap.Size(10, 10),})// 创建标注对象并添加到地图for (var i = 0; i < pointsLen; i++) {var point = new BMap.Point(points[i].lng, points[i].lat)var marker = new BMap.Marker(point, { icon: myIcon })this.map.addOverlay(marker);(() => {var thePoint = points[i]marker.addEventListener("click", () => {this.showInfo(this, point, thePoint)})})()}},//点击轨迹点后显示信息窗口showInfo(thisMaker, point, thePoint) {console.log(thisMaker)var sContent ="<ul style='margin:0 0 5px 0;padding:0.2em 0'>" +"<li style='line-height: 26px;font-size: 15px;'>" +"<span style='width: 50px;display: inline-block;'>id：</span>" +thePoint.ts +"</li>" +"<li style='line-height: 26px;font-size: 15px;'><span style='width: 50px;display: inline-block;'>状态：</span>" +thePoint.time +"</li>" +"</ul>"var infoWindow = new BMap.InfoWindow(sContent) // 创建信息窗口对象this.map.openInfoWindow(infoWindow, point) //图片加载完毕重绘infowindow},//添加线addLine(points) {var linePoints = []var pointsLen = points.lengthif (pointsLen == 0) {return}// 创建标注对象并添加到地图for (var i = 0; i < pointsLen; i++) {linePoints.push(new BMap.Point(points[i].lng, points[i].lat))}var polyline = new BMap.Polyline(linePoints, {strokeColor: "green",strokeWeight: 1.5,strokeOpacity: 0.7,}) //创建折线this.map.addOverlay(polyline) //增加折线},//显示轨迹运行的时间trackTime(beginTime) {// console.log(this.doubTime)var beginTimestamp = Date.parse(new Date(beginTime))if (this.doubTime !== 0) {this.interval = setInterval(function () {this.timimg = getCountTime(beginTimestamp).timeif (this.timimg != "NaN-NaN-NaN NaN:NaN:NaN") {document.getElementById("realTime").innerHTML ="回放时间:" + this.timimg} else {document.getElementById("realTime").innerHTML ="回放时间:" + "请选时间"}beginTimestamp = beginTimestamp + 1000}, this.doubTime)}//根据时间戳(毫秒)，返回处理过后的时间。function getCountTime(ms) {var resif (ms != undefined) {var today = new Date()today.setTime(ms)} else {var today = new Date()}var year, month, day, hour, minute, secondyear = today.getFullYear()month = today.getMonth() + 1if (month < 10) {month = "0" + month}day = today.getDate()if (day < 10) {day = "0" + day}hour = today.getHours()if (hour < 10) {hour = "0" + hour}minute = today.getMinutes()if (minute < 10) {minute = "0" + minute}second = today.getSeconds()if (second < 10) {second = "0" + second}res = {y: year,M: month,d: day,h: hour,m: minute,s: second,time:year +"-" +month +"-" +day +" " +hour +":" +minute +":" +second,date: year + "-" + month + "-" + day,}return res}},getDate() {if (this.value1) {this.disabled_date = truethis.beginTime = this.value1[0]this.endTime = this.value1[1]} else {this.disabled_date = false}console.log()this.getCarPathTwo()this.dateDiff(this.beginTime, this.endTime)},//求时间差的方法dateDiff(date1, date2) {var type1 = typeof date1,type2 = typeof date2if (type1 == "string") date1 = this.stringToTime(date1)else if (date1.getTime) date1 = date1.getTime()if (type2 == "string") date2 = this.stringToTime(date2)else if (date2.getTime) date2 = date2.getTime()return (date1 - date2) / 1000 //结果是秒},//字符串转成Time(dateDiff)所需方法stringToTime(string) {var f = string.split(" ", 2)var d = (f[0] ? f[0] : "").split("-", 3)var t = (f[1] ? f[1] : "").split(":", 3)return new Date(parseInt(d[0], 10) || null,(parseInt(d[1], 10) || 1) - 1,parseInt(d[2], 10) || null,parseInt(t[0], 10) || null,parseInt(t[1], 10) || null,parseInt(t[2], 10) || null).getTime()},restData() {this.disabled_date = falsethis.disabled_picker = falsethis.value2 = ""this.value = ""this.oneHourColor = "primary"this.twoHourColor = "primary"this.dayColor = "primary"this.doubColor = "primary"this.threeColor = "primary"this.tenColor = "primary"this.points = []this.value1 = ""this.beginTime = {}this.endTime = {}this.doubTime = 1000this.loadTrackByTime()clearTimeout(this.timer)clearInterval(this.interval)this.linePoints = []// this.interval = nulldocument.getElementById("realTime").innerHTML = ""this.map.clearOverlays()},// pauseData() {//     if (this.state === 1) {//         this.timer.pause()//         this.orbtn = "继续"//         this.state === 0//     } else if (this.state === 0) {//         this.timer.resume()//         this.orbtn = "暂停"//         this.state === 1//     }// },getCarPath() {this.$axios.$get(`${GETCARLIST}=${this.card}&${this.timeType}=${this.timepath}`).then((res) => {console.log(res)this.points = res.data})},getCarPathTwo() {this.$axios.$get(`${GETCARLIST}=${this.card}&timeType=time&searchDate=${(this.beginTime, this.endTime)}`).then((res) => {console.log(res)this.points = res.data})},oneHour() {this.oneHourColor = "primary"this.twoHourColor = ""this.dayColor = ""this.beginTime = this.formatDateTime(new Date(new Date().getTime() - 1 * 60 * 60 * 1000))this.endTime = this.formatDateTime(new Date(new Date()))console.log(this.beginTime, this.endTime)this.timeType = "timeType"this.timepath = "1hour"this.getCarPath()this.dateDiff(this.beginTime, this.endTime)},twoHour() {this.oneHourColor = ""this.twoHourColor = "primary"this.dayColor = ""this.beginTime = this.formatDateTime(new Date(new Date().getTime() - 2 * 60 * 60 * 1000))this.endTime = this.formatDateTime(new Date(new Date()))console.log(this.beginTime, this.endTime)this.timeType = "timeType"this.timepath = "2hour"this.getCarPath()this.dateDiff(this.beginTime, this.endTime)},oneDay() {this.oneHourColor = ""this.twoHourColor = ""this.dayColor = "primary"this.beginTime = this.formatDateTime(new Date(new Date().getTime() - 24 * 60 * 60 * 1000))this.endTime = this.formatDateTime(new Date(new Date()))console.log(this.beginTime, this.endTime)this.timeType = "timeType"this.timepath = "day"this.getCarPath()this.dateDiff(this.beginTime, this.endTime)},formatDateTime(date) {var y = date.getFullYear()var m = date.getMonth() + 1m = m < 10 ? "0" + m : mvar d = date.getDate()d = d < 10 ? "0" + d : dvar h = date.getHours()h = h < 10 ? "0" + h : hvar minute = date.getMinutes()minute = minute < 10 ? "0" + minute : minutevar second = date.getSeconds()second = second < 10 ? "0" + second : secondreturn y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second},doubColorbtn() {this.doubColor = "primary"this.threeColor = ""this.tenColor = ""},threeColorbtn() {this.doubColor = ""this.threeColor = "primary"this.tenColor = ""},tenColorbtn() {this.doubColor = ""this.threeColor = ""this.tenColor = "primary"},},
}
</script>