Food/food
3
0
Fork 0
Code Issues 58 Pull Requests Actions Packages Projects Releases Wiki Activity

【类 型】：feat 参数控制 地图 子组件 显隐

Browse Source 
【原  因】：比如跟随飞机组件 在概况地图中时不用显示的
【过  程】：通过参数设置
【影  响】：
This commit is contained in:
tk 2024-08-08 14:40:30 +08:00
parent 76ea908a1c
commit ff61e2c45f
3 changed files with 96 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/MapBox.vue
View File

@ -133,6 +133,28 @@ export default {
]
}
},
props: {
enableFollow: { // 开启跟随组件
type: Boolean,
default: false
},
enableSwitch: { // 开启 地图选择
type: Boolean,
default: true
},
enableZoom: { // 开启 地图放大组件
type: Boolean,
default: true
},
enblueTranslate: { // 开启 地图移动旋转 组件
type: Boolean,
default: true
},
enblueScale: { // 开启 地图 距离比例 组件
type: Boolean,
default: false
}
},
computed: {
defaultLnglat () {
return this.$store.getters['app/getDefaultLngLat']
@ -228,28 +250,39 @@ export default {
})
/* 地图控件 */
// 移动旋转指南针
this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')
if (this.enblueTranslate) {
this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')
}
// 地图比例
// this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')
if (this.enblueScale) {
this.map.addControl(new mapboxgl.ScaleControl(), 'bottom-right')
}
// 全屏 并再之后 刷新地图
this.map.addControl(new CustomFullscreenControl(this.handleResize), 'top-right')
if (this.enableZoom) {
this.map.addControl(new CustomFullscreenControl(this.handleResize), 'top-right')
}
// 地图样式选择控件
// 自定义地图样式列表
const styleSwitcherControl = new MapboxStyleSwitcherControl(this.mapStyles, 'iconfont icon-duozhang f-s-20', this.currentStyleIndex)
this.map.addControl(styleSwitcherControl, 'top-right')
if (this.enableSwitch) {
const styleSwitcherControl = new MapboxStyleSwitcherControl(this.mapStyles, 'iconfont icon-duozhang f-s-20', this.currentStyleIndex)
this.map.addControl(styleSwitcherControl, 'top-right')
}
// 飞机跟随
this.map.addControl(new FollowControl({
defaultIconClass: 'iconfont icon-weidingwei f-s-20', // 默认图标
activeIconClass: 'iconfont icon-dingwei f-s-20 brandFontColor', // 激活时图标
onClick: (isActive) => {
this.isflow = isActive // 根据控件的状态更新 isflow
if (this.isflow) {
this.goto(this.planes[0].getLngLat()) // 点击按钮首先直接 跳转到当前飞机对象最后的经纬度
if (this.enableFollow) {
this.map.addControl(new FollowControl({
defaultIconClass: 'iconfont icon-weidingwei f-s-20', // 默认图标
activeIconClass: 'iconfont icon-dingwei f-s-20 brandFontColor', // 激活时图标
onClick: (isActive) => {
this.isflow = isActive // 根据控件的状态更新 isflow
if (this.isflow) {
this.goto(this.planes[0].getLngLat()) // 点击按钮首先直接 跳转到当前飞机对象最后的经纬度
}
}
}
}), 'top-right')
}), 'top-right')
}
},
/**
* @description: 清除地图上的航线

47
src/components/PlaneStatus.vue
View File

@ -13,8 +13,8 @@
</div>
<!-- 飞机模式 -->
<div class="flex">
<div v-if="planeMode" class="plane-mode p-l-5 p-r-5 mc mac">
<font class="plane-mode-text">{{ planeMode }}</font>
<div v-if="getPlaneMode" class="plane-mode p-l-5 p-r-5 mc mac">
<font class="plane-mode-text">{{ getPlaneMode }}</font>
</div>
<div class="tag flex mac mc iconfont icon-moshixuanze">
</div>
@ -37,7 +37,7 @@
</div>
<!-- 电池电流 -->
<div class="flex">
<div v-if="currentBattery " class="plane-mode p-l-5 p-r-5 mc mac">
<div v-if="currentBattery" class="plane-mode p-l-5 p-r-5 mc mac">
<font class="plane-mode-text">{{ currentBattery }}A</font>
</div>
<div class="tag flex mac mc iconfont icon-dianliu">
@ -45,16 +45,25 @@
</div>
<!-- 飞机高度 -->
<div class="flex">
<div v-if="positionAlt" class="plane-mode p-l-5 p-r-5 mc mac">
<font class="plane-mode-text">{{ positionAlt }}米</font>
</div>
<div class="tag flex mac mc iconfont icon-gaodu">
</div>
</div>
<!-- 飞机对地速度 -->
<div class="flex">
<div v-if="groundSpeed" class="plane-mode p-l-5 p-r-5 mc mac">
<font class="plane-mode-text">{{ groundSpeed }}米/秒</font>
</div>
<div class="tag flex mac mc iconfont icon-sudu">
</div>
</div>
<!-- 钩子状态 1px solid #ddd-->
<!-- 飞机载重 钩子状态 -->
<div class="flex">
<div v-if="loadweight" class="plane-mode p-l-5 p-r-5 mc mac">
<font class="plane-mode-text">{{hookstatus}} {{ loadweight }}克</font>
</div>
<div class="tag flex mac mc iconfont icon-mianxingdiaogou">
</div>
</div>
@ -100,7 +109,7 @@ export default {
return true
},
// 飞机模式
planeMode () {
getPlaneMode () {
if (this.plane && this.plane.planeState) {
return this.plane.planeState.getPlaneMode
}
@ -137,6 +146,34 @@ export default {
}
}
return null
},
// 飞机高度
positionAlt () {
if (this.plane && this.plane.planeState) {
return this.plane.planeState.positionAlt
}
return null
},
// 飞机对地速度
groundSpeed () {
if (this.plane && this.plane.planeState) {
return this.plane.planeState.groundSpeed
}
return null
},
// 钩子状态
hookstatus () {
if (this.plane && this.plane.planeState) {
return this.plane.planeState.hookstatus
}
return null
},
// 飞机载重
loadweight () {
if (this.plane && this.plane.planeState) {
return this.plane.planeState.loadweight
}
return null
}
},
watch: {

8
src/views/layout/components/main/planes/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="h-100">
<map-box ref="mapbox">
<map-box ref="mapbox" :enableFollow="true" :enblueScale="!widthLt480">
<template #content>
<BatteryStatus :plane="plane" />
<PlaneStatus :plane="plane" />
@ -54,6 +54,12 @@ export default {
*/
isCollapse () {
return this.$store.state.app.isCollapse
},
/**
* @description: 屏幕宽度是否小于480
*/
widthLt480 () {
return window.innerWidth < 480
}
},
methods: {