Skip to content

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

人员轨迹增加轨迹回放

parent 2d64a218
Hide 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
* @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
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
......@@ -815,4 +815,65 @@ export class EditorMap {
this.allDevice["14"] = [];
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>
<el-dialog title="历史轨迹信息" :visible.sync="open" width="800px" append-to-body destroy-on-close :close-on-click-modal="false">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<el-dialog
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-date-picker
v-model="trackTime"
......@@ -9,12 +21,24 @@
@change="timeChange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<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
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>
<div class="mapChange">
......@@ -23,193 +47,221 @@
</div>
<div id="track-history-map" style="width: 100%; height: 500px"></div>
</el-dialog>
</template>
<script>
//当前位置
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters } from "vuex";
import { historyTrack } from "@/api/usergps/gps";
import moment from 'moment';
import gcoord from 'gcoord';
export default {
name: "current-location",
data(){
return{
//高德地图
gaoMap: null,
open: false,
queryParams:{
startTime: null,
endTime: null
},
trackTime: null,
markers: [],
pipeLine: null,
mapStyle: true
}
},
methods:{
openHistoryDialog(query){
this.open = true;
this.initMap();
this.getTrackHistory(query);
this.trackTime = [query.startTime,query.endTime];
this.queryParams = {...query};
},
//初始化地图
initMap() {
this.$nextTick(() => {
const path = eval(this.systemSetting.map_center);
this.gaoMap = new EditorMap(
"track-history-map",
{
center: path,
//mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
zoom: 16,
},
this
);
});
//当前位置
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters } from "vuex";
import { historyTrack } from "@/api/usergps/gps";
import moment from "moment";
import gcoord from "gcoord";
export default {
name: "current-location",
data() {
return {
//高德地图
gaoMap: null,
open: false,
queryParams: {
startTime: null,
endTime: null,
},
/**标点*/
addMarker(data) {
let marker = new AMap.Marker({
map: this.gaoMap.map,
anchor: "bottom-center",
position: gcoord.transform(
[data.lng, data.lat], // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.GCJ02 // 目标坐标系
),
extData: data,
});
marker.on("mouseover", (e) => {
const target = e.target;
target.setLabel({
content: "定位时间:"+ target.getExtData().pt +",速度:" + target.getExtData().s + ",停留时间(分):" + target.getExtData().stm,
direction: "top",
});
});
marker.on("mouseout", (e) => {
const target = e.target;
target.setLabel({ content: "" });
});
return marker;
},
/**标线*/
addPipe(pipeInfo) {
let pipe = new AMap.Polyline({
path: this.changeCoordinate(eval(pipeInfo)),
showDir: true,
strokeWeight: 4,
strokeColor: "#1890FF",
trackTime: null,
markers: [],
pipeLine: null,
mapStyle: true,
};
},
methods: {
openHistoryDialog(query) {
this.open = true;
this.initMap();
this.getTrackHistory(query);
this.trackTime = [query.startTime, query.endTime];
this.queryParams = { ...query };
},
//初始化地图
initMap() {
this.$nextTick(() => {
const path = eval(this.systemSetting.map_center);
this.gaoMap = new EditorMap(
"track-history-map",
{
center: path,
//mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
zoom: 16,
},
this
);
});
},
/**标点*/
addMarker(data) {
let marker = new AMap.Marker({
map: this.gaoMap.map,
anchor: "bottom-center",
position: gcoord.transform(
[data.lng, data.lat], // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.GCJ02 // 目标坐标系
),
extData: data,
});
marker.on("mouseover", (e) => {
const target = e.target;
target.setLabel({
content:
"定位时间:" +
target.getExtData().pt +
",速度:" +
target.getExtData().s +
",停留时间(分):" +
target.getExtData().stm,
direction: "top",
});
this.pipeLine = pipe;
this.gaoMap.map.add(pipe);
this.gaoMap.map.setCenter(gcoord.transform(pipeInfo[0],gcoord.WGS84,gcoord.GCJ02));
},
//坐标转换
changeCoordinate(track){
let newTrack = [];
track.forEach(item =>{
let location = gcoord.transform([item[0], item[1]],gcoord.WGS84,gcoord.GCJ02);
newTrack.push(location);
})
return newTrack;
},
/**获取历史轨迹*/
getTrackHistory(query){
historyTrack(query).then(res =>{
if(res.code == 200){
if(res.data.devices){
res.data.devices.forEach(item =>{
let marker = this.addMarker(item);
this.markers.push(marker);
});
}
if(res.data.historyTrack){
this.addPipe(res.data.historyTrack);
}
});
marker.on("mouseout", (e) => {
const target = e.target;
target.setLabel({ content: "" });
});
return marker;
},
/**标线*/
addPipe(pipeInfo) {
let pipe = new AMap.Polyline({
path: this.changeCoordinate(eval(pipeInfo)),
showDir: true,
strokeWeight: 4,
strokeColor: "#1890FF",
});
this.pipeLine = pipe;
this.gaoMap.map.add(pipe);
this.gaoMap.map.setCenter(
gcoord.transform(pipeInfo[0], gcoord.WGS84, gcoord.GCJ02)
);
},
//坐标转换
changeCoordinate(track) {
let newTrack = [];
track.forEach((item) => {
let location = gcoord.transform(
[item[0], item[1]],
gcoord.WGS84,
gcoord.GCJ02
);
newTrack.push(location);
});
return newTrack;
},
/**获取历史轨迹*/
getTrackHistory(query) {
historyTrack(query).then((res) => {
if (res.code == 200) {
if (res.data.devices) {
res.data.devices.forEach((item) => {
let marker = this.addMarker(item);
this.markers.push(marker);
});
}
if (res.data.historyTrack) {
this.historyTrack = res.data.historyTrack;
this.addPipe(res.data.historyTrack);
}
});
},
/**时间选择*/
timeChange(value){
this.queryParams.startTime = value[0];
this.queryParams.endTime = value[1];
},
/**搜索*/
search(){
this.clearMarker();
this.clearPipeLine();
this.getTrackHistory(this.queryParams);
},
/**重置*/
resetQuery(){
this.clearMarker();
this.clearPipeLine();
//获取今天开始时间
let dayOfStart = moment().startOf('day').toDate();
//获取今天结束的时间
let dayOfEnd = moment().endOf('day').toDate();
this.queryParams.startTime = moment(dayOfStart).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.getTrackHistory(this.queryParams);
},
/**清除marker*/
clearMarker(){
if(this.markers){
this.markers.forEach(item =>{
this.gaoMap.map.remove(item);
})
}
},
/**清除pipe*/
clearPipeLine(){
if(this.pipeLine){
this.gaoMap.map.remove(this.pipeLine);
}
},
// 更改卫星图
mapChange(num) {
if (num == 1) {
this.mapStyle = false;
} else {
this.mapStyle = true;
}
this.gaoMap.changeMap(this.mapStyle);
},
});
},
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);
},
computed: {
...mapGetters(["systemSetting"]),
/**时间选择*/
timeChange(value) {
this.queryParams.startTime = value[0];
this.queryParams.endTime = value[1];
},
}
/**搜索*/
search() {
this.clearMarker();
this.clearPipeLine();
this.gaoMap.clearhf();
this.getTrackHistory(this.queryParams);
},
/**重置*/
resetQuery() {
this.clearMarker();
this.clearPipeLine();
this.gaoMap.clearhf();
//获取今天开始时间
let dayOfStart = moment().startOf("day").toDate();
//获取今天结束的时间
let dayOfEnd = moment().endOf("day").toDate();
this.queryParams.startTime =
moment(dayOfStart).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.getTrackHistory(this.queryParams);
},
/**清除marker*/
clearMarker() {
if (this.markers) {
this.markers.forEach((item) => {
this.gaoMap.map.remove(item);
});
}
},
/**清除pipe*/
clearPipeLine() {
if (this.pipeLine) {
this.gaoMap.map.remove(this.pipeLine);
}
},
// 更改卫星图
mapChange(num) {
if (num == 1) {
this.mapStyle = false;
} else {
this.mapStyle = true;
}
this.gaoMap.changeMap(this.mapStyle);
},
},
computed: {
...mapGetters(["systemSetting"]),
},
};
</script>
<style scoped lang="scss">
.mapChange {
top: 155px;
color: #1890ff;
//background-color: #e8f4ff;
position: absolute;
display: flex;
z-index: 9999;
div {
padding: 4px 8px;
border: 1px solid #fff;
background-color: #e8f4ff;
margin-left: 8px;
cursor: pointer;
&.active,
&:hover {
background-color: #1890ff;
color: #fff;
}
.mapChange {
top: 155px;
color: #1890ff;
//background-color: #e8f4ff;
position: absolute;
display: flex;
z-index: 9999;
div {
padding: 4px 8px;
border: 1px solid #fff;
background-color: #e8f4ff;
margin-left: 8px;
cursor: pointer;
&.active,
&:hover {
background-color: #1890ff;
color: #fff;
}
}
}
</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