Skip to content

H
huaxin-rq
Commit a73af416 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

人员轨迹增加轨迹回放

parent 2d64a218
Show whitespace changes
Inline Side-by-side
Showing with 314 additions and 180 deletions
huaxin-web/src/components/bigWindow/Null.vue 0 → 100644
View file @ a73af416
<!--
* @Author: your name
* @Date: 2022-03-22 10:31:50
* @LastEditTime: 2025-03-07 11:26:33
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/bigWindow/Nulll.vue
-->
<template>
<div></div>
</template>
<script>
export default {
data() {
return { com: null };
},
};
</script>
<style></style>
huaxin-web/src/utils/mapClass/map.js
View file @ a73af416
/* /*
* @Author: your name * @Author: your name
* @Date: 2022-01-11 13:45:12 * @Date: 2022-01-11 13:45:12
* @LastEditTime: 2023-07-19 18:02:31 * @LastEditTime: 2026-04-16 15:38:02
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js * @FilePath: /test/hello-world/src/utils/mapClass.js
...@@ -815,4 +815,65 @@ export class EditorMap { ...@@ -815,4 +815,65 @@ export class EditorMap {
this.allDevice["14"] = []; this.allDevice["14"] = [];
this.infowindowClose(); this.infowindowClose();
} }
hfMarker = null;
hfLine = null;
hfLine2 = null;
huifang(path) {
AMap.plugin("AMap.MoveAnimation", () => {
var marker,
lineArr = path;
// 绘制轨迹
var polyline = new AMap.Polyline({
map: this.map,
path: lineArr,
showDir: true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
var passedPolyline = new AMap.Polyline({
map: this.map,
strokeColor: "#AF5", //线颜色
strokeWeight: 6, //线宽
});
marker = new AMap.Marker({
map: this.map,
position: lineArr[0],
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
offset: new AMap.Pixel(-13, -26),
});
marker.on("moving", (e) => {
passedPolyline.setPath(e.passedPath);
this.map.setCenter(e.target.getPosition(), false);
});
this.map.setFitView();
marker.moveAlong(lineArr, {
// 每一段的时长
duration: 500, //可根据实际采集时间间隔设置
// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
autoRotation: true,
});
this.hfMarker = marker;
this.hfLine = polyline;
this.hfLine2 = passedPolyline;
});
}
clearhf() {
if (this.hfMarker || this.hfLine || this.hfLine2) {
this.map.remove(this.hfMarker);
this.map.remove(this.hfLine);
this.map.remove(this.hfLine2);
this.hfMarker = null;
this.hfLine = null;
this.hfLine2 = null;
}
}
} }
huaxin-web/src/views/usergps/components/HistoryTrack.vue
View file @ a73af416
<template> <template>
<el-dialog title="历史轨迹信息" :visible.sync="open" width="800px" append-to-body destroy-on-close :close-on-click-modal="false"> <el-dialog
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"> title="历史轨迹信息"
:visible.sync="open"
width="900px"
append-to-body
destroy-on-close
:close-on-click-modal="false"
>
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
label-width="68px"
>
<el-form-item label="轨迹日期" prop="trackTime"> <el-form-item label="轨迹日期" prop="trackTime">
<el-date-picker <el-date-picker
v-model="trackTime" v-model="trackTime"
...@@ -9,12 +21,24 @@ ...@@ -9,12 +21,24 @@
@change="timeChange" @change="timeChange"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期"> end-placeholder="结束日期"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button> <el-button
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> type="primary"
icon="el-icon-search"
size="mini"
@click="search"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="hf"
>轨迹回放</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="mapChange"> <div class="mapChange">
...@@ -23,40 +47,39 @@ ...@@ -23,40 +47,39 @@
</div> </div>
<div id="track-history-map" style="width: 100%; height: 500px"></div> <div id="track-history-map" style="width: 100%; height: 500px"></div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
//当前位置 //当前位置
import { EditorMap } from "@/utils/mapClass/map"; import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { historyTrack } from "@/api/usergps/gps"; import { historyTrack } from "@/api/usergps/gps";
import moment from 'moment'; import moment from "moment";
import gcoord from 'gcoord'; import gcoord from "gcoord";
export default { export default {
name: "current-location", name: "current-location",
data(){ data() {
return{ return {
//高德地图 //高德地图
gaoMap: null, gaoMap: null,
open: false, open: false,
queryParams:{ queryParams: {
startTime: null, startTime: null,
endTime: null endTime: null,
}, },
trackTime: null, trackTime: null,
markers: [], markers: [],
pipeLine: null, pipeLine: null,
mapStyle: true mapStyle: true,
} };
}, },
methods:{ methods: {
openHistoryDialog(query){ openHistoryDialog(query) {
this.open = true; this.open = true;
this.initMap(); this.initMap();
this.getTrackHistory(query); this.getTrackHistory(query);
this.trackTime = [query.startTime,query.endTime]; this.trackTime = [query.startTime, query.endTime];
this.queryParams = {...query}; this.queryParams = { ...query };
}, },
//初始化地图 //初始化地图
initMap() { initMap() {
...@@ -88,7 +111,13 @@ ...@@ -88,7 +111,13 @@
marker.on("mouseover", (e) => { marker.on("mouseover", (e) => {
const target = e.target; const target = e.target;
target.setLabel({ target.setLabel({
content: "定位时间:"+ target.getExtData().pt +",速度:" + target.getExtData().s + ",停留时间(分):" + target.getExtData().stm, content:
"定位时间:" +
target.getExtData().pt +
",速度:" +
target.getExtData().s +
",停留时间(分):" +
target.getExtData().stm,
direction: "top", direction: "top",
}); });
}); });
...@@ -108,68 +137,93 @@ ...@@ -108,68 +137,93 @@
}); });
this.pipeLine = pipe; this.pipeLine = pipe;
this.gaoMap.map.add(pipe); this.gaoMap.map.add(pipe);
this.gaoMap.map.setCenter(gcoord.transform(pipeInfo[0],gcoord.WGS84,gcoord.GCJ02)); this.gaoMap.map.setCenter(
gcoord.transform(pipeInfo[0], gcoord.WGS84, gcoord.GCJ02)
);
}, },
//坐标转换 //坐标转换
changeCoordinate(track){ changeCoordinate(track) {
let newTrack = []; let newTrack = [];
track.forEach(item =>{ track.forEach((item) => {
let location = gcoord.transform([item[0], item[1]],gcoord.WGS84,gcoord.GCJ02); let location = gcoord.transform(
[item[0], item[1]],
gcoord.WGS84,
gcoord.GCJ02
);
newTrack.push(location); newTrack.push(location);
}) });
return newTrack; return newTrack;
}, },
/**获取历史轨迹*/ /**获取历史轨迹*/
getTrackHistory(query){ getTrackHistory(query) {
historyTrack(query).then(res =>{ historyTrack(query).then((res) => {
if(res.code == 200){ if (res.code == 200) {
if(res.data.devices){ if (res.data.devices) {
res.data.devices.forEach(item =>{ res.data.devices.forEach((item) => {
let marker = this.addMarker(item); let marker = this.addMarker(item);
this.markers.push(marker); this.markers.push(marker);
}); });
} }
if(res.data.historyTrack){ if (res.data.historyTrack) {
this.historyTrack = res.data.historyTrack;
this.addPipe(res.data.historyTrack); this.addPipe(res.data.historyTrack);
} }
} }
}); });
}, },
hf() {
this.markers.forEach((item) => item.hide());
this.gaoMap.clearhf();
const pathArr = this.historyTrack.map((item) => {
const position = gcoord.transform(
[item[0], item[1]], // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.GCJ02 // 目标坐标系
);
return position;
});
this.gaoMap.map.panTo(pathArr[0][0]);
this.gaoMap.huifang(pathArr);
},
/**时间选择*/ /**时间选择*/
timeChange(value){ timeChange(value) {
this.queryParams.startTime = value[0]; this.queryParams.startTime = value[0];
this.queryParams.endTime = value[1]; this.queryParams.endTime = value[1];
}, },
/**搜索*/ /**搜索*/
search(){ search() {
this.clearMarker(); this.clearMarker();
this.clearPipeLine(); this.clearPipeLine();
this.gaoMap.clearhf();
this.getTrackHistory(this.queryParams); this.getTrackHistory(this.queryParams);
}, },
/**重置*/ /**重置*/
resetQuery(){ resetQuery() {
this.clearMarker(); this.clearMarker();
this.clearPipeLine(); this.clearPipeLine();
this.gaoMap.clearhf();
//获取今天开始时间 //获取今天开始时间
let dayOfStart = moment().startOf('day').toDate(); let dayOfStart = moment().startOf("day").toDate();
//获取今天结束的时间 //获取今天结束的时间
let dayOfEnd = moment().endOf('day').toDate(); let dayOfEnd = moment().endOf("day").toDate();
this.queryParams.startTime = moment(dayOfStart).format("YYYY-MM-DD HH:mm"); this.queryParams.startTime =
moment(dayOfStart).format("YYYY-MM-DD HH:mm");
this.queryParams.endTime = moment(dayOfEnd).format("YYYY-MM-DD HH:mm"); this.queryParams.endTime = moment(dayOfEnd).format("YYYY-MM-DD HH:mm");
this.trackTime = [this.queryParams.startTime,this.queryParams.endTime]; this.trackTime = [this.queryParams.startTime, this.queryParams.endTime];
this.getTrackHistory(this.queryParams); this.getTrackHistory(this.queryParams);
}, },
/**清除marker*/ /**清除marker*/
clearMarker(){ clearMarker() {
if(this.markers){ if (this.markers) {
this.markers.forEach(item =>{ this.markers.forEach((item) => {
this.gaoMap.map.remove(item); this.gaoMap.map.remove(item);
}) });
} }
}, },
/**清除pipe*/ /**清除pipe*/
clearPipeLine(){ clearPipeLine() {
if(this.pipeLine){ if (this.pipeLine) {
this.gaoMap.map.remove(this.pipeLine); this.gaoMap.map.remove(this.pipeLine);
} }
}, },
...@@ -182,16 +236,15 @@ ...@@ -182,16 +236,15 @@
} }
this.gaoMap.changeMap(this.mapStyle); this.gaoMap.changeMap(this.mapStyle);
}, },
}, },
computed: { computed: {
...mapGetters(["systemSetting"]), ...mapGetters(["systemSetting"]),
}, },
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.mapChange { .mapChange {
top: 155px; top: 155px;
color: #1890ff; color: #1890ff;
//background-color: #e8f4ff; //background-color: #e8f4ff;
...@@ -210,6 +263,5 @@ ...@@ -210,6 +263,5 @@
color: #fff; color: #fff;
} }
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment