diff --git a/src/views/components/map/marsMap.vue b/src/views/components/map/marsMap.vue index f914424..deffc0a 100644 --- a/src/views/components/map/marsMap.vue +++ b/src/views/components/map/marsMap.vue @@ -5,7 +5,8 @@ <script setup> import marsMap from "@/components/marsMap"; import PointJson from "./point.json"; - +import { onMounted } from "vue"; +const { proxy } = getCurrentInstance(); let options = { scene: { center: { @@ -59,36 +60,19 @@ let options = { const params = reactive({ lat: 31.162232, lng: 120.734077, - altitude: 3000, + altitude: 100, heading: 0, //当前朝向 pitch: 0, //保当前俯仰角 roll: 0, //当前翻滚角 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 = { - [DIRECTION.UP]: false, - [DIRECTION.DOWN]: false, - [DIRECTION.LEFT]: false, - [DIRECTION.RIGHT]: false, - [DIRECTION.SPEED_UP]: false, - [DIRECTION.SPEED_DOWN]: false, -}; +let isGamepad = false; + let map = null; let list = []; -let uav = null +let uav = null; const mapLayer = {}; const mapLoad = (mapInstance) => { map = mapInstance; @@ -97,64 +81,101 @@ const mapLoad = (mapInstance) => { allowDrillPick: true, // 如果存在坐标完全相同的图标点,可以打开该属性,click事件通过graphics判断 }); map.addLayer(mapLayer.markerLayer); - //创建无人机固定巡航 - // initUav() - // // 绘制停机场矩形 - // initRectangle(); - // initMarker(); + //创建无人机图层 + mapLayer.uav = new mars3d.layer.GraphicLayer() + map.addLayer(mapLayer.uav); + boostrapUav(); - boostrapUav() + }; -const boostrapUav = () => { - initUav() - onAddKeyboardListener() - const renderer = () => { - onAdjustParams(); - onAdjustAttitude(); - requestAnimationFrame(renderer); - }; - renderer(); -} +onMounted(()=>{ + onAddGamepadboardListener(); +}) -//开启按键监听 -const onAddKeyboardListener = () => { - document.addEventListener("keydown", (e) => { - if (Object.keys(keyboardMap).includes(e.key)) { - keyboardMap[e.key] = true; - } +/** + * 监听游戏手柄 + */ +const onAddGamepadboardListener = () => { + 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(); + + }); - document.addEventListener("keyup", (e) => { - if (Object.keys(keyboardMap).includes(e.key)) { - keyboardMap[e.key] = false; - } + // 监听游戏手柄拔出 + window.addEventListener("gamepaddisconnected", function (e) { + clearInterval(interval); }); }; -//开启飞行参数调整 -const onAdjustParams = () => { - if (keyboardMap[DIRECTION.SPEED_UP]) { - params.speed += 100; +const boostrapUav = () => { + // // 绘制停机场矩形 + // initRectangle(); + // //渲染所有图标点 + // 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) { - params.pitch += 0.005; + // 检测垂直方向机体爬升 + if (y < -deadZone && params.pitch <= 0.3) { + params.pitch += 0.015; if (params.pitch > 0) { const { speed, pitch } = params; const temp = (params.speed / 60 / 60 / 60) * 110; //1经纬度约等于110km params.altitude += temp * Math.sin(pitch); } - } - //机体俯冲 - if (keyboardMap[DIRECTION.DOWN] && params.pitch >= -0.3) { - params.pitch -= 0.006; + } else if (y > deadZone && params.pitch >= -0.3) { + //机体俯冲 + params.pitch -= 0.016; if (params.pitch < 0) { const { speed, pitch } = params; //1经纬度约等于110km @@ -162,21 +183,24 @@ const onAdjustParams = () => { params.altitude += temp * Math.sin(pitch); } } - //机体左转 - if (keyboardMap[DIRECTION.LEFT]) { - params.heading -= 0.115; - if (params.roll > -10) { - params.roll -= 0.115; - } + reset(); +}; +//左侧方向按键上下键 +const pressKey = (buttons) => { + // 加速 + if (buttons[12] && buttons[12].pressed) { + params.speed += 100; } - //机体右转 - if (keyboardMap[DIRECTION.RIGHT]) { - params.heading += 0.115; - if (params.roll < 10) { - params.roll += 0.115; + // 减速 + if (buttons[13] && buttons[13].pressed) { + if (params.speed >= 500) { + params.speed -= 100; } - } + reset() +}; + +const reset = () => { const { heading, pitch, roll } = params; const { abs, cos } = Math; params.correction = abs(cos(heading) * cos(pitch)); @@ -200,26 +224,24 @@ const onAdjustAttitude = () => { const { lng, lat, altitude, heading, pitch, roll } = params; params.altitude += temp * Math.sin(pitch) * 110 * 1000 * 10; const position = Cesium.Cartesian3.fromDegrees(lng, lat, altitude); - uav.model.setStyle({ + uav.model.setStyle({ heading, - pitch, - roll + pitch, + roll, }); uav.addTimePosition(position); - - }; - const initUav = () => { - if (list.length == 0) { + if (list.length == 0 && !isGamepad ) { 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({ - id: "uav", + uav = new mars3d.graphic.Route({ + id: "uav1", name: "无人机模型", position: { type: "time", // 时序动态坐标 @@ -232,14 +254,13 @@ const initUav = () => { minimumPixelSize: 0.1, runAnimations: true, // mergeOrientation: true, - }, - + camera: { type: "gs", }, }); - mapLayer.markerLayer.addGraphic(uav); + mapLayer.uav.addGraphic(uav); }; const initRectangle = () => { diff --git a/src/views/components/map/panelLeft copy.vue b/src/views/components/map/panelLeft copy.vue deleted file mode 100644 index fc5fb54..0000000 --- a/src/views/components/map/panelLeft copy.vue +++ /dev/null @@ -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> \ No newline at end of file diff --git a/src/views/components/map/panelLeft.vue b/src/views/components/map/panelLeft.vue index 74603f6..6618989 100644 --- a/src/views/components/map/panelLeft.vue +++ b/src/views/components/map/panelLeft.vue @@ -1,7 +1,7 @@ <template> <div class="panel-box panel-left"> <view-title height="50%" title="无人机信息"> - <model-collada + <!-- <model-collada @load="onLoad" src="src/assets/images/uav-model.dae" :rotation="rotation" @@ -14,7 +14,7 @@ enableZoom: false, // 是否可缩放 enablePan: false // 是否可移动(鼠标右键可以移动模型) }" - /> + /> --> </view-title> <view-title height="50%" title="无人机实时状态"> <!-- 内容区 --> diff --git a/src/views/map-v1.vue b/src/views/map-v1.vue index 6c21829..2188d6c 100644 --- a/src/views/map-v1.vue +++ b/src/views/map-v1.vue @@ -151,7 +151,7 @@ const startgamepad = () => { var gamepad = navigator.getGamepads()[0] if (gamepad) { //手柄方向按键 - // pressKey(gamepad!.buttons) + pressKey(gamepad.buttons) // 手柄方向遥感 rocker(gamepad.axes) } diff --git a/src/views/map.vue b/src/views/map.vue index dac206d..aac066d 100644 --- a/src/views/map.vue +++ b/src/views/map.vue @@ -2,7 +2,7 @@ <div> <map-container> <template #map> - <!-- <mars-map></mars-map> --> + <mars-map></mars-map> </template> <template #left> <panel-left></panel-left>