suzhou-jichuang-lanhai
/
uav-flight-control
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实现固定航线切换至手柄控制

Browse Source
main
许宏杰 4 weeks ago
parent 8d4b2d416f
commit 36bbef1ca6
5 changed files with 114 additions and 187 deletions

197
src/views/components/map/marsMap.vue
Unescape View File

@ -5,7 +5,8 @@
<script setup> <script setup>
import marsMap from "@/components/marsMap"; import marsMap from "@/components/marsMap";
import PointJson from "./point.json"; import PointJson from "./point.json";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
let options = { let options = {
scene: { scene: {
center: { center: {
@ -59,36 +60,19 @@ let options = {
const params = reactive({ const params = reactive({
lat: 31.162232, lat: 31.162232,
lng: 120.734077, lng: 120.734077,
altitude: 3000, altitude: 100,
heading: 0, //当前朝向 heading: 0, //当前朝向
pitch: 0, //保当前俯仰角 pitch: 0, //保当前俯仰角
roll: 0, //当前翻滚角 roll: 0, //当前翻滚角
correction: 1, correction: 1,
speed: 800, speed: 500,
}); });
const EARTH_RADIUS = 6371000;
let isUav = true
const DIRECTION = {
UP: "w",
DOWN: "s",
LEFT: "a",
RIGHT: "d",
SPEED_UP: "q",
SPEED_DOWN: "e",
};
const keyboardMap = { let isGamepad = false;
[DIRECTION.UP]: false,
[DIRECTION.DOWN]: false,
[DIRECTION.LEFT]: false,
[DIRECTION.RIGHT]: false,
[DIRECTION.SPEED_UP]: false,
[DIRECTION.SPEED_DOWN]: false,
};
let map = null; let map = null;
let list = []; let list = [];
let uav = null let uav = null;
const mapLayer = {}; const mapLayer = {};
const mapLoad = (mapInstance) => { const mapLoad = (mapInstance) => {
map = mapInstance; map = mapInstance;
@ -97,64 +81,101 @@ const mapLoad = (mapInstance) => {
allowDrillPick: true, // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断 allowDrillPick: true, // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
}); });
map.addLayer(mapLayer.markerLayer); map.addLayer(mapLayer.markerLayer);
//创建无人机固定巡航 //创建无人机图层
// initUav() mapLayer.uav = new mars3d.layer.GraphicLayer()
// // 绘制停机场矩形 map.addLayer(mapLayer.uav);
// initRectangle();
// initMarker(); boostrapUav();
boostrapUav()
}; };
const boostrapUav = () => { onMounted(()=>{
initUav() onAddGamepadboardListener();
onAddKeyboardListener() })
const renderer = () => {
onAdjustParams(); /**
onAdjustAttitude(); * 监听游戏手柄
requestAnimationFrame(renderer); */
}; const onAddGamepadboardListener = () => {
renderer(); window.addEventListener("gamepadconnected", function (e) {
} var gp = navigator.getGamepads()[e.gamepad.index];
proxy.$modal.msgSuccess("手柄控制已启动");
// 获取无人机最后的信息
const uavItem = mapLayer.uav.getGraphicById('uav1');
const {heading,pitch,roll,position } = uavItem
const cartographic = mars3d.LngLatPoint.fromCartesian(position)
params.lat =cartographic._lat
params.lng=cartographic._lng
params.heading=heading
params.pitch=pitch
params.roll=roll
// 开始手柄操作
const renderer = () => {
startgamepad();
onAdjustAttitude();
requestAnimationFrame(renderer);
};
renderer();
//开启按键监听
const onAddKeyboardListener = () => {
document.addEventListener("keydown", (e) => {
if (Object.keys(keyboardMap).includes(e.key)) {
keyboardMap[e.key] = true;
}
}); });
document.addEventListener("keyup", (e) => { // 监听游戏手柄拔出
if (Object.keys(keyboardMap).includes(e.key)) { window.addEventListener("gamepaddisconnected", function (e) {
keyboardMap[e.key] = false; clearInterval(interval);
}
}); });
}; };
//开启飞行参数调整 const boostrapUav = () => {
const onAdjustParams = () => { // // 绘制停机场矩形
if (keyboardMap[DIRECTION.SPEED_UP]) { // initRectangle();
params.speed += 100; // //渲染所有图标点
// initMarker();
//渲染无人机
initUav();
};
const startgamepad = () => {
var gamepad = navigator.getGamepads()[0];
if (gamepad) {
//手柄方向按键
pressKey(gamepad.buttons);
// 手柄方向遥感
rocker(gamepad.axes);
} }
if (keyboardMap[DIRECTION.SPEED_DOWN]) { };
if (params.speed >= 500) { // 手柄左方向遥感
params.speed -= 100; const rocker = (axes) => {
const deadZone = 0.5;
const x = axes[0];
const y = axes[1];
// //机体左转
if (x < -deadZone) {
//机体左转
params.heading -= 0.115;
if (params.roll > -10) {
params.roll -= 0.115;
}
} else if (x > deadZone) {
//机体右转
params.heading += 0.115;
if (params.roll < 10) {
params.roll += 0.115;
} }
} }
//机体爬升 // 检测垂直方向机体爬升
if (keyboardMap[DIRECTION.UP] && params.pitch <= 0.3) { if (y < -deadZone && params.pitch <= 0.3) {
params.pitch += 0.005; params.pitch += 0.015;
if (params.pitch > 0) { if (params.pitch > 0) {
const { speed, pitch } = params; const { speed, pitch } = params;
const temp = (params.speed / 60 / 60 / 60) * 110; const temp = (params.speed / 60 / 60 / 60) * 110;
//1经纬度约等于110km //1经纬度约等于110km
params.altitude += temp * Math.sin(pitch); params.altitude += temp * Math.sin(pitch);
} }
} } else if (y > deadZone && params.pitch >= -0.3) {
//机体俯冲 //机体俯冲
if (keyboardMap[DIRECTION.DOWN] && params.pitch >= -0.3) { params.pitch -= 0.016;
params.pitch -= 0.006;
if (params.pitch < 0) { if (params.pitch < 0) {
const { speed, pitch } = params; const { speed, pitch } = params;
//1经纬度约等于110km //1经纬度约等于110km
@ -162,21 +183,24 @@ const onAdjustParams = () => {
params.altitude += temp * Math.sin(pitch); params.altitude += temp * Math.sin(pitch);
} }
} }
//机体左转 reset();
if (keyboardMap[DIRECTION.LEFT]) { };
params.heading -= 0.115; //左侧方向按键上下键
if (params.roll > -10) { const pressKey = (buttons) => {
params.roll -= 0.115; // 加速
} if (buttons[12] && buttons[12].pressed) {
params.speed += 100;
} }
//机体右转 // 减速
if (keyboardMap[DIRECTION.RIGHT]) { if (buttons[13] && buttons[13].pressed) {
params.heading += 0.115; if (params.speed >= 500) {
if (params.roll < 10) { params.speed -= 100;
params.roll += 0.115;
} }
} }
reset()
};
const reset = () => {
const { heading, pitch, roll } = params; const { heading, pitch, roll } = params;
const { abs, cos } = Math; const { abs, cos } = Math;
params.correction = abs(cos(heading) * cos(pitch)); params.correction = abs(cos(heading) * cos(pitch));
@ -200,26 +224,24 @@ const onAdjustAttitude = () => {
const { lng, lat, altitude, heading, pitch, roll } = params; const { lng, lat, altitude, heading, pitch, roll } = params;
params.altitude += temp * Math.sin(pitch) * 110 * 1000 * 10; params.altitude += temp * Math.sin(pitch) * 110 * 1000 * 10;
const position = Cesium.Cartesian3.fromDegrees(lng, lat, altitude); const position = Cesium.Cartesian3.fromDegrees(lng, lat, altitude);
uav.model.setStyle({ uav.model.setStyle({
heading, heading,
pitch, pitch,
roll roll,
}); });
uav.addTimePosition(position); uav.addTimePosition(position);
}; };
const initUav = () => { const initUav = () => {
if (list.length == 0) { if (list.length == 0 && !isGamepad ) {
PointJson.map((item) => { PointJson.map((item) => {
list.push(item.wz.split(",").map(Number)); const position = item.wz.split(",").map(Number)
position[2] = 100
list.push(position);
}); });
} }
uav = new mars3d.graphic.Route({
uav = new mars3d.graphic.Route({ id: "uav1",
id: "uav",
name: "无人机模型", name: "无人机模型",
position: { position: {
type: "time", // 时序动态坐标 type: "time", // 时序动态坐标
@ -232,14 +254,13 @@ const initUav = () => {
minimumPixelSize: 0.1, minimumPixelSize: 0.1,
runAnimations: true, runAnimations: true,
// mergeOrientation: true, // mergeOrientation: true,
}, },
camera: { camera: {
type: "gs", type: "gs",
}, },
}); });
mapLayer.markerLayer.addGraphic(uav); mapLayer.uav.addGraphic(uav);
}; };
const initRectangle = () => { const initRectangle = () => {

94
src/views/components/map/panelLeft copy.vue
Unescape View File

@ -1,94 +0,0 @@
<template>
<div class="panel-box panel-left">
<view-title height="50%" title="无人机信息">
<!-- <model-collada
:backgroundAlpha="0"
:rotation="{
x: - Math.PI / 2,
y: 0,
z: 0,
}"
src="../../../assets/images/uav-model.dae"
/> -->
</view-title>
<view-title height="50%" title="无人机实时状态">
<!-- 内容区 -->
<div class="contain-grid">
<div v-for="item in gridItems" :key="item.id" class="grid-item">
<div class="grid-item-content">{{ item.content }}</div>
<div class="grid-item-footer">{{ item.footer }}</div>
</div>
</div>
</view-title>
<!-- 底部 -->
<div class="contain-foot">
<div class="itemone">
<div><span>经度:</span>: <span>31</span></div>
</div>
<div class="itemone">
<div><span>纬度:</span> <span>31</span></div>
</div>
<div class="itemtwo">
<div><span>经度</span>: <span>31</span></div>
</div>
</div>
</div>
</template>
<script setup>
import { ViewTitle } from "@/views/components/map";
// import { ModelCollada } from 'vue-3d-model';
// 定义数据
const gridItems = [
{ id: 1, content: '-20', footer: '经度(°)' },
{ id: 2, content: '20', footer: '纬度(°)' },
{ id: 3, content: '20', footer: '高度(m)' },
{ id: 4, content: '20', footer: '偏航角(°)' },
{ id: 5, content: '20', footer: '水平速度(°)' },
{ id: 6, content: '20', footer: '垂直速度(m/s)' },
{ id: 7, content: '20', footer: '电量(%)' },
{ id: 8, content: '20', footer: '电池温度(°c)' },
];
</script>
<style scoped>
.panel-left {
display: flex;
flex-direction: column;
}
.contain-grid {
height: 100%;
overflow: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
/* background-color: #fff; */
border:1px solid #ccc;
}
.contain-foot{
padding: .3rem 1rem;
position: absolute;
width: 79%;
margin-left: -4.4%;
background-color: #05192A;
bottom: 2.4%;
display: flex;
justify-content: space-between;
}
.itemone{
display: flex;
}
.itemone span:first-child{
color:#BCDEFC
}
</style>

4
src/views/components/map/panelLeft.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<div class="panel-box panel-left"> <div class="panel-box panel-left">
<view-title height="50%" title="无人机信息"> <view-title height="50%" title="无人机信息">
<model-collada <!-- <model-collada
@load="onLoad" @load="onLoad"
src="src/assets/images/uav-model.dae" src="src/assets/images/uav-model.dae"
:rotation="rotation" :rotation="rotation"
@ -14,7 +14,7 @@
enableZoom: false, // 是否可缩放 enableZoom: false, // 是否可缩放
enablePan: false // 是否可移动（鼠标右键可以移动模型） enablePan: false // 是否可移动（鼠标右键可以移动模型）
}" }"
/> /> -->
</view-title> </view-title>
<view-title height="50%" title="无人机实时状态"> <view-title height="50%" title="无人机实时状态">
<!-- 内容区 --> <!-- 内容区 -->

2
src/views/map-v1.vue
Unescape View File

@ -151,7 +151,7 @@ const startgamepad = () => {
var gamepad = navigator.getGamepads()[0] var gamepad = navigator.getGamepads()[0]
if (gamepad) { if (gamepad) {
//手柄方向按键 //手柄方向按键
// pressKey(gamepad!.buttons) pressKey(gamepad.buttons)
// 手柄方向遥感 // 手柄方向遥感
rocker(gamepad.axes) rocker(gamepad.axes)
} }

2
src/views/map.vue
Unescape View File

@ -2,7 +2,7 @@
<div> <div>
<map-container> <map-container>
<template #map> <template #map>
<!-- <mars-map></mars-map> --> <mars-map></mars-map>
</template> </template>
<template #left> <template #left>
<panel-left></panel-left> <panel-left></panel-left>

Write Preview
Loading…
Cancel
Save