diff --git a/public/config.js b/public/config.js
index acd2464..7dc8101 100644
--- a/public/config.js
+++ b/public/config.js
@@ -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"; // 无人机颜色
diff --git a/src/store/getters.js b/src/store/getters.js
index cc577b5..f36de38 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -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;
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index 0451fa2..0758b45 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -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;
}
},
diff --git a/src/views/contentData/LeftSidebar/index.vue b/src/views/contentData/LeftSidebar/index.vue
index 0c9c8eb..88ce87d 100644
--- a/src/views/contentData/LeftSidebar/index.vue
+++ b/src/views/contentData/LeftSidebar/index.vue
@@ -110,8 +110,8 @@
-
高度：
-
{{ drone.height || 0 }}M
+
距离：
+
{{ drone.distanceMeters }}M
@@ -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
diff --git a/src/views/contentData/headerTop/index.vue b/src/views/contentData/headerTop/index.vue
index cf6ddf7..025e784 100644
--- a/src/views/contentData/headerTop/index.vue
+++ b/src/views/contentData/headerTop/index.vue
@@ -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) {
diff --git a/src/views/contentData/index.js b/src/views/contentData/index.js
index 38eaef2..fed1902 100644
--- a/src/views/contentData/index.js
+++ b/src/views/contentData/index.js
@@ -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);
}
// 绑定弹窗
diff --git a/src/views/index.vue b/src/views/index.vue
index bc4bb43..d11860d 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -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);