<template>
<app-container id="overview">
<!--筛选条件-->
<div class="search-div">
<el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
<el-row >
<el-col style="width: fit-content;">
<el-date-picker
v-model="dateTimeRange"
type="datetimerange"
range-separator="至"
size="small"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
<!--</el-form-item>-->
<el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">查询</el-button>
<el-button class="filter-item" type="primary" size="small" @click="play">开始</el-button>
<el-button class="filter-item" type="primary" size="small" @click="pause">暂停</el-button>
<el-button class="filter-item" type="primary" size="small" @click="stop">停止</el-button>
</el-col>
<el-col style="display:flex;width: fit-content;">
<span style="padding-left: 10px;padding-top: 10px;font-size: 14px">回放速度</span>
<span style="padding-left:10px;padding-right: 10px;padding-top: 10px;font-size: 14px">快</span>
<el-slider v-model="sec" :format-tooltip="formatTooltip" :step="10" :min="10" :show-tooltip="false" style="width: 100px;" @change="settimer"/>
<span style="padding-left: 10px;padding-top: 10px;font-size: 14px;">慢</span>
</el-col>
<el-col style="padding-top: 4px;width: fit-content; float: right;">
<el-button class="filter-item" type="primary" style="margin-left: 10px;background-color: #286090;border: #286090" size="small" @click="staticspeed">时间速度曲线</el-button>
</el-col>
</el-row>
<el-row>
<el-slider v-model="showindex" :format-tooltip="timeTooltip" :max="list.length!==0?list.length-1:0" :disabled="list.length==0" class="timeslide" @change="changepos"/>
</el-row>
</el-form>
</div>
<div id="map">
<div class="namecard" >{{ carName }}</div>
</div>
<trail-static v-show="dialogFormVisible" ref="trailStatic" @watchChild="fetchData"/>
</app-container>
</template>
<script>
import trailStatic from '@/views/overview/trailStatic'
import { trail } from '@/api/overview'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
export default {
name: 'Trail',
components: { trailStatic },
data() {
return {
dialogFormVisible: false, // 是否显示编辑框
refresh: '10',
sec: 50,
showindex: 0,
state: 0, // 1:开始 2:暂停 3:停止
showtable: true,
deptShow: true,
listQuery: {
carId: '',
startTime: '',
endTime: ''
}, // 查询条件
baselayer: [],
carName: '',
dateTimeRange: [],
pathlist: [], // 列表数据
list: [], // 列表数据
map: null,
listLoading: true, // 加载动画
fullscreenLoading: false, // 全屏加载动画
timer: null,
carpoint: null
}
},
watch: {
dateTimeRange(val) {
if (val && val.length > 0) {
this.listQuery.startTime = val[0]
this.listQuery.endTime = val[1]
} else {
this.listQuery.startTime = ''
this.listQuery.endTime = ''
}
}
},
mounted() {
if (this.$route.query) {
this.listQuery.carId = this.$route.query.id
this.carName = this.$route.query.name
}
const date = new Date()
const year = date.getFullYear() // 年
const month = date.getMonth() + 1 // 月
const day = date.getDate() // 日
this.dateTimeRange = [year + '-' + month + '-' + day + ' 00:00:00', year + '-' + month + '-' + day + ' 23:59:59']
this.initMap()
this.settimer()
},
methods: {
settimer() {
clearTimeout(this.timer)
this.timer = setInterval(() => {
this.showcar()
}, this.sec * 10)
},
staticspeed() {
this.dialogFormVisible = true
this.$refs.trailStatic.initDialog(this.dialogFormVisible, this.listQuery, this.carName)
},
showcar() {
if (this.state !== 1) {
return
}
this.showindex++
if (this.showindex === this.list.length) {
clearTimeout(this.timer)
var that = this
setTimeout(function() { that.stop() }, this.sec * 10)
return
}
this.carpoint.remove()
// add point
var Icon = L.icon({
iconUrl: require('../../assets/global_images/car.png'),
iconSize: [40, 40]
})
var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[this.showindex].lng + ' , ' + this.list[this.showindex].lat + '</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[this.showindex].upTime + '</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[this.showindex].speed + '(km/h)</div>' +
'</div>'
var popup = L.popup().setContent(str)
this.carpoint = L.marker([this.list[this.showindex].lat, this.list[this.showindex].lng], {
icon: Icon,
rotationAngle: this.list[this.showindex].direction
}).addTo(this.map).bindPopup(popup)
this.carpoint.openPopup()
},
play() {
this.state = 1
this.settimer()
},
pause() {
this.state = 2
},
changepos() {
if (this.list.length !== 0) {
if (this.carpoint !== null) {
this.carpoint.remove()
}
var Icon = L.icon({
iconUrl: require('../../assets/global_images/car.png'),
iconSize: [40, 40]
})
var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[this.showindex].lng + ' , ' + this.list[this.showindex].lat + '</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[this.showindex].upTime + '</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[this.showindex].speed + '(km/h)</div>' +
'</div>'
var popup = L.popup().setContent(str)
this.carpoint = L.marker([this.list[this.showindex].lat, this.list[this.showindex].lng], {
icon: Icon,
rotationAngle: Number(this.list[this.showindex].direction)
}).addTo(this.map).bindPopup(popup)
this.carpoint.openPopup()
}
},
stop() {
this.state = 3
if (this.list.length !== 0) {
if (this.carpoint !== null) {
this.carpoint.remove()
}
var Icon = L.icon({
iconUrl: require('../../assets/global_images/car.png'),
iconSize: [40, 40]
})
var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[0].lng + ' , ' + this.list[0].lat + '</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[0].upTime + '</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[0].speed + '(km/h)</div>' +
'</div>'
var popup = L.popup().setContent(str)
this.carpoint = L.marker([this.list[0].lat, this.list[0].lng], {
icon: Icon,
rotationAngle: Number(this.list[0].direction)
}).addTo(this.map).bindPopup(popup)
this.carpoint.openPopup()
this.showindex = 0
}
},
formatTooltip(val) {
return val / 100
},
timeTooltip(val) {
if (this.list.length !== 0) {
return this.list[val].upTime
}
},
initMap() {
const map = L.map('map', {
minZoom: 3,
maxZoom: 18,
center: [27.75962, 116.06021],
zoom: 11,
zoomControl: false,
attributionControl: false,
crs: L.CRS.EPSG3857
})
this.map = map // data上需要挂载
window.map = map
this.baselayer.push(L.tileLayer(
'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
this.baselayer.push(L.tileLayer(
'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
this.search()
},
search() {
this.fetchData(false)
},
setZoom(points) {
console.log(points)
if (points.length > 0) {
var maxLng = points[0][1]
var minLng = points[0][1]
var maxLat = points[0][0]
var minLat = points[0][0]
var res
for (var i = points.length - 1; i >= 0; i--) {
res = points[i]
if (res[1] > maxLng) maxLng = res[1]
if (res[1] < minLng) minLng = res[1]
if (res[0] > maxLat) maxLat = res[0]
if (res[0] < minLat) minLat = res[0]
}
var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
} else {
// 没有坐标，显示全中国
this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
}
},
getZoom(maxLng, minLng, maxLat, minLat) {
var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
var latlng = L.latLng(maxLat, maxLng)
var distance = latlng.distanceTo(L.latLng(minLat, minLng))
// var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
if (zoom[i] - distance > 0) {
console.log(i)
return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
}
}
},
setCenter(points) {
// 获取折线中心点坐标
if (points.length > 0) {
let maxLng = points[0][1]
let minLng = points[0][1]
let maxLat = points[0][0]
let minLat = points[0][0]
let res
for (let i = points.length - 1; i >= 0; i--) {
res = points[i]
if (res[1] > maxLng) maxLng = res[1]
if (res[1] < minLng) minLng = res[1]
if (res[0] > maxLat) maxLat = res[0]
if (res[0] < minLat) minLat = res[0]
}
const cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
const cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
this.map.setView({ lat: cenLat, lng: cenLng })
}
},
fetchData() { // 划线
this.listLoading = true
trail(this.listQuery).then(response => {
this.list = response.data
var base = this.baselayer
this.map.eachLayer(function(layer) {
if (layer !== base[0] && layer !== base[1]) {
layer.remove()
}
})
if (this.list.length === 0) {
this.$message.warning('查询结果为空')
}
if (this.list.length !== 0) {
var myStyle = {
'color': '#e69010',
'weight': 5
}
this.pathlist = []
for (var i = 0; i < this.list.length; i++) {
var item = [Number(this.list[i].lat), Number(this.list[i].lng)]
this.pathlist.push(item)
}
L.polyline(this.pathlist, myStyle).addTo(this.map)
this.setZoom(this.pathlist)
var Icon = L.icon({
iconUrl: require('../../assets/global_images/start.png'),
iconSize: [40, 40]
})
L.marker([this.list[0].lat, this.list[0].lng], {
icon: Icon
}).addTo(this.map)
Icon = L.icon({
iconUrl: require('../../assets/global_images/end.png'),
iconSize: [40, 40]
})
L.marker([this.list[this.list.length - 1].lat, this.list[this.list.length - 1].lng], {
icon: Icon
}).addTo(this.map)
}
this.stop()
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.search-div{
padding:12px;
padding-bottom: 2px; /* 本身输入框有10px下边距*/
background-color: #fff;
/*display: -webkit-flex; !* Safari *!*/
/*display: flex;*/
justify-content:space-between;
.search-btn{
margin-bottom:10px;
}
}
.namecard{
width: 300px;
height: 20px;
z-index: 10000;
position: absolute;
left:10px;
top:10px;
font-size: 16px;
font-weight: bold;
color: #1f2d3d;
}
#map {
border-top: 12px solid #ebebeb;
width:100%;
height:67.5vh;
}
.my-div-icon {
width: 10px;
height: 10px;
background-color: orange;
border-radius: 50%;
}
.timeslide{
padding-left: 20px;padding-right: 20px;
/deep/ .el-slider__button{
border-radius: 20%;
width: 40px;
height: 20px;
}
/deep/ .el-slider__button-wrapper{
width: 40px;
}
}
</style>
