更新了画地图轨迹的功能
oldsheeppp
parent
b3f7ebf06a
commit
646442dc69
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -79,7 +79,7 @@
|
|||
<!-- 点击弹窗轨迹地图 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisibleLocusMap"
|
||||
title="asdf"
|
||||
title="轨迹地图"
|
||||
width="70%"
|
||||
>
|
||||
<div style="position: relative; display: flex; flex-direction: row; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); padding:10px; border-radius: 8px; align-items: center; background-color: rgba(128,128,128,0.2);">
|
||||
|
|
@ -96,24 +96,14 @@
|
|||
|
||||
<div style=" height: 50vh; width: 30vh; margin-left: 2%;" >
|
||||
<div><img src="@/assets/TargetPerson.jpg" style="width: 40%; margin: 0.2%;"/></div>
|
||||
<!-- <div style="color:rgb(255,255,255);"> <span>序号：</span> <span>{{currentPerson.id}}</span></div>
|
||||
<div style="color:rgb(255,255,255);"><span>行人检索ID</span> <span>{{currentPerson.Person_ID}}</span></div>
|
||||
<div style="color:rgb(255,255,255);"><span>初次出现地点</span> <span>{{currentPerson.location}}</span></div>
|
||||
<div style="color:rgb(255,255,255);"><span>报警类型</span> <span>{{currentPerson.Alarm_type}}</span></div>
|
||||
<div style="color:rgb(255,255,255);"><span>行人类别</span> <span>{{currentPerson.Person_pool}}</span></div>
|
||||
<div style="color:rgb(255,255,255);"><span>初次出现时间</span> <span>{{currentPerson.time}}</span></div>
|
||||
<div style="color:rgb(255,255,255);"><span>摄像头IP</span> <span>{{currentPerson.IP}}</span></div>
|
||||
<div style="color:rgb(255,255,255);"><span>处理进度</span> <span>{{currentPerson.type}}</span></div> -->
|
||||
|
||||
<div> <span>序号：</span> <span>{{currentPerson.id}}</span></div>
|
||||
<div><span>行人检索ID: </span> <span>{{currentPerson.Person_ID}}</span></div>
|
||||
<div><span>初次出现地点: </span> <span>{{currentPerson.location}}</span></div>
|
||||
<div><span>报警类型: </span> <span>{{currentPerson.Alarm_type}}</span></div>
|
||||
<div><span>行人类别: </span> <span>{{currentPerson.Person_pool}}</span></div>
|
||||
<div><span>初次出现时间: </span> <span>{{currentPerson.time}}</span></div>
|
||||
<div><span>摄像头IP: </span> <span>{{currentPerson.IP}}</span></div>
|
||||
<div><span>处理进度: </span> <span>{{currentPerson.type}}</span></div>
|
||||
<p>{{currentPerson.locus[0].lng}}</p>
|
||||
<div><span>行人检索ID: </span> <span>{{currentPerson.person_id}}</span></div>
|
||||
<div><span>出现地点: </span> <span>{{currentPerson.address}}</span></div>
|
||||
<div><span>报警类型: </span> <span>{{currentPerson.alarm_type}}</span></div>
|
||||
<div><span>行人类别: </span> <span>{{currentPerson.person_type}}</span></div>
|
||||
<div><span>出现时间: </span> <span>{{currentPerson.detect_time}}</span></div>
|
||||
<div><span>摄像头IP: </span> <span>{{currentPerson.ip_address}}</span></div>
|
||||
<div><span>处理进度: </span> <span>{{currentPerson.process_status}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -121,13 +111,14 @@
|
|||
<!-- 使用for循环嵌套轨迹 -->
|
||||
<div style="height: 6vh; margin-top: 2%; ">
|
||||
<el-steps :active="active" finish-status="success" align-center >
|
||||
<el-step :title="currentPerson.locus[0].lng" description="IP：192.168.205.251"/>
|
||||
<!-- <el-step :title="currentPerson.locus[0].lng" description="IP：192.168.205.251"/>
|
||||
<el-step title="深研院-2号楼-3楼" description="IP：192.168.205.252"/>
|
||||
<el-step title="深研院-2号楼-室外" description="IP: 192.168.11.46"/>
|
||||
<el-step title="深研院-2号楼-室外" description="IP: 192.168.11.46"/>
|
||||
<!-- <template :v-for="(item, index) in currentPerson.locus" :v-for="item in currentPerson.locus">
|
||||
<el-step :title="item.IP" description="IP: 192.168.11.46"/>
|
||||
</template> -->
|
||||
<el-step title="深研院-2号楼-室外" description="IP: 192.168.11.46"/> -->
|
||||
<el-step v-for="(item) in TrajectoryData"
|
||||
:title="item.address"
|
||||
:description="item.ip">
|
||||
</el-step>
|
||||
<!-- <el-step :title="item.IP" :description="item.lng"></el-step> -->
|
||||
</el-steps>
|
||||
<el-button type="primary" style="margin-top: 12px" @click="next">下次检测点</el-button>
|
||||
|
|
@ -166,7 +157,7 @@
|
|||
import TargetPerson from '../../public/TargetPerson.json';
|
||||
|
||||
|
||||
import localMarkerIcon from '@/assets/TargetPerson.jpg' // 引入自定义的标注图片
|
||||
import localMarkerIcon from '@/assets/hit0.png' // 引入自定义的标注图片
|
||||
import axios from 'axios';
|
||||
|
||||
|
||||
|
|
@ -213,7 +204,8 @@
|
|||
let isLoaded = false
|
||||
let RecordsData = ref(null)
|
||||
|
||||
|
||||
let TrajectoryData = ref([])
|
||||
|
||||
///////////////////////////////////////// 表格数据的分页功能 /////////////////////////////////////////
|
||||
// 每页显示的条数
|
||||
let PageSize = ref(20);
|
||||
|
|
@ -325,6 +317,43 @@
|
|||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
///////////////////////////////////////// 查看轨迹信息的弹窗数据 /////////////////////////////////////////
|
||||
// 点击查看轨迹按钮
|
||||
const handleClick = (row) => {
|
||||
axios.get('http://localhost:8080/trajectory', {
|
||||
params: {
|
||||
id: row.trajectory_detection_id
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.code === 200) {
|
||||
TrajectoryData.value = response.data.data.cameraArray;
|
||||
} else {
|
||||
console.error("Failed to fetch trajectory");
|
||||
}
|
||||
console.log("getData", TrajectoryData);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('wrong:', error);
|
||||
});
|
||||
|
||||
|
||||
// 这一步是将proxy对象转化为普通的对象，因为row对象是proxy对象
|
||||
currentPerson.value = JSON.parse(JSON.stringify(row));
|
||||
console.log(row);
|
||||
console.log(currentPerson.value);
|
||||
|
||||
// 打开弹窗:将数据转化完成之后再打开弹窗，打开弹窗之后再加载地图
|
||||
dialogVisibleLocusMap.value = true;
|
||||
setTimeout(() => {
|
||||
initMapMark();
|
||||
},1000);
|
||||
|
||||
}
|
||||
///////////////////////////////////////// 查看轨迹信息的弹窗数据补充 /////////////////////////////////////////
|
||||
|
||||
|
||||
// 引入轨迹信息
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
let locusMap;
|
||||
|
|
@ -334,7 +363,8 @@
|
|||
const initMapMark = () => {
|
||||
// 在百度地图容器中创建地图实例
|
||||
locusMap = new BMapGL.Map("locusMap"); // 创建地图实例，并且与对应的容器ID值相绑定
|
||||
let point = new BMapGL.Point(104.10,30.68); // 设定地图的中心点和坐标，其中的参数分别为：经度、纬度
|
||||
// TODO: 地图中心点需要根据地点来获取
|
||||
let point = new BMapGL.Point(104.10,30.68); // 设定地图的中心点和坐标，其中的参数分别为：经度、纬度
|
||||
locusMap.centerAndZoom(point, 17); // 设置中心点坐标和地图级别
|
||||
locusMap.enableScrollWheelZoom(point, 35); // 允许滚轮缩放，缩放的值一般在3-19，再放大就没有效果了
|
||||
// let opts = {offset: new BMap.Size(10, 10)}; // 添加左上角缩放比例尺(offset: new BMap.Size(0, 0)为比例尺的坐标位置)
|
||||
|
|
@ -347,33 +377,12 @@
|
|||
// map.addTileLayer(traffic); // 叠加路况图层
|
||||
// map.setTrafficOn(); // 叠加路况图层处理点问题，具体查看：https://inhami.com/blogdetail/82 解决方案
|
||||
|
||||
axios.get('http://localhost:8080/detection/List', {
|
||||
params: {
|
||||
limit: PageSize.value,
|
||||
offset: 1
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.code === 200) {
|
||||
RecordsData.value = response.data.data.detectionRecord;
|
||||
totalCount = response.data.data.count;
|
||||
isLoaded = true;
|
||||
} else {
|
||||
console.error("Failed to fetch records");
|
||||
}
|
||||
console.log("getData", RecordsData);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('wrong:', error);
|
||||
});
|
||||
|
||||
|
||||
// 下面的过程是将地图进行轨迹的绘制
|
||||
let pointLocus = [];
|
||||
for (var i = 0; i < currentPerson.value.locus.length; i++) {
|
||||
// console.log(currentPerson.value);
|
||||
// console.log(currentPerson.value.locus[0].lng);
|
||||
pointLocus.push(new BMapGL.Point(currentPerson.value.locus[i].lng, currentPerson.value.locus[i].lat));
|
||||
|
||||
for (var i = 0; i < TrajectoryData.value.length; i++) {
|
||||
pointLocus.push(new BMapGL.Point(TrajectoryData.value[i].lat, TrajectoryData.value[i].lng));
|
||||
}
|
||||
|
||||
// var icons = new BMap.IconSequence(symbol, '100%', '10%',true);//设置为true，可以对轨迹进行编辑
|
||||
|
|
@ -387,41 +396,9 @@
|
|||
// icons:[icons]
|
||||
});
|
||||
|
||||
// 建议去看一下如何设置这种线条为代用箭头，好看一点
|
||||
//绘制箭头及其样式
|
||||
// 创建箭头符号
|
||||
// var symbol = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
|
||||
// scale: 0.6, // 箭头大小
|
||||
// rotation: 120, // 箭头旋转角度
|
||||
// strokeColor: '#f00', // 符号边框颜色
|
||||
// strokeWeight: 2, // 符号边框宽度
|
||||
// fillColor: '#00f', // 符号填充颜色
|
||||
// fillOpacity: 0.8 // 符号填充透明度
|
||||
|
||||
// // scale: 0.6,//图标缩放大小
|
||||
// // strokeColor:'#fff',//设置矢量图标的线填充颜色
|
||||
// // strokeWeight: 2,//设置线宽
|
||||
// })
|
||||
// // 在折线上添加箭头符号
|
||||
// pl.setStrokeStyle({symbol: symbol});
|
||||
|
||||
// 绘制轨迹
|
||||
bmaps.value = locusMap;
|
||||
pls.value = pl;
|
||||
locusMap.setHeading(64.5);
|
||||
locusMap.setTilt(73);
|
||||
// 添加动画
|
||||
trackAni = new BMapGLLib.TrackAnimation(bmaps.value, pls.value, {
|
||||
overallView: true,
|
||||
tilt: 30,
|
||||
duration: 20000,
|
||||
delay: 300
|
||||
});
|
||||
setTimeout(start(), 30000);
|
||||
|
||||
//for 循环处理下列问题，添加到地图当中去
|
||||
for (var i = 0; i < currentPerson.value.locus.length; i++) {
|
||||
let currentPoint = new BMapGL.Point(currentPerson.value.locus[i].lng,currentPerson.value.locus[i].lat);
|
||||
for (var i = 0; i < TrajectoryData.value.length; i++) {
|
||||
let currentPoint = new BMapGL.Point(TrajectoryData.value[i].lat,TrajectoryData.value[i].lng);
|
||||
let localIcon = new BMapGL.Icon(localMarkerIcon, new BMapGL.Size(31, 64))
|
||||
let localMarker = new BMapGL.Marker(currentPoint ,{ icon: localIcon })
|
||||
|
||||
|
|
@ -437,7 +414,7 @@
|
|||
|
||||
// 创建文本标注对象
|
||||
// var label = new BMap.Label('欢迎使用百度地图JSAPI GL版本', opts)
|
||||
let innerLabel = "<p>" + currentPerson.value.locus[i].address +"</p> <p>"+ currentPerson.value.locus[i].IP +"</p>"
|
||||
let innerLabel = "<p>" + TrajectoryData.value[i].address +"</p> <p>"+ TrajectoryData.value[i].ip +"</p>"
|
||||
let label = new BMapGL.Label(innerLabel, opts)
|
||||
// 自定义文本标注样式
|
||||
label.setStyle({
|
||||
|
|
@ -454,7 +431,19 @@
|
|||
locusMap.addOverlay(label)
|
||||
}
|
||||
|
||||
|
||||
// 绘制轨迹
|
||||
bmaps.value = locusMap;
|
||||
pls.value = pl;
|
||||
locusMap.setHeading(64.5);
|
||||
locusMap.setTilt(73);
|
||||
// 添加动画
|
||||
trackAni = new BMapGLLib.TrackAnimation(bmaps.value, pls.value, {
|
||||
overallView: true,
|
||||
tilt: 30,
|
||||
duration: 5000,
|
||||
delay: 300
|
||||
});
|
||||
setTimeout(start(), 3000);
|
||||
}
|
||||
// 开始执行轨迹的跟踪
|
||||
const start = () => {
|
||||
|
|
@ -540,24 +529,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////////// 查看轨迹信息的弹窗数据补充 /////////////////////////////////////////
|
||||
// 点击查看轨迹按钮
|
||||
const handleClick = (row) => {
|
||||
// 这一步是将proxy对象转化为普通的对象，因为row对象是proxy对象
|
||||
currentPerson.value = JSON.parse(JSON.stringify(row));
|
||||
console.log(row);
|
||||
console.log(currentPerson.value);
|
||||
|
||||
// 打开弹窗:记得是将数据转化完成之后再打开弹窗，打开弹窗之后再加载地图
|
||||
dialogVisibleLocusMap.value = true;
|
||||
setTimeout(() => {
|
||||
initMapMark();
|
||||
},0);
|
||||
|
||||
}
|
||||
///////////////////////////////////////// 查看轨迹信息的弹窗数据补充 /////////////////////////////////////////
|
||||
|
||||
// 建议去看一下如何设置这种线条为代用箭头，好看一点
|
||||
//绘制箭头及其样式
|
||||
// 创建箭头符号
|
||||
// var symbol = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
|
||||
// scale: 0.6, // 箭头大小
|
||||
// rotation: 120, // 箭头旋转角度
|
||||
// strokeColor: '#f00', // 符号边框颜色
|
||||
// strokeWeight: 2, // 符号边框宽度
|
||||
// fillColor: '#00f', // 符号填充颜色
|
||||
// fillOpacity: 0.8 // 符号填充透明度
|
||||
|
||||
// // scale: 0.6,//图标缩放大小
|
||||
// // strokeColor:'#fff',//设置矢量图标的线填充颜色
|
||||
// // strokeWeight: 2,//设置线宽
|
||||
// })
|
||||
// // 在折线上添加箭头符号
|
||||
// pl.setStrokeStyle({symbol: symbol});
|
||||
|
||||
|
||||
///////////////////////////////////////// 查看蓝丁格尔玫瑰图 /////////////////////////////////////////
|
||||
|
|
|
|||
|
|
@ -271,16 +271,12 @@
|
|||
if (cameraClick.type == "folder") {
|
||||
for (let i = 0; i < ShowCameraData.child.length; i++) {
|
||||
if (cameraClick.child[i].type == "camera") {
|
||||
console.log("zhaodaole", cameraClick)
|
||||
ShowCameraData.value.push(cameraClick)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log("bushiwozhixinglea")
|
||||
ShowCameraData.value.push(cameraClick)
|
||||
}
|
||||
|
||||
|
||||
console.log("what we getcam", ShowCameraData.value)
|
||||
|
||||
// Vue.set(demoData)
|
||||
|
|
|
|||
Loading…
Reference in New Issue