214 lines
6.7 KiB
Vue
214 lines
6.7 KiB
Vue
<script>
|
||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||
import {deleteRecord, getList, historyMap} from "@/api/table";
|
||
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return{
|
||
duration:2000,
|
||
AMap: null,
|
||
map: null,
|
||
historyList:[],
|
||
recordId:null,
|
||
recordCar:{
|
||
vin:null,
|
||
startTime:null,
|
||
endTime:null
|
||
},
|
||
lineArr:null,
|
||
recordCarList: [] , // 存储获取到的对象集合
|
||
currentIndex: 0, // 当前展示的对象索引
|
||
currentObject: {} // 当前展示的对象内容
|
||
}
|
||
},
|
||
mounted() {
|
||
this.doDo();
|
||
},
|
||
created() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
startDisplay() {
|
||
// 启动定时器，每秒展示一个对象
|
||
setInterval(() => {
|
||
if (this.currentIndex < this.recordCarList.length) {
|
||
// 当前索引小于集合长度时，更新展示的对象内容
|
||
this.currentObject = this.recordCarList[this.currentIndex];
|
||
this.currentIndex++;
|
||
}
|
||
}, 1000);
|
||
},
|
||
deleteRecord(recordId){
|
||
this.recordId = recordId
|
||
deleteRecord(this.recordId).then(res=>{
|
||
this.$message.success("删除成功！")
|
||
location.reload()
|
||
})
|
||
},
|
||
getList(){
|
||
getList().then(res=>{
|
||
this.historyList = res.data
|
||
})
|
||
},
|
||
doDo(recordCar){
|
||
this.recordCar.vin = recordCar.vin
|
||
this.recordCar.startTime = recordCar.startTime
|
||
this.recordCar.endTime = recordCar.endTime
|
||
historyMap(this.recordCar).then(res=>{
|
||
this.recordCarList = res.data; // 将获取到的对象集合存储到data中
|
||
console.log(this.recordCarList)
|
||
this.currentObject = {}
|
||
this.startDisplay(); // 开始展示
|
||
let coordinates = res.data.map(obj => [
|
||
parseFloat(obj.longitude.replace(/"/g, "")),
|
||
parseFloat(obj.latitude.replace(/"/g, ""))
|
||
]);
|
||
this.lineArr = [coordinates]
|
||
})
|
||
this.initMap()
|
||
this.startAnimation()
|
||
},
|
||
initMap() {
|
||
AMapLoader.load({
|
||
key: "0b5f26b194361cbc9571101bc2856962", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||
plugins: [
|
||
"AMap.Scale",
|
||
"AMap.HawkEye",
|
||
"AMap.ToolBar",
|
||
"AMap.AutoComplete",
|
||
"AMap.PlaceSearch",
|
||
"AMap.ControlBar",
|
||
"AMap.MouseTool",
|
||
"AMap.DragRoute",
|
||
"AMap.MoveAnimation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||
}).then((AMap) => {
|
||
// 获取到作为地图容器的DOM元素，创建地图实例
|
||
this.map = new AMap.Map("container", { //设置地图容器id
|
||
resizeEnable: true,
|
||
viewMode: "2D", // 使用3D视图
|
||
zoomEnable: true, // 地图是否可缩放，默认值为true
|
||
dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
|
||
doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
|
||
zoom: 13, //初始化地图级别
|
||
center: this.lineArr[0], // 初始化中心点坐标 北京
|
||
// mapStyle: "amap://styles/darkblue", // 设置颜色底层
|
||
})
|
||
|
||
this.marker = new AMap.Marker({
|
||
position: this.lineArr[0],
|
||
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
|
||
offset: new AMap.Pixel(-13, -26),
|
||
});
|
||
this.map.add(this.marker)
|
||
|
||
// 绘制轨迹
|
||
this.polyline = new AMap.Polyline({
|
||
path: this.lineArr,
|
||
showDir: true,
|
||
strokeColor: "#28F", //线颜色
|
||
// strokeOpacity: 1, //线透明度
|
||
strokeWeight: 6, //线宽
|
||
// strokeStyle: "solid" //线样式
|
||
});
|
||
this.map.add(this.polyline)
|
||
|
||
// 走过的路径
|
||
this.passedPolyline = new AMap.Polyline({
|
||
strokeColor: "#AF5", //线颜色
|
||
strokeWeight: 6, //线宽
|
||
});
|
||
this.map.add(this.passedPolyline)
|
||
|
||
// 监听marker移动
|
||
this.marker.on('moving', (e) => {
|
||
this.passedPolyline.setPath(e.passedPath); // 设置路径样式
|
||
this.map.setCenter(e.target.getPosition(), true) // 设置地图中心点
|
||
});
|
||
|
||
this.map.setFitView(); // 根据覆盖物自适应展示地图
|
||
|
||
})
|
||
},
|
||
startAnimation () {
|
||
setTimeout(()=>{
|
||
AMap.plugin('AMap.MoveAnimation', () => {
|
||
console.log('开始回放')
|
||
this.marker.moveAlong(this.lineArr, {
|
||
// 每一段的时长
|
||
duration: this.duration,//可根据实际采集时间间隔设置
|
||
// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
|
||
autoRotation: true,
|
||
});
|
||
})
|
||
},2000)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<p>{{currentObject}}</p>
|
||
<div>
|
||
|
||
<el-form>
|
||
<table style="width: 100% ">
|
||
<tr>
|
||
<td>VIN</td>
|
||
<td><el-input placeholder="请输入车辆VIN"></el-input></td>
|
||
<td>开始时间</td>
|
||
<td><el-input placeholder="请输入开始时间"></el-input></td>
|
||
<td>结束时间</td>
|
||
<td><el-input placeholder="请输入结束时间"></el-input></td>
|
||
<td>
|
||
<el-button type="primary">搜索</el-button>
|
||
<el-button type="danger">重置</el-button>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</el-form>
|
||
<el-table :data="historyList">
|
||
<el-table-column label="历史轨迹ID">
|
||
<template slot-scope="scope">
|
||
{{scope.row.recordId}}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="VIN">
|
||
<template slot-scope="scope">
|
||
{{scope.row.vin}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="开始时间">
|
||
<template slot-scope="scope">
|
||
{{scope.row.startTime}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="结束时间">
|
||
<template slot-scope="scope">
|
||
{{scope.row.endTime}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button @click="doDo(scope.row)" type="text">历史轨迹</el-button>
|
||
<el-button type="info" @click="deleteRecord(scope.row.recordId)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div id="container"></div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
#container{
|
||
width: 50%;
|
||
height: 400px;
|
||
}
|
||
</style>
|