diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index e3ea6b4..34329a1 100644
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@@ -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) {
diff --git a/src/views/layout/components/main/register/flyData.vue b/src/views/layout/components/main/register/flyData.vue
index 756c6be..66e16a0 100644
--- a/src/views/layout/components/main/register/flyData.vue
+++ b/src/views/layout/components/main/register/flyData.vue
@@ -13,7 +13,7 @@
暂无数据
@@ -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: [