问题更改
This commit is contained in:
zengmingjie
parent
ff01490947
commit
5c9ab6cc4c
|
|
@ -1,3 +1,3 @@
|
|||
NODE_ENV = 'development'
|
||||
VUE_APP_API_URL = 'http://114.66.57.139:8092'
|
||||
VUE_APP_API_URL = 'http://114.66.57.139:8090'
|
||||
VUE_APP_MESSAGE_SDK_DEBUG = true
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="left-sidebar" :class="{ contracted: isContracted }">
|
||||
<div class="alarm-border warningAnimatBox" v-if="iswarning"></div>
|
||||
<div class="stats">
|
||||
<div class="stat-item" v-for="(item, index) in warningDay" :key="index">
|
||||
<div class="stat-name">{{ item.name }}</div>
|
||||
|
|
@ -125,7 +126,7 @@
|
|||
type="primary"
|
||||
@click.stop="handlewhiteList(drone)"
|
||||
>
|
||||
信任
|
||||
{{ drone.IsWhitelist ? "信任" : "取消信任" }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="btn-navigation">
|
||||
|
|
@ -210,7 +211,7 @@ import { mapUavFiex } from "../index.js";
|
|||
import Style from "ol/style/Style";
|
||||
import Stroke from "ol/style/Stroke";
|
||||
import { fromLonLat, toLonLat } from "ol/proj";
|
||||
import { whitListAdd } from "@/api/whitList.js";
|
||||
import { whitListAdd, whitListDelete } from "@/api/whitList.js";
|
||||
import QRCode from "qrcode";
|
||||
|
||||
export default {
|
||||
|
|
@ -252,7 +253,8 @@ export default {
|
|||
showAudioPrompt: false,
|
||||
startTime: "", // 初始化时间范围
|
||||
endTime: "",
|
||||
qrCodeUrl: ""
|
||||
qrCodeUrl: "",
|
||||
isAudioPlaying: false // 跟踪音频播放状态
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -290,7 +292,6 @@ export default {
|
|||
signaData: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
console.log(newVal, "newVal");
|
||||
// newVal = [
|
||||
// {
|
||||
// BatchId: "1936279216064696320",
|
||||
|
|
@ -370,42 +371,67 @@ export default {
|
|||
if (this.drones) {
|
||||
mapUavFiex(this.drones, window.olMap);
|
||||
}
|
||||
let alarm = this.drones.find((d) => d.alarmLevel === 0);
|
||||
const media = this.$refs.uavAudio;
|
||||
const savedVolume = localStorage.getItem("soundValue");
|
||||
let alarm = this.drones.find((d) => d.alarmLevel === 1);
|
||||
if (alarm) {
|
||||
this.iswarning = true;
|
||||
this.$nextTick(() => {
|
||||
if (media) {
|
||||
media.muted = true; // 初始静音
|
||||
media
|
||||
.play()
|
||||
.then(() => {
|
||||
console.log("播放成功，取消静音");
|
||||
if (savedVolume !== null) {
|
||||
media.volume = savedVolume / 100;
|
||||
} else {
|
||||
media.volume = 1;
|
||||
}
|
||||
if (this.isZoomedIn) {
|
||||
media.muted = false; // 播放成功后取消静音
|
||||
} else {
|
||||
media.muted = true; // 初始静音
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("播放失败:", error);
|
||||
this.showAudioPrompt = true; // 播放失败时显示提示框
|
||||
});
|
||||
const savedVolume = localStorage.getItem("soundValue");
|
||||
media.volume = savedVolume !== null ? savedVolume / 100 : 1;
|
||||
media.muted = this.isZoomedIn ? false : true;
|
||||
|
||||
// 如果音频未在播放，则开始播放
|
||||
if (!this.isAudioPlaying) {
|
||||
media
|
||||
.play()
|
||||
.then(() => {
|
||||
console.log("播放音频");
|
||||
this.isAudioPlaying = true;
|
||||
// 监听音频结束事件，循环播放
|
||||
media.onended = () => {
|
||||
if (this.iswarning) {
|
||||
media.play().catch((error) => {
|
||||
console.log("循环播放失败:", error);
|
||||
this.showAudioPrompt = true;
|
||||
});
|
||||
} else {
|
||||
this.isAudioPlaying = false;
|
||||
}
|
||||
};
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("播放失败:", error);
|
||||
this.showAudioPrompt = true;
|
||||
this.isAudioPlaying = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
} else if (!alarm && this.iswarning) {
|
||||
// 告警消失，停止音频
|
||||
this.iswarning = false;
|
||||
if (media) {
|
||||
media.pause(); // 无告警时停止播放
|
||||
media.currentTime = 0; // 重置到开始
|
||||
media.pause();
|
||||
media.currentTime = 0;
|
||||
this.isAudioPlaying = false;
|
||||
media.onended = null; // 移除结束事件监听
|
||||
this.showAudioPrompt = false;
|
||||
}
|
||||
}
|
||||
// 无数据时重置
|
||||
if (newVal.length === 0) {
|
||||
this.iswarning = false;
|
||||
this.showAudioPrompt = false;
|
||||
this.isAudioPlaying = false;
|
||||
if (media) {
|
||||
media.pause();
|
||||
media.currentTime = 0;
|
||||
media.onended = null;
|
||||
}
|
||||
vectorSource.clear();
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
|
|
@ -441,16 +467,16 @@ export default {
|
|||
"&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);
|
||||
// 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);
|
||||
|
|
@ -493,15 +519,33 @@ export default {
|
|||
company: " ",
|
||||
mark: " "
|
||||
};
|
||||
whitListAdd(params)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
console.log(res, "添加成功");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, "添加失败");
|
||||
});
|
||||
if (drone.IsWhitelist) {
|
||||
whitListAdd(params)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
console.log(res, "添加成功");
|
||||
this.$message.success("添加成功");
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
} else {
|
||||
whitListDelete({ id: drone.Id })
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success("移除成功");
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
console.log(err, "移除失败");
|
||||
});
|
||||
}
|
||||
},
|
||||
enableAudio() {
|
||||
this.iswarning = true;
|
||||
|
|
@ -697,7 +741,7 @@ export default {
|
|||
if (drone.drone_lon !== 0 && drone.drone_lat !== 0) {
|
||||
window.olMap.getView().animate({
|
||||
center: fromLonLat([drone.drone_lon, drone.drone_lat]),
|
||||
zoom: 13
|
||||
zoom: window.olMap.getView().getZoom()
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -726,21 +770,26 @@ export default {
|
|||
position: absolute;
|
||||
bottom: -100%;
|
||||
}
|
||||
.audio-prompt {
|
||||
.alarm-border {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
bottom: -100%;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid transparent;
|
||||
pointer-events: none; /* Prevent interaction with the border */
|
||||
z-index: 9999; /* Ensure it appears above other elements */
|
||||
&.warningAnimatBox {
|
||||
animation: greenanimated-shadow 2s infinite;
|
||||
}
|
||||
}
|
||||
@keyframes greenanimated-shadow {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 #e1f850 inset;
|
||||
}
|
||||
|
||||
85% {
|
||||
box-shadow: 0px 0px 100px 0px #e1f850 inset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -73,22 +73,28 @@ export default {
|
|||
watch: {
|
||||
positionPoint: {
|
||||
handler(newVal) {
|
||||
// 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
|
||||
});
|
||||
if (newVal) {
|
||||
// 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
|
||||
});
|
||||
} else {
|
||||
this.$message.error("定位失败,请稍后重试");
|
||||
}
|
||||
if (this.latitude === "" || this.longitude === "") {
|
||||
}
|
||||
this.$store.commit("SET_POSITIONPOINT", false);
|
||||
}
|
||||
this.$store.commit("SET_POSITIONPOINT", false);
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -439,7 +439,6 @@ export function mapUavFiex(options, map) {
|
|||
graphicLayerGJ.getSource().addFeature(track);
|
||||
graphicLayerGJ.setStyle(null);
|
||||
}
|
||||
console.log(graphicLayer, graphicLayerGJ, graphic, "graphic");
|
||||
|
||||
// 更新无人机属性和位置
|
||||
graphic.set("attr", item);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<div class="zoom-level" @click="soundAndMenu">
|
||||
<img :src="zoomLevelImage" alt="" />
|
||||
</div>
|
||||
<div class="zoom-control">刻度尺：{{ zoomControl }}</div>
|
||||
<div class="btn-container" v-if="closeBtnVisible">
|
||||
<el-button @click="handleClickClose()">返回</el-button>
|
||||
</div>
|
||||
|
|
@ -66,6 +67,7 @@ import { Vector as VectorLayer } from "ol/layer";
|
|||
import { Vector as VectorSource } from "ol/source";
|
||||
import { Style, Fill, Stroke, Circle } from "ol/style";
|
||||
import GeoJSON from "ol/format/GeoJSON";
|
||||
import LayerGroup from "ol/layer/Group";
|
||||
import AlertDialog from "../menuData/AlertDialog.vue";
|
||||
import { devPositionList } from "@/api/position.js";
|
||||
|
||||
|
|
@ -85,7 +87,9 @@ export default {
|
|||
value2: 0,
|
||||
currentBaseMap: "gaode",
|
||||
dialogQueryVisible: false,
|
||||
closeBtnVisible: false
|
||||
closeBtnVisible: false,
|
||||
zoomControl: 0,
|
||||
toggleMap: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -227,14 +231,13 @@ export default {
|
|||
},
|
||||
modelClick() {
|
||||
// 切换底图
|
||||
const newBaseMap = this.currentBaseMap === "gaode" ? "tianditu" : "gaode";
|
||||
this.map.getLayers().forEach((layer) => {
|
||||
const name = layer.get("name");
|
||||
if (name === "gaode" || name === "tianditu") {
|
||||
layer.setVisible(name === newBaseMap);
|
||||
window.olMap.getLayers().forEach((layer) => {
|
||||
if (layer.get("title") === "白色底图组") {
|
||||
layer.setVisible(this.toggleMap);
|
||||
} else if (layer.get("title") === "暗色底图组") {
|
||||
layer.setVisible(!this.toggleMap);
|
||||
}
|
||||
});
|
||||
this.currentBaseMap = newBaseMap;
|
||||
},
|
||||
soundAndMenu() {
|
||||
this.isZoomedIn = !this.isZoomedIn;
|
||||
|
|
@ -243,56 +246,42 @@ export default {
|
|||
initMap() {
|
||||
// 初始化 OpenLayers 地图
|
||||
this.map = new Map({
|
||||
target: this.$refs.olMap,
|
||||
target: "map", // 替换为 this.$refs.olMap 如果在 Vue 中
|
||||
layers: [
|
||||
new TileLayer({
|
||||
name: "gaode", // 图层名称
|
||||
visible: true,
|
||||
source: new XYZ({
|
||||
visible: true,
|
||||
url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8"
|
||||
})
|
||||
// 白色底图 + 默认注记
|
||||
new LayerGroup({
|
||||
title: "白色底图组",
|
||||
layers: [
|
||||
this.createTiandituLayer("vec", "天地图矢量底图"), // 白色底图
|
||||
this.createTiandituLayer("cia", "天地图默认注记") // 默认注记
|
||||
],
|
||||
visible: true // 默认显示白色底图
|
||||
}),
|
||||
new TileLayer({
|
||||
name: "tianditu", // 图层名称
|
||||
visible: false,
|
||||
source: new XYZ({
|
||||
url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=7",
|
||||
layer: "img",
|
||||
style: "default",
|
||||
matrixSet: "c",
|
||||
format: "tiles",
|
||||
tileLoadFunction: function (imageTile, src) {
|
||||
// 使用滤镜 将白色修改为深色
|
||||
const img = new Image();
|
||||
// img.crossOrigin = ''
|
||||
// 设置图片不从缓存取，从缓存取可能会出现跨域，导致加载失败
|
||||
img.setAttribute("crossOrigin", "anonymous");
|
||||
img.onload = function () {
|
||||
const canvas = document.createElement("canvas");
|
||||
const w = img.width;
|
||||
const h = img.height;
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const context = canvas.getContext("2d");
|
||||
context.filter =
|
||||
"grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)";
|
||||
context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
|
||||
imageTile.getImage().src = canvas.toDataURL("image/png");
|
||||
};
|
||||
img.src = src;
|
||||
}
|
||||
}),
|
||||
format: new GeoJSON()
|
||||
// 暗色底图 + 白色注记
|
||||
new LayerGroup({
|
||||
title: "暗色底图组",
|
||||
layers: [
|
||||
this.createTiandituLayer(
|
||||
"vec",
|
||||
"天地图暗色底图",
|
||||
"grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)"
|
||||
), // 暗色底图
|
||||
this.createTiandituLayer(
|
||||
"cia",
|
||||
"天地图白色注记",
|
||||
"grayscale(100%) brightness(150%) contrast(120%)"
|
||||
) // 白色注记
|
||||
],
|
||||
visible: false // 默认隐藏暗色底图
|
||||
})
|
||||
],
|
||||
view: new View({
|
||||
projection: "EPSG:3857",
|
||||
center: fromLonLat([117.337103, 39.040924]), // 经纬度转投影坐标
|
||||
zoom: 10,
|
||||
minZoom: 3,
|
||||
minZoom: 0,
|
||||
maxZoom: 18,
|
||||
constrainRotation: false // 允许旋转
|
||||
constrainRotation: false
|
||||
})
|
||||
});
|
||||
|
||||
|
|
@ -317,6 +306,35 @@ export default {
|
|||
// 获取当前缩放等级
|
||||
this.zoomLevel = Math.round(this.map.getView().getZoom());
|
||||
},
|
||||
createTiandituLayer(layerType, title, filter = null) {
|
||||
let tiandituKey = "a78289a00ac2e57e0e7abe1d8560d644";
|
||||
return new TileLayer({
|
||||
visible: true,
|
||||
name: title,
|
||||
source: new XYZ({
|
||||
url: `http://t{0-7}.tianditu.gov.cn/${layerType}_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=${layerType}&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
|
||||
tileLoadFunction: filter
|
||||
? (imageTile, src) => {
|
||||
const img = new Image();
|
||||
img.setAttribute("crossOrigin", "anonymous");
|
||||
img.onload = function () {
|
||||
const canvas = document.createElement("canvas");
|
||||
const w = img.width;
|
||||
const h = img.height;
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const context = canvas.getContext("2d");
|
||||
context.filter = filter;
|
||||
context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
|
||||
imageTile.getImage().src = canvas.toDataURL("image/png");
|
||||
};
|
||||
img.src = src;
|
||||
}
|
||||
: undefined
|
||||
}),
|
||||
title: title
|
||||
});
|
||||
},
|
||||
onMapLoad(map) {
|
||||
setTimeout(() => {
|
||||
this.initPositon();
|
||||
|
|
@ -333,6 +351,13 @@ export default {
|
|||
map.getView().setMinZoom(3); // 最小缩放等级
|
||||
map.getView().setMaxZoom(18); // 最大缩放等级
|
||||
}
|
||||
// 监听缩放级别变化
|
||||
const view = map.getView();
|
||||
this.zoomControl = view.getZoom();
|
||||
view.on("change:resolution", () => {
|
||||
this.zoomControl = Math.round(view.getZoom());
|
||||
console.log(this.zoomControl, "缩放级别已更改");
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
|
|
@ -437,6 +462,17 @@ export default {
|
|||
height: 48px;
|
||||
}
|
||||
}
|
||||
.zoom-control {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
bottom: 30px;
|
||||
z-index: 1000;
|
||||
color: #fff;
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
.btn-container {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue