增加距离位置、一直显示轨迹
This commit is contained in:
zengmingjie
parent
3068a4cb91
commit
a78106da90
|
|
@ -7,7 +7,7 @@ const allPositionLat = 39.036963; // 全部防区跳转纬度
|
|||
const allPositionAlt = 4000; // 全部防区跳转高度
|
||||
const allPositionPitch = -90; // 全部防区跳转俯仰角
|
||||
|
||||
const currTime = 15; // 左侧无人机消失时间
|
||||
const currTime = 60; // 左侧无人机消失时间
|
||||
|
||||
const uavSize = 50; // 无人机大小
|
||||
const uaColor = "#ffffff"; // 无人机颜色
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const getters = {
|
|||
isZoomedIn: (state) => state.chart.isZoomedIn, //音频是否打开
|
||||
SliderValue: (state) => state.chart.SliderValue, //音量值
|
||||
checkFlag: (state) => state.chart.checkFlag, //轨迹查看按钮
|
||||
clearTrajectory: (state) => state.chart.clearTrajectory //清空轨迹
|
||||
clearTrajectory: (state) => state.chart.clearTrajectory, //清空轨迹
|
||||
lonAndLat: (state) => state.map.lonAndLat // 无人机距离我的位置
|
||||
};
|
||||
export default getters;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
const user = {
|
||||
state: {
|
||||
map: null,
|
||||
adsbisFlag: false
|
||||
adsbisFlag: false,
|
||||
lonAndLat: []
|
||||
},
|
||||
|
||||
mutations: {
|
||||
|
|
@ -10,6 +11,9 @@ const user = {
|
|||
},
|
||||
SET_ADSBIS_FLAG: (state, value) => {
|
||||
state.adsbisFlag = value;
|
||||
},
|
||||
SET_LONANDLAT: (state, value) => {
|
||||
state.lonAndLat = value;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -110,8 +110,8 @@
|
|||
</div>
|
||||
<div class="content-potions-bottom">
|
||||
<div class="content-text content-potions-lat">
|
||||
<p class="text">高度：</p>
|
||||
<p class="characters">{{ drone.height || 0 }}M</p>
|
||||
<p class="text">距离：</p>
|
||||
<p class="characters">{{ drone.distanceMeters }}M</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-potions-lon">
|
||||
|
|
@ -276,7 +276,7 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["isZoomedIn", "SliderValue"])
|
||||
...mapGetters(["isZoomedIn", "SliderValue", "lonAndLat"])
|
||||
},
|
||||
mounted() {
|
||||
this.endTime = moment.utc().format("YYYY-MM-DD HH:mm:ss");
|
||||
|
|
@ -356,13 +356,24 @@ export default {
|
|||
newItem.app_lon !== 0 &&
|
||||
newItem.app_lat !== 0
|
||||
) {
|
||||
if (this.lonAndLat && this.lonAndLat.length === 2) {
|
||||
const [userLon, userLat] = this.lonAndLat;
|
||||
newItem.distanceMeters = this.calculateDistance(
|
||||
userLon,
|
||||
userLat,
|
||||
newItem.drone_lon,
|
||||
newItem.drone_lat
|
||||
).toFixed(0);
|
||||
} else {
|
||||
newItem.distanceMeters = newItem.distanceMeters || 0;
|
||||
}
|
||||
// 如果已经存在相同BatchId的数据，重置计时器
|
||||
if (newItem.BatchId) {
|
||||
const existingTimer = this.droneTimers.get(newItem.BatchId);
|
||||
if (existingTimer) {
|
||||
clearInterval(existingTimer); // 清除旧计时器
|
||||
}
|
||||
|
||||
console.log(this.lonAndLat, "this.lonAndLat");
|
||||
// 设置15秒初始时间
|
||||
newItem.currTime = window.mapConfig.currTime;
|
||||
// 创建新计时器
|
||||
|
|
@ -487,6 +498,20 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
calculateDistance(lon1, lat1, lon2, lat2) {
|
||||
const R = 6371e3; // 地球半径（米）
|
||||
const a1 = (lat1 * Math.PI) / 180; // 将纬度转换为弧度
|
||||
const a2 = (lat2 * Math.PI) / 180;
|
||||
const ab = ((lat2 - lat1) * Math.PI) / 180;
|
||||
const ac = ((lon2 - lon1) * Math.PI) / 180;
|
||||
|
||||
const a =
|
||||
Math.sin(ab / 2) * Math.sin(ab / 2) +
|
||||
Math.cos(a1) * Math.cos(a2) * Math.sin(ac / 2) * Math.sin(ac / 2);
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
|
||||
return R * c; // 距离（米）
|
||||
},
|
||||
enableTouchScroll() {
|
||||
const ulElement = this.$el.querySelector(".drone-list ul");
|
||||
if (ulElement) {
|
||||
|
|
@ -742,25 +767,25 @@ export default {
|
|||
const isVisible = this.droneStates[drone.BatchId];
|
||||
|
||||
// 无人机轨迹线
|
||||
let graphicLayerGJ = window.olMap
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find((layer) => layer.get("id") === "guiji");
|
||||
let graphic = graphicLayerGJ
|
||||
.getSource()
|
||||
.getFeatureById(drone.BatchId + "_track");
|
||||
const trackStyle = new Style({
|
||||
stroke: new Stroke({
|
||||
color: this.getRandomColor(),
|
||||
width: 0,
|
||||
zIndex: 1
|
||||
})
|
||||
});
|
||||
if (!isVisible) {
|
||||
graphic.setStyle(trackStyle);
|
||||
} else {
|
||||
graphic.setStyle(null);
|
||||
}
|
||||
// let graphicLayerGJ = window.olMap
|
||||
// .getLayers()
|
||||
// .getArray()
|
||||
// .find((layer) => layer.get("id") === "guiji");
|
||||
// let graphic = graphicLayerGJ
|
||||
// .getSource()
|
||||
// .getFeatureById(drone.BatchId + "_track");
|
||||
// const trackStyle = new Style({
|
||||
// stroke: new Stroke({
|
||||
// color: this.getRandomColor(),
|
||||
// width: 0,
|
||||
// zIndex: 1
|
||||
// })
|
||||
// });
|
||||
// if (!isVisible) {
|
||||
// graphic.setStyle(trackStyle);
|
||||
// } else {
|
||||
// graphic.setStyle(null);
|
||||
// }
|
||||
|
||||
// 飞手无人机连接线
|
||||
let graphicLayerFSGJX = window.olMap
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@ export default {
|
|||
"EPSG:3857"
|
||||
);
|
||||
this.$message.success("定位成功");
|
||||
this.$store.commit("SET_LONANDLAT", newLocation);
|
||||
this.updateMapPosition(this.longitude, this.latitude);
|
||||
window.olMap.getView().animate({
|
||||
center: newLocation,
|
||||
|
|
@ -214,7 +215,8 @@ export default {
|
|||
lon: this.longitude,
|
||||
userId: localStorage.getItem("userId")
|
||||
};
|
||||
|
||||
let newLocation = [this.longitude, this.latitude];
|
||||
this.$store.commit("SET_LONANDLAT", newLocation);
|
||||
HomeSyncLocation(params)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
|
|
|
|||
|
|
@ -437,7 +437,7 @@ export function mapUavFiex(options, map) {
|
|||
|
||||
graphicLayer.getSource().addFeature(graphic);
|
||||
graphicLayerGJ.getSource().addFeature(track);
|
||||
graphicLayerGJ.setStyle(null);
|
||||
// graphicLayerGJ.setStyle(null);
|
||||
}
|
||||
|
||||
// 更新无人机属性和位置
|
||||
|
|
@ -451,7 +451,7 @@ export function mapUavFiex(options, map) {
|
|||
.getSource()
|
||||
.getFeatureById(item.BatchId + "_track");
|
||||
track.getGeometry().appendCoordinate(point);
|
||||
graphicLayerGJ.setStyle(null);
|
||||
// graphicLayerGJ.setStyle(null);
|
||||
}
|
||||
|
||||
// 绑定弹窗
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@ export default {
|
|||
// device_type_8: 91088,
|
||||
// app_lat: 39.055,
|
||||
// app_lon: 117.303466,
|
||||
// drone_lat: 39.040924,
|
||||
// drone_lon: 117.337103,
|
||||
// drone_lat: 39.05389348519259,
|
||||
// drone_lon: 117.3121088583338,
|
||||
// height: 0.0,
|
||||
// altitude: 0.0,
|
||||
// home_lat: 0.0,
|
||||
|
|
@ -55,7 +55,7 @@ export default {
|
|||
// speed_N: 0.0,
|
||||
// speed_U: 0.0,
|
||||
// RSSI: 0.0,
|
||||
// positionId: "1937905595101351936",
|
||||
// positionId: "1937905447877087232",
|
||||
// PostionName: "6号",
|
||||
// DeviceId: "1937909591555837952",
|
||||
// DeviceName: "JF0102501007",
|
||||
|
|
@ -66,9 +66,45 @@ export default {
|
|||
// Id: "1938433406669033472"
|
||||
// }
|
||||
// ];
|
||||
// let time = setInterval(() => {
|
||||
// let arr1 = [
|
||||
// {
|
||||
// BatchId: "1938433406643867648",
|
||||
// serial_number: "JF0102501009",
|
||||
// device_type: "8",
|
||||
// device_type_8: 91088,
|
||||
// app_lat: 39.055,
|
||||
// app_lon: 117.303466,
|
||||
// drone_lat: 39.06341517352996,
|
||||
// drone_lon: 117.31456131738705,
|
||||
// height: 0.0,
|
||||
// altitude: 0.0,
|
||||
// home_lat: 0.0,
|
||||
// home_lon: 0.0,
|
||||
// distance: 3299.608332218683,
|
||||
// centerdistance: 198311.46836461234,
|
||||
// IsWhitelist: false,
|
||||
// WhiteListId: "0",
|
||||
// speed_E: 0.0,
|
||||
// speed_N: 0.0,
|
||||
// speed_U: 0.0,
|
||||
// RSSI: 0.0,
|
||||
// positionId: "1937905447877087232",
|
||||
// PostionName: "6号",
|
||||
// DeviceId: "1937909591555837952",
|
||||
// DeviceName: "JF0102501007",
|
||||
// freq: 0.0,
|
||||
// alarmLevel: 0,
|
||||
// Time: 1744872277,
|
||||
// CreateTime: "2025-06-27T11:05:13.1524513+08:00",
|
||||
// Id: "1938433406669033472"
|
||||
// }
|
||||
// ];
|
||||
// setInterval(() => {
|
||||
// this.signaData = arr;
|
||||
// }, 1000);
|
||||
// setInterval(() => {
|
||||
// this.signaData = arr1;
|
||||
// }, 2000);
|
||||
// setTimeout(() => {
|
||||
// clearInterval(time);
|
||||
// }, 10000);
|
||||
|
|
|
|||
Loading…
Reference in New Issue