【类 型】：feat
【原 因】：完成 查看飞机 历史飞行轨迹 地图组件 显示功能 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
air
parent
e575d42358
commit
8b7a2161ba
@ -177,6 +177,7 @@ export default {
|
||||
this.init().then(() => {
|
||||
// 地图初始化之后
|
||||
this.map.on('load', () => {
|
||||
this.$emit('map-ready') // 外部组件回调 触发地图加载完成事件 传到外部组件调用 以确保执行时地图已经加载完成
|
||||
/* 更新样式，添加自定义 sprite */
|
||||
|
||||
// 星空背景 大气层
|
||||
@ -355,6 +356,26 @@ export default {
|
||||
}), 'top-left')
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 通用地图图层和数据源清除方法
|
||||
* @param {Array} layerIds - 要清除的图层ID数组
|
||||
* @param {Array} sourceIds - 要清除的数据源ID数组
|
||||
*/
|
||||
clearMapElements (layerIds = [], sourceIds = []) {
|
||||
// 先移除图层（必须先删图层，再删数据源）
|
||||
layerIds.forEach(id => {
|
||||
if (this.map.getLayer(id)) {
|
||||
this.map.removeLayer(id)
|
||||
}
|
||||
})
|
||||
|
||||
// 再移除数据源
|
||||
sourceIds.forEach(id => {
|
||||
if (this.map.getSource(id)) {
|
||||
this.map.removeSource(id)
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description: 清除地图上的航线
|
||||
*/
|
||||
@ -625,49 +646,6 @@ export default {
|
||||
this.guidedMarker = null // 清除当前标记
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 简单画线（飞机轨迹），忽略高度，仅绘制经纬度路径
|
||||
* @param {Array} coordinatesArray - 坐标数组，每项为 [lng, lat, alt]
|
||||
*/
|
||||
drawSimplePath (coordinatesArray) {
|
||||
const coords2D = coordinatesArray.map(coord => [coord[0], coord[1]])
|
||||
|
||||
const geojson = {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: coords2D
|
||||
}
|
||||
}
|
||||
|
||||
// 如果已有旧图层，先移除（防止报错）
|
||||
if (this.map.getLayer('path')) {
|
||||
this.map.removeLayer('path')
|
||||
}
|
||||
if (this.map.getSource('path')) {
|
||||
this.map.removeSource('path')
|
||||
}
|
||||
|
||||
// 添加 source 和 layer
|
||||
this.map.addSource('path', {
|
||||
type: 'geojson',
|
||||
data: geojson
|
||||
})
|
||||
|
||||
this.map.addLayer({
|
||||
id: 'path',
|
||||
type: 'line',
|
||||
source: 'path',
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round'
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'blue',
|
||||
'line-width': 3
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description: 创建飞机轨迹 ps:原理删除之前的轨迹 重新绘制
|
||||
* @param {arr} coordinatesArray 飞机经纬高度数组
|
||||
@ -772,9 +750,10 @@ export default {
|
||||
* @description: 镜头跳转
|
||||
* @param {obj} lonLat {lon:lon,lat:lat} 经纬度
|
||||
*/
|
||||
goto (lonLat) {
|
||||
goto (lonLat, zoom = 18) {
|
||||
this.map.flyTo({
|
||||
center: lonLat,
|
||||
zoom: zoom,
|
||||
speed: 2,
|
||||
curve: 1,
|
||||
easing (t) {
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
<div class="chart-area" v-if="flyDataList.length">
|
||||
<div v-if="boxShow" id="main" class="chart-container"></div>
|
||||
<map-box v-else ref="mapbox" />
|
||||
<map-box v-else ref="mapbox" @map-ready="onMapReady"/>
|
||||
</div>
|
||||
<div v-else class="no-data-tip">暂无数据</div>
|
||||
</div>
|
||||
@ -90,12 +90,14 @@ export default {
|
||||
const keyMap = {
|
||||
飞行时长: (item) => {
|
||||
if (!item.start_time || !item.end_time) return 0
|
||||
return (item.end_time - item.start_time) / 60
|
||||
return Math.round((item.end_time - item.start_time) / 60)
|
||||
},
|
||||
飞行距离: (item) => Number(item.distance || 0),
|
||||
消耗电量: (item) => Number(item.power_used || 0)
|
||||
}
|
||||
|
||||
if (this.radioClass === '飞行轨迹') return []// 不处理轨迹数据
|
||||
|
||||
this.flyDataList.forEach(item => {
|
||||
const planeName = item.plane_name
|
||||
const date = new Date(item.start_time * 1000)
|
||||
@ -164,16 +166,12 @@ export default {
|
||||
}
|
||||
// 多个飞机轨迹全部绘制
|
||||
if (!this.boxShow && newVal.length) {
|
||||
this.$nextTick(() => {
|
||||
this.drawAllPathsOnMap()
|
||||
})
|
||||
this.onMapReady()
|
||||
}
|
||||
},
|
||||
boxShow (newVal) {
|
||||
if (!newVal) { // boxShow 为 false，显示地图时重新绘制轨迹
|
||||
this.$nextTick(() => {
|
||||
this.drawAllPathsOnMap()
|
||||
})
|
||||
boxshow (val) {
|
||||
if (!val) {
|
||||
this.onMapReady()
|
||||
}
|
||||
},
|
||||
dateRange: {
|
||||
@ -183,7 +181,7 @@ export default {
|
||||
immediate: true
|
||||
},
|
||||
source (newVal) {
|
||||
if (newVal.length > 1) {
|
||||
if (Array.isArray(newVal) && newVal.length > 1) {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
@ -199,20 +197,42 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 地图组件回调地图加载完成后 执行
|
||||
onMapReady () {
|
||||
this.drawAllPathsOnMap()
|
||||
},
|
||||
// 地图轨迹绘制
|
||||
drawAllPathsOnMap () {
|
||||
if (!this.$refs.mapbox) return
|
||||
if (!this.flyDataList.length) return
|
||||
|
||||
// 清理旧轨迹（如果你的mapbox组件支持）
|
||||
this.$refs.mapbox.clearPaths && this.$refs.mapbox.clearPaths()
|
||||
// 清理旧轨迹
|
||||
this.$refs.mapbox.clearMapElements(['path'], ['path'])
|
||||
|
||||
// 遍历所有飞行数据，绘制轨迹
|
||||
this.flyDataList.forEach(item => {
|
||||
if (item.gps_path) {
|
||||
if (!item.gps_path) return
|
||||
try {
|
||||
const pathArray = JSON.parse(item.gps_path)
|
||||
this.$refs.mapbox.createPathWithArray(pathArray)
|
||||
if (Array.isArray(pathArray) && pathArray.length > 0) {
|
||||
this.$refs.mapbox.createPathWithArray(pathArray)
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('gps_path 解析失败', item.gps_path)
|
||||
}
|
||||
})
|
||||
|
||||
// 跳转到第一个轨迹的起点（经纬度）
|
||||
if (this.flyDataList.length > 0 && this.flyDataList[0].gps_path) {
|
||||
try {
|
||||
const firstPath = JSON.parse(this.flyDataList[0].gps_path)
|
||||
if (Array.isArray(firstPath) && firstPath.length > 0) {
|
||||
const [lon, lat] = firstPath[0]
|
||||
this.$refs.mapbox.goto({ lon, lat })
|
||||
}
|
||||
} catch (e) {
|
||||
// 解析失败不跳转
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取飞行数据
|
||||
async loadFlyData () {
|
||||
@ -260,7 +280,7 @@ export default {
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: {
|
||||
gridIndex: 0,
|
||||
name: this.radioClass === '飞行时长' ? '分钟' : this.radioClass === '飞行距离' ? '米' : 'mAh'
|
||||
name: this.radioClass === '飞行时长' ? '分钟' : this.radioClass === '飞行距离' ? '米' : '毫安'
|
||||
},
|
||||
grid: { top: '55%' },
|
||||
series: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user