From 9b1bea86818f6d32d2424accb475928edfcecbbc Mon Sep 17 00:00:00 2001
From: xuhongjie <1943105267@qq.com>
Date: Thu, 10 Apr 2025 14:25:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E6=97=8B=E8=BD=AC=E9=A3=9E?=
=?UTF-8?q?=E6=9C=BA=E6=A8=A1=E5=9E=8B=E7=81=AF=E5=85=89=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 4 +
package.json | 1 +
src/views/components/map/marsMap.vue | 6 +-
src/views/components/map/panelLeft.vue | 135 ++++++++++++-------------
src/views/map.vue | 2 +-
5 files changed, 76 insertions(+), 72 deletions(-)
diff --git a/index.html b/index.html
index 9d491ad..072b7cd 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="/favicon.ico" />
+
<!--引入cesium基础lib-->
<link
href="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Widgets/widgets.css"
@@ -31,10 +32,13 @@
src="https://registry.npmmirror.com/mars3d/latest/files/mars3d.js"
type="text/javascript"
></script>
+
<!-- <script src="http://www.jichuanglanhai.com/demo/map3d/turf.min.js" type="text/javascript"></script>
<link href="http://www.jichuanglanhai.com/demo/map3d/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="http://www.jichuanglanhai.com/demo/map3d/mars3d/mars3d.js" type="text/javascript"></script> -->
+
+ <!-- <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script> -->
<title>若依管理系统</title>
<!--[if lt IE 11
]><script>
diff --git a/package.json b/package.json
index 07aa9b7..a17ab68 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
"pinia": "2.1.7",
"splitpanes": "3.1.5",
"vue": "3.4.31",
+ "vue-3d-loader": "^2.2.4",
"vue-3d-model": "^2.0.0-alpha.4",
"vue-cropper": "1.1.1",
"vue-router": "4.4.0",
diff --git a/src/views/components/map/marsMap.vue b/src/views/components/map/marsMap.vue
index a6fd421..7b88f76 100644
--- a/src/views/components/map/marsMap.vue
+++ b/src/views/components/map/marsMap.vue
@@ -66,7 +66,7 @@ const params = reactive({
pitch: 0, //保当前俯仰角
roll: 0, //当前翻滚角
correction: 1,
- speed: 250,
+ speed: 260,
});
let currentTimestampInSeconds = ref(0);
@@ -172,7 +172,7 @@ const handleUavDataLast = () => {
//注意：清除默认给的固定线路，否则会出现手柄控制与固定线路冲突问题
uav.position = {
type: "time", // 时序动态坐标
- speed: 100,
+ speed: 130,
list: [[120.657967,31.048193,100] ],
}
@@ -315,7 +315,7 @@ const initUav = () => {
name: "无人机模型",
position: {
type: "time", // 时序动态坐标
- speed: 100,
+ speed: 130,
list: list,
},
clockLoop: true, //是否循环播放
diff --git a/src/views/components/map/panelLeft.vue b/src/views/components/map/panelLeft.vue
index 2b13dc8..6b63c21 100644
--- a/src/views/components/map/panelLeft.vue
+++ b/src/views/components/map/panelLeft.vue
@@ -2,25 +2,23 @@
<div class="panel-box panel-left">
<view-title height="50%" title="无人机信息">
<div class="uav-data">
- <div class="uav-name">云航低空研训基地
+ <div class="uav-name">
+ 云航低空研训基地
<div class="uav-state">待命</div>
</div>
<div class="uav-model">
<div class="uav-model3d">
- <model-collada
- @load="onLoad"
- src="src/assets/images/uav-model.dae"
- :rotation="rotation"
- :position="position"
- :height="100"
- :lights="lights"
+ <vue3dLoader
+ :width="200"
+ :height="200"
+ :showFps="false"
+ filePath="https://data.mars3d.cn/gltf/mars/wrj.glb"
:backgroundAlpha="0"
- :controls-options="{
- enableRotate: true, // 是否可旋转
- enableZoom: false, // 是否可缩放
- enablePan: false, // 是否可移动（鼠标右键可以移动模型）
- }"
- />
+ @load="onLoad()"
+ :lights="lights"
+ :cameraPosition="{ x: 1500, y:1000, z: 500}"
+ :rotation="rotation"
+ ></vue3dLoader>
</div>
<div class="model-bg"></div>
</div>
@@ -32,7 +30,7 @@
<div class="uav-value">
<div class="value-item">
<div class="value-image">
- <img src="/src/assets/images/uav-value-icon1.png" alt="">
+ <img src="/src/assets/images/uav-value-icon1.png" alt="" />
</div>
<div class="value-data">
<div class="data-name">站点编号</div>
@@ -41,7 +39,7 @@
</div>
<div class="value-item">
<div class="value-image">
- <img src="/src/assets/images/uav-value-icon2.png" alt="">
+ <img src="/src/assets/images/uav-value-icon2.png" alt="" />
</div>
<div class="value-data">
<div class="data-name">无人机编号</div>
@@ -50,7 +48,7 @@
</div>
<div class="value-item">
<div class="value-image">
- <img src="/src/assets/images/uav-value-icon3.png" alt="">
+ <img src="/src/assets/images/uav-value-icon3.png" alt="" />
</div>
<div class="value-data">
<div class="data-name">型号</div>
@@ -59,11 +57,11 @@
</div>
<div class="value-item">
<div class="value-image">
- <img src="/src/assets/images/uav-value-icon4.png" alt="">
+ <img src="/src/assets/images/uav-value-icon4.png" alt="" />
</div>
<div class="value-data">
<div class="data-name">无人机状态</div>
- <div class="data-number" style="color: #13E052;">在线</div>
+ <div class="data-number" style="color: #13e052">在线</div>
</div>
</div>
</div>
@@ -71,49 +69,61 @@
<view-title height="50%" title="无人机实时状态">
<!-- 内容区 -->
<div class="contain-grid">
- <div class="grid-item">
- <div class="grid-item-content">{{ uavStore.params.lat.toFixed(3) }}</div>
+ <div class="grid-item">
+ <div class="grid-item-content">
+ {{ uavStore.params.lat.toFixed(3) }}
+ </div>
<div class="grid-item-footer">
纬度 <span class="unit-name">(°)</span>
</div>
</div>
- <div class="grid-item">
- <div class="grid-item-content">{{uavStore.params.lng.toFixed(3)}}</div>
+ <div class="grid-item">
+ <div class="grid-item-content">
+ {{ uavStore.params.lng.toFixed(3) }}
+ </div>
<div class="grid-item-footer">
经度 <span class="unit-name">(°)</span>
</div>
</div>
- <div class="grid-item">
- <div class="grid-item-content">{{ uavStore.params.altitude.toFixed(2) }}</div>
+ <div class="grid-item">
+ <div class="grid-item-content">
+ {{ uavStore.params.altitude.toFixed(2) }}
+ </div>
<div class="grid-item-footer">
高度 <span class="unit-name">(m)</span>
</div>
</div>
- <div class="grid-item">
- <div class="grid-item-content">{{ uavStore.params.heading.toFixed(2) }}</div>
+ <div class="grid-item">
+ <div class="grid-item-content">
+ {{ uavStore.params.heading.toFixed(2) }}
+ </div>
<div class="grid-item-footer">
偏航角 <span class="unit-name">(°)</span>
</div>
</div>
- <div class="grid-item">
- <div class="grid-item-content">{{ uavStore.params.pitch.toFixed(2) }}</div>
+ <div class="grid-item">
+ <div class="grid-item-content">
+ {{ uavStore.params.pitch.toFixed(2) }}
+ </div>
<div class="grid-item-footer">
俯仰角 <span class="unit-name">(°)</span>
</div>
</div>
- <div class="grid-item">
- <div class="grid-item-content">{{ uavStore.params.roll.toFixed(2) }}</div>
+ <div class="grid-item">
+ <div class="grid-item-content">
+ {{ uavStore.params.roll.toFixed(2) }}
+ </div>
<div class="grid-item-footer">
滚转角 <span class="unit-name">(°)</span>
</div>
</div>
- <div class="grid-item">
+ <div class="grid-item">
<div class="grid-item-content">{{ uavStore.params.speed }}</div>
<div class="grid-item-footer">
速度 <span class="unit-name">km/h</span>
</div>
</div>
- <div class="grid-item">
+ <div class="grid-item">
<div class="grid-item-content">100</div>
<div class="grid-item-footer">
电池电量 <span class="unit-name">%</span>
@@ -126,12 +136,22 @@
<script setup>
import { ViewTitle } from "@/views/components/map";
-import { ModelCollada } from "vue-3d-model";
-import useUavStore from '@/store/modules/uav'
-
-
-const uavStore = useUavStore()
+import { vue3dLoader } from "vue-3d-loader";
+import useUavStore from "@/store/modules/uav";
+const uavStore = useUavStore();
+const lights = ref();
+lights.value = [
+ {
+ type: "AmbientLight",
+ color: "#fff",
+ },
+];
+const rotation = reactive({
+ x: 0,
+ y: 0,
+ z: 0,
+});
const onLoad = () => {
rotate();
@@ -139,34 +159,11 @@ const onLoad = () => {
function rotate() {
requestAnimationFrame(rotate);
- rotation.y += 0.01;
+ rotation.y -= 0.01;
}
-const rotation = reactive({
- x: 0.5,
- y: 0,
- z: 0,
-});
-const position = {
- x: 0,
- y: 0,
- z: 0,
-};
-const lights = [
- {
- type: "HemisphereLight",
- position: { x: 0, y: 15, z: 50 },
- skyColor: 0xffd700,
- groundColor: 0xffd700,
- intensity: 0.2,
- },
- {
- type: "DirectionalLight",
- position: { x: 0.2, y: 20, z: 1 },
- color: 0xffffff,
- intensity: 0.8,
- },
-];
+
+
</script>
<style lang="scss" scoped>
@@ -189,13 +186,13 @@ const lights = [
font-weight: 400;
background: url("../../../assets/images/introduce-cell-bg.png");
background-size: 100% 100%;
- .uav-state{
+ .uav-state {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -28px;
font-size: 12px;
- color: #43FFAD;
+ color: #43ffad;
width: 45px;
height: 19px;
line-height: 19px;
@@ -214,7 +211,9 @@ const lights = [
background-size: 100% 100%;
.uav-model3d {
position: absolute;
- top: -75px;
+ top: -110px;
+ left: 50%;
+ transform: translateX(-50%);
}
}
.model-btn {
@@ -256,7 +255,7 @@ const lights = [
height: 35px;
background: url("../../../assets/images/uav-value-bg.png");
background-size: 100% 100%;
- img{
+ img {
position: absolute;
top: -10px;
left: 50%;
diff --git a/src/views/map.vue b/src/views/map.vue
index aac066d..dac206d 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>