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.date
this.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 = 0
this.donePoints.length = 0
// 从 原始数组中查询 符合条件的坐标点
this.pointsLen = this.points.length
this.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.length
this.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.zoom
var centerPoint = view.center
this.map.centerAndZoom(centerPoint, mapZoom)
},
//在轨迹点上创建图标，并添加点击事件，显示轨迹点信息。points,数组。
addMarker(points) {
var pointsLen = points.length
if (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.length
if (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).time
if (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 res
if (ms != undefined) {
var today = new Date()
today.setTime(ms)
} else {
var today = new Date()
}
var year, month, day, hour, minute, second
year = today.getFullYear()
month = today.getMonth() + 1
if (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 = true
this.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 date2
if (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 = false
this.disabled_picker = false
this.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 = 1000
this.loadTrackByTime()
clearTimeout(this.timer)
clearInterval(this.interval)
this.linePoints = []
// this.interval = null
document.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() + 1
m = m < 10 ? "0" + m : m
var d = date.getDate()
d = d < 10 ? "0" + d : d
var h = date.getHours()
h = h < 10 ? "0" + h : h
var minute = date.getMinutes()
minute = minute < 10 ? "0" + minute : minute
var second = date.getSeconds()
second = second < 10 ? "0" + second : second
return 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>
