跳转到高德app增加设备点位
This commit is contained in:
zengmingjie
parent
0e36765929
commit
0be84825b8
|
|
@ -21,6 +21,7 @@
|
|||
<script type="text/javascript" src="/dep/mars3d/turf/turf.min.js"></script>
|
||||
<script type="text/javascript" src="/dep/localforage.min.js"></script> -->
|
||||
|
||||
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=ca09155e1bad6661625a45fedb6ad595"></script>
|
||||
|
||||
<!-- 线上Mars3d -->
|
||||
<!-- <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 731 B |
|
|
@ -426,10 +426,31 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
closeNavigation(drone) {
|
||||
const naviUrl = `https://uri.amap.com/navigation?to=${
|
||||
drone.app_lon + "," + drone.app_lat
|
||||
},飞手位置&callnative=1`;
|
||||
window.open(naviUrl, "_blank"); // '_blank' 表示在新标签页中打开
|
||||
console.log(drone.app_lat, drone.app_lon, "导航");
|
||||
// 确保 drone.app_lon 和 drone.app_lat 存在
|
||||
if (!drone || !drone.app_lon || !drone.app_lat) {
|
||||
this.$message.error("无人机的经纬度信息无效");
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href =
|
||||
"amapuri://route/plan/?dlat=" +
|
||||
drone.app_lat +
|
||||
"&dlon=" +
|
||||
drone.app_lon +
|
||||
"&dname=飞手位置&dev=0&t=0";
|
||||
|
||||
// 可选：提供后备方案（如果 App 未安装，跳转到网页版）
|
||||
setTimeout(() => {
|
||||
const isAppOpened = document.hidden || document.webkitHidden;
|
||||
if (!isAppOpened) {
|
||||
this.$message.warning("未安装高德地图 App，将打开网页版导航");
|
||||
window.open(
|
||||
`https://uri.amap.com/navigation?to=${drone.app_lon},${drone.app_lat},飞手位置&callnative=1`,
|
||||
"_blank"
|
||||
);
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
noNavigation(drone) {
|
||||
this.$set(this.navigationStates, drone.BatchId, false);
|
||||
|
|
@ -701,10 +722,15 @@ export default {
|
|||
.left-sidebar.contracted {
|
||||
transform: translateX(-90%);
|
||||
}
|
||||
#uavAudio {
|
||||
position: absolute;
|
||||
bottom: -100%;
|
||||
}
|
||||
.audio-prompt {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
bottom: -100%;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
|
|
|||
|
|
@ -24,9 +24,13 @@
|
|||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { HomeSyncLocation } from "@/api/home";
|
||||
import _ from "lodash";
|
||||
import { fromLonLat } from "ol/proj";
|
||||
|
||||
import Geolocation from "ol/Geolocation";
|
||||
import { fromLonLat, transform } from "ol/proj";
|
||||
import { Vector as VectorLayer } from "ol/layer";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import Point from "ol/geom/Point";
|
||||
import { Style, Icon, Stroke } from "ol/style";
|
||||
import Feature from "ol/Feature";
|
||||
export default {
|
||||
name: "header-top",
|
||||
props: {
|
||||
|
|
@ -45,10 +49,12 @@ export default {
|
|||
latitude: "",
|
||||
longitude: "",
|
||||
lastUpdated: "",
|
||||
watchId: null,
|
||||
timer: null,
|
||||
locationTimer: null,
|
||||
geolocation: null,
|
||||
showPermissionPrompt: false,
|
||||
retryCount: 0
|
||||
retryCount: 0,
|
||||
positionLayer: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -58,24 +64,29 @@ export default {
|
|||
console.log("组件挂载，启动定位");
|
||||
this.isAdmins = JSON.parse(localStorage.getItem("isAdmin"));
|
||||
this.updateTime();
|
||||
this.startTracking();
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
this.updateTime();
|
||||
}, 1000);
|
||||
this.$on("retry-tracking", this.startTracking);
|
||||
this.startTracking();
|
||||
},
|
||||
watch: {
|
||||
positionPoint: {
|
||||
handler(newVal) {
|
||||
if (newVal && this.latitude && this.longitude) {
|
||||
const newLocation = fromLonLat([this.longitude, this.latitude]);
|
||||
this.$message.success(this.longitude + "," + this.latitude);
|
||||
// this.$message.success(this.latitude + ", " + this.longitude);
|
||||
console.log("位置更新", newVal, this.latitude, this.longitude);
|
||||
if (newVal && this.latitude && this.longitude && window.olMap) {
|
||||
const newLocation = fromLonLat(
|
||||
[this.longitude, this.latitude],
|
||||
"EPSG:3857"
|
||||
);
|
||||
this.$message.success("定位成功");
|
||||
this.updateMapPosition(this.longitude, this.latitude);
|
||||
const zoomLevel = 13;
|
||||
window.olMap.getView().animate({
|
||||
center: newLocation,
|
||||
zoom: zoomLevel
|
||||
});
|
||||
this.startTracking();
|
||||
}
|
||||
this.$store.commit("SET_POSITIONPOINT", false);
|
||||
},
|
||||
|
|
@ -83,69 +94,62 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
updateMapPosition(lng, lat) {
|
||||
let center = fromLonLat([lng, lat]);
|
||||
var iconFeature = new Feature({
|
||||
geometry: new Point(center),
|
||||
name: "当前位置",
|
||||
population: 4000,
|
||||
rainfall: 500
|
||||
});
|
||||
var iconStyle = new Style({
|
||||
image: new Icon({
|
||||
anchor: [0.5, 46],
|
||||
scale: 0.4,
|
||||
anchorXUnits: "fraction",
|
||||
anchorYUnits: "pixels",
|
||||
src: require("@/assets/img/icon_dev.png")
|
||||
})
|
||||
});
|
||||
iconFeature.setStyle(iconStyle);
|
||||
var vectorSource = new VectorSource({
|
||||
features: [iconFeature]
|
||||
});
|
||||
this.positionLayer = new VectorLayer({
|
||||
source: vectorSource
|
||||
});
|
||||
|
||||
window.olMap.addLayer(this.positionLayer);
|
||||
},
|
||||
updateTime() {
|
||||
const now = new Date();
|
||||
this.currentTime = now.toLocaleTimeString();
|
||||
this.currentDate = now.toLocaleDateString();
|
||||
},
|
||||
startTracking() {
|
||||
console.log("启动定位");
|
||||
if (!navigator.geolocation) {
|
||||
this.$message.error("您的浏览器不支持地理位置功能");
|
||||
this.leftText = "不支持定位";
|
||||
this.rightText = "定位异常";
|
||||
if (!window.olMap) {
|
||||
console.error("OpenLayers 地图未传入，延迟重试");
|
||||
setTimeout(() => this.startTracking(), 1000);
|
||||
return;
|
||||
}
|
||||
this.watchId = navigator.geolocation.watchPosition(
|
||||
(position) => this.handleSuccess(position),
|
||||
(error) => this.handleError(error),
|
||||
{
|
||||
|
||||
// 清除旧的 locationTimer
|
||||
if (this.locationTimer) {
|
||||
clearInterval(this.locationTimer);
|
||||
}
|
||||
|
||||
// 初始化 Geolocation
|
||||
this.geolocation = new Geolocation({
|
||||
trackingOptions: {
|
||||
enableHighAccuracy: true,
|
||||
timeout: 30000,
|
||||
maximumAge: 10000
|
||||
}
|
||||
);
|
||||
},
|
||||
syncLocation: _.debounce(function (latitude, longitude) {
|
||||
console.log("触发上报:", {
|
||||
latitude,
|
||||
longitude,
|
||||
time: new Date().toLocaleString()
|
||||
projection: window.olMap.getView().getProjection()
|
||||
});
|
||||
let params = {
|
||||
lat: latitude,
|
||||
lon: longitude,
|
||||
userId: localStorage.getItem("userId")
|
||||
};
|
||||
HomeSyncLocation(params)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.leftText = "平台已连接";
|
||||
this.rightText = "定位正常";
|
||||
if (!latitude && res.data.fallbackLocation) {
|
||||
this.handleSuccess({
|
||||
coords: { latitude: this.latitude, longitude: this.longitude }
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.leftText = "平台连接失败";
|
||||
this.rightText = "定位异常";
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.leftText = "平台连接失败";
|
||||
this.rightText = "定位异常";
|
||||
});
|
||||
}, 1000),
|
||||
handleSuccess(position) {
|
||||
this.latitude = position.coords.latitude;
|
||||
this.longitude = position.coords.longitude;
|
||||
this.lastUpdated = new Date().toLocaleString();
|
||||
this.showPermissionPrompt = false;
|
||||
this.retryCount = 0;
|
||||
this.syncLocation(this.latitude, this.longitude);
|
||||
},
|
||||
handleError(error) {
|
||||
|
||||
// 监听定位错误
|
||||
this.geolocation.on("error", (error) => {
|
||||
let message = "";
|
||||
this.retryCount = this.retryCount || 0;
|
||||
switch (error.code) {
|
||||
|
|
@ -177,6 +181,54 @@ export default {
|
|||
}
|
||||
this.leftText = message;
|
||||
this.rightText = "定位异常";
|
||||
});
|
||||
|
||||
// 开启定位
|
||||
this.geolocation.setTracking(true);
|
||||
|
||||
// 每 2 秒传递一次经纬度
|
||||
this.locationTimer = setInterval(() => {
|
||||
const coordinates = this.geolocation.getPosition();
|
||||
if (coordinates) {
|
||||
this.handleSuccess(coordinates);
|
||||
}
|
||||
}, 2000);
|
||||
},
|
||||
handleSuccess(coordinates) {
|
||||
// 转换为 WGS84 坐标
|
||||
const wgs84 = transform(coordinates, "EPSG:3857", "EPSG:4326");
|
||||
this.longitude = wgs84[0];
|
||||
this.latitude = wgs84[1];
|
||||
this.lastUpdated = new Date().toLocaleString(); //EPSG:3857 转 EPSG:4326
|
||||
this.showPermissionPrompt = false;
|
||||
this.retryCount = 0;
|
||||
|
||||
// 传递经纬度到 API
|
||||
let params = {
|
||||
lat: this.latitude,
|
||||
lon: this.longitude,
|
||||
userId: localStorage.getItem("userId")
|
||||
};
|
||||
this.updateMapPosition(this.longitude, this.latitude);
|
||||
// console.log("触发上报:", {
|
||||
// latitude: this.latitude,
|
||||
// longitude: this.longitude,
|
||||
// time: this.lastUpdated
|
||||
// });
|
||||
HomeSyncLocation(params)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.leftText = "平台已连接";
|
||||
this.rightText = "定位正常";
|
||||
} else {
|
||||
this.leftText = "平台连接失败";
|
||||
this.rightText = "定位异常";
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.leftText = "平台连接失败";
|
||||
this.rightText = "定位异常";
|
||||
});
|
||||
},
|
||||
retryTracking() {
|
||||
this.showPermissionPrompt = false;
|
||||
|
|
@ -185,12 +237,15 @@ export default {
|
|||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.watchId) {
|
||||
navigator.geolocation.clearWatch(this.watchId);
|
||||
if (this.geolocation) {
|
||||
this.geolocation.setTracking(false);
|
||||
}
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
if (this.locationTimer) {
|
||||
clearInterval(this.locationTimer);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
? localhostPath
|
||||
: process.env.VUE_APP_API_URL;
|
||||
connection = new signalR.HubConnectionBuilder()
|
||||
.withUrl("ws://" + "114.66.57.139:5001" + "/websocket", {
|
||||
.withUrl(uploadUrl + "/websocket", {
|
||||
skipNegotiation: true,
|
||||
transport: signalR.HttpTransportType.WebSockets
|
||||
})
|
||||
|
|
|
|||
|
|
@ -448,20 +448,21 @@ export default {
|
|||
right: 40px;
|
||||
z-index: 1000;
|
||||
color: #fff;
|
||||
width: 29px;
|
||||
height: 174px;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
background-color: rgba(209, 242, 255, 0.9);
|
||||
padding: 19px 8px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.refresh {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
line-height: 60px;
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ module.exports = defineConfig({
|
|||
productionSourceMap: false,
|
||||
transpileDependencies: true,
|
||||
devServer: {
|
||||
host: "192.168.1.9",
|
||||
host: "192.168.79.70",
|
||||
port: 9997,
|
||||
open: true,
|
||||
proxy: {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue